@messaia/cdk 21.0.0-rc.9 → 21.1.0-rc.1

package/fesm2022/messaia-cdk.mjs

@@ -3,7 +3,7 @@ import { Location, getLocaleNumberSymbol, NumberSymbol, CommonModule, DecimalPip
 import * as i1$6 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, forwardRef, LOCALE_ID, NgModule, Pipe, HostListener, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, SimpleChange, Self, Attribute, SecurityContext } from '@angular/core';
+import { Injectable, Component, Directive, ContentChildren, Optional, SkipSelf, NgZone, InjectionToken, Inject, EventEmitter, inject, ElementRef, ViewChildren, Output, Input, forwardRef, LOCALE_ID, NgModule, Pipe, HostListener, ViewChild, ChangeDetectorRef, HostAttributeToken, HostBinding, ContentChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, Self, SimpleChange, Attribute, SecurityContext } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogModule, MatDialogConfig, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i6$3 from '@angular/material/expansion';
@@ -80,6 +80,8 @@ import * as i3$4 from '@angular/material/sidenav';
 import { MatSidenavModule, MatSidenav } from '@angular/material/sidenav';
 import * as i4$3 from '@angular/material/toolbar';
 import { MatToolbarModule, MatToolbar } from '@angular/material/toolbar';
+import * as i8$1 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
 import * as i1$7 from 'angular-auth-oidc-client';
 import * as i2$7 from '@angular/cdk/scrolling';
 
@@ -166,10 +168,10 @@ class AppSetting {
      * @type {string}
      */
     authScope;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppSetting, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppSetting, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSetting, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSetting, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppSetting, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSetting, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -209,8 +211,8 @@ class VdAlertDialogComponent {
     close() {
         this._dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdAlertDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdAlertDialogComponent, isStandalone: true, selector: "vd-alert-dialog", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdAlertDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdAlertDialogComponent, isStandalone: true, selector: "vd-alert-dialog", ngImport: i0, template: `
 		@if (title) {
 		  <h1 mat-dialog-title>{{title}}</h1>
 		}
@@ -219,7 +221,7 @@ class VdAlertDialogComponent {
 		  <button mat-button color="accent" (click)="close()">{{closeButton}}</button>
 		</mat-dialog-actions>`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdAlertDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdAlertDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'vd-alert-dialog',
@@ -283,10 +285,10 @@ class VdConfirmDialogComponent {
     accept() {
         this.dialogRef.close(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdConfirmDialogComponent, isStandalone: true, selector: "vd-confirm-dialog", ngImport: i0, template: "@if (title) {\r\n  <h2 mat-dialog-title class=\"push-top-sm\" layout=\"row\" layout-align=\"start center\" flex>\r\n    <mat-icon fontSet=\"material-symbols-outlined\" class=\"push-right-sm tc-blue-400\">help</mat-icon>\r\n    <span>{{title}}</span>\r\n  </h2>\r\n}\r\n<mat-dialog-content class=\"mat-subhead\" [innerHtml]=\"message\"></mat-dialog-content>\r\n<mat-dialog-actions align=\"end\">\r\n  <button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n  <button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" (click)=\"accept()\">{{acceptButton}}</button>\r\n</mat-dialog-actions>", dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdConfirmDialogComponent, isStandalone: true, selector: "vd-confirm-dialog", ngImport: i0, template: "@if (title) {\r\n  <h2 mat-dialog-title class=\"push-top-sm\" layout=\"row\" layout-align=\"start center\" flex>\r\n    <mat-icon fontSet=\"material-symbols-outlined\" class=\"push-right-sm tc-blue-400\">help</mat-icon>\r\n    <span>{{title}}</span>\r\n  </h2>\r\n}\r\n<mat-dialog-content class=\"mat-subhead\" [innerHtml]=\"message\"></mat-dialog-content>\r\n<mat-dialog-actions align=\"end\">\r\n  <button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n  <button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" (click)=\"accept()\">{{acceptButton}}</button>\r\n</mat-dialog-actions>", dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-confirm-dialog', imports: [
                         MatIcon,
@@ -296,30 +298,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         }], ctorParameters: () => [{ type: i1.MatDialogRef }] });
 
 class VdDialogTitleDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdDialogTitleDirective, isStandalone: true, selector: "vd-dialog-title", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogTitleDirective, isStandalone: true, selector: "vd-dialog-title", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'vd-dialog-title'
                 }]
         }] });
 class VdDialogContentDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdDialogContentDirective, isStandalone: true, selector: "vd-dialog-content", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogContentDirective, isStandalone: true, selector: "vd-dialog-content", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'vd-dialog-content'
                 }]
         }] });
 class VdDialogActionsDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdDialogActionsDirective, isStandalone: true, selector: "vd-dialog-actions", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdDialogActionsDirective, isStandalone: true, selector: "vd-dialog-actions", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'vd-dialog-actions'
@@ -340,10 +342,10 @@ class VdDialogComponent {
             throw new Error('Duplicate vd-dialog-actions component at in vd-dialog.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdDialogComponent, isStandalone: true, selector: "vd-dialog", queries: [{ propertyName: "dialogTitle", predicate: VdDialogTitleDirective }, { propertyName: "dialogContent", predicate: VdDialogContentDirective }, { propertyName: "dialogActions", predicate: VdDialogActionsDirective }], ngImport: i0, template: "<div class=\"vd-dialog-wrapper\">\r\n  @if ((dialogTitle?.length??0) > 0) {\r\n    <h3 class=\"vd-dialog-title md-title\">\r\n      <ng-content select=\"vd-dialog-title\"></ng-content>\r\n    </h3>\r\n  }\r\n  @if ((dialogContent?.length??0) > 0) {\r\n    <div class=\"vd-dialog-content\">\r\n      <ng-content select=\"vd-dialog-content\"></ng-content>\r\n    </div>\r\n  }\r\n  @if ((dialogActions?.length??0) > 0) {\r\n    <div class=\"vd-dialog-actions\" layout=\"row\">\r\n      <span flex></span>\r\n      <ng-content select=\"vd-dialog-actions\"></ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}:host .vd-dialog-actions ::ng-deep button{padding-left:8px;padding-right:8px;min-width:64px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDialogComponent, isStandalone: true, selector: "vd-dialog", queries: [{ propertyName: "dialogTitle", predicate: VdDialogTitleDirective }, { propertyName: "dialogContent", predicate: VdDialogContentDirective }, { propertyName: "dialogActions", predicate: VdDialogActionsDirective }], ngImport: i0, template: "<div class=\"vd-dialog-wrapper\">\r\n  @if ((dialogTitle?.length??0) > 0) {\r\n    <h3 class=\"vd-dialog-title md-title\">\r\n      <ng-content select=\"vd-dialog-title\"></ng-content>\r\n    </h3>\r\n  }\r\n  @if ((dialogContent?.length??0) > 0) {\r\n    <div class=\"vd-dialog-content\">\r\n      <ng-content select=\"vd-dialog-content\"></ng-content>\r\n    </div>\r\n  }\r\n  @if ((dialogActions?.length??0) > 0) {\r\n    <div class=\"vd-dialog-actions\" layout=\"row\">\r\n      <span flex></span>\r\n      <ng-content select=\"vd-dialog-actions\"></ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}:host .vd-dialog-actions ::ng-deep button{padding-left:8px;padding-right:8px;min-width:64px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dialog', imports: [], template: "<div class=\"vd-dialog-wrapper\">\r\n  @if ((dialogTitle?.length??0) > 0) {\r\n    <h3 class=\"vd-dialog-title md-title\">\r\n      <ng-content select=\"vd-dialog-title\"></ng-content>\r\n    </h3>\r\n  }\r\n  @if ((dialogContent?.length??0) > 0) {\r\n    <div class=\"vd-dialog-content\">\r\n      <ng-content select=\"vd-dialog-content\"></ng-content>\r\n    </div>\r\n  }\r\n  @if ((dialogActions?.length??0) > 0) {\r\n    <div class=\"vd-dialog-actions\" layout=\"row\">\r\n      <span flex></span>\r\n      <ng-content select=\"vd-dialog-actions\"></ng-content>\r\n    </div>\r\n  }\r\n</div>", styles: [".vd-dialog-title{margin-top:0;margin-bottom:20px}.vd-dialog-content{margin-bottom:16px}.vd-dialog-actions{position:relative;top:16px;left:16px}::ng-deep [dir=rtl] .vd-dialog-actions{right:16px;left:auto}:host{display:block}:host .vd-dialog-actions ::ng-deep button{text-transform:uppercase;margin-left:8px}[dir=rtl] :host .vd-dialog-actions ::ng-deep button{margin-right:8px;margin-left:inherit}:host .vd-dialog-actions ::ng-deep button{padding-left:8px;padding-right:8px;min-width:64px}\n"] }]
         }], propDecorators: { dialogTitle: [{
@@ -383,10 +385,10 @@ class VdPromptDialogComponent {
     accept() {
         this._dialogRef.close(this.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdPromptDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdPromptDialogComponent, isStandalone: true, selector: "vd-prompt-dialog", ngImport: i0, template: "<vd-dialog>\r\n  @if (title) {\r\n    <vd-dialog-title>{{title}}</vd-dialog-title>\r\n  }\r\n  <vd-dialog-content layout=\"column\" class=\"mat-subhead\">\r\n    <span [innerHtml]=\"message\"></span>\r\n    <form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n      <mat-form-field flex>\r\n        <input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n      </mat-form-field>\r\n    </form>\r\n  </vd-dialog-content>\r\n  <vd-dialog-actions>\r\n    <button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n    <button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n  </vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media(min-width:600px){vd-dialog{width:400px}}@media(max-width:599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: VdDialogContentDirective, selector: "vd-dialog-content" }, { kind: "directive", type: VdDialogActionsDirective, selector: "vd-dialog-actions" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdPromptDialogComponent, deps: [{ token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdPromptDialogComponent, isStandalone: true, selector: "vd-prompt-dialog", ngImport: i0, template: "<vd-dialog>\r\n  @if (title) {\r\n    <vd-dialog-title>{{title}}</vd-dialog-title>\r\n  }\r\n  <vd-dialog-content layout=\"column\" class=\"mat-subhead\">\r\n    <span [innerHtml]=\"message\"></span>\r\n    <form #form=\"ngForm\" layout=\"row\" novalidate flex>\r\n      <mat-form-field flex>\r\n        <input matInput (keydown.enter)=\"$event.preventDefault(); form.valid && accept()\" [(ngModel)]=\"value\" name=\"value\" required />\r\n      </mat-form-field>\r\n    </form>\r\n  </vd-dialog-content>\r\n  <vd-dialog-actions>\r\n    <button mat-button #closeBtn (keydown.arrowright)=\"acceptBtn.focus()\" (click)=\"cancel()\">{{cancelButton}}</button>\r\n    <button mat-button color=\"accent\" #acceptBtn (keydown.arrowleft)=\"closeBtn.focus()\" [disabled]=\"!form.valid\" (click)=\"accept()\">{{acceptButton}}</button>\r\n  </vd-dialog-actions>\r\n</vd-dialog>", styles: ["@media(min-width:600px){vd-dialog{width:400px}}@media(max-width:599px){vd-dialog{width:250px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDialogComponent, selector: "vd-dialog" }, { kind: "directive", type: VdDialogTitleDirective, selector: "vd-dialog-title" }, { kind: "directive", type: VdDialogContentDirective, selector: "vd-dialog-content" }, { kind: "directive", type: VdDialogActionsDirective, selector: "vd-dialog-actions" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdPromptDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdPromptDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-prompt-dialog', imports: [
                         FormsModule,
@@ -520,10 +522,10 @@ class VdDialogService {
         /* Returns the configured MatDialogConfig object */
         return matDialogConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDialogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.MatDialog }] });
@@ -643,10 +645,10 @@ class VdMediaService {
     _matchMediaTrigger(query) {
         this._querySources[query].next(matchMedia(query).matches);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMediaService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMediaService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMediaService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMediaService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMediaService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMediaService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.NgZone }] });
@@ -1085,10 +1087,10 @@ class VdTaskDialogComponent {
         this.unsubscribe.next();
         this.unsubscribe.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdTaskDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdTaskDialogComponent, isStandalone: true, selector: "vd-task-dialog", ngImport: i0, template: "<div mat-dialog-title class=\"mat-headline-6\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDrag cdkDragHandle>{{this.data.title}}</div>\r\n@if (inProgress) {\r\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n}\r\n@if (!inProgress) {\r\n  <mat-progress-bar mode=\"determinate\" value=\"100\"></mat-progress-bar>\r\n}\r\n<div mat-dialog-content>{{content}}</div>\r\n<div mat-dialog-actions class=\"pad-top\">\r\n  @for (btn of data.buttons; track btn) {\r\n    @if (btn.type === 'flat' && shouldShow(btn.showWhen)) {\r\n      <button type=\"button\" mat-flat-button [color]=\"btn.color\" (click)=\"onButtonClick(btn)\">{{ btn.text }}</button>\r\n    }\r\n    @if (btn.type !== 'flat' && shouldShow(btn.showWhen)) {\r\n      <button type=\"button\" mat-button [color]=\"btn.color\" (click)=\"onButtonClick(btn)\">{{ btn.text }}</button>\r\n    }\r\n  }\r\n  @if (this.data.successButtonClick && succeeded) {\r\n    <button type=\"button\" mat-flat-button (click)=\"success()\" color=\"primary\" (click)=\"null\">{{this.data.successButtonText}}</button>\r\n  }\r\n  @if (inProgress) {\r\n    <button type=\"button\" mat-button (click)=\"cancel()\" autofocus>{{this.data.cancelButtonText}}</button>\r\n  }\r\n  @if (!inProgress) {\r\n    <button type=\"button\" mat-button (click)=\"close()\" autofocus>{{this.data.closeButtonText}}</button>\r\n  }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdTaskDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdTaskDialogComponent, isStandalone: true, selector: "vd-task-dialog", ngImport: i0, template: "<div mat-dialog-title class=\"mat-headline-6\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDrag cdkDragHandle>{{this.data.title}}</div>\r\n@if (inProgress) {\r\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n}\r\n@if (!inProgress) {\r\n  <mat-progress-bar mode=\"determinate\" value=\"100\"></mat-progress-bar>\r\n}\r\n<div mat-dialog-content>{{content}}</div>\r\n<div mat-dialog-actions class=\"pad-top\">\r\n  @for (btn of data.buttons; track btn) {\r\n    @if (btn.type === 'flat' && shouldShow(btn.showWhen)) {\r\n      <button type=\"button\" mat-flat-button [color]=\"btn.color\" (click)=\"onButtonClick(btn)\">{{ btn.text }}</button>\r\n    }\r\n    @if (btn.type !== 'flat' && shouldShow(btn.showWhen)) {\r\n      <button type=\"button\" mat-button [color]=\"btn.color\" (click)=\"onButtonClick(btn)\">{{ btn.text }}</button>\r\n    }\r\n  }\r\n  @if (this.data.successButtonClick && succeeded) {\r\n    <button type=\"button\" mat-flat-button (click)=\"success()\" color=\"primary\" (click)=\"null\">{{this.data.successButtonText}}</button>\r\n  }\r\n  @if (inProgress) {\r\n    <button type=\"button\" mat-button (click)=\"cancel()\" autofocus>{{this.data.cancelButtonText}}</button>\r\n  }\r\n  @if (!inProgress) {\r\n    <button type=\"button\" mat-button (click)=\"close()\" autofocus>{{this.data.closeButtonText}}</button>\r\n  }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdTaskDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdTaskDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-task-dialog', imports: [
                         MatButtonModule,
@@ -1411,6 +1413,26 @@ class BaseComponent {
             this.router.navigateByUrl(urlTree.toString());
         }
     }
+    /**
+     * Expands the specified expansion panel path (supporting nested IDs) and collapses others.
+     * @param panelPath - The dot-separated ID path (e.g., 'warehouse.orders.details').
+     */
+    expandPanelPath(panelId) {
+        /* Split the panel ID into parts to handle nested panels */
+        panelId?.split('.')
+            /* Reduce the panel ID into an array of cumulative IDs to handle nested panels */
+            ?.reduce((accumulator, currentValue, index) => accumulator.concat((index > 0 ? (accumulator.slice(-1).join('.') + '.') : '') + currentValue), [])
+            ?.forEach((hash) => {
+            /* Find the index of the panel with the specified element ID */
+            var expansionPanelIndex = this.matExpansionPanelElementQueryList?.toArray()?.findIndex(x => x.nativeElement.id == hash) ?? -1;
+            if (expansionPanelIndex >= 0) {
+                /* Open the specified panel */
+                this.matExpansionPanelQueryList?.toArray()[expansionPanelIndex]?.open();
+                /* Detect changes */
+                this.changeDetectorRef.detectChanges();
+            }
+        });
+    }
     /*
      * Forces a new change detection cycle since change detections
      * have finished when `ngAfterViewInit` is executed.
@@ -1454,16 +1476,8 @@ class BaseComponent {
                 this.changeDetectorRef.detectChanges();
             }
             else {
-                /* Find the index of the panel with the specified element ID */
-                this.urlHash?.split('.')
-                    ?.reduce((accumulator, currentValue, index) => accumulator.concat((index > 0 ? (accumulator.slice(-1).join('.') + '.') : '') + currentValue), [])
-                    ?.forEach((hash) => {
-                    var expansionPanelIndex = this.matExpansionPanelElementQueryList?.toArray()?.findIndex(x => x.nativeElement.id == hash) ?? -1;
-                    if (expansionPanelIndex >= 0) {
-                        this.matExpansionPanelQueryList?.toArray()[expansionPanelIndex]?.open();
-                        this.changeDetectorRef.detectChanges();
-                    }
-                });
+                /* Otherwise, expand the panel based on the URL hash if set */
+                this.expandPanelPath(this.urlHash ?? '');
             }
             /* Detect changes for opened panels */
             this.matExpansionPanelQueryList?.forEach(y => {
@@ -1975,10 +1989,10 @@ class BaseComponent {
         /* Allow navigation by default */
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BaseComponent, isStandalone: true, inputs: { handleExpansionPanelChanges: "handleExpansionPanelChanges" }, outputs: { reload: "reload" }, viewQueries: [{ propertyName: "matExpansionPanelElementQueryList", predicate: MatExpansionPanel, descendants: true, read: ElementRef }, { propertyName: "matExpansionPanelQueryList", predicate: MatExpansionPanel, descendants: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: BaseComponent, isStandalone: true, inputs: { handleExpansionPanelChanges: "handleExpansionPanelChanges" }, outputs: { reload: "reload" }, viewQueries: [{ propertyName: "matExpansionPanelElementQueryList", predicate: MatExpansionPanel, descendants: true, read: ElementRef }, { propertyName: "matExpansionPanelQueryList", predicate: MatExpansionPanel, descendants: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { handleExpansionPanelChanges: [{
                 type: Input
@@ -7518,10 +7532,10 @@ class BaseDirective {
             ApplicationUtil.configureControl(control, annotation.config ? annotation.config : "", annotation.annotationType);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BaseDirective, isStandalone: true, inputs: { model: "model" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: BaseDirective, isStandalone: true, inputs: { model: "model" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { model: [{
                 type: Input
@@ -7548,10 +7562,10 @@ class HtmlControlTemplateDirective {
         this.templateRef = templateRef;
     }
     ;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HtmlControlTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: HtmlControlTemplateDirective, isStandalone: true, selector: "[htmlControlTemplate]", inputs: { type: ["htmlControlTemplate", "type"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HtmlControlTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: HtmlControlTemplateDirective, isStandalone: true, selector: "[htmlControlTemplate]", inputs: { type: ["htmlControlTemplate", "type"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HtmlControlTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HtmlControlTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[htmlControlTemplate]'
@@ -7831,10 +7845,10 @@ class RxwebFormDirective extends BaseDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxwebFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: RxwebFormDirective, isStandalone: true, selector: "[formGroup],[rxwebForm]", inputs: { formGroup: "formGroup", ngForm: ["rxwebForm", "ngForm"] }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxwebFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RxwebFormDirective, isStandalone: true, selector: "[formGroup],[rxwebForm]", inputs: { formGroup: "formGroup", ngForm: ["rxwebForm", "ngForm"] }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxwebFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxwebFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formGroup],[rxwebForm]'
@@ -7861,14 +7875,14 @@ class AsyncValidationDirective {
     validate(control) {
         return this.async ? this.async(control) : of(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsyncValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AsyncValidationDirective, isStandalone: true, selector: "[ngModel],[formControlName],[formControl]", inputs: { async: "async" }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AsyncValidationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AsyncValidationDirective, isStandalone: true, selector: "[ngModel],[formControlName],[formControl]", inputs: { async: "async" }, providers: [{
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: forwardRef(() => AsyncValidationDirective),
                 multi: true
             }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AsyncValidationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AsyncValidationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[formControlName],[formControl]',
@@ -7971,13 +7985,13 @@ class FileControlDirective {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: FileControlDirective, isStandalone: true, selector: "input[type=file]", inputs: { writeFile: "writeFile", extension: "extension", fileSize: "fileSize", file: "file" }, host: { listeners: { "change": "onChangeCall($event.target)", "blur": "onTouched()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: FileControlDirective, isStandalone: true, selector: "input[type=file]", inputs: { writeFile: "writeFile", extension: "extension", fileSize: "fileSize", file: "file" }, host: { listeners: { "change": "onChangeCall($event.target)", "blur": "onTouched()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: FileControlDirective, multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => FileControlDirective), multi: true }
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=file]",
@@ -8048,14 +8062,14 @@ class ImageFileControlDirective {
         }
         return of(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageFileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ImageFileControlDirective, isStandalone: true, selector: "input[type=file]", inputs: { image: "image" }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImageFileControlDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ImageFileControlDirective, isStandalone: true, selector: "input[type=file]", inputs: { image: "image" }, providers: [{
                 provide: NG_ASYNC_VALIDATORS,
                 useExisting: forwardRef(() => ImageFileControlDirective),
                 multi: true
             }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImageFileControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ImageFileControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "input[type=file]",
@@ -8186,10 +8200,10 @@ class DecimalProvider {
         /* Set isSetConfig to true after configuring */
         this.isSetConfig = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DecimalProvider, deps: [{ token: i3$1.DecimalPipe }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DecimalProvider });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DecimalProvider, deps: [{ token: i3$1.DecimalPipe }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DecimalProvider });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DecimalProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DecimalProvider, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i3$1.DecimalPipe }, { type: undefined, decorators: [{
                     type: Inject,
@@ -8692,10 +8706,10 @@ class ControlExpressionProcess {
             this.controlConfig = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ControlExpressionProcess, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ControlExpressionProcess, isStandalone: true, inputs: { name: "name", formControlName: "formControlName" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlExpressionProcess, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ControlExpressionProcess, isStandalone: true, inputs: { name: "name", formControlName: "formControlName" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ControlExpressionProcess, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlExpressionProcess, decorators: [{
             type: Directive
         }], propDecorators: { name: [{
                 type: Input
@@ -8766,10 +8780,10 @@ class BaseValidator extends ControlExpressionProcess {
         }
         this.eventName = eventName.toLowerCase();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: BaseValidator, isStandalone: true, inputs: { formControl: "formControl" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: BaseValidator, isStandalone: true, inputs: { formControl: "formControl" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseValidator, decorators: [{
             type: Directive
         }], propDecorators: { formControl: [{
                 type: Input
@@ -9038,10 +9052,10 @@ class RxFormControlDirective extends BaseValidator {
         if (this.maskProvider)
             this.maskProvider.onDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxFormControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DecimalProvider }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: RxFormControlDirective, isStandalone: true, selector: "[ngModel],[formControlName],[formControl]", inputs: { rxalpha: "rxalpha", rxalphaNumeric: "rxalphaNumeric", rxascii: "rxascii", rxcompare: "rxcompare", rxcompose: "rxcompose", rxcontains: "rxcontains", rxcreditCard: "rxcreditCard", rxdataUri: "rxdataUri", rxdifferent: "rxdifferent", rxdigit: "rxdigit", rxemail: "rxemail", rxendsWith: "rxendsWith", rxeven: "rxeven", rxextension: "rxextension", rxfactor: "rxfactor", rxfileSize: "rxfileSize", rxgreaterThanEqualTo: "rxgreaterThanEqualTo", rxgreaterThan: "rxgreaterThan", rxhexColor: "rxhexColor", rxjson: "rxjson", rxlatitude: "rxlatitude", rxlatLong: "rxlatLong", rxleapYear: "rxleapYear", rxlessThan: "rxlessThan", rxlessThanEqualTo: "rxlessThanEqualTo", rxlongitude: "rxlongitude", rxlowerCase: "rxlowerCase", rxmac: "rxmac", rxmaxDate: "rxmaxDate", rxmaxLength: "rxmaxLength", rxmaxNumber: "rxmaxNumber", rxminDate: "rxminDate", rxminLength: "rxminLength", rxminNumber: "rxminNumber", rxnumeric: "rxnumeric", rxodd: "rxodd", rxpassword: "rxpassword", rxport: "rxport", rxprimeNumber: "rxprimeNumber", rxrequired: "rxrequired", rxrange: "rxrange", rxrule: "rxrule", rxstartsWith: "rxstartsWith", rxtime: "rxtime", rxupperCase: "rxupperCase", rxurl: "rxurl", rxunique: "rxunique", rxnotEmpty: "rxnotEmpty", rxcusip: "rxcusip", rxgrid: "rxgrid", rxdate: "rxdate" }, providers: [NGMODEL_BINDING], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxFormControlDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DecimalProvider }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RxFormControlDirective, isStandalone: true, selector: "[ngModel],[formControlName],[formControl]", inputs: { rxalpha: "rxalpha", rxalphaNumeric: "rxalphaNumeric", rxascii: "rxascii", rxcompare: "rxcompare", rxcompose: "rxcompose", rxcontains: "rxcontains", rxcreditCard: "rxcreditCard", rxdataUri: "rxdataUri", rxdifferent: "rxdifferent", rxdigit: "rxdigit", rxemail: "rxemail", rxendsWith: "rxendsWith", rxeven: "rxeven", rxextension: "rxextension", rxfactor: "rxfactor", rxfileSize: "rxfileSize", rxgreaterThanEqualTo: "rxgreaterThanEqualTo", rxgreaterThan: "rxgreaterThan", rxhexColor: "rxhexColor", rxjson: "rxjson", rxlatitude: "rxlatitude", rxlatLong: "rxlatLong", rxleapYear: "rxleapYear", rxlessThan: "rxlessThan", rxlessThanEqualTo: "rxlessThanEqualTo", rxlongitude: "rxlongitude", rxlowerCase: "rxlowerCase", rxmac: "rxmac", rxmaxDate: "rxmaxDate", rxmaxLength: "rxmaxLength", rxmaxNumber: "rxmaxNumber", rxminDate: "rxminDate", rxminLength: "rxminLength", rxminNumber: "rxminNumber", rxnumeric: "rxnumeric", rxodd: "rxodd", rxpassword: "rxpassword", rxport: "rxport", rxprimeNumber: "rxprimeNumber", rxrequired: "rxrequired", rxrange: "rxrange", rxrule: "rxrule", rxstartsWith: "rxstartsWith", rxtime: "rxtime", rxupperCase: "rxupperCase", rxurl: "rxurl", rxunique: "rxunique", rxnotEmpty: "rxnotEmpty", rxcusip: "rxcusip", rxgrid: "rxgrid", rxdate: "rxdate" }, providers: [NGMODEL_BINDING], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxFormControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxFormControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[formControlName],[formControl]',
@@ -9285,10 +9299,10 @@ class ControlHostDirective {
             this.viewContainerRef.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ControlHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ControlHostDirective, isStandalone: true, selector: "[controlHost]", inputs: { portal: ["controlHost", "portal"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlHostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ControlHostDirective, isStandalone: true, selector: "[controlHost]", inputs: { portal: ["controlHost", "portal"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ControlHostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlHostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[controlHost]'
@@ -9559,10 +9573,10 @@ class Utils {
     static isClass(obj) {
         return typeof obj === 'function' && typeof obj.prototype === 'object';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Utils, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: Utils, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Utils, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: Utils, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: Utils, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Utils, decorators: [{
             type: Directive
         }] });
 
@@ -10862,10 +10876,10 @@ class RxFormBuilder extends BaseFormBuilder {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxFormBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxFormBuilder });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxFormBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxFormBuilder });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxFormBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxFormBuilder, decorators: [{
             type: Injectable
         }] });
 
@@ -10882,17 +10896,17 @@ class TypedFormBuilder {
             return !(paramOptions && paramOptions.isInstance) ? this.rxFormBuilder.formGroup(controlsConfig, paramOptions.data, paramOptions.config) : this.rxFormBuilder.formGroup(controlsConfig, paramOptions.data, paramOptions.config).modelInstance;
         return this.formBuilder.group(controlsConfig, options);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypedFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypedFormBuilder });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TypedFormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TypedFormBuilder });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TypedFormBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TypedFormBuilder, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class RxReactiveFormsModule {
     static forRoot() { return { ngModule: RxReactiveFormsModule, providers: [] }; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxReactiveFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: RxReactiveFormsModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxReactiveFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RxReactiveFormsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RxwebFormDirective,
@@ -10907,11 +10921,11 @@ class RxReactiveFormsModule {
             RxFormControlDirective,
             FileControlDirective,
             ImageFileControlDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxReactiveFormsModule, providers: [RxFormBuilder, DecimalProvider, DecimalPipe], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxReactiveFormsModule, providers: [RxFormBuilder, DecimalProvider, DecimalPipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RxReactiveFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RxReactiveFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -10944,11 +10958,11 @@ class ReactiveTypedFormsModule {
         ReactiveFormConfig.autoInstancePush = true;
     }
     static forRoot() { return { ngModule: ReactiveTypedFormsModule, providers: [] }; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReactiveTypedFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ReactiveTypedFormsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule], exports: [ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReactiveTypedFormsModule, providers: [{ provide: FormBuilder, useClass: TypedFormBuilder }, TypedFormBuilder], imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule.forRoot(), ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ReactiveTypedFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: ReactiveTypedFormsModule, imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule], exports: [ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ReactiveTypedFormsModule, providers: [{ provide: FormBuilder, useClass: TypedFormBuilder }, TypedFormBuilder], imports: [CommonModule, FormsModule, ReactiveFormsModule, RxReactiveFormsModule.forRoot(), ReactiveFormsModule, FormsModule, ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReactiveTypedFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ReactiveTypedFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -11514,10 +11528,10 @@ class DynamicBuilder {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicBuilder, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicBuilder, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicBuilder, deps: [{ token: i0.Compiler }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicBuilder, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicBuilder, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicBuilder, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.Compiler }] });
@@ -11627,10 +11641,10 @@ class JoinPipe {
         }
         return value.join(separator);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: JoinPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: JoinPipe, isStandalone: true, name: "join" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JoinPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: JoinPipe, isStandalone: true, name: "join" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: JoinPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: JoinPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'join'
@@ -11673,10 +11687,10 @@ class MapPipe {
         /* Return the original value if no valid mapFn is provided */
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MapPipe, isStandalone: true, name: "map" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: MapPipe, isStandalone: true, name: "map" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MapPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MapPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'map'
@@ -11700,10 +11714,10 @@ class PropertyPipe {
         /* Split the path string into an array of keys */
         return path.split('.').reduce((acc, key) => acc ? acc[key] : undefined, obj);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: PropertyPipe, isStandalone: true, name: "property" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PropertyPipe, isStandalone: true, name: "property" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'property'
@@ -11833,10 +11847,10 @@ class AutofocusDirective {
             }, this.focusDelay);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AutofocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { focusDelay: "focusDelay", selectText: "selectText", autoFocus: "autoFocus" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AutofocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { focusDelay: "focusDelay", selectText: "selectText", autoFocus: "autoFocus" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AutofocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[autoFocus]" // The selector allows you to use the directive on any element with the autoFocus attribute    
@@ -11968,10 +11982,10 @@ class VdDelayedHoverDirective {
         */
         this.zone.runGuarded(() => { this.delayedhoverEvents.emit(); });
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDelayedHoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdDelayedHoverDirective, isStandalone: true, selector: "[delayedHover]", inputs: { duration: "duration" }, outputs: { delayedhoverEvents: "delayedHover" }, exportAs: ["hesitation"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDelayedHoverDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdDelayedHoverDirective, isStandalone: true, selector: "[delayedHover]", inputs: { duration: "duration" }, outputs: { delayedhoverEvents: "delayedHover" }, exportAs: ["hesitation"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDelayedHoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDelayedHoverDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[delayedHover]",
@@ -12002,10 +12016,10 @@ class DisableControlDirective {
     constructor(ngControl) {
         this.ngControl = ngControl;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DisableControlDirective, deps: [{ token: i1$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DisableControlDirective, isStandalone: true, selector: "[disableControl]", inputs: { disableControl: "disableControl" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DisableControlDirective, deps: [{ token: i1$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DisableControlDirective, isStandalone: true, selector: "[disableControl]", inputs: { disableControl: "disableControl" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DisableControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DisableControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[disableControl]'
@@ -12170,18 +12184,18 @@ class AppStorage {
             return defaultValue;
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppStorage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AppStorage, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppStorage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AppStorage, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AppStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppStorage, decorators: [{
             type: Directive
         }] });
 
 class DynamicComponentCompiler {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicComponentCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicComponentCompiler, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicComponentCompiler, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicComponentCompiler, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicComponentCompiler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicComponentCompiler, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -13141,6 +13155,19 @@ class EnumMetadata {
      * @type {number}
      */
     order;
+    /**
+     * @property Disabled
+     * @description A flag indicating whether the enum value should be disabled in the UI. This can be useful for conditionally disabling enum items.
+     * @type {boolean}
+     */
+    disabled;
+    /**
+     * @property Disable
+     * @description An optional function that returns a boolean to conditionally disable the enum value based on runtime parameters.
+     *             For example, you can disable certain enum values depending on another enum's value or other context.
+     * @type {(context: any) =&gt; boolean}
+     */
+    disable;
     /**
      * @property Hidden
      * @description A flag indicating whether the enum value should be hidden from the UI. This can be useful for conditionally hiding enum items.
@@ -13381,10 +13408,10 @@ class BindPipe {
         /* Return undefined if the provided value is not a function */
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BindPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: BindPipe, isStandalone: true, name: "bind" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BindPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: BindPipe, isStandalone: true, name: "bind" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BindPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BindPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bind'
@@ -13395,10 +13422,10 @@ class DataSourcePipe {
     transform(data) {
         return data ? new MatTableDataSource(data) : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataSourcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DataSourcePipe, isStandalone: true, name: "dataSource" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataSourcePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: DataSourcePipe, isStandalone: true, name: "dataSource" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataSourcePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataSourcePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'dataSource'
@@ -13432,10 +13459,10 @@ class EnumPipe {
         /* If the value is not recognized in the enumType, return undefined as a fallback */
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: EnumPipe, isStandalone: true, name: "enum", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: EnumPipe, isStandalone: true, name: "enum", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnumPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EnumPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'enum',
@@ -13469,10 +13496,10 @@ class FileSizePipe {
         }
         return `${bytes.toFixed(precision[unit])} ${unit}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fileSize'
@@ -13520,10 +13547,10 @@ class FilterPipe {
         }
         return value?.toString().toLowerCase().includes(filterBy.toString().toLowerCase());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FilterPipe, isStandalone: true, name: "filter", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FilterPipe, isStandalone: true, name: "filter", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filter',
@@ -13541,10 +13568,10 @@ class FirstLetterPipe {
         let val = value && value.length > 1 ? value.substr(0, 1) : value;
         return uppercase ? val.toUpperCase() : val;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FirstLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FirstLetterPipe, isStandalone: true, name: "firstLetter", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FirstLetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FirstLetterPipe, isStandalone: true, name: "firstLetter", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FirstLetterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FirstLetterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'firstLetter',
@@ -13557,10 +13584,10 @@ class FormArrayPipe {
     transform(value) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FormArrayPipe, isStandalone: true, name: "formArray" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormArrayPipe, isStandalone: true, name: "formArray" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormArrayPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormArrayPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formArray'
@@ -13571,10 +13598,10 @@ class FormControlPipe {
     transform(value) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FormControlPipe, isStandalone: true, name: "formControl" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormControlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormControlPipe, isStandalone: true, name: "formControl" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormControlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormControlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formControl'
@@ -13585,10 +13612,10 @@ class FormGroupPipe {
     transform(value) {
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FormGroupPipe, isStandalone: true, name: "formGroup" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormGroupPipe, isStandalone: true, name: "formGroup" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FormGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormGroupPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'formGroup'
@@ -13599,10 +13626,10 @@ class FuncPipe {
     transform(value, ...args) {
         return value && typeof value === 'function' ? value(...args) : value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FuncPipe, isStandalone: true, name: "func", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FuncPipe, isStandalone: true, name: "func", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FuncPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FuncPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'func',
@@ -13618,10 +13645,10 @@ class KeysPipe {
         }
         return keys;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: KeysPipe, isStandalone: true, name: "keys" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: KeysPipe, isStandalone: true, name: "keys" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeysPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeysPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'keys'
@@ -13640,10 +13667,10 @@ class MonthNamePipe {
     transform(month) {
         return (month < 1 || month > 12) ? 'N/A' : this.monthNames[month - 1];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonthNamePipe, isStandalone: true, name: "monthName", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MonthNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: MonthNamePipe, isStandalone: true, name: "monthName", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonthNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MonthNamePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'monthName',
@@ -13714,10 +13741,10 @@ class OnlyNumberDirective {
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: OnlyNumberDirective, isStandalone: true, selector: "[onlyNumber]", inputs: { onlyNumber: "onlyNumber", excludePrefix: "excludePrefix" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: OnlyNumberDirective, isStandalone: true, selector: "[onlyNumber]", inputs: { onlyNumber: "onlyNumber", excludePrefix: "excludePrefix" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OnlyNumberDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OnlyNumberDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[onlyNumber]'
@@ -13987,10 +14014,10 @@ class OrderPipe {
             return this.transform(result, expression, undefined, reverse, isCaseInsensitive, comparator);
         }, value); /* Return the final transformed value */
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: OrderPipe, isStandalone: true, name: "orderBy", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: OrderPipe, isStandalone: true, name: "orderBy", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: OrderPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OrderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'orderBy',
@@ -14010,10 +14037,10 @@ class PlaceholderPipe {
         }
         return '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PlaceholderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: PlaceholderPipe, isStandalone: true, name: "placeholder", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlaceholderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PlaceholderPipe, isStandalone: true, name: "placeholder", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PlaceholderPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlaceholderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'placeholder',
@@ -14039,10 +14066,10 @@ class PropertyJoinPipe {
         }
         return value.map(item => item[property]).join(separator);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyJoinPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: PropertyJoinPipe, isStandalone: true, name: "propertyJoin" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyJoinPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PropertyJoinPipe, isStandalone: true, name: "propertyJoin" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PropertyJoinPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PropertyJoinPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'propertyJoin'
@@ -14069,10 +14096,10 @@ class SafeHtmlPipe {
     transform(html) {
         return this.sanitizer.bypassSecurityTrustHtml(html);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml'
@@ -14094,10 +14121,10 @@ class SplitPipe {
             return [];
         return value.split(delimiter);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SplitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: SplitPipe, isStandalone: true, name: "split" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SplitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: SplitPipe, isStandalone: true, name: "split" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SplitPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SplitPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'split'
@@ -14115,10 +14142,10 @@ class TimePipe {
         }
         return time;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TimePipe, isStandalone: true, name: "time" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: TimePipe, isStandalone: true, name: "time" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'time'
@@ -14129,10 +14156,10 @@ class TitleCase {
     transform(input, length) {
         return input.length > 0 ? input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase())) : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TitleCase, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TitleCase, isStandalone: true, name: "titlecase", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TitleCase, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: TitleCase, isStandalone: true, name: "titlecase", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TitleCase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TitleCase, decorators: [{
             type: Pipe,
             args: [{
                     name: 'titlecase', pure: false
@@ -14143,10 +14170,10 @@ class TruncatePipe {
     transform(text, length) {
         return Utils.truncateText(text, length);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'truncate'
@@ -14157,10 +14184,10 @@ class ValuesPipe {
     transform(value, _) {
         return Object.keys(value).map(key => value[key]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ValuesPipe, isStandalone: true, name: "values", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: ValuesPipe, isStandalone: true, name: "values", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ValuesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValuesPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'values', pure: false
@@ -14291,8 +14318,19 @@ class GenericService {
      * @param handleError Handle errors
      */
     patch(id, body, path, httpOptions, handleError = true) {
-        let request = this.http
-            .patch(`${this.endpoint}${path ? path : ''}/${id}`, body, httpOptions);
+        /* Ensure correct content-type for patch */
+        const headers = new HttpHeaders({
+            'Content-Type': 'application/json-patch+json'
+        });
+        /* Merge headers */
+        const options = {
+            ...httpOptions,
+            headers: httpOptions?.headers
+                ? httpOptions.headers.append('Content-Type', 'application/json-patch+json')
+                : headers
+        };
+        /* Create request */
+        let request = this.http.patch(`${this.endpoint}${path ? path : ''}/${id}`, body, options);
         /* Handle error */
         if (handleError) {
             request = request.pipe(catchError(this.handleError('patch')));
@@ -14507,12 +14545,11 @@ class BaseService extends GenericService {
     constructor() {
         super('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseService, decorators: [{
+            type: Injectable
         }], ctorParameters: () => [] });
 
 //@dynamic
@@ -14568,13 +14605,15 @@ class EnumService {
      * Function to get ordered enum values based on metadata
      * @param enumObj The enum object
      * @param metadataObj Metadata object containing enum metadata
+     * @param context Optional context to be passed to hide function
      * @returns An array of EnumItem objects representing ordered enum values
      */
-    static applyMetadata(enumObj, metadataObj) {
+    static applyMetadata(enumObj, metadataObj, context) {
         const orderedValues = Object.keys(enumObj)
             .map(key => parseInt(key, 10))
             .filter(key => !isNaN(key))
             .filter(key => !(metadataObj[key]?.hidden))
+            .filter(key => !(metadataObj[key]?.hide?.(context)))
             .sort((a, b) => (metadataObj[a]?.order ?? 0) - (metadataObj[b]?.order ?? 0))
             .map(key => {
             var metadata = metadataObj[key];
@@ -14583,14 +14622,16 @@ class EnumService {
                 name: metadata?.display ?? enumObj[key],
                 icon: metadata?.icon,
                 textColor: metadata?.textColor,
+                disabled: metadata?.disabled || metadata?.disable?.(context) || false,
+                context: context
             };
         });
         return orderedValues;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnumService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EnumService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EnumService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EnumService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EnumService, decorators: [{
             type: Injectable
         }] });
 
@@ -14614,10 +14655,10 @@ class EventQueueService {
     emit(event) {
         this.eventBrocker.next(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EventQueueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EventQueueService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventQueueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventQueueService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EventQueueService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EventQueueService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -14781,10 +14822,10 @@ class VdDynamicMenuComponent {
             setTimeout(() => this.open(offEvent, data), 100);
         }, { once: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDynamicMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdDynamicMenuComponent, isStandalone: true, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", index: "index", context: "context", contextMenu: "contextMenu" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "contextMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<!-- Container row layout for displaying action items horizontally, aligned center vertically -->\r\n@if (items) {\r\n  <div layout=\"row\" layout-align=\"start center\" flex>\r\n    @for (menu of items; track menu) {\r\n      <!-- #region Button trigger for actions that open a submenu -->\r\n      @if (!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n        <a\r\n          mat-icon-button\r\n          [mat-menu-trigger-for]=\"matMenu\"\r\n          [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n          [matTooltip]=\"menu.tooltip\"\r\n          (click)=\"$event.stopPropagation();\">\r\n          <!-- Display menu icon -->\r\n          <mat-icon\r\n            fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n            [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n            [style.color]=\"menu.iconColor\">\r\n            {{ (menu.icon ?? 'more_vert' | func:data:context) || 'more_vert' }}\r\n          </mat-icon>\r\n          <!-- Optional title next to icon -->\r\n          <span [style.color]=\"menu.textColor\">{{menu.title | func:data:context}}</span>\r\n        </a>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Invisible context menu trigger used for right-click context positioning -->\r\n      @if (contextMenu) {\r\n        <div\r\n          style=\"visibility: hidden; position: fixed\"\r\n          [style.left]=\"contextMenuPosition.x\"\r\n          [style.top]=\"contextMenuPosition.y\"\r\n        [matMenuTriggerFor]=\"matMenu\"></div>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Direct action button (no submenu) -->\r\n      @if (!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n        <a\r\n          mat-icon-button\r\n          [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n          [matTooltip]=\"menu.tooltip\"\r\n          (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n          <!-- Icon for the action -->\r\n          <mat-icon\r\n            fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n            [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n            [style.color]=\"menu.iconColor\">\r\n            {{ (menu.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n          </mat-icon>\r\n        </a>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region MatMenu with nested submenus -->\r\n      <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n        @for (menuItem of menu?.items; track menuItem) {\r\n          <!-- Simple menu item without sub-items -->\r\n          @if (!menuItem.items) {\r\n            @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n              <a\r\n                mat-menu-item\r\n                (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\"\r\n                [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                [matTooltip]=\"menuItem.tooltip\">\r\n                <mat-icon\r\n                  fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                  [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                  [style.color]=\"menuItem.iconColor\">\r\n                  {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                </mat-icon>\r\n                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n              </a>\r\n            }\r\n          }\r\n          <!-- Menu item with nested submenu -->\r\n          @if (menuItem.items) {\r\n            <!-- Define the submenu -->\r\n            <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n              @for (menuSubItem of menuItem.items; track menuSubItem) {\r\n                @if (!menuSubItem.hide || !menuSubItem.hide(data, context, index)) {\r\n                  <a\r\n                    mat-menu-item\r\n                    (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\"\r\n                    [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\"\r\n                    [matTooltip]=\"menuItem.tooltip\">\r\n                    <mat-icon\r\n                      fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                      [class]=\"menuSubItem.iconClass ?? '' | func:data:context\"\r\n                      [style.color]=\"menuSubItem.iconColor\">\r\n                      {{ (menuSubItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                    </mat-icon>\r\n                    <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title | func:data:context}}</span>\r\n                  </a>\r\n                }\r\n              }\r\n            </mat-menu>\r\n            <!-- Trigger for submenu -->\r\n            @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n              <a\r\n                mat-menu-item\r\n                [matMenuTriggerFor]=\"subMenu\"\r\n                [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                [matTooltip]=\"menuItem.tooltip\">\r\n                <mat-icon\r\n                  fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                  [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                  [style.color]=\"menuItem.iconColor\">\r\n                  {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                </mat-icon>\r\n                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n              </a>\r\n            }\r\n          }\r\n        }\r\n      </mat-menu>\r\n      <!-- #endregion -->\r\n    }\r\n  </div>\r\n}", dependencies: [{ kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicMenuComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicMenuComponent, isStandalone: true, selector: "vd-dynamic-menu", inputs: { items: "items", data: "data", index: "index", context: "context", contextMenu: "contextMenu" }, viewQueries: [{ propertyName: "matMenu", first: true, predicate: MatMenu, descendants: true }, { propertyName: "contextMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<!-- Container row layout for displaying action items horizontally, aligned center vertically -->\r\n@if (items) {\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        @for (menu of items; track menu) {\r\n            <!-- #region Button trigger for actions that open a submenu -->\r\n            @if (!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n                <a mat-icon-button\r\n                   [mat-menu-trigger-for]=\"matMenu\"\r\n                   [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n                   [matTooltip]=\"menu.tooltip\"\r\n                   (click)=\"$event.stopPropagation();\">\r\n                    <!-- Display menu icon -->\r\n                    <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n                              [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n                              [style.color]=\"menu.iconColor\">\r\n                        {{ (menu.icon ?? 'more_vert' | func:data:context) || 'more_vert' }}\r\n                    </mat-icon>\r\n                    <!-- Optional title next to icon -->\r\n                    <span [style.color]=\"menu.textColor\">{{menu.title | func:data:context}}</span>\r\n                </a>\r\n            }\r\n            <!-- #endregion -->\r\n            <!-- #region Invisible context menu trigger used for right-click context positioning -->\r\n            @if (contextMenu) {\r\n                <div style=\"visibility: hidden; position: fixed\"\r\n                     [style.left]=\"contextMenuPosition.x\"\r\n                     [style.top]=\"contextMenuPosition.y\"\r\n                     [matMenuTriggerFor]=\"matMenu\"></div>\r\n            }\r\n            <!-- #endregion -->\r\n            <!-- #region Direct action button (no submenu) -->\r\n            @if (!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n                <a mat-icon-button\r\n                   [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n                   [matTooltip]=\"menu.tooltip\"\r\n                   (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n                    <!-- Icon for the action -->\r\n                    <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n                              [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n                              [style.color]=\"menu.iconColor\">\r\n                        {{ (menu.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                    </mat-icon>\r\n                </a>\r\n            }\r\n            <!-- #endregion -->\r\n            <!-- #region MatMenu with nested submenus -->\r\n            <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n                @for (menuItem of menu?.items; track menuItem) {\r\n                    <!-- Simple menu item without sub-items -->\r\n                    @if (!menuItem.items) {\r\n                        @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n                            <a mat-menu-item\r\n                               (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\"\r\n                               [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                               [matTooltip]=\"menuItem.tooltip\">\r\n                                <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                                          [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                                          [style.color]=\"menuItem.iconColor\">\r\n                                    {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                                </mat-icon>\r\n                                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n                            </a>\r\n                        }\r\n                    }\r\n                    <!-- Menu item with nested submenu -->\r\n                    @if (menuItem.items) {\r\n                        <!-- Define the submenu -->\r\n                        <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                            @for (menuSubItem of menuItem.items; track menuSubItem) {\r\n                                @if (!menuSubItem.hide || !menuSubItem.hide(data, context, index)) {\r\n                                    <a mat-menu-item\r\n                                       (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\"\r\n                                       [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\"\r\n                                       [matTooltip]=\"menuItem.tooltip\">\r\n                                        <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                                                  [class]=\"menuSubItem.iconClass ?? '' | func:data:context\"\r\n                                                  [style.color]=\"menuSubItem.iconColor\">\r\n                                            {{ (menuSubItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                                        </mat-icon>\r\n                                        <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title | func:data:context}}</span>\r\n                                    </a>\r\n                                }\r\n                            }\r\n                        </mat-menu>\r\n                        <!-- Trigger for submenu -->\r\n                        @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n                            <a mat-menu-item\r\n                               [matMenuTriggerFor]=\"subMenu\"\r\n                               [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                               [matTooltip]=\"menuItem.tooltip\">\r\n                                <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                                          [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                                          [style.color]=\"menuItem.iconColor\">\r\n                                    {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                                </mat-icon>\r\n                                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n                            </a>\r\n                        }\r\n                    }\r\n                }\r\n            </mat-menu>\r\n            <!-- #endregion -->\r\n        }\r\n    </div>\r\n}", dependencies: [{ kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDynamicMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dynamic-menu', imports: [
                         MatMenuTrigger,
@@ -14793,7 +14834,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatButtonModule,
                         MatTooltipModule,
                         FuncPipe
-                    ], template: "<!-- Container row layout for displaying action items horizontally, aligned center vertically -->\r\n@if (items) {\r\n  <div layout=\"row\" layout-align=\"start center\" flex>\r\n    @for (menu of items; track menu) {\r\n      <!-- #region Button trigger for actions that open a submenu -->\r\n      @if (!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n        <a\r\n          mat-icon-button\r\n          [mat-menu-trigger-for]=\"matMenu\"\r\n          [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n          [matTooltip]=\"menu.tooltip\"\r\n          (click)=\"$event.stopPropagation();\">\r\n          <!-- Display menu icon -->\r\n          <mat-icon\r\n            fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n            [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n            [style.color]=\"menu.iconColor\">\r\n            {{ (menu.icon ?? 'more_vert' | func:data:context) || 'more_vert' }}\r\n          </mat-icon>\r\n          <!-- Optional title next to icon -->\r\n          <span [style.color]=\"menu.textColor\">{{menu.title | func:data:context}}</span>\r\n        </a>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Invisible context menu trigger used for right-click context positioning -->\r\n      @if (contextMenu) {\r\n        <div\r\n          style=\"visibility: hidden; position: fixed\"\r\n          [style.left]=\"contextMenuPosition.x\"\r\n          [style.top]=\"contextMenuPosition.y\"\r\n        [matMenuTriggerFor]=\"matMenu\"></div>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Direct action button (no submenu) -->\r\n      @if (!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n        <a\r\n          mat-icon-button\r\n          [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n          [matTooltip]=\"menu.tooltip\"\r\n          (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n          <!-- Icon for the action -->\r\n          <mat-icon\r\n            fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n            [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n            [style.color]=\"menu.iconColor\">\r\n            {{ (menu.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n          </mat-icon>\r\n        </a>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region MatMenu with nested submenus -->\r\n      <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n        @for (menuItem of menu?.items; track menuItem) {\r\n          <!-- Simple menu item without sub-items -->\r\n          @if (!menuItem.items) {\r\n            @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n              <a\r\n                mat-menu-item\r\n                (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\"\r\n                [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                [matTooltip]=\"menuItem.tooltip\">\r\n                <mat-icon\r\n                  fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                  [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                  [style.color]=\"menuItem.iconColor\">\r\n                  {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                </mat-icon>\r\n                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n              </a>\r\n            }\r\n          }\r\n          <!-- Menu item with nested submenu -->\r\n          @if (menuItem.items) {\r\n            <!-- Define the submenu -->\r\n            <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n              @for (menuSubItem of menuItem.items; track menuSubItem) {\r\n                @if (!menuSubItem.hide || !menuSubItem.hide(data, context, index)) {\r\n                  <a\r\n                    mat-menu-item\r\n                    (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\"\r\n                    [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\"\r\n                    [matTooltip]=\"menuItem.tooltip\">\r\n                    <mat-icon\r\n                      fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                      [class]=\"menuSubItem.iconClass ?? '' | func:data:context\"\r\n                      [style.color]=\"menuSubItem.iconColor\">\r\n                      {{ (menuSubItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                    </mat-icon>\r\n                    <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title | func:data:context}}</span>\r\n                  </a>\r\n                }\r\n              }\r\n            </mat-menu>\r\n            <!-- Trigger for submenu -->\r\n            @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n              <a\r\n                mat-menu-item\r\n                [matMenuTriggerFor]=\"subMenu\"\r\n                [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                [matTooltip]=\"menuItem.tooltip\">\r\n                <mat-icon\r\n                  fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                  [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                  [style.color]=\"menuItem.iconColor\">\r\n                  {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                </mat-icon>\r\n                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n              </a>\r\n            }\r\n          }\r\n        }\r\n      </mat-menu>\r\n      <!-- #endregion -->\r\n    }\r\n  </div>\r\n}" }]
+                    ], template: "<!-- Container row layout for displaying action items horizontally, aligned center vertically -->\r\n@if (items) {\r\n    <div layout=\"row\" layout-align=\"start center\" flex>\r\n        @for (menu of items; track menu) {\r\n            <!-- #region Button trigger for actions that open a submenu -->\r\n            @if (!contextMenu && menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n                <a mat-icon-button\r\n                   [mat-menu-trigger-for]=\"matMenu\"\r\n                   [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n                   [matTooltip]=\"menu.tooltip\"\r\n                   (click)=\"$event.stopPropagation();\">\r\n                    <!-- Display menu icon -->\r\n                    <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n                              [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n                              [style.color]=\"menu.iconColor\">\r\n                        {{ (menu.icon ?? 'more_vert' | func:data:context) || 'more_vert' }}\r\n                    </mat-icon>\r\n                    <!-- Optional title next to icon -->\r\n                    <span [style.color]=\"menu.textColor\">{{menu.title | func:data:context}}</span>\r\n                </a>\r\n            }\r\n            <!-- #endregion -->\r\n            <!-- #region Invisible context menu trigger used for right-click context positioning -->\r\n            @if (contextMenu) {\r\n                <div style=\"visibility: hidden; position: fixed\"\r\n                     [style.left]=\"contextMenuPosition.x\"\r\n                     [style.top]=\"contextMenuPosition.y\"\r\n                     [matMenuTriggerFor]=\"matMenu\"></div>\r\n            }\r\n            <!-- #endregion -->\r\n            <!-- #region Direct action button (no submenu) -->\r\n            @if (!menu?.items?.length && !(menu.hide && menu.hide(data, context, index))) {\r\n                <a mat-icon-button\r\n                   [disabled]=\"data?.locked || (menu?.disable && menu?.disable(data, context, index))\"\r\n                   [matTooltip]=\"menu.tooltip\"\r\n                   (click)=\"$event.stopPropagation(); menu.event ? menu.event(data, context, index) : null\">\r\n                    <!-- Icon for the action -->\r\n                    <mat-icon fontSet=\"{{menu.iconFontSet || 'material-symbols-outlined'}}\"\r\n                              [class]=\"menu.iconClass ?? '' | func:data:context\"\r\n                              [style.color]=\"menu.iconColor\">\r\n                        {{ (menu.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                    </mat-icon>\r\n                </a>\r\n            }\r\n            <!-- #endregion -->\r\n            <!-- #region MatMenu with nested submenus -->\r\n            <mat-menu x-position=\"before\" #matMenu=\"matMenu\">\r\n                @for (menuItem of menu?.items; track menuItem) {\r\n                    <!-- Simple menu item without sub-items -->\r\n                    @if (!menuItem.items) {\r\n                        @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n                            <a mat-menu-item\r\n                               (click)=\"menuItem.event ? menuItem.event(data, context, index) : null\"\r\n                               [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                               [matTooltip]=\"menuItem.tooltip\">\r\n                                <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                                          [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                                          [style.color]=\"menuItem.iconColor\">\r\n                                    {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                                </mat-icon>\r\n                                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n                            </a>\r\n                        }\r\n                    }\r\n                    <!-- Menu item with nested submenu -->\r\n                    @if (menuItem.items) {\r\n                        <!-- Define the submenu -->\r\n                        <mat-menu x-position=\"before\" #subMenu=\"matMenu\">\r\n                            @for (menuSubItem of menuItem.items; track menuSubItem) {\r\n                                @if (!menuSubItem.hide || !menuSubItem.hide(data, context, index)) {\r\n                                    <a mat-menu-item\r\n                                       (click)=\"menuSubItem.event ? menuSubItem.event(data, context, index) : null\"\r\n                                       [disabled]=\"menuSubItem.disable && menuSubItem.disable(data, context, index)\"\r\n                                       [matTooltip]=\"menuItem.tooltip\">\r\n                                        <mat-icon fontSet=\"{{menuSubItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                                                  [class]=\"menuSubItem.iconClass ?? '' | func:data:context\"\r\n                                                  [style.color]=\"menuSubItem.iconColor\">\r\n                                            {{ (menuSubItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                                        </mat-icon>\r\n                                        <span [style.color]=\"menuSubItem.textColor\">{{menuSubItem.title | func:data:context}}</span>\r\n                                    </a>\r\n                                }\r\n                            }\r\n                        </mat-menu>\r\n                        <!-- Trigger for submenu -->\r\n                        @if (!menuItem.hide || !menuItem.hide(data, context, index)) {\r\n                            <a mat-menu-item\r\n                               [matMenuTriggerFor]=\"subMenu\"\r\n                               [disabled]=\"menuItem.disable && menuItem.disable(data, context, index)\"\r\n                               [matTooltip]=\"menuItem.tooltip\">\r\n                                <mat-icon fontSet=\"{{menuItem.iconFontSet || 'material-symbols-outlined'}}\"\r\n                                          [class]=\"menuItem.iconClass ?? '' | func:data:context\"\r\n                                          [style.color]=\"menuItem.iconColor\">\r\n                                    {{ (menuItem.icon ?? 'radio_button_unchecked' | func:data:context) || 'radio_button_unchecked' }}\r\n                                </mat-icon>\r\n                                <span [style.color]=\"menuItem.textColor\">{{menuItem.title | func:data:context}}</span>\r\n                            </a>\r\n                        }\r\n                    }\r\n                }\r\n            </mat-menu>\r\n            <!-- #endregion -->\r\n        }\r\n    </div>\r\n}" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { matMenu: [{
                 type: ViewChild,
                 args: [MatMenu]
@@ -15134,10 +15175,10 @@ class AbstractMatFormField {
         this.stateChanges.complete();
         this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractMatFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractMatFormField, isStandalone: true, inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", readonly: "readonly", disabled: "disabled" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMatFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AbstractMatFormField, isStandalone: true, inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", readonly: "readonly", disabled: "disabled" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "id": "this.id", "attr.aria-describedBy": "this.describedBy" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractMatFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMatFormField, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { errorStateMatcher: [{
                 type: Input
@@ -15434,6 +15475,12 @@ class AbstractSelectFormField extends AbstractMatFormField {
         }
         return this.options?.filter((x) => x[this.optionValueProperty] == this._value)[0];
     }
+    /**
+     * @property context
+     * @description An optional context object that can be used to provide additional information for the component's behavior, such as dynamic hiding of options based on the context.
+     * @type {any}
+     */
+    context;
     /**
      * @property compareWith
      * @description A function to compare the option values with the selected values.
@@ -15495,7 +15542,7 @@ class AbstractSelectFormField extends AbstractMatFormField {
         this.filteredOptions = this.options;
         if (this.enum) {
             this.filterable = this.enumMetadata != null;
-            this.filteredOptions = this.options = this.enumMetadata ? EnumService.applyMetadata(this.enum, this.enumMetadata) : EnumService.toArray(this.enum, this.prefix);
+            this.filteredOptions = this.options = this.enumMetadata ? EnumService.applyMetadata(this.enum, this.enumMetadata, this.context) : EnumService.toArray(this.enum, this.prefix);
             /* Apply enum filters */
             if (this._enumFilter && this.options) {
                 this.filteredOptions = this.options = this.options.filter(this._enumFilter);
@@ -15631,10 +15678,10 @@ class AbstractSelectFormField extends AbstractMatFormField {
     log(message, ...optionalParams) {
         console.log(message, optionalParams);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AbstractSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: AbstractSelectFormField, isStandalone: true, 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractSelectFormField, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AbstractSelectFormField, isStandalone: true, 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", context: "context", 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: "21.0.6", ngImport: i0, type: AbstractSelectFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractSelectFormField, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { enum: [{
                 type: Input
@@ -15688,6 +15735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], context: [{
+                type: Input
             }], compareWith: [{
                 type: Input
             }], onValueChange: [{
@@ -15721,10 +15770,10 @@ class VdSelectOptionDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdSelectOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdSelectOptionDirective, isStandalone: true, selector: "[vd-select-option]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdSelectOptionDirective, isStandalone: true, selector: "[vd-select-option]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdSelectOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-select-option]ng-template'
@@ -15743,10 +15792,10 @@ class VdSelectTriggerDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdSelectTriggerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdSelectTriggerDirective, isStandalone: true, selector: "[vd-select-trigger]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectTriggerDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdSelectTriggerDirective, isStandalone: true, selector: "[vd-select-trigger]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdSelectTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-select-trigger]ng-template'
@@ -15897,16 +15946,16 @@ class VdSelectComponent extends AbstractSelectFormField {
             return fieldValue?.toLowerCase().includes(searchText.toLowerCase());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdSelectComponent, isStandalone: true, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdSelectComponent, isStandalone: true, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [
             { provide: MatFormFieldControl, useExisting: VdSelectComponent },
             {
                 provide: MAT_SELECT_CONFIG,
                 useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
             }
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n  <!-- #region Filter input -->\n  <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n    <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n      <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n      <div class=\"mat-mdc-form-field-flex\">\n        <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n          <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n          @if (filterInput?.value) {\n            <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n          }\n        </div>\n      </div>\n      <div class=\"mdc-line-ripple\"></div>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <!-- #region Trigger for launch button -->\n  @if (onLaunch.observers.length > 0) {\n    <mat-select-trigger [class]=\"triggerCssClass\">\n      <span layout=\"row\" layout-align=\"start center\">\n        @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n              <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n              <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n              <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n              <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n          </span>\n          @if (!last) {\n            <span>&nbsp;&nbsp;</span>\n          }\n        }\n      </span>\n      <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Custom trigger template -->\n  @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n    <mat-select-trigger [class]=\"triggerCssClass\">\n      @if (triggerTemplate?.templateRef) {\n        <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n      }\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Option template as trigger -->\n  @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n    <mat-select-trigger [class]=\"triggerCssClass\">\n      <span layout=\"row\" layout-align=\"start center\">\n        @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n              <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n              <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n              <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n              <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Dynamic icon -->\n            @if (optionIcon; as optionIcon) {\n              <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                  <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                  <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n              </ng-template>\n            }\n            <!-- #endregion -->\n            @if (optionTemplate?.templateRef) {\n              <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n            }\n          </span>\n          @if (!last) {\n            <span>&nbsp;&nbsp;</span>\n          }\n        }\n      </span>\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Trigger for icons -->\n  @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n    <mat-select-trigger>\n      <span layout=\"row\" layout-align=\"start center\">\n        @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n              <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n              <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n              <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n              <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Dynamic icon -->\n            @if (optionIcon; as optionIcon) {\n              <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                  <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                  <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n              </ng-template>\n            }\n            <!-- #endregion -->\n            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n          </span>\n          @if (!last) {\n            <span>&nbsp;&nbsp;</span>\n          }\n        }\n      </span>\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Default option -->\n  @if (!multiple && defaultOption) {\n    <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Options -->\n  @for (option of filteredOptions; track option; let first = $first) {\n    <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\n      <!-- #region Property icon -->\n      @if (matIconKey && !svgIconKey) {\n        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n      }\n      @if (svgIconKey && !matIconKey) {\n        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n      }\n      <!-- #endregion -->\n      <!-- #region Option icon -->\n      @if (option.icon?.matIcon) {\n        <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n      }\n      @if (option.icon?.svgIcon) {\n        <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n      }\n      <!-- #endregion -->\n      @if (!optionTemplate?.templateRef) {\n        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n      }\n      @if (optionTemplate?.templateRef) {\n        <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n      }\n    </mat-option>\n  }\n  <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n  <div>\n    @if (currentValue) {\n      <div>\n        <div class=\"readonly-value\">\n          @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n            <span>\n              <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                  <span layout=\"row\" layout-align=\"start center\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                      <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                      <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    <!-- #region Option icon -->\n                    @if (option.icon?.matIcon) {\n                      <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                    }\n                    @if (option.icon?.svgIcon) {\n                      <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    <span>&nbsp;&nbsp;</span>\n                    <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                  </span>\n                  @if (!last) {\n                    <span>,&nbsp;</span>\n                  }\n                }\n              </span>\n            </span>\n          }\n          @if (triggerTemplate?.templateRef) {\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n          }\n          @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n          }\n        </div>\n        @if (onLaunch.observers.length > 0) {\n          <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n      </div>\n    }\n    @if (!currentValue) {\n      <div>&nbsp;</div>\n    }\n  </div>\n}\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\n                        <!-- #region Option icon -->\n                        @if (option.icon?.matIcon) {\n                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                        }\n                        @if (option.icon?.svgIcon) {\n                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                    }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Trigger for icons -->\n        @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n            <mat-select-trigger>\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Default option -->\n            @if (!multiple && defaultOption) {\n                <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\n                    <!-- #region Option icon -->\n                    @if (option.icon?.matIcon) {\n                        <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                    }\n                    @if (option.icon?.svgIcon) {\n                        <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    @if (!optionTemplate?.templateRef) {\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        }\n                        @if (optionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                </mat-option>\n                }\n                <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\n                                        <!-- #region Option icon -->\n                                        @if (option.icon?.matIcon) {\n                                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                                        }\n                                        @if (option.icon?.svgIcon) {\n                                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-select', imports: [
                         CommonModule,
@@ -15921,7 +15970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.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>\n  <!-- #region Filter input -->\n  <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n    <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n      <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n      <div class=\"mat-mdc-form-field-flex\">\n        <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n          <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n          @if (filterInput?.value) {\n            <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n          }\n        </div>\n      </div>\n      <div class=\"mdc-line-ripple\"></div>\n    </div>\n  </div>\n  <!-- #endregion -->\n\n  <!-- #region Trigger for launch button -->\n  @if (onLaunch.observers.length > 0) {\n    <mat-select-trigger [class]=\"triggerCssClass\">\n      <span layout=\"row\" layout-align=\"start center\">\n        @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n              <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n              <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n              <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n              <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n          </span>\n          @if (!last) {\n            <span>&nbsp;&nbsp;</span>\n          }\n        }\n      </span>\n      <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Custom trigger template -->\n  @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n    <mat-select-trigger [class]=\"triggerCssClass\">\n      @if (triggerTemplate?.templateRef) {\n        <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n      }\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Option template as trigger -->\n  @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n    <mat-select-trigger [class]=\"triggerCssClass\">\n      <span layout=\"row\" layout-align=\"start center\">\n        @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n              <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n              <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n              <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n              <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Dynamic icon -->\n            @if (optionIcon; as optionIcon) {\n              <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                  <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                  <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n              </ng-template>\n            }\n            <!-- #endregion -->\n            @if (optionTemplate?.templateRef) {\n              <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n            }\n          </span>\n          @if (!last) {\n            <span>&nbsp;&nbsp;</span>\n          }\n        }\n      </span>\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Trigger for icons -->\n  @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n    <mat-select-trigger>\n      <span layout=\"row\" layout-align=\"start center\">\n        @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n          <span layout=\"row\" layout-align=\"start center\">\n            <!-- #region Property icon -->\n            @if (matIconKey && !svgIconKey) {\n              <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n            }\n            @if (svgIconKey && !matIconKey) {\n              <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Option icon -->\n            @if (option.icon?.matIcon) {\n              <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n            }\n            @if (option.icon?.svgIcon) {\n              <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n            }\n            <!-- #endregion -->\n            <!-- #region Dynamic icon -->\n            @if (optionIcon; as optionIcon) {\n              <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                @if (optionIcon.svgIcon) {\n                  <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                }\n                @if (optionIcon.matIcon) {\n                  <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                }\n              </ng-template>\n            }\n            <!-- #endregion -->\n            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n          </span>\n          @if (!last) {\n            <span>&nbsp;&nbsp;</span>\n          }\n        }\n      </span>\n    </mat-select-trigger>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Default option -->\n  @if (!multiple && defaultOption) {\n    <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n  }\n  <!-- #endregion -->\n\n  <!-- #region Options -->\n  @for (option of filteredOptions; track option; let first = $first) {\n    <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\n      <!-- #region Property icon -->\n      @if (matIconKey && !svgIconKey) {\n        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n      }\n      @if (svgIconKey && !matIconKey) {\n        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n      }\n      <!-- #endregion -->\n      <!-- #region Option icon -->\n      @if (option.icon?.matIcon) {\n        <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n      }\n      @if (option.icon?.svgIcon) {\n        <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n      }\n      <!-- #endregion -->\n      @if (!optionTemplate?.templateRef) {\n        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n      }\n      @if (optionTemplate?.templateRef) {\n        <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n      }\n    </mat-option>\n  }\n  <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n  <div>\n    @if (currentValue) {\n      <div>\n        <div class=\"readonly-value\">\n          @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n            <span>\n              <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                  <span layout=\"row\" layout-align=\"start center\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                      <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                      <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    <!-- #region Option icon -->\n                    @if (option.icon?.matIcon) {\n                      <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                    }\n                    @if (option.icon?.svgIcon) {\n                      <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    <span>&nbsp;&nbsp;</span>\n                    <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                  </span>\n                  @if (!last) {\n                    <span>,&nbsp;</span>\n                  }\n                }\n              </span>\n            </span>\n          }\n          @if (triggerTemplate?.templateRef) {\n            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n          }\n          @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n          }\n        </div>\n        @if (onLaunch.observers.length > 0) {\n          <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        }\n      </div>\n    }\n    @if (!currentValue) {\n      <div>&nbsp;</div>\n    }\n  </div>\n}\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\n"] }]
+                    ], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\n    <!-- #region Filter input -->\n    <div class=\"mat-mdc-form-field mat-form-field-appearance-fill flex\">\n        <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\n            <div class=\"mat-mdc-form-field-focus-overlay\"></div>\n            <div class=\"mat-mdc-form-field-flex\">\n                <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\n                    <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\n                    @if (filterInput?.value) {\n                        <mat-icon (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\n                    }\n                </div>\n            </div>\n            <div class=\"mdc-line-ripple\"></div>\n        </div>\n    </div>\n    <!-- #endregion -->\n\n    <!-- #region Trigger for launch button -->\n    @if (onLaunch.observers.length > 0) {\n        <mat-select-trigger [class]=\"triggerCssClass\">\n            <span layout=\"row\" layout-align=\"start center\">\n                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                    <span layout=\"row\" layout-align=\"start center\">\n                        <!-- #region Property icon -->\n                        @if (matIconKey && !svgIconKey) {\n                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                        }\n                        @if (svgIconKey && !matIconKey) {\n                            <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n\n                        <!-- #region Option icon -->\n                        @if (option.icon?.matIcon) {\n                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                        }\n                        @if (option.icon?.svgIcon) {\n                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                        }\n                        <!-- #endregion -->\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                    </span>\n                    @if (!last) {\n                        <span>&nbsp;&nbsp;</span>\n                    }\n                    }\n            </span>\n            <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n        </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Custom trigger template -->\n        @if (!onLaunch.observers.length && triggerTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                @if (triggerTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\n                }\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Option template as trigger -->\n        @if (!onLaunch.observers.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef) {\n            <mat-select-trigger [class]=\"triggerCssClass\">\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplateDefault [ngTemplateOutlet]=\"optionIconTemplateDefault\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            @if (optionTemplate?.templateRef) {\n                                <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                            }\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                    }\n                </span>\n            </mat-select-trigger>\n        }\n        <!-- #endregion -->\n\n        <!-- #region Trigger for icons -->\n        @if (!triggerTemplate?.templateRef && !optionTemplate?.templateRef) {\n            <mat-select-trigger>\n                <span layout=\"row\" layout-align=\"start center\">\n                    @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                        <span layout=\"row\" layout-align=\"start center\">\n                            <!-- #region Property icon -->\n                            @if (matIconKey && !svgIconKey) {\n                                <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                            }\n                            @if (svgIconKey && !matIconKey) {\n                                <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Option icon -->\n                            @if (option.icon?.matIcon) {\n                                <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                            }\n                            @if (option.icon?.svgIcon) {\n                                <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Dynamic icon -->\n                            @if (optionIcon; as optionIcon) {\n                                <ng-template #optionIconTemplate [ngTemplateOutlet]=\"optionIconTemplate\" let-optionIcon=\"optionIcon\" [ngTemplateOutletContext]=\"{ optionIcon: optionIcon(option) }\">\n                                    @if (optionIcon.svgIcon) {\n                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                    }\n                                    @if (optionIcon.matIcon) {\n                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\">{{optionIcon.matIcon}}</mat-icon>\n                                    }\n                                </ng-template>\n                            }\n                            <!-- #endregion -->\n                            <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        </span>\n                        @if (!last) {\n                            <span>&nbsp;&nbsp;</span>\n                        }\n                        }\n                </span>\n            </mat-select-trigger>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Default option -->\n            @if (!multiple && defaultOption) {\n                <mat-option class=\"tc-grey-500\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\n            }\n            <!-- #endregion -->\n\n            <!-- #region Options -->\n            @for (option of filteredOptions; track option; let first = $first) {\n                <mat-option [value]=\"mapper ? option : option[optionValueProperty]\" [disabled]=\"option?.disabled\">\n                    <!-- #region Property icon -->\n                    @if (matIconKey && !svgIconKey) {\n                        <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\n                    }\n                    @if (svgIconKey && !matIconKey) {\n                        <mat-icon [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n\n                    <!-- #region Option icon -->\n                    @if (option.icon?.matIcon) {\n                        <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                    }\n                    @if (option.icon?.svgIcon) {\n                        <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                    }\n                    <!-- #endregion -->\n                    @if (!optionTemplate?.templateRef) {\n                        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\n                        }\n                        @if (optionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option, text: option[optionTextProperty] }\"></ng-template>\n                        }\n                </mat-option>\n                }\n                <!-- #endregion -->\n</mat-select>\n\n<!-- #region Read only value -->\n@if (readonly) {\n    <div>\n        @if (currentValue) {\n            <div>\n                <div class=\"readonly-value\">\n                    @if (!optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                        <span>\n                            <span layout=\"row\" layout-align=\"start center\">\n                                @for (option of selectedOptions; track option; let i = $index; let last = $last) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        <!-- #region Property icon -->\n                                        @if (matIconKey && !svgIconKey) {\n                                            <mat-icon [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\n                                        }\n                                        @if (svgIconKey && !matIconKey) {\n                                            <mat-icon [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n\n                                        <!-- #region Option icon -->\n                                        @if (option.icon?.matIcon) {\n                                            <mat-icon [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\">{{option.icon?.matIcon}}</mat-icon>\n                                        }\n                                        @if (option.icon?.svgIcon) {\n                                            <mat-icon [svgIcon]=\"option.icon?.svgIcon\" [fontSet]=\"option.icon?.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: option.icon?.iconColor??'' }\"></mat-icon>\n                                        }\n                                        <!-- #endregion -->\n                                        <span>&nbsp;&nbsp;</span>\n                                        <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\n                                    </span>\n                                    @if (!last) {\n                                        <span>,&nbsp;</span>\n                                    }\n                                }\n                            </span>\n                        </span>\n                        }\n                        @if (triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\n                        }\n                        @if (optionTemplate?.templateRef && !triggerTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue, text: currentValue[optionTextProperty] }\"></ng-template>\n                        }\n                </div>\n                @if (onLaunch.observers.length > 0) {\n                    <mat-icon class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\n                }\n            </div>\n            }\n            @if (!currentValue) {\n                <div>&nbsp;</div>\n            }\n    </div>\n    }\n    <!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-vd-select-chip .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: [VdSelectOptionDirective]
@@ -16290,10 +16339,10 @@ class DataSourceFilterDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: DataSourceFilterDirective, isStandalone: true, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataSourceFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: DataSourceFilterDirective, isStandalone: true, selector: "[dataSourceFilter]", inputs: { dataSource: "dataSource", dataSourceFilter: "dataSourceFilter" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DataSourceFilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dataSourceFilter]'
@@ -16519,10 +16568,10 @@ class FilterClearComponent {
             this.table.dataSource.clearFilters();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1$5.MatTable }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: FilterClearComponent, isStandalone: true, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]", ngImport: i0, template: "<button type=\"button\" mat-icon-button (click)=\"clear()\">\r\n\t<mat-icon fontSet=\"material-symbols-outlined\">backspace</mat-icon>\r\n</button>", dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1$5.MatTable }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: FilterClearComponent, isStandalone: true, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]", ngImport: i0, template: "<button type=\"button\" mat-icon-button (click)=\"clear()\">\r\n\t<mat-icon fontSet=\"material-symbols-outlined\">backspace</mat-icon>\r\n</button>", dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterClearComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterClearComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]', imports: [
                         MatIconButton,
@@ -16628,8 +16677,8 @@ class FilterDateComponent {
      * Adds leading zeros to a digit
      */
     pad = (num, size) => { return ('0' + num).substr(-size); };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterDateComponent, deps: [{ token: i1$5.MatTable }, { token: i2$2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterDateComponent, isStandalone: true, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: { field: "field", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterDateComponent, deps: [{ token: i1$5.MatTable }, { token: i2$2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilterDateComponent, isStandalone: true, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: { field: "field", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FilterDateComponent),
@@ -16637,7 +16686,7 @@ class FilterDateComponent {
             }
         ], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" dense-3 flex>\r\n\t<input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"handleSearch($event)\" (click)=\"$event.stopPropagation();picker.open()\" (search)=\"handleSearch($event)\" (keyup.enter)=\"handleSearch($event)\" readonly>\r\n\t@if (!value && !focused) {\r\n\t\t<span matPrefix (click)=\"$event.stopPropagation();picker.open()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n\t\t</span>\r\n\t}\r\n\t@if (value) {\r\n\t\t<button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation();clearSearch()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t</button>\r\n\t}\r\n\t<mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field>", styles: ["mat-icon{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]', imports: [
                         FormsModule,
@@ -16812,8 +16861,8 @@ class FilterInputComponent {
      * Reload data
      */
     reload = () => this.table.dataSource['reload']();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterInputComponent, deps: [{ token: i1$5.MatTable }, { token: i2$2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterInputComponent, isStandalone: true, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: { field: "field", operator: "operator", onlyNumber: "onlyNumber", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeyDown($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterInputComponent, deps: [{ token: i1$5.MatTable }, { token: i2$2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilterInputComponent, isStandalone: true, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: { field: "field", operator: "operator", onlyNumber: "onlyNumber", debounce: "debounce", placeholder: "placeholder" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FilterInputComponent),
@@ -16821,7 +16870,7 @@ class FilterInputComponent {
             }
         ], viewQueries: [{ propertyName: "_filter", first: true, predicate: ["filterElement"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n\t<input matInput #filterElement ngControl=\"filterElement\" autocomplete=\"off\" type=\"input\" [(ngModel)]=\"value\" (search)=\"$event.stopPropagation();\" (keyup.enter)=\"handleSearch($event)\" />\r\n\t@if (!value && !focused) {\r\n\t\t<span matPrefix><mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon></span>\r\n\t}\r\n\t@if (value) {\r\n\t\t<button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"$event.stopPropagation(); clearSearch()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t</button>\r\n\t}\r\n</mat-form-field>", styles: ["mat-icon{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]', imports: [
                         CommonModule,
@@ -16865,10 +16914,10 @@ class VdFilterOptionDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFilterOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdFilterOptionDirective, isStandalone: true, selector: "[vd-filter-option]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFilterOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdFilterOptionDirective, isStandalone: true, selector: "[vd-filter-option]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFilterOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFilterOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-filter-option]ng-template'
@@ -17137,8 +17186,8 @@ class FilterSelectComponent {
      * Called when the control receives a touch event.
      */
     onTouched = () => { };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterSelectComponent, deps: [{ token: i1$5.MatTable }, { token: i2$2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterSelectComponent, isStandalone: true, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: { endpoint: "endpoint", params: "params", projection: "projection", sortBy: "sortBy", sorted: "sorted", enumFilter: "enumFilter", enum: "enum", enumMetadata: "enumMetadata", key: "key", text: "text", prefix: "prefix", multiple: "multiple", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", field: "field", placeholder: "placeholder", cache: "cache" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterSelectComponent, deps: [{ token: i1$5.MatTable }, { token: i2$2.CdkColumnDef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilterSelectComponent, isStandalone: true, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: { endpoint: "endpoint", params: "params", projection: "projection", sortBy: "sortBy", sorted: "sorted", enumFilter: "enumFilter", enum: "enum", enumMetadata: "enumMetadata", key: "key", text: "text", prefix: "prefix", multiple: "multiple", options: "options", filteredOptions: "filteredOptions", filterable: "filterable", field: "field", placeholder: "placeholder", cache: "cache" }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FilterSelectComponent),
@@ -17150,7 +17199,7 @@ class FilterSelectComponent {
             }
         ], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n\t@if (!value && value!=0 && !focused) {\r\n\t\t<span matPrefix (click)=\"$event.stopPropagation();select.open()\">\r\n\t\t\t<mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n\t\t</span>\r\n\t}\r\n\t<mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n\t\t@if (filterable) {\r\n\t\t\t<mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n\t\t\t\t<input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n\t\t\t\t@if (filterInput?.value) {\r\n\t\t\t\t\t<mat-icon (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n\t\t\t\t}\r\n\t\t\t</mat-form-field>\r\n\t\t}\r\n\t\t@if (!multiple) {\r\n\t\t\t<mat-option class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n\t\t}\r\n\t\t@for (option of filteredOptions; track option; let first = $first) {\r\n\t\t\t<mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t@if (!optionTemplate?.templateRef) {\r\n\t\t\t\t\t<span i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (optionTemplate?.templateRef) {\r\n\t\t\t\t\t\t<ng-template [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n\t\t\t\t\t}\r\n\t\t\t</mat-option>\r\n\t\t\t}\r\n\t</mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilterSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]', imports: [
                         CommonModule,
@@ -17905,8 +17954,8 @@ class VdDynamicTableComponent {
     ngAfterViewChecked() {
         this.changeDetector.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableComponent, isStandalone: true, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", parentControl: "parentControl", entityObject: "entityObject", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", paginatorRef: "paginatorRef", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@if (!static) {\n    <div class=\"loading-progress\">\n        @if (dataSource?.isLoading) {\n            <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n        }\n    </div>\n}\n\n<!-- #region Data table -->\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\n    <table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\n        @for (column of columns$ | async; track columnsTrackBy($index, column)) {\n            <!-- #region Column def -->\n            <ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                <ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\n                    <th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\n                        @if (column.type == ColumnType.Checkbox) {\n                            <mat-checkbox (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\n                        }\n                        @if (column.type != ColumnType.Checkbox) {\n                            <span [matTooltip]=\"headerText\">{{headerText}}</span>\n                        }\n                    </th>\n                </ng-template>\n                <td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\n                    <ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\n                        @switch (column.type) {\n                            <!-- #region Checkbox column -->\n                            @case (ColumnType.Checkbox) {\n                                <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum column -->\n                            @case (ColumnType.Enum) {\n                                <span>\n                                    @if (column.enumMetadata) {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index) {\n                                                @if (i < 2) {\n                                                    <ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\n                                                }\n                                                @if (i === 1 && rowValue?.length > 2) {\n                                                    <small [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\n                                                }\n                                            }\n                                            <ng-template #template let-displayValue=\"displayValue\">\n                                                <mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\n                                                    <span>{{ displayValue }}</span>\n                                                </mat-chip-row>\n                                            </ng-template>\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span class=\"na\" [ngStyle]=\"{ color: ((column.enumMetadata[rowValue] || {}).textColor || 'inherit') }\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\n                                            }\n                                        }\n                                    } @else {\n                                        @if (column.multiple) {\n                                            @for (item of rowValue; track item; let i = $index; let last = $last) {\n                                                <div>\n                                                    @if (i<2) {\n                                                        <small i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small>\n                                                    }\n                                                    @if (i==1 && rowValue?.length > 2) {\n                                                        <small>, ...</small>\n                                                    }\n                                                </div>\n                                            }\n                                        } @else {\n                                            @if (rowValue >= 0) {\n                                                <span i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\n                                                }\n                                                }\n                                                }\n                                </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Toggle column -->\n                                @case (ColumnType.Toggle) {\n                                    @if (!formArray) {\n                                        <mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Date column -->\n                                @case (ColumnType.Date) {\n                                    <span>{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Text Input column -->\n                                @case (ColumnType.TextInput) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <input matInput type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region VD-Select column -->\n                                @case (ColumnType.Select) {\n                                    @if (!formArray) {\n                                        <mat-form-field appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\n                                            @if (!formArray) {\n                                                <vd-select name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter  | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                            }\n                                        </mat-form-field>\n                                    }\n                                    @if (formArray) {\n                                        <ng-container [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\n                                            <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\n                                        </ng-container>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Action -->\n                                @case (ColumnType.Action) {\n                                    @if (column.menu) {\n                                        @if (menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)) {\n                                            <div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\"></div>\n                                        }\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Menu -->\n                                @case (ColumnType.Menu) {\n                                    @if (column.menu) {\n                                        <vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\n                                    }\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon -->\n                                @case (ColumnType.Icon) {\n                                    <span layout=\"row\" layout-align=\"start center\">\n                                        @if (column.icon?.matIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\n                                        }\n                                        @if (column.icon?.svgIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\n                                        }\n                                        @if (column.icon?.fontIcon) {\n                                            <mat-icon fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\n                                        }\n                                    </span>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region icon button -->\n                                @case (ColumnType.IconButton) {\n                                    <a mat-icon-button (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\n                                        <mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\n                                    </a>\n                                }\n                                <!-- #endregion -->\n                                <!-- #region Other column types -->\n                                @default {\n                                    <span [innerHtml]=\"rowValue??''\"></span>\n                                }\n                                <!-- #endregion -->\n                                }\n                                <ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\n                                    @if (formGroup) {\n                                        <ng-container [formGroup]=\"formGroup\">\n                                            <!-- If the columnNameSegments array is empty, we're at the leaf node -->\n                                            @if (!columnNameSegments.length) {\n                                                @switch (column.type) {\n                                                    <!-- #region Toggle column -->\n                                                    @case (ColumnType.Toggle) {\n                                                        <mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region Text Input column -->\n                                                    @case (ColumnType.TextInput) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                    <!-- #region VD-Select column -->\n                                                    @case (ColumnType.Select) {\n                                                        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\n                                                            <vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\n                                                        </mat-form-field>\n                                                    }\n                                                    <!-- #endregion -->\n                                                }\n                                            } @else {\n                                                <!-- If not the last segment, create a nested form group -->\n                                                <ng-container [formGroupName]=\"columnNameSegments[0]\">\n                                                    <!-- Recursive call to handle nested segments -->\n                                                    <ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\n                                                </ng-container>\n                                            }\n                                        </ng-container>\n                                    }\n                                </ng-template>\n                    </ng-template>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n            }\n\n            <!-- #region Filter row -->\n            @if (dataSource && filterable) {\n                @for (column of columns$ | async; track column) {\n                    <ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\n                        <th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\n                            <!-- #region Select filter -->\n                            @if(column.endpoint || column.enumType || column.options){\n                                <span filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\n                            }\n                            <!-- #region Text filter -->\n                            @else if(column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) {\n                                <span filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date filter -->\n                            @else if (column.type == ColumnType.Date) {\n                                <span filter-date></span>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Action filter (clear) -->\n                            @else if (column.type == ColumnType.Action) {\n                                <span filter-clear></span>\n                            }\n                            <!-- #endregion -->\n                        </th>\n                    </ng-container>\n                }\n            }\n            <!-- #endregion -->\n\n            <!-- #region Details column -->\n            <ng-container cdkColumnDef=\"expandedDetail\">\n                <td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\n                    <div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\n                        @if (templateRef && row === expandedRow) {\n                            <ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\n                        }\n                    </div>\n                </td>\n            </ng-container>\n            <!-- #endregion -->\n\n            <!-- #region Filter header -->\n            @if (filterable) {\n                <tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\n            }\n            <!-- #endregion -->\n\n            <tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\n            <tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\n\n            <!-- #region Detrails row -->\n            @if (detailsTemplate || templateRef) {\n                <tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\n            }\n            <!-- #endregion -->\n    </table>\n\n    <!-- #region Modern No Results Message -->\n    @if (dataSource?.filteredData?.length <= 0 && dataSource?.total <= 0) {\n        <div class=\"no-results-overlay\">\n            <mat-icon class=\"no-results-icon\">search_off</mat-icon>\n            <div class=\"no-results-text mat-body-1\">\n                <h3 i18n=\"@@noResultsFound\">No results found</h3>\n                <p i18n=\"@@tryAdjustFilters\">Try adjusting your filters or search criteria.</p>\n            </div>\n        </div>\n    }\n    <!-- #endregion -->\n</div>\n<!-- #endregion -->\n\n<!-- #region Debug value -->\n@if (debugValue) {\n    <code>\n    <pre>{{formValue | json}}</pre>\n  </code>\n}\n<!-- #endregion -->\n\n<div class=\"table-footer\" layout=\"row\">\n    <ng-content select=\"[table-footer]\"></ng-content>\n    <span flex></span>\n    @if (paginable) {\n        <mat-paginator [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\n    }\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media(max-width:389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media(max-width:1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: CdkTableModule }, { kind: "directive", type: i2$2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i16.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 
                 //----------------------
                 DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: 
                 //----------------------
@@ -17918,7 +17967,7 @@ class VdDynamicTableComponent {
             ]),
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dynamic-table', imports: [
                         CdkTableModule,
@@ -18329,10 +18378,10 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
     updateColumns() {
         this.genericList?.updateColumns();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RxFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdDynamicTableConfigDialogComponent, isStandalone: true, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n    <!-- Dialog title -->\r\n    <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n    <!-- Close button -->\r\n    <button mat-icon-button (click)=\"dialogRef.close()\">\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</div>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".mat-mdc-dialog-title{cursor:move}.dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container mat-toolbar{background-color:var(--mat-sys-primary);min-height:52px;border-radius:inherit;border-bottom-right-radius:0;border-bottom-left-radius:0}.dialog-container vd-dynamic-table{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RxFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdDynamicTableConfigDialogComponent, isStandalone: true, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n    <!-- Dialog title -->\r\n    <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n    <!-- Close button -->\r\n    <button mat-icon-button (click)=\"dialogRef.close()\">\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</div>\r\n\r\n@if (configForm) {\r\n    <div class=\"pad-xs flex\" layout=\"column\">\r\n        <div class=\"pad-bottom-sm\">\r\n            @if (configForm) {\r\n                <form [formGroup]=\"configForm\" class=\"pad-xs\">\r\n                    <div layout-gt-sm=\"row\" layout=\"column\">\r\n                        <mat-checkbox formControlName=\"sticky\">\r\n                            <span i18n=\"@@sticky\">Sticky</span>\r\n                            <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n                        </mat-checkbox>\r\n                        @if (false) {\r\n                            <mat-form-field layout-margin flex>\r\n                                <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n                                <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n                            </mat-form-field>\r\n                        }\r\n                    </div>\r\n                </form>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div layout-gt-sm=\"row\" class=\"dialog-container\" flex>\r\n        <vd-dynamic-table #table [data]=\"columns\" [paginatorRef]=\"paginator\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [paginable]=\"false\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\"></vd-dynamic-table>\r\n    </div>\r\n    <mat-dialog-actions>\r\n        <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n        <a mat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n        <a mat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n        <span flex></span>\r\n        <mat-paginator #paginator [length]=\"table.dataSource.total\" [pageIndex]=\"table.dataSource.pageIndex\" [pageSize]=\"table.dataSource.pageSize\" [pageSizeOptions]=\"table.pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n    </mat-dialog-actions>\r\n}", styles: [".mat-mdc-dialog-title{cursor:move}.dialog-container{box-sizing:border-box;margin:0;overflow:auto;max-height:100%}.dialog-container mat-toolbar{background-color:var(--mat-sys-primary);min-height:52px;border-radius:inherit;border-bottom-right-radius:0;border-bottom-left-radius:0}.dialog-container vd-dynamic-table{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RxReactiveFormsModule }, { kind: "directive", type: AsyncValidationDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["async"] }, { kind: "directive", type: RxwebFormDirective, selector: "[formGroup],[rxwebForm]", inputs: ["formGroup", "rxwebForm"] }, { kind: "directive", type: RxFormControlDirective, selector: "[ngModel],[formControlName],[formControl]", inputs: ["rxalpha", "rxalphaNumeric", "rxascii", "rxcompare", "rxcompose", "rxcontains", "rxcreditCard", "rxdataUri", "rxdifferent", "rxdigit", "rxemail", "rxendsWith", "rxeven", "rxextension", "rxfactor", "rxfileSize", "rxgreaterThanEqualTo", "rxgreaterThan", "rxhexColor", "rxjson", "rxlatitude", "rxlatLong", "rxleapYear", "rxlessThan", "rxlessThanEqualTo", "rxlongitude", "rxlowerCase", "rxmac", "rxmaxDate", "rxmaxLength", "rxmaxNumber", "rxminDate", "rxminLength", "rxminNumber", "rxnumeric", "rxodd", "rxpassword", "rxport", "rxprimeNumber", "rxrequired", "rxrange", "rxrule", "rxstartsWith", "rxtime", "rxupperCase", "rxurl", "rxunique", "rxnotEmpty", "rxcusip", "rxgrid", "rxdate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-dynamic-table-config-dialog', imports: [
                         ReactiveFormsModule,
@@ -19353,10 +19402,10 @@ class GenericListComponent extends BaseComponent {
      * in the creation of the default string description of an object
      */
     get [Symbol.toStringTag]() { return 'GenericListComponent'; }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GenericListComponent, isStandalone: true, inputs: { backButton: "backButton" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: GenericListComponent, isStandalone: true, inputs: { backButton: "backButton" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericListComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }, { type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: undefined }], propDecorators: { paginator: [{
                 type: ViewChild,
@@ -19547,10 +19596,10 @@ class GenericEmbeddedListComponent extends GenericListComponent {
         this.editable = false;
         super.addRowMenuItems();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericEmbeddedListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GenericEmbeddedListComponent, isStandalone: true, inputs: { form: "form", parent: "parent", hashPrefix: "hashPrefix", paginable: "paginable", pageSize: "pageSize" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericEmbeddedListComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: GenericEmbeddedListComponent, isStandalone: true, inputs: { form: "form", parent: "parent", hashPrefix: "hashPrefix", paginable: "paginable", pageSize: "pageSize" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericEmbeddedListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericEmbeddedListComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: RxFormBuilder }, { type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                 type: Input
@@ -19795,13 +19844,18 @@ class GenericFormBaseComponent extends BaseComponent {
     route;
     changeDetectorRef;
     /**
- * The action of the form (add | edit).
- */
+     * The action of the form (add | edit).
+     */
     action = 'add';
     /**
      * Indicates if the form is in edit mode.
      */
     isEditMode = false;
+    /**
+     * Whether to automatically initialize a new form instance if
+     * no existing record is found in the database.
+     */
+    initializeDefaultOnEmpty = false;
     /**
      * Save action enumeration.
      */
@@ -19869,6 +19923,11 @@ class GenericFormBaseComponent extends BaseComponent {
      * Disabled flag.
      */
     disabled = false;
+    /**
+     * Emitted when the form has been fully initialized
+     * and is ready to be accessed or modified.
+     */
+    formInitialized = new EventEmitter();
     /**
      * The current date.
      */
@@ -20064,6 +20123,17 @@ class GenericFormBaseComponent extends BaseComponent {
                     if (errorCallback) {
                         errorCallback(error);
                     }
+                    /* If the error indicates that the item was not found and initializeDefaultOnEmpty is true, initialize a new form instance */
+                    const isNotFound = error?.status === 404 || (typeof error === 'string' && error.includes('404'));
+                    /* If the error status is 404 (Not Found) and initializeDefaultOnEmpty is true, initialize a new form instance */
+                    if (this.initializeDefaultOnEmpty && isNotFound) {
+                        /* Set the form to edit mode to allow creating a new item */
+                        this.isEditMode = false;
+                        /* Initialize a new item with default values and the provided ID */
+                        this.item = Object.assign(this.newInstance(), { id: this.id });
+                        /* Build the form for the new item */
+                        this.buildForm();
+                    }
                 }
             });
         }
@@ -20276,9 +20346,85 @@ class GenericFormBaseComponent extends BaseComponent {
             form['submitted'] = true;
             /* Update value and validity */
             form.updateValueAndValidity();
+            /* Check if the form is valid and show error messages if not */
+            this.isFormValid(form);
+        }
+        else {
+            /* Print some debug information */
+            this.debugForm(form);
         }
+    }
+    /**
+     * Checks if the form is valid.
+     * This method validates the form, marks invalid controls, and shows error messages if any.
+     * @param form The form to check for validity.
+     * @returns A boolean indicating whether the form is valid.
+     */
+    isFormValid(form) {
         /* Print some debug information */
         this.debugForm(form);
+        if (form && !form.valid) {
+            /* Mark invalid controls recursively as dirty and touched */
+            this.markControlsAsInvalid(form);
+            /* Show error messages */
+            (async () => {
+                /* Wait until 'mat-error' is displayed in the DOM */
+                await new Promise(y => setTimeout(y, 250));
+                const errors = new Array();
+                this.collectErrors(form, errors);
+                /* Build error message: show first 3 specific errors or a generic one */
+                const message = errors.length
+                    ? errors.slice(0, 3).join('\n')
+                    : $localize `:@@snackbar.error.required-fields:All fields marked with an asterisk (*) are required.`;
+                /* Show a notice */
+                this.snackBarService.open(message, 'Ok', { duration: 3000, panelClass: ['error'] });
+            })();
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Recursively marks controls as invalid and touched.
+     * This method traverses the form controls and marks any invalid controls as dirty and touched to trigger validation messages in the UI.
+     * @param container The form group, array, or control to traverse.
+     */
+    markControlsAsInvalid(container) {
+        if (container instanceof FormGroup || container instanceof FormArray) {
+            Object.keys(container.controls).forEach(key => {
+                const control = container.controls[key];
+                this.markControlsAsInvalid(control);
+            });
+        }
+        else {
+            if (!container.valid) {
+                this.invalidateControl(container);
+            }
+        }
+    }
+    /**
+     * Recursively parses the form to collect error messages from the DOM.
+     * This method traverses the form controls and attempts to find associated error messages in the DOM, collecting them into an array.
+     * @param container The form group, array, or control to traverse.
+     * @param errors The array to collect error messages into.
+     */
+    collectErrors(container, errors) {
+        if (container instanceof FormGroup || container instanceof FormArray) {
+            Object.keys(container.controls).forEach(key => {
+                const control = container.controls[key];
+                if (!control.valid) {
+                    /* Attempt to find the DOM element by its formControlName or ID */
+                    const element = control?.nativeElement;
+                    if (element) {
+                        const error = this.getElementError(element);
+                        if (error && !errors.includes(error)) {
+                            errors.push(error);
+                        }
+                    }
+                    /* Dive deeper for nested groups/arrays */
+                    this.collectErrors(control, errors);
+                }
+            });
+        }
     }
     /**
      * Checks if the form is valid.
@@ -20286,7 +20432,7 @@ class GenericFormBaseComponent extends BaseComponent {
      * @param form The form to check for validity.
      * @returns A boolean indicating whether the form is valid.
      */
-    isFormValid(form) {
+    isFormValidOld(form) {
         /* Print some debug information */
         this.debugForm(form);
         /* If the form is not valid */
@@ -20336,6 +20482,15 @@ class GenericFormBaseComponent extends BaseComponent {
             ctr.updateValueAndValidity();
         });
     }
+    /**
+     * Manually triggers the formInitialized event.
+     * Useful when a parent component needs to access the form after asynchronous data has loaded.
+     */
+    triggerFormInitialized() {
+        if (this.form) {
+            this.formInitialized?.emit(this.form);
+        }
+    }
     /**
      * Invalidates controls recursively.
      * This method marks all controls in the group as dirty and touched if they are invalid.
@@ -20360,22 +20515,54 @@ class GenericFormBaseComponent extends BaseComponent {
     }
     /**
      * Shows form errors.
-     * This method logs form control errors to the console if debugging is enabled.
-     * @param form The form to debug.
+     * This method logs form control errors to the console recursively if debugging is enabled.
+     * @param form The form or control container to debug.
+     * @param path The current path in the form hierarchy (used for recursive logging).
      */
-    debugForm(form) {
+    debugForm(form, path = 'root') {
+        /* Check if debugging is enabled and form exists */
         if (form && this.debug) {
-            console.log('Form:', form);
-            Object.keys(form.controls).forEach(key => {
-                const controlErrors = form.controls[key].errors;
-                if (controlErrors != null) {
-                    Object.keys(controlErrors).forEach(keyError => {
-                        console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
-                    });
-                }
-            });
+            /* If at the root, log the entire form object once */
+            if (path === 'root') {
+                console.log('Form:', form);
+            }
+            /* Handle FormGroups and FormArrays which contain controls */
+            if (form instanceof FormGroup || form instanceof FormArray || form.controls) {
+                const controls = form.controls;
+                Object.keys(controls).forEach(key => {
+                    const control = controls[key];
+                    const currentPath = `${path} -> ${key}`;
+                    /* Get errors for the current control */
+                    const controlErrors = control.errors;
+                    if (controlErrors != null) {
+                        Object.keys(controlErrors).forEach(keyError => {
+                            console.log(`[DEBUG] Path: ${currentPath}, keyError: ${keyError}, value:`, controlErrors[keyError]);
+                        });
+                    }
+                    /* Recursively call debugForm for nested groups or arrays */
+                    this.debugForm(control, currentPath);
+                });
+            }
         }
     }
+    // /**
+    //  * Shows form errors.
+    //  * This method logs form control errors to the console if debugging is enabled.
+    //  * @param form The form to debug.
+    //  */
+    // protected debugForm(form?: NgForm | FormGroup | FormArray): void {
+    //     if (form && this.debug) {
+    //         console.log('Form:', form);
+    //         Object.keys(form.controls).forEach(key => {
+    //             const controlErrors: ValidationErrors | null = form.controls[key].errors;
+    //             if (controlErrors != null) {
+    //                 Object.keys(controlErrors).forEach(keyError => {
+    //                     console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
+    //                 });
+    //             }
+    //         });
+    //     }
+    // }
     /**
      * Adds toolbar menu items.
      * This method adds the 'Delete' menu item to the toolbar if the entity is deletable.
@@ -20557,6 +20744,9 @@ class GenericFormBaseComponent extends BaseComponent {
      * such as disabling form controls if the form is set to be disabled.
      */
     onAfterFormBuild() {
+        /* Emit form initialized event */
+        this.triggerFormInitialized();
+        /* Disable the form if the 'disabled' property is set */
         if (this.form && this.disabled) {
             Object.keys(this.form.controls).forEach(key => {
                 let control = this.form.controls[key];
@@ -20614,12 +20804,12 @@ class GenericFormBaseComponent extends BaseComponent {
      */
     getElementError(nativeElement) {
         /* Get parent element 'mat-form-field' */
-        var matFormField = nativeElement?.closest('.mat-form-field');
+        var matFormField = nativeElement?.closest('mat-form-field');
         if (!matFormField) {
             return undefined;
         }
         /* Get child element 'mat-error' */
-        var matErrors = matFormField.querySelectorAll('.mat-error');
+        var matErrors = matFormField.querySelectorAll('mat-error');
         if (!matErrors) {
             return undefined;
         }
@@ -20632,7 +20822,7 @@ class GenericFormBaseComponent extends BaseComponent {
         var errorsArray = Array.prototype.slice.call(matErrors)
             ?.filter((x) => x.textContent)
             ?.map((x) => x.textContent);
-        return `'${matLabel.textContent}': ${errorsArray?.join(', ')}`;
+        return `${matLabel.textContent}: ${errorsArray?.join(', ')}`;
     }
     /**
      * Responds to user-initiated keyboard events.
@@ -20661,12 +20851,14 @@ class GenericFormBaseComponent extends BaseComponent {
             this.back();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GenericFormBaseComponent, isStandalone: true, inputs: { id: "id", _item: "_item", item: "item", includes: "includes", updateIncludes: "updateIncludes", projection: "projection", query: "query", readonly: "readonly", disabled: "disabled", form: "form", fieldSets: "fieldSets" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true }, { propertyName: "input", predicate: ["focus"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericFormBaseComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: GenericFormBaseComponent, isStandalone: true, inputs: { initializeDefaultOnEmpty: "initializeDefaultOnEmpty", id: "id", _item: "_item", item: "item", includes: "includes", updateIncludes: "updateIncludes", projection: "projection", query: "query", readonly: "readonly", disabled: "disabled", form: "form", fieldSets: "fieldSets" }, outputs: { formInitialized: "formInitialized" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "matStepper", first: true, predicate: MatStepper, descendants: true }, { propertyName: "input", predicate: ["focus"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericFormBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericFormBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { initializeDefaultOnEmpty: [{
+                type: Input
+            }], id: [{
                 type: Input
             }], _item: [{
                 type: Input
@@ -20684,6 +20876,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
+            }], formInitialized: [{
+                type: Output
             }], matStepper: [{
                 type: ViewChild,
                 args: [MatStepper]
@@ -20728,10 +20922,10 @@ class GenericFormComponent extends GenericFormBaseComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.listRoute = this.addSaveAndCloseRoute;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GenericFormComponent, isStandalone: true, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: GenericFormComponent, isStandalone: true, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                 type: Input
@@ -20819,10 +21013,10 @@ class GenericReactiveFormComponent extends GenericFormBaseComponent {
         super.debugForm(form);
         console.log(this.form.getErrorSummary(false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericReactiveFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: GenericReactiveFormComponent, isStandalone: true, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericReactiveFormComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: GenericReactiveFormComponent, isStandalone: true, inputs: { form: "form" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GenericReactiveFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GenericReactiveFormComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.Type }, { type: undefined }, { type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }], propDecorators: { form: [{
                 type: Input
@@ -20841,10 +21035,10 @@ class ConfirmExitGuard {
         /* If the component implements canDeactivate, call it; otherwise, allow deactivation by default */
         return component.canDeactivate ? component.canDeactivate() : true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmExitGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmExitGuard, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmExitGuard, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmExitGuard, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmExitGuard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ConfirmExitGuard, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -21010,10 +21204,10 @@ class BaseInterceptor {
         /* Join the error messages with newlines and return the result */
         return errors.join('\n');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseInterceptor, deps: [{ token: AppSetting }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseInterceptor, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseInterceptor, deps: [{ token: AppSetting }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseInterceptor, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BaseInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseInterceptor, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: AppSetting }, { type: i2$3.MatSnackBar }] });
@@ -21072,10 +21266,10 @@ class CachingInterceptor {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CachingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CachingInterceptor, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CachingInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CachingInterceptor, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CachingInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CachingInterceptor, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -21114,10 +21308,10 @@ class LoadingScreenService {
     stopLoading() {
         this.loading = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingScreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingScreenService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoadingScreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoadingScreenService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingScreenService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoadingScreenService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -21174,10 +21368,10 @@ class LoadingScreenInterceptor {
         }
     }
     ;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingScreenInterceptor, deps: [{ token: LoadingScreenService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingScreenInterceptor });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoadingScreenInterceptor, deps: [{ token: LoadingScreenService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoadingScreenInterceptor });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingScreenInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LoadingScreenInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: LoadingScreenService }] });
 
@@ -21189,10 +21383,10 @@ class FileService extends GenericService {
     constructor() {
         super('file');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FileService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -21226,10 +21420,10 @@ class PrintService {
             this.router.navigate([{ outlets: { print: null } }]);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PrintService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PrintService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrintService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrintService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PrintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrintService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.Router }] });
@@ -21241,10 +21435,10 @@ class VdAutocompleteOptionDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdAutocompleteOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdAutocompleteOptionDirective, isStandalone: true, selector: "[vd-autocomplete-option]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdAutocompleteOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdAutocompleteOptionDirective, isStandalone: true, selector: "[vd-autocomplete-option]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdAutocompleteOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdAutocompleteOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-autocomplete-option]ng-template'
@@ -21258,10 +21452,10 @@ class VdChipDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdChipDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdChipDirective, isStandalone: true, selector: "[vd-chip]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdChipDirective, isStandalone: true, selector: "[vd-chip]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdChipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-chip]ng-template'
@@ -21859,16 +22053,16 @@ class VdChipsComponent extends AbstractMatFormField {
     log(message, ...optionalParams) {
         console.log(message, optionalParams);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdChipsComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdChipsComponent, isStandalone: true, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", customValue: "customValue", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", filters: "filters", removable: "removable", selectFirst: "selectFirst", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipsComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdChipsComponent, isStandalone: true, selector: "vd-chips", inputs: { classType: "classType", chips: "chips", endpoint: "endpoint", params: "params", projection: "projection", paginated: "paginated", customValue: "customValue", context: "context", key: "key", searchField: "searchField", searchFields: "searchFields", filters: "filters", removable: "removable", selectFirst: "selectFirst", debounce: "debounce", autocompleteCssClass: "autocompleteCssClass", suffixButtons: "suffixButtons" }, outputs: { initSelect: "initSelect", selected: "selected", cleared: "cleared", onLaunch: "launch", chipFocus: "chipFocus" }, providers: [
             { provide: MatFormFieldControl, useExisting: VdChipsComponent },
             {
                 provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
                 useValue: { overlayPanelClass: 'vd-chips-autocomplete' }
             }
-        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @for (item of dataSource?.items; track item; let first = $first) {\n        <ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" [ngForOf]=\"dataSource?.items\">\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n        </ng-template>\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5$1.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
+        ], queries: [{ propertyName: "chipTemplate", first: true, predicate: VdChipDirective, descendants: true }, { propertyName: "autocompleteOptionTemplate", first: true, predicate: VdAutocompleteOptionDirective, descendants: true }], viewQueries: [{ propertyName: "dynamicTable", first: true, predicate: VdDynamicTableComponent, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5$1.MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "parentControl", "entityObject", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "paginatorRef", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-chips', providers: [
                         { provide: MatFormFieldControl, useExisting: VdChipsComponent },
@@ -21886,7 +22080,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatIconModule,
                         MatInputModule,
                         VdDynamicTableComponent,
-                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @for (item of dataSource?.items; track item; let first = $first) {\n        <ng-template *ngIf=\"!classType && opened\" let-item let-first=\"first\" [ngForOf]=\"dataSource?.items\">\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n        </ng-template>\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"] }]
+                    ], template: "<mat-chip-grid #chipList [required]=\"required\" [disabled]=\"readonly\">\n    <!-- #region Chips -->\n    @for (chip of chips; track chip; let first = $first; let index = $index) {\n        <mat-chip-row [removable]=\"!readonly\" (removed)=\"handleRemovedEvent()\" disableRipple>\n            <span class=\"vd-chip-content\">\n                @if (!chipTemplate?.templateRef) {\n                    <span>\n                        @if (!autocompleteOptionTemplate?.templateRef) {\n                            <span>{{ chip }}</span>\n                        }\n                        @if (autocompleteOptionTemplate?.templateRef) {\n                            <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: chip }\"></ng-template>\n                        }\n                    </span>\n                }\n                @if (chipTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"chipTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ chip: chip }\"></ng-template>\n                }\n            </span>\n            @for (button of suffixButtons; track button; let first = $first) {\n                <a matChipTrailingIcon [hidden]=\"button.hide && button.hide(chips[0], context)\" (click)=\"$event.stopPropagation(); button.event && button.event(chips[0], context)\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">{{button.icon}}</mat-icon>\n                </a>\n            }\n            @if ((onLaunch.observers.length) > 0) {\n                <a matChipTrailingIcon (click)=\"$event.stopPropagation(); handleLaunchClicked()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">launch</mat-icon>\n                </a>\n            }\n            @if (!readonly) {\n                <a matChipTrailingIcon (click)=\"handleRemovedEvent()\">\n                    <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\n                </a>\n            }\n        </mat-chip-row>\n    }\n    <!-- #endregion -->\n\n    <!-- #region Search box -->\n    <input matInput [hidden]=\"value && !empty\" placeholder=\"{{placeholder}}\" (focus)=\"connect()\" [readonly]=\"readonly\" [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" [matAutocompleteConnectedTo]=\"origin\" [formControl]=\"autoCompleteChipList\" (blur)=\"customValue && addOnBlur($event)\" #filterInput />\n    <!-- #endregion -->\n\n    <!-- #region Reset button -->\n    @if ((!value || empty) && !readonly && !disabled) {\n        <a trailingIcon class=\"mat-mdc-select-arrow\" (click)=\"filterInput.value = ''\">\n            <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" focusable=\"false\" class=\"ng-tns-c184-21\">\n                <path d=\"M7 10l5 5 5-5z\" class=\"ng-tns-c184-21\"></path>\n            </svg>\n        </a>\n    }\n    <!-- #endregion -->\n</mat-chip-grid>\n\n<!-- #region Autocomplete -->\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"addChip($event.option.value, filterInput)\" class=\"{{autocompleteCssClass}}{{classType?' table-autocomplete':''}}\">\n    @if(!classType && opened)\n    {\n        @for (item of dataSource?.items; track item; let first = $first; let last = $last) {\n            <mat-option [value]=\"item\">\n                @if (!autocompleteOptionTemplate?.templateRef) {\n                    <span>{{item}}</span>\n                }\n                @if (autocompleteOptionTemplate?.templateRef) {\n                    <ng-template [ngTemplateOutlet]=\"autocompleteOptionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: item }\"></ng-template>\n                }\n            </mat-option>\n            <mat-divider *ngIf=\"!last\"></mat-divider>\n        }\n    }\n    @if (classType && opened) {\n        <mat-option hide=\"true\"></mat-option>\n        <vd-dynamic-table [dataSource]=\"dataSource\" [classType]=\"classType\" [entityObject]=\"entityObject\" [parentControl]=\"parentControl\" [context]=\"context\" [stickyHeader]=\"true\" (rowClick)=\"addChip($event, filterInput)\" matSort [sortActive]=\"sortActive||'id'\" [sortDirection]=\"sortDirection\"></vd-dynamic-table>\n    }\n    <div class=\"vd-chips-paginator\">\n        <mat-divider></mat-divider>\n        <mat-paginator [length]=\"dataSource?.total\" [pageIndex]=\"dataSource?.pageIndex\" [pageSize]=\"dataSource?.pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\" hidePageSize=\"true\"></mat-paginator>\n    </div>\n</mat-autocomplete>\n<!-- #endregion -->\n\n<div matAutocompleteOrigin #origin=\"matAutocompleteOrigin\" class=\"autocomplete-origin\"></div>", styles: [":host ::ng-deep .mat-mdc-chip-set{width:100%}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips{margin-left:0!important;margin-right:0;align-items:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip{display:flex;flex-direction:row;width:100%;padding:0 5px;justify-content:center;background-color:transparent!important;margin-right:0!important;margin-left:0!important;padding:0!important;margin:0;height:initial}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mdc-evolution-chip--disabled{opacity:.6;pointer-events:all}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action{justify-content:left}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:0}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mdc-evolution-chip__cell--trailing{margin-right:-10px;display:flex}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-mdc-chip-focus-overlay{background-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .mat-icon{cursor:pointer;font-size:1.2em;opacity:.8}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip.mat-chip-disabled{opacity:.6}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-content{-ms-flex-positive:1!important;flex-grow:1!important;font-weight:initial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:column;justify-content:center}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch{font-size:18px;position:absolute;right:4px;top:0;cursor:pointer}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip-set__chips .mat-mdc-chip .vd-chip-launch.removable{right:34px}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__action--primary:before,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__action--primary:before{border-color:transparent!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip .mdc-evolution-chip__text-label,:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip--disabled .mdc-evolution-chip__text-label{color:inherit!important}:host ::ng-deep .autocomplete-origin{position:absolute;width:calc(100% + 28px);bottom:0;height:2px;margin-left:-14px}mat-spinner{margin-top:-9px;margin-right:6px}.mat-mdc-form-field-infix{display:flex}::ng-deep .vd-chips-autocomplete .mat-mdc-autocomplete-panel{padding:0!important}::ng-deep .vd-chips-autocomplete .table-autocomplete{overflow:hidden}::ng-deep .vd-chips-autocomplete .table-autocomplete .mat-table-container{height:calc(100% - 56px)!important;max-height:100vh!important}::ng-deep .vd-chips-autocomplete .vd-chips-paginator{position:sticky;bottom:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container{padding:0}::ng-deep .vd-chips-autocomplete .vd-chips-paginator .mat-mdc-paginator .mat-mdc-paginator-container .mat-mdc-paginator-range-actions .mat-mdc-paginator-range-label{margin:0 16px 0 24px}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { dynamicTable: [{
                 type: ViewChild,
                 args: [VdDynamicTableComponent, { static: false }]
@@ -22214,8 +22408,8 @@ class VdFileInputComponent {
         this.stateChanges.complete();
         this.fm.stopMonitoring(this._elementRef.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileInputComponent, deps: [{ token: i1$1.NgControl }, { token: i2$4.FocusMonitor }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdFileInputComponent, isStandalone: true, selector: "[vd-file-input]", inputs: { accept: "accept", placeholder: "placeholder", required: "required", multiple: "multiple", disabled: "disabled", errorState: "errorState" }, outputs: { onSelect: "select", onClear: "clear" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: VdFileInputComponent }], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["fileElement"], descendants: true, static: true }, { propertyName: "_fileInputElement", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileInputComponent, deps: [{ token: i1$1.NgControl }, { token: i2$4.FocusMonitor }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdFileInputComponent, isStandalone: true, selector: "[vd-file-input]", inputs: { accept: "accept", placeholder: "placeholder", required: "required", multiple: "multiple", disabled: "disabled", errorState: "errorState" }, outputs: { onSelect: "select", onClear: "clear" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: VdFileInputComponent }], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["fileElement"], descendants: true, static: true }, { propertyName: "_fileInputElement", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: `
 		<div layout="row" flex>
 		  <input matInput #fileElement [(ngModel)]="value" (click)="fileInput.click(); $event.stopPropagation()" readonly="true" [placeholder]="placeholder" [disabled]="disabled" [required]="required">
 		  <input hidden type="file" [accept]="accept" #fileInput (change)="handleSelect($event)" />
@@ -22233,7 +22427,7 @@ class VdFileInputComponent {
 		  </div>
 		</div>`, isInline: true, styles: [".btn-suffix .mat-mdc-icon-button{position:absolute;right:-16px;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileInputComponent, decorators: [{
             type: Component,
             args: [{ selector: '[vd-file-input]', template: `
 		<div layout="row" flex>
@@ -22292,21 +22486,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class VdFileModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: VdFileModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: VdFileModule, imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatIconModule,
             MatButtonModule,
             VdFileInputComponent], exports: [VdFileInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileModule, imports: [CommonModule,
             FormsModule,
             MatInputModule,
             MatIconModule,
             MatButtonModule,
             VdFileInputComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -22385,10 +22579,10 @@ class DatePickerHeaderComponent {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatePickerHeaderComponent, deps: [{ token: i6$1.MatCalendar }, { token: i2$5.DateAdapter }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: DatePickerHeaderComponent, isStandalone: true, selector: "vd-datepicker-header", ngImport: i0, template: "<div class=\"header\">\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('year')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_double_arrow_left</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('month')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_arrow_left</mat-icon>\r\n\t</button>\r\n\t<span class=\"header-label\">{{periodLabel}}</span>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('month')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_arrow_right</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('year')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_double_arrow_right</mat-icon>\r\n\t</button>\r\n</div>", styles: [".header{display:flex;align-items:center;padding:.5em}.header-label{flex:1;height:1em;font-weight:500;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerHeaderComponent, deps: [{ token: i6$1.MatCalendar }, { token: i2$5.DateAdapter }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DatePickerHeaderComponent, isStandalone: true, selector: "vd-datepicker-header", ngImport: i0, template: "<div class=\"header\">\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('year')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_double_arrow_left</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"previousClicked('month')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_arrow_left</mat-icon>\r\n\t</button>\r\n\t<span class=\"header-label\">{{periodLabel}}</span>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('month')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_arrow_right</mat-icon>\r\n\t</button>\r\n\t<button type=\"button\" mat-icon-button (click)=\"nextClicked('year')\">\r\n\t\t<mat-icon fontSet=\"material-symbols-outlined\">keyboard_double_arrow_right</mat-icon>\r\n\t</button>\r\n</div>", styles: [".header{display:flex;align-items:center;padding:.5em}.header-label{flex:1;height:1em;font-weight:500;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DatePickerHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-datepicker-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatIconModule,
@@ -22411,10 +22605,10 @@ class VdListOptionDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdListOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdListOptionDirective, isStandalone: true, selector: "[vd-list-option]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdListOptionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdListOptionDirective, isStandalone: true, selector: "[vd-list-option]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdListOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdListOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-list-option]ng-template'
@@ -22450,10 +22644,10 @@ class VdListComponent extends AbstractSelectFormField {
     focus() {
         this.selectEl?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n  <!-- #region Options -->\r\n  @for (option of filteredOptions; track option; let first = $first) {\r\n    <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n      @if (!optionTemplate?.templateRef) {\r\n        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n      }\r\n      @if (optionTemplate?.templateRef) {\r\n        <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n      }\r\n    </mat-list-option>\r\n  }\r\n  <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdListComponent, isStandalone: true, selector: "vd-list", host: { classAttribute: "vd-list" }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdListOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelectionList, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-selection-list i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelectionList\" (selectionChange)=\"handleChange($event)\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled || readonly\" [hideSingleSelectionIndicator]=\"false\" flex>\r\n  <!-- #region Options -->\r\n  @for (option of filteredOptions; track option; let first = $first) {\r\n    <mat-list-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n      @if (!optionTemplate?.templateRef) {\r\n        <span i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n      }\r\n      @if (optionTemplate?.templateRef) {\r\n        <ng-template [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n      }\r\n    </mat-list-option>\r\n  }\r\n  <!-- #endregion -->\r\n</mat-selection-list>", styles: ["::ng-deep .vd-list{overflow:auto;max-height:100%}::ng-deep .mat-mdc-form-field-type-vd-list .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important}::ng-deep .mat-mdc-form-field-type-vd-list .mdc-text-field{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-list', host: { 'class': 'vd-list' }, providers: [{ provide: MatFormFieldControl, useExisting: VdListComponent }], imports: [
                         CommonModule,
@@ -22540,10 +22734,10 @@ class ParseDecimalDirective {
             this.control.control.markAsDirty();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ParseDecimalDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ParseDecimalDirective, isStandalone: true, selector: "[parseDecimal]", inputs: { parseDecimalEnabled: "parseDecimalEnabled" }, host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ParseDecimalDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ParseDecimalDirective, isStandalone: true, selector: "[parseDecimal]", inputs: { parseDecimalEnabled: "parseDecimalEnabled" }, host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ParseDecimalDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ParseDecimalDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[parseDecimal]'
@@ -22626,10 +22820,10 @@ class PrefixDirective {
             event.preventDefault();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PrefixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: PrefixDirective, isStandalone: true, selector: "[prefix]", inputs: { prefix: "prefix" }, host: { listeners: { "input": "onInput()", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrefixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PrefixDirective, isStandalone: true, selector: "[prefix]", inputs: { prefix: "prefix" }, host: { listeners: { "input": "onInput()", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PrefixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrefixDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[prefix]'
@@ -22644,6 +22838,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
+class RemoveWhitespaceDirective {
+    ngControl;
+    /**
+     * Optional condition to enable or disable the whitespace removal.
+     * Use as [removeWhitespace]="condition" or simply removeWhitespace.
+     */
+    IsEnabled = true;
+    /**
+     * Directive to remove all types of whitespace (spaces, tabs, newlines) from the input value.
+     * @param ngControl The Angular form control associated with the input element.
+     */
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+    }
+    /**
+     * Event handler for the input event, removing all types of whitespace from the input value.
+     * @param value The current value of the input element.
+     */
+    OnInput(value) {
+        /* If the directive is explicitly set to false, do nothing */
+        if (this.IsEnabled === false || this.IsEnabled === 'false') {
+            return;
+        }
+        /* Remove all types of whitespace (spaces, tabs, newlines) from the input value */
+        const strippedValue = value.replace(/\s+/g, '');
+        /* Only update if a change actually occurred to avoid unnecessary processing */
+        if (value !== strippedValue) {
+            /* Update the form control value without emitting an event to avoid triggering validation or other side effects */
+            if (this.ngControl?.control) {
+                /* Update the form control value without emitting an event to avoid triggering validation or other side effects */
+                this.ngControl.control.setValue(strippedValue, { emitEvent: false });
+            }
+            /* If the value accessor is available, update the view value as well to reflect the changes in the input field */
+            if (this.ngControl?.valueAccessor) {
+                this.ngControl.valueAccessor.writeValue(strippedValue);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RemoveWhitespaceDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RemoveWhitespaceDirective, isStandalone: true, selector: "[removeWhitespace]", inputs: { IsEnabled: ["removeWhitespace", "IsEnabled"] }, host: { listeners: { "input": "OnInput($event.target.value)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RemoveWhitespaceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[removeWhitespace]'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { IsEnabled: [{
+                type: Input,
+                args: ['removeWhitespace']
+            }], OnInput: [{
+                type: HostListener,
+                args: ['input', ['$event.target.value']]
+            }] } });
+
 /**
  * VdGenericFormCustomFieldDirective class
  */
@@ -22664,10 +22916,10 @@ class VdGenericFormCustomFieldDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdGenericFormCustomFieldDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdGenericFormCustomFieldDirective, isStandalone: true, selector: "[vd-generic-form-custom-field]ng-template", inputs: { row: "row", inline: "inline" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormCustomFieldDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdGenericFormCustomFieldDirective, isStandalone: true, selector: "[vd-generic-form-custom-field]ng-template", inputs: { row: "row", inline: "inline" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdGenericFormCustomFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormCustomFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-generic-form-custom-field]ng-template'
@@ -22703,6 +22955,56 @@ var FormFieldType;
     FormFieldType[FormFieldType["Custom"] = 100] = "Custom";
 })(FormFieldType || (FormFieldType = {}));
 
+class NativeElementInjectorDirective {
+    elementRef;
+    control;
+    /**
+     * Constructor
+     * @param elementRef Reference to the host DOM element
+     * @param control The Angular control associated with the element
+     */
+    constructor(elementRef, control) {
+        this.elementRef = elementRef;
+        this.control = control;
+    }
+    /**
+     * Called after the view is initialized.
+     * We inject the nativeElement into the abstract control.
+     */
+    ngAfterViewInit() {
+        this.injectElement();
+    }
+    /**
+     * Injects the native element into the control.
+     */
+    injectElement() {
+        /* Ensure the control exists (important for FormArrays) */
+        if (this.control?.control) {
+            /*
+             * Injecting nativeElement into the AbstractControl.
+             * This allows us to access it later in isFormValid via (control as any).nativeElement
+             */
+            this.control.control.nativeElement = this.elementRef.nativeElement;
+        }
+    }
+    /**
+     * Cleanup to prevent memory leaks when elements are removed from FormArrays
+     */
+    ngOnDestroy() {
+        if (this.control?.control) {
+            delete this.control.control.nativeElement;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NativeElementInjectorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: NativeElementInjectorDirective, isStandalone: true, selector: "[ngModel], [formControl], [formControlName]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NativeElementInjectorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngModel], [formControl], [formControlName]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.NgControl }] });
+
 /**
  * @class VdEditorDirective
  * @description The `VdEditorDirective` is a custom directive that attaches a `CdkPortal`
@@ -22718,10 +23020,10 @@ class VdEditorDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdEditorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdEditorDirective, isStandalone: true, selector: "[vd-editor]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdEditorDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdEditorDirective, isStandalone: true, selector: "[vd-editor]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdEditorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-editor]ng-template'
@@ -22742,10 +23044,10 @@ class VdCodeDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdCodeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdCodeDirective, isStandalone: true, selector: "[vd-code]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCodeDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdCodeDirective, isStandalone: true, selector: "[vd-code]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdCodeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCodeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-code]ng-template'
@@ -22766,10 +23068,10 @@ class VdFileDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdFileDirective, isStandalone: true, selector: "[vd-file]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdFileDirective, isStandalone: true, selector: "[vd-file]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdFileDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdFileDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-file]ng-template'
@@ -22790,10 +23092,10 @@ class VdCustomDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdCustomDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdCustomDirective, isStandalone: true, selector: "[vd-custom]ng-template", usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCustomDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdCustomDirective, isStandalone: true, selector: "[vd-custom]ng-template", usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdCustomDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdCustomDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-custom]ng-template'
@@ -23224,8 +23526,8 @@ class VdGenericFormComponent {
         /* Log the provided message and optional parameters to the console. */
         console.log(message, optionalParams);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                  </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\n                                            <div layout=\"row\" layout-align=\"start center\">\n                                                <ng-template #enumOptionIconTemplate\n                                                             [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                             let-optionIcon=\"optionIcon\"\n                                                             [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                    @if (optionIcon.svgIcon) {\n                                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                    }\n                                                    @if (optionIcon.matIcon) {\n                                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                    }\n                                                </ng-template>\n                                                <span>{{text}}</span>\n                                            </div>\n                                        </ng-template>\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\n                                            <div layout=\"row\" layout-align=\"start center\">\n                                                <ng-template #selectOptionIconTemplate\n                                                             [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                             let-optionIcon=\"optionIcon\"\n                                                             [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                    @if (optionIcon.svgIcon) {\n                                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                    }\n                                                    @if (optionIcon.matIcon) {\n                                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                    }\n                                                </ng-template>\n                                                <span>{{text}}</span>\n                                            </div>\n                                        </ng-template>\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdGenericFormComponent, isStandalone: true, selector: "vd-generic-form", inputs: { formGroup: "formGroup", classType: "classType", formDefinition: "formDefinition", fieldGroups: "fieldGroups", groupName: "groupName", fieldSets: "fieldSets", context: "context", debugValue: "debugValue", readonly: "readonly", separatorKeysCodes: "separatorKeysCodes" }, queries: [{ propertyName: "editorTemplate", first: true, predicate: VdEditorDirective, descendants: true }, { propertyName: "codeTemplate", first: true, predicate: VdCodeDirective, descendants: true }, { propertyName: "fileTemplate", first: true, predicate: VdFileDirective, descendants: true }, { propertyName: "customTemplate", first: true, predicate: VdCustomDirective, descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "customFields", first: true, predicate: ["customFields"], descendants: true }, { propertyName: "customFieldsTemplates", predicate: VdGenericFormCustomFieldDirective }], ngImport: i0, template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 
                 //--------------------
                 MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6$1.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i6$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: 
                 //--------------------
@@ -23233,9 +23535,9 @@ class VdGenericFormComponent {
                 //--------------------
                 AutofocusDirective, selector: "[autoFocus]", inputs: ["focusDelay", "selectText", "autoFocus"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "ngmodule", type: 
                 //--------------------
-                NgxColorsModule }, { kind: "component", type: i11.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i11.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+                NgxColorsModule }, { kind: "component", type: i11.NgxColorsComponent, selector: "ngx-colors" }, { kind: "directive", type: i11.NgxColorsTriggerDirective, selector: "[ngx-colors-trigger]", inputs: ["colorsAnimation", "palette", "format", "formats", "position", "hideTextInput", "hideColorPicker", "attachTo", "overlayClassName", "colorPickerControls", "acceptLabel", "cancelLabel"], outputs: ["change", "input", "slider", "close", "open"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber", "excludePrefix"] }, { kind: "directive", type: ParseDecimalDirective, selector: "[parseDecimal]", inputs: ["parseDecimalEnabled"] }, { kind: "directive", type: PrefixDirective, selector: "[prefix]", inputs: ["prefix"] }, { kind: "directive", type: RemoveWhitespaceDirective, selector: "[removeWhitespace]", inputs: ["removeWhitespace"] }, { kind: "directive", type: NativeElementInjectorDirective, selector: "[ngModel], [formControl], [formControlName]" }, { kind: "pipe", type: i3$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdGenericFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdGenericFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-generic-form', imports: [
                         CommonModule,
@@ -23269,8 +23571,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgxColorsModule,
                         OnlyNumberDirective,
                         ParseDecimalDirective,
-                        PrefixDirective
-                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                  </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\n                                            <div layout=\"row\" layout-align=\"start center\">\n                                                <ng-template #enumOptionIconTemplate\n                                                             [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                             let-optionIcon=\"optionIcon\"\n                                                             [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                    @if (optionIcon.svgIcon) {\n                                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                    }\n                                                    @if (optionIcon.matIcon) {\n                                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                    }\n                                                </ng-template>\n                                                <span>{{text}}</span>\n                                            </div>\n                                        </ng-template>\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        <ng-template vd-select-option let-option=\"option\" let-text=\"text\" *ngIf=\"field.optionIcon && !field.optionTemplate\">\n                                            <div layout=\"row\" layout-align=\"start center\">\n                                                <ng-template #selectOptionIconTemplate\n                                                             [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                             let-optionIcon=\"optionIcon\"\n                                                             [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                    @if (optionIcon.svgIcon) {\n                                                        <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                    }\n                                                    @if (optionIcon.matIcon) {\n                                                        <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                    }\n                                                </ng-template>\n                                                <span>{{text}}</span>\n                                            </div>\n                                        </ng-template>\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
+                        PrefixDirective,
+                        RemoveWhitespaceDirective,
+                        NativeElementInjectorDirective
+                    ], template: "@if (formGroup && fieldRows) {\n    <div [formGroup]=\"formGroup!\">\n        <!-- #region Fields -->\n        @for (fields of fieldRows; track fields; let i = $index) {\n            <div layout-gt-sm=\"row\" layout=\"column\">\n                @for (field of fields; track field) {\n                    @if (!field.hidden && !(field.hide && field.hide(formValue, formGroup, context))) {\n                        @switch (field.type) {\n                            <!-- #region Text input -->\n                            @case (FormFieldType.Text) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input matInput\n                                           [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\"\n                                           [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [autoFocus]=\"((field.focus  | func:formValue:formGroup:context)??false)\"\n                                           [selectText]=\"((field.selectText  | func:formValue:formGroup:context)??false)\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           parseDecimal\n                                           [parseDecimalEnabled]=\"(field.parseDecimal??false)\"\n                                           [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Textarea -->\n                            @case (FormFieldType.TextArea) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <textarea matInput\n                                              [formControlName]=\"field.name!\"\n                                              rows=\"field.rows||2\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                              [removeWhitespace]=\"(field.removeWhitespace??false)\"\n                                              (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    </textarea>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n\n                            <!-- #region Enum -->\n                            @case (FormFieldType.Enum) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [enum]=\"field.enumType\"\n                                               [enumMetadata]=\"field.enumMetadata\"\n                                               [enumFilter]=\"field.enumFilter | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [multiple]=\"field.multiple\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               [context]=\"context\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #enumOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"enumOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\"\n                                                        mat-icon-button\n                                                        (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdSelect -->\n                            @case (FormFieldType.VdSelect) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-select [formControlName]=\"field.name!\"\n                                               [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                               [params]=\"field.params??{} | func:formValue:formGroup:context\"\n                                               [projection]=\"field.projection\" [mapper]=\"field.mapper\"\n                                               [compareWith]=\"field.compareWith\"\n                                               [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                               [optionValueProperty]=\"field.optionValueProperty\"\n                                               [optionTextProperty]=\"field.optionTextProperty\"\n                                               [defaultOption]=\"field.defaultOption??true\"\n                                               [matIconKey]=\"field.optionMatIconProperty\"\n                                               [svgIconKey]=\"field.optionSvgIconProperty\"\n                                               [fontSet]=\"field.optionIconFontSet\"\n                                               [multiple]=\"field.multiple\"\n                                               [selectFirst]=\"field.selectFirst\"\n                                               [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                               [triggerCssClass]=\"field.triggerCssClass\"\n                                               [triggerMode]=\"field.triggerMode\"\n                                               (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                               (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                               layout=\"row\"\n                                               flex>\n                                        @if (field.triggerTemplate; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <span [innerHTML]=\"field.triggerTemplate(trigger, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if (field.triggerMapper && field.multiple && field.triggerMode == 'chip'; as trigger) {\n                                            <ng-template vd-select-trigger let-trigger=\"trigger\">\n                                                <mat-chip-set>\n                                                    @for (item of trigger; track item) {\n                                                        <mat-chip [color]=\"field.chipColor\" [color]=\"field.chipColor\" highlighted selected>\n                                                            <span [innerHTML]=\"field.triggerMapper(item, formValue, formGroup, context)\"></span>\n                                                        </mat-chip>\n                                                    }\n                                                </mat-chip-set>\n                                            </ng-template>\n                                        }\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-select-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                        @if(field.optionIcon && !field.optionTemplate){\n                                            <ng-template vd-select-option let-option=\"option\" let-text=\"text\">\n                                                <div layout=\"row\" layout-align=\"start center\">\n                                                    <ng-template #selectOptionIconTemplate\n                                                                 [ngTemplateOutlet]=\"selectOptionIconTemplate\"\n                                                                 let-optionIcon=\"optionIcon\"\n                                                                 [ngTemplateOutletContext]=\"{ optionIcon: field.optionIcon(option, formValue, formGroup, context) }\">\n                                                        @if (optionIcon.svgIcon) {\n                                                            <mat-icon [svgIcon]=\"optionIcon.svgIcon\" [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\"></mat-icon>\n                                                        }\n                                                        @if (optionIcon.matIcon) {\n                                                            <mat-icon [fontSet]=\"optionIcon.fontSet || 'material-symbols-outlined'\" [ngStyle]=\"{ color: optionIcon.iconColor??'' }\">{{optionIcon.matIcon}}</mat-icon>\n                                                        }\n                                                    </ng-template>\n                                                    <span>{{text}}</span>\n                                                </div>\n                                            </ng-template>\n                                        }\n                                    </vd-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdList -->\n                            @case (FormFieldType.VdList) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-list\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-list [formControlName]=\"field.name!\"\n                                             [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                             [params]=\"field.params ??{} | func:formValue:formGroup:context\"\n                                             [projection]=\"field.projection\"\n                                             [mapper]=\"field.mapper\"\n                                             [compareWith]=\"field.compareWith\"\n                                             [loadData]=\"field.fetchCondition | func:formValue:formGroup:context\"\n                                             [optionValueProperty]=\"field.optionValueProperty\"\n                                             [optionTextProperty]=\"field.optionTextProperty\"\n                                             [multiple]=\"field.multiple\"\n                                             [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                             (itemSelected)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                             (itemChange)=\"field.itemChange && field.itemChange($event, formValue, formGroup, context);\"\n                                             [style.max-width]=\"field.maxWidth\"\n                                             [style.max-height]=\"field.maxHeight\"\n                                             flex>\n                                        @if (field.optionTemplate; as option) {\n                                            <ng-template vd-list-option let-option=\"option\">\n                                                <span [outerHTML]=\"field.optionTemplate(option, formValue, formGroup, context)\"></span>\n                                            </ng-template>\n                                        }\n                                    </vd-list>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Chips -->\n                            @case (FormFieldType.Chips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-chip-grid #chipList [formControlName]=\"field.name!\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        @for (chip of $any(formGroup.controls[field.name!])?.value; track chip) {\n                                            <mat-chip-row\n                                                          (removed)=\"removeChip(field, chip)\"\n                                                          [color]=\"field.chipColor\"\n                                                          selectable=\"true\"\n                                                          highlighted\n                                                          selected>\n                                                <span>{{chip}}</span>\n                                                <button matChipRemove>\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                                                </button>\n                                            </mat-chip-row>\n                                        }\n                                        <input [placeholder]=\"$any(field.label)\"\n                                               #chipInput\n                                               [matChipInputFor]=\"chipList\"\n                                               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                                               [matAutocomplete]=\"chipAutocomplete\"\n                                               (input)=\"filterAutocomplete(field, chipInput)\"\n                                               (matChipInputTokenEnd)=\"addChip(field, $event)\"\n                                               (paste)=\"onPasteChips(field, $event)\"\n                                               autocomplete=\"off\">\n                                    </mat-chip-grid>\n                                    <mat-autocomplete autoActiveFirstOption #chipAutocomplete=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\" (optionSelected)=\"autocompleteValueSelected(field, $event, chipInput)\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region VdChips -->\n                            @case (FormFieldType.VdChips) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <vd-chips #vdChip\n                                              [formControlName]=\"field.name!\"\n                                              [endpoint]=\"field.endpoint??'' | func:formValue:formGroup:context\"\n                                              [params]=\"field.params || {} | func:formValue:formGroup:context\"\n                                              [searchField]=\"field.searchField\"\n                                              [searchFields]=\"field.searchFields\"\n                                              [filters]=\"field.filters\"\n                                              [selectFirst]=\"field.selectFirst\"\n                                              [classType]=\"field.classType\"\n                                              [projection]=\"field.projection\"\n                                              [key]=\"field.optionValueProperty\"\n                                              [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                              [removable]=\"!field.clear\"\n                                              [context]=\"context\"\n                                              [suffixButtons]=\"field.suffixButtons\"\n                                              [autocompleteCssClass]=\"field.autocompleteCssClass\"\n                                              (initSelect)=\"field.itemSelect && field.itemSelect($event, formValue, formGroup, context);\"\n                                              (selected)=\"!field.itemChange ? $event.callback(true) : $event.callback(field.itemChange($event.value, formValue, formGroup, context) !== false)\"\n                                              (cleared)=\"field.clear && field.clear(formValue, formGroup, context);\"\n                                              [customValue]=\"field.customValue\"\n                                              layout=\"row\"\n                                              flex>\n                                        @if (field.chipTemplate; as chip) {\n                                            <ng-template vd-chip let-chip=\"chip\">\n                                                <div [outerHTML]=\"field.chipTemplate(chip, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                        @if (field.autocompleteTemplate; as option) {\n                                            <ng-template vd-autocomplete-option let-option=\"option\">\n                                                <div [outerHTML]=\"field.autocompleteTemplate(option, formValue, formGroup, context)\"></div>\n                                            </ng-template>\n                                        }\n                                    </vd-chips>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @if (vdChip.emptyResult) {\n                                        <mat-hint class=\"tc-red-400\" i18n=\"@@noResultsFound\">No results were found.</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Select -->\n                            @case (FormFieldType.Select) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <mat-select [formControlName]=\"field.name!\"\n                                                [multiple]=\"field.multiple\"\n                                                [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                                flex>\n                                        @for (option of $any(field.options); track option) {\n                                            <mat-option [value]=\"option.id\">{{option.name}}</mat-option>\n                                        }\n                                    </mat-select>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Autocomplete -->\n                            @case (FormFieldType.Autocomplete) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input type=\"text\"\n                                           matInput\n                                           [formControlName]=\"field.name!\"\n                                           [min]=\"field.min\"\n                                           [max]=\"field.max\"\n                                           [matAutocomplete]=\"auto\"\n                                           (input)=\"filterAutocomplete(field, autocompleteInput)\"\n                                           autocomplete=\"off\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [prefix]=\"field.prefix | func:formValue:formGroup:context\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                           #autocompleteInput>\n                                    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [class]=\"field.autocompleteCssClass\">\n                                        @for (option of autocompleteFilteredOptions[field.name!]; track option) {\n                                            <mat-option [value]=\"option.id\">\n                                                {{option.name}}\n                                            </mat-option>\n                                        }\n                                    </mat-autocomplete>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Date -->\n                            @case (FormFieldType.Date) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <!-- Row container inside one mat-form-field -->\n                                    <div flex layout=\"row\" layout-align=\"start center\" [class]=\"{'has-time': field.showTime}\">\n                                        <!-- Date input -->\n                                        <input matInput\n                                               [formControlName]=\"field.name!\"\n                                               [min]=\"field.min\"\n                                               [max]=\"field.max\"\n                                               autocomplete=\"off\"\n                                               [matDatepicker]=\"datePicker\"\n                                               [matDatepickerFilter]=\"field.dateFilter\"\n                                               [readonly]=\"readonly || field.forceSelect || (field.readonly && field.readonly(formValue, formGroup, context))\"\n                                               (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                        <!-- Time display -->\n                                        @if(field.showTime) {\n                                            <input matInput [value]=\"formGroup.get(field.name!)?.value | date:field.timeFormat\" readonly>\n                                        }\n                                    </div>\n                                    <mat-datepicker-toggle matSuffix [for]=\"datePicker\"></mat-datepicker-toggle>\n                                    <mat-datepicker #datePicker [disabled]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\" (monthSelected)=\"handleDatePickerFilterAsync(datePicker, field, $event )\" (opened)=\"handleDatePickerOpened(datePicker, field)\" [calendarHeaderComponent]=\"datePickerHeaderComponent\"></mat-datepicker>\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Calendar -->\n                            @case (FormFieldType.Calendar) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" floatLabel=\"always\" class=\"form-field-type-calendar\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input input=\"hidden\" hidden matInput [formControlName]=\"field.name!\">\n                                    <mat-calendar #calendar\n                                                  [selected]=\"formGroup.get(field.name!)?.value\"\n                                                  (selectedChange)=\"formGroup.get(field.name!)?.setValue($event);\"\n                                                  (monthSelected)=\"handleCalendarFilterAsync(calendar, field, $event )\"\n                                                  [headerComponent]=\"datePickerHeaderComponent\"\n                                                  (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\"\n                                                  style=\"width: 100%;\"></mat-calendar>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Color input -->\n                            @case (FormFieldType.Color) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" [class]=\"field.cssClass\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <input [type]=\"field.inputType ?? 'text'\"\n                                           [minlength]=\"field.minLength | func:formValue:formGroup:context\"\n                                           [maxlength]=\"field.maxLength | func:formValue:formGroup:context\"\n                                           [min]=\"field.min\" [max]=\"field.max\" matInput [formControlName]=\"field.name!\"\n                                           [readonly]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                           [pattern]=\"((field.pattern  | func:formValue:formGroup:context)??'')\"\n                                           [onlyNumber]=\"(field.numbersOnly??false)\"\n                                           (keydown)=\"field.keydown && field.keydown($event, formValue, formGroup, context)\">\n                                    <ngx-colors matSuffix ngx-colors-trigger [formControlName]=\"field.name!\" [hideTextInput]=\"true\" (close)=\"this.formGroup.get(field.name!)?.setValue($event)\" format=\"hex\" class=\"color-picker\"></ngx-colors>\n                                    @for (suffixButton of field.suffixButtons; track suffixButton) {\n                                        <ng-container matSuffix>\n                                            @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                                                <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                                                    <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                                                </button>\n                                            }\n                                        </ng-container>\n                                    }\n                                    @if (field.hint) {\n                                        <mat-hint>{{field.hint}}</mat-hint>\n                                    }\n                                    @for (errorMessage of $any($any(formGroup.controls[field.name!]))['errorMessages']; track errorMessage) {\n                                        <mat-error>{{errorMessage}}</mat-error>\n                                    }\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Checkbox -->\n                            @case (FormFieldType.Checkbox) {\n                                <div [attr.flex]=\"field.flex||0\" class=\"mat-checkbox-wrap\" [class]=\"field.cssClass\">\n                                    <mat-checkbox [formControlName]=\"field.name!\"\n                                                  [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\">\n                                        {{field.label}}\n                                    </mat-checkbox>\n                                    @for (errorMessage of $any(formGroup.controls[field.name!])['errorMessages']; track errorMessage) {\n                                        <mat-error layout-margin>{{errorMessage}}</mat-error>\n                                    }\n                                </div>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Editor -->\n                            @case (FormFieldType.Editor) {\n                                @if (editorTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"editorTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Code -->\n                            @case (FormFieldType.Code) {\n                                @if (codeTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"codeTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                            <!-- #region File -->\n                            @case (FormFieldType.File) {\n                                <mat-form-field [attr.flex]=\"field.flex||0\" layout-margin>\n                                    <mat-label>{{field.label}}</mat-label>\n                                    <div vd-file-input\n                                         [formControlName]=\"field.name!\"\n                                         (select)=\"field.change && field.change(field, $event, formGroup, context)\"\n                                         [accept]=\"field.fileExtensions\" [disableControl]=\"(readonly || (field.readonly && field.readonly(formValue, formGroup, context)))??false\"\n                                         flex>\n                                    </div>\n                                </mat-form-field>\n                            }\n                            <!-- #endregion -->\n                            <!-- #region Custom -->\n                            @case (FormFieldType.Custom) {\n                                @if (customTemplate?.templateRef!) {\n                                    <ng-template [ngTemplateOutlet]=\"customTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ field: field, formGroup: formGroup }\"></ng-template>\n                                }\n                            }\n                            <!-- #endregion -->\n                        }\n                    }\n                }\n                <!-- #region Template for custom fields -->\n                @for (customField of customFieldsTemplates; track customField) {\n                    @if (customField?.templateRef && customField.row == fields[0]?.row && customField.inline) {\n                        <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                    }\n                }\n                <!-- #endregion -->\n            </div>\n            <!-- #region Template for custom fields -->\n            @if (customFields) {\n                <ng-container [ngTemplateOutlet]=\"customFields\" [ngTemplateOutletContext]=\"{formGroup: formGroup, row: fields[0].row}\"></ng-container>\n            }\n            @for (customField of customFieldsTemplates; track customField) {\n                @if (customField?.templateRef && customField.row == (((fields[0]?.row | func:formValue:formGroup:context) ??0)+1) && !customField.inline) {\n                    <ng-template [ngTemplateOutlet]=\"customField?.templateRef!\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-template>\n                }\n            }\n            <!-- #endregion -->\n        }\n        <!-- #endregion -->\n        <!-- #region Form bottom -->\n        @if (bottom) {\n            <ng-container [ngTemplateOutlet]=\"bottom\" [ngTemplateOutletContext]=\"{formGroup: formGroup}\"></ng-container>\n        }\n        <!-- #endregion -->\n        <!-- #region Template for suffix buttons -->\n        <ng-template #suffixButtons let-field>\n            @for (suffixButton of field.suffixButtons; track suffixButton) {\n                <ng-container matSuffix>\n                    @if (!suffixButton.hide || !suffixButton.hide(formValue, context)) {\n                        <button type=\"button\" mat-icon-button (click)=\"suffixButton.event && suffixButton.event(formValue, context)\">\n                            <mat-icon fontSet=\"material-symbols-outlined\">{{suffixButton.icon}}</mat-icon>\n                        </button>\n                    }\n                </ng-container>\n            }\n        </ng-template>\n        <!-- #endregion -->\n        <!-- #region Debug value -->\n        @if (debugValue) {\n            <code>\n        <pre>{{formValue | json}}</pre>\n      </code>\n        }\n        <!-- #endregion -->\n    </div>\n}", styles: [".mat-checkbox-wrap mat-error{transform:translate(36px,-20px);max-width:93%;font-size:var(--mat-typography-caption-font-size, 12px)}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix .color-picker{width:40px;display:block}::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .has-time input:first-child{width:84px;max-width:inherit;min-width:84px}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-form-field-infix{padding-top:7px!important;padding-bottom:7px!important}::ng-deep .mat-mdc-form-field-type-mat-chip-grid .mat-mdc-chip{padding-top:0!important;padding-bottom:0!important;margin-top:2px!important;margin-bottom:2px!important;margin-left:4px!important}\n"] }]
         }], propDecorators: { formGroup: [{
                 type: Input
             }], classType: [{
@@ -23441,10 +23745,10 @@ class MatFormFieldEditorDirective {
             this.editorElement.focus();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFormFieldEditorDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2$5.ErrorStateMatcher }, { token: NG_VALUE_ACCESSOR, self: true }, { token: i3$3.Platform }, { token: i4$1.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MatFormFieldEditorDirective, isStandalone: true, selector: "[tinyMatFormControl]", inputs: { errorStateMatcher: "errorStateMatcher", disabled: "disabled", id: "id", placeholder: "placeholder", required: "required", value: "value" }, outputs: { editorChange: "editorChange" }, host: { listeners: { "onInit": "onEditorInit($event)" }, properties: { "attr.id": "id", "attr.aria-describedby": "ariaDescribedby || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatFormFieldEditorDirective }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldEditorDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.NgForm, optional: true }, { token: i1$1.FormGroupDirective, optional: true }, { token: i2$5.ErrorStateMatcher }, { token: NG_VALUE_ACCESSOR, self: true }, { token: i3$3.Platform }, { token: i4$1.AutofillMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: MatFormFieldEditorDirective, isStandalone: true, selector: "[tinyMatFormControl]", inputs: { errorStateMatcher: "errorStateMatcher", disabled: "disabled", id: "id", placeholder: "placeholder", required: "required", value: "value" }, outputs: { editorChange: "editorChange" }, host: { listeners: { "onInit": "onEditorInit($event)" }, properties: { "attr.id": "id", "attr.aria-describedby": "ariaDescribedby || null", "attr.aria-invalid": "errorState", "attr.aria-required": "required.toString()" } }, providers: [{ provide: MatFormFieldControl, useExisting: MatFormFieldEditorDirective }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFormFieldEditorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tinyMatFormControl]',
@@ -23506,10 +23810,10 @@ class MatFormFieldReadonlyDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i7.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MatFormFieldReadonlyDirective, isStandalone: true, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldReadonlyDirective, deps: [{ token: i7.MatFormField }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: MatFormFieldReadonlyDirective, isStandalone: true, selector: "mat-form-field", host: { properties: { "class.mat-form-field-readonly": "isReadonlyInput()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MatFormFieldReadonlyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mat-form-field',
@@ -23902,6 +24206,19 @@ class FormFieldDefinition {
      * @param ctx The context of the generic form component.
      */
     prefix;
+    /**
+     * Suffix text displayed after the input field.
+     * Can be a string or a function that returns a string.
+     * @param x The entity associated with the field.
+     * @param f The FormGroup containing this field.
+     * @param ctx The context of the generic form component.
+     */
+    suffix;
+    /**
+     * Flag indicating whether whitespace should be removed from the input value.
+     * Defaults to false.
+     */
+    removeWhitespace = false;
     /**
      * Projection specification for data retrieval.
      * Can be a string or an array of strings.
@@ -24286,10 +24603,10 @@ class ValueAccessorBase extends MatFormFieldControl {
     ngOnDestroy() {
         this.stateChanges.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ValueAccessorBase, isStandalone: true, host: { properties: { "attr.aria-describedby": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValueAccessorBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ValueAccessorBase, isStandalone: true, host: { properties: { "attr.aria-describedby": "this.describedBy" } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ValueAccessorBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValueAccessorBase, decorators: [{
             type: Directive
         }], propDecorators: { describedBy: [{
                 type: HostBinding,
@@ -24309,10 +24626,10 @@ class FieldFuncPipe {
             console.log('args', args);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldFuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: FieldFuncPipe, isStandalone: true, name: "fieldFunc" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldFuncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FieldFuncPipe, isStandalone: true, name: "fieldFunc" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FieldFuncPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldFuncPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fieldFunc'
@@ -24343,10 +24660,10 @@ class GroupFilterPipe {
             return true;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GroupFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: GroupFilterPipe, isStandalone: true, name: "groupFilter" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GroupFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: GroupFilterPipe, isStandalone: true, name: "groupFilter" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: GroupFilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: GroupFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'groupFilter'
@@ -24364,10 +24681,10 @@ class EmptyStringResetDirective {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStringResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: EmptyStringResetDirective, isStandalone: true, selector: "[ngModel],[formControlName],[formControl]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EmptyStringResetDirective), multi: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyStringResetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: EmptyStringResetDirective, isStandalone: true, selector: "[ngModel],[formControlName],[formControl]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EmptyStringResetDirective), multi: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EmptyStringResetDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EmptyStringResetDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngModel],[formControlName],[formControl]',
@@ -24424,10 +24741,10 @@ class EqualValidator {
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EqualValidator, deps: [{ token: 'validateEqual', attribute: true }, { token: 'reverse', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: EqualValidator, isStandalone: true, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EqualValidator, deps: [{ token: 'validateEqual', attribute: true }, { token: 'reverse', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: EqualValidator, isStandalone: true, selector: "[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]", providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => EqualValidator), multi: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EqualValidator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: EqualValidator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
@@ -24441,45 +24758,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     args: ['reverse']
                 }] }] });
 
-class NativeElementInjectorDirective {
-    elementRef;
-    control;
-    model;
-    /**
-     * Constructor
-     * @param elementRef
-     * @param control
-     * @param model
-     */
-    constructor(elementRef, control, model) {
-        this.elementRef = elementRef;
-        this.control = control;
-        this.model = model;
-    }
-    /**
-     * Called after the constructor, initializing input properties, and the first call to ngOnChanges.
-     * Add 'implements OnInit' to the class.
-     */
-    ngOnInit() {
-        if (!!this.model) {
-            this.model.control.nativeElement = this.elementRef.nativeElement;
-        }
-        else if (this.control?.control) {
-            this.control.control.nativeElement = this.elementRef.nativeElement;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NativeElementInjectorDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl }, { token: i1$1.NgModel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: NativeElementInjectorDirective, isStandalone: true, selector: "[ngModel], [formControl], [formControlName]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NativeElementInjectorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngModel], [formControl], [formControlName]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.NgControl }, { type: i1$1.NgModel, decorators: [{
-                    type: Optional
-                }] }] });
-
 class UniqueValidatorDirective {
     http;
     unique;
@@ -24539,10 +24817,10 @@ class UniqueValidatorDirective {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UniqueValidatorDirective, deps: [{ token: i1$6.HttpClient }, { token: 'unique', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: UniqueValidatorDirective, isStandalone: true, selector: "[unique]", inputs: { uniqueProperty: "uniqueProperty", uniqueId: "uniqueId", uniqueParams: "uniqueParams", invert: "invert" }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueValidatorDirective, multi: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UniqueValidatorDirective, deps: [{ token: i1$6.HttpClient }, { token: 'unique', attribute: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: UniqueValidatorDirective, isStandalone: true, selector: "[unique]", inputs: { uniqueProperty: "uniqueProperty", uniqueId: "uniqueId", uniqueParams: "uniqueParams", invert: "invert" }, providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueValidatorDirective, multi: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UniqueValidatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UniqueValidatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[unique]',
@@ -24691,10 +24969,10 @@ class VdMenuComponent {
     itemMouseLeave($event, item) {
         this.onMouseLeave.emit({ event: $event, item: item });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMenuComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n  <mat-accordion displayMode=\"flat\">\r\n    @for (item of items; track item; let last = $last) {\r\n      @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n        <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n          (click)=\"$event.stopPropagation();\"\r\n          [disabled]=\"!mobile\"\r\n          [hideToggle]=\"!mobile || !item?.items?.length\"\r\n          [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n          (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n          (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n          [routerLinkActive]=\"['active']\"\r\n          [routerLinkActiveOptions]=\"{exact:false}\">\r\n          <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n            <mat-panel-title>\r\n              @if (!avatar) {\r\n                <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n              }\r\n              @if (!avatar && item.title) {\r\n                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n              }\r\n              @if (avatar) {\r\n                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n              }\r\n              @if (avatar) {\r\n                <h3>{{item.title}}</h3>\r\n              }\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-nav-list>\r\n            @for (subItem of item.items; track subItem; let subLast = $last) {\r\n              <ng-template let-subItem let-subLast=\"last\" [ngForOf]=\"item.items\" class=\"sub-menu\">\r\n                @if (subItem.enabled) {\r\n                  <a mat-list-item [style.backgroundColor]=\"subItem.backgroundColor\" [routerLink]=\"subItem.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\" [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\" [fragment]=\"subItem.fragment\" (click)=\"itemClicked($event, subItem)\">\r\n                    @if (!avatar) {\r\n                      <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                    }\r\n                    @if (!avatar && subItem.title) {\r\n                      <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                    }\r\n                    @if (avatar) {\r\n                      <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                    }\r\n                    @if (avatar) {\r\n                      <h3>{{subItem.title}}</h3>\r\n                    }\r\n                    @if (avatar && subItem.description) {\r\n                      <p>{{subItem.description}}</p>\r\n                    }\r\n                  </a>\r\n                }\r\n                @if (subItem.divider && !avatar) {\r\n                  <mat-divider></mat-divider>\r\n                }\r\n                @if (!subItem.divider && avatar && !subLast) {\r\n                  <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n              </ng-template>\r\n            }\r\n          </mat-nav-list>\r\n        </mat-expansion-panel>\r\n      } @else {\r\n        @if (item.enabled) {\r\n          <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n            @if (!avatar) {\r\n              <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\" matListItemIcon>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n            }\r\n            @if (!avatar && item.title) {\r\n              <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n            }\r\n            @if (avatar) {\r\n              <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n            }\r\n            @if (avatar) {\r\n              <h3 matLine>{{item.title}}</h3>\r\n            }\r\n            @if (avatar && item.description) {\r\n              <p matLine>{{item.description}}</p>\r\n            }\r\n          </a>\r\n        }\r\n        @if (item.divider && !avatar) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (!item.divider && avatar && !last) {\r\n          <mat-divider [inset]=\"avatar\"></mat-divider>\r\n        }\r\n      }\r\n    }\r\n  </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMenuComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdMenuComponent, isStandalone: true, selector: "vd-menu", inputs: { items: "items", activeExact: "activeExact", fontSet: "fontSet", avatar: "avatar", mobile: "mobile" }, outputs: { onClick: "click", onMouseEnter: "over", onMouseLeave: "out" }, ngImport: i0, template: "<mat-nav-list>\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\"\r\n                                                  [style.color]=\"subItem.iconColor\"\r\n                                                  [matBadge]=\"subItem.badge ? subItem.badge() : null\"\r\n                                                  [matBadgeHidden]=\"!subItem.badge || subItem.badge() === 0\"\r\n                                                  aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n                                </a>\r\n                            }\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                        }\r\n                    </mat-nav-list>\r\n                </mat-expansion-panel>\r\n            } @else {\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                      [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n                    </a>\r\n                }\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n            }\r\n        }\r\n    </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i4$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i4$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i4$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: VdDelayedHoverDirective, selector: "[delayedHover]", inputs: ["duration"], outputs: ["delayedHover"], exportAs: ["hesitation"] }, { kind: "pipe", type: FuncPipe, name: "func" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-menu', imports: [
                         CommonModule,
@@ -24703,9 +24981,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatExpansionModule,
                         MatIconModule,
                         MatDividerModule,
+                        MatBadgeModule,
                         VdDelayedHoverDirective,
                         FuncPipe
-                    ], template: "<mat-nav-list>\r\n  <mat-accordion displayMode=\"flat\">\r\n    @for (item of items; track item; let last = $last) {\r\n      @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n        <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n          (click)=\"$event.stopPropagation();\"\r\n          [disabled]=\"!mobile\"\r\n          [hideToggle]=\"!mobile || !item?.items?.length\"\r\n          [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n          (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n          (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n          [routerLinkActive]=\"['active']\"\r\n          [routerLinkActiveOptions]=\"{exact:false}\">\r\n          <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n            <mat-panel-title>\r\n              @if (!avatar) {\r\n                <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n              }\r\n              @if (!avatar && item.title) {\r\n                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n              }\r\n              @if (avatar) {\r\n                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n              }\r\n              @if (avatar) {\r\n                <h3>{{item.title}}</h3>\r\n              }\r\n            </mat-panel-title>\r\n          </mat-expansion-panel-header>\r\n          <mat-nav-list>\r\n            @for (subItem of item.items; track subItem; let subLast = $last) {\r\n              <ng-template let-subItem let-subLast=\"last\" [ngForOf]=\"item.items\" class=\"sub-menu\">\r\n                @if (subItem.enabled) {\r\n                  <a mat-list-item [style.backgroundColor]=\"subItem.backgroundColor\" [routerLink]=\"subItem.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\" [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\" [fragment]=\"subItem.fragment\" (click)=\"itemClicked($event, subItem)\">\r\n                    @if (!avatar) {\r\n                      <mat-icon [fontSet]=\"fontSet\" [style.color]=\"subItem.iconColor\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                    }\r\n                    @if (!avatar && subItem.title) {\r\n                      <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                    }\r\n                    @if (avatar) {\r\n                      <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                    }\r\n                    @if (avatar) {\r\n                      <h3>{{subItem.title}}</h3>\r\n                    }\r\n                    @if (avatar && subItem.description) {\r\n                      <p>{{subItem.description}}</p>\r\n                    }\r\n                  </a>\r\n                }\r\n                @if (subItem.divider && !avatar) {\r\n                  <mat-divider></mat-divider>\r\n                }\r\n                @if (!subItem.divider && avatar && !subLast) {\r\n                  <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n              </ng-template>\r\n            }\r\n          </mat-nav-list>\r\n        </mat-expansion-panel>\r\n      } @else {\r\n        @if (item.enabled) {\r\n          <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n            @if (!avatar) {\r\n              <mat-icon [fontSet]=\"fontSet\" [style.color]=\"item.iconColor\" matListItemIcon>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n            }\r\n            @if (!avatar && item.title) {\r\n              <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n            }\r\n            @if (avatar) {\r\n              <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n            }\r\n            @if (avatar) {\r\n              <h3 matLine>{{item.title}}</h3>\r\n            }\r\n            @if (avatar && item.description) {\r\n              <p matLine>{{item.description}}</p>\r\n            }\r\n          </a>\r\n        }\r\n        @if (item.divider && !avatar) {\r\n          <mat-divider></mat-divider>\r\n        }\r\n        @if (!item.divider && avatar && !last) {\r\n          <mat-divider [inset]=\"avatar\"></mat-divider>\r\n        }\r\n      }\r\n    }\r\n  </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"] }]
+                    ], template: "<mat-nav-list>\r\n    <mat-accordion displayMode=\"flat\">\r\n        @for (item of items; track item; let last = $last) {\r\n            @if ((item?.items?.length ?? 0) > 0 && mobile) {\r\n                <mat-expansion-panel class=\"mat-elevation-z raw\"\r\n                                     (click)=\"$event.stopPropagation();\"\r\n                                     [disabled]=\"!mobile\"\r\n                                     [hideToggle]=\"!mobile || !item?.items?.length\"\r\n                                     [ngClass]=\"{'icon-only': !item.title, 'mobile': mobile}\"\r\n                                     (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\"\r\n                                     (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\"\r\n                                     [routerLinkActive]=\"['active']\"\r\n                                     [routerLinkActiveOptions]=\"{exact:false}\">\r\n                    <mat-expansion-panel-header [expandedHeight]=\"'48px'\">\r\n                        <mat-panel-title>\r\n                            @if (!avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\"\r\n                                          [style.color]=\"item.iconColor\"\r\n                                          [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                          [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                          aria-hidden=\"false\">\r\n                                    {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                                </mat-icon>\r\n                            }\r\n                            @if (!avatar && item.title) {\r\n                                <span [style.color]=\"item.textColor\">{{item.title}}</span>\r\n                            }\r\n                            @if (avatar) {\r\n                                <mat-icon [fontSet]=\"fontSet\">{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                            }\r\n                            @if (avatar) {\r\n                                <h3>{{item.title}}</h3>\r\n                            }\r\n                        </mat-panel-title>\r\n                    </mat-expansion-panel-header>\r\n                    <mat-nav-list>\r\n                        @for (subItem of item.items; track subItem; let subLast = $last) {\r\n                            @if (subItem.enabled) {\r\n                                <a mat-list-item\r\n                                   [style.backgroundColor]=\"subItem.backgroundColor\"\r\n                                   [routerLink]=\"subItem.path\"\r\n                                   target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\"\r\n                                   [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !subItem.title}\"\r\n                                   [routerLinkActiveOptions]=\"{exact:subItem.activeExact??false}\"\r\n                                   [fragment]=\"subItem.fragment\"\r\n                                   (click)=\"itemClicked($event, subItem)\">\r\n                                    @if (!avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\"\r\n                                                  [style.color]=\"subItem.iconColor\"\r\n                                                  [matBadge]=\"subItem.badge ? subItem.badge() : null\"\r\n                                                  [matBadgeHidden]=\"!subItem.badge || subItem.badge() === 0\"\r\n                                                  aria-hidden=\"false\">\r\n                                            {{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}\r\n                                        </mat-icon>\r\n                                    }\r\n                                    @if (!avatar && subItem.title) {\r\n                                        <span [style.color]=\"subItem.textColor\">{{subItem.title}}</span>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <mat-icon [fontSet]=\"fontSet\">{{(subItem.icon | func:subItem) || 'radio_button_unchecked'}}</mat-icon>\r\n                                    }\r\n                                    @if (avatar) {\r\n                                        <h3>{{subItem.title}}</h3>\r\n                                    }\r\n                                    @if (avatar && subItem.description) {\r\n                                        <p>{{subItem.description}}</p>\r\n                                    }\r\n                                </a>\r\n                            }\r\n                            @if (subItem.divider && !avatar) {\r\n                                <mat-divider></mat-divider>\r\n                            }\r\n                            @if (!subItem.divider && avatar && !subLast) {\r\n                                <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                            }\r\n                        }\r\n                    </mat-nav-list>\r\n                </mat-expansion-panel>\r\n            } @else {\r\n                @if (item.enabled) {\r\n                    <a mat-list-item [style.backgroundColor]=\"item.backgroundColor\" [routerLink]=\"item.path\" target=\"_{{MenuItemTarget[item.target??0].toLowerCase()}}\" [routerLinkActive]=\"['active']\" [ngClass]=\"{'icon-only': !item.title}\" [routerLinkActiveOptions]=\"{exact:item.activeExact??false}\" [fragment]=\"item.fragment\" (click)=\"itemClicked($event, item)\" (delayedHover)=\"(item.items?.length ?? 0) > 0 && itemMouseEnter(item.event ? item.event : $event, item)\" (mouseleave)=\"(item.items?.length ?? 0) >0 && false&& itemMouseLeave(item.event ? item.event : $event, item)\">\r\n                        @if (!avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\"\r\n                                      [style.color]=\"item.iconColor\"\r\n                                      [matBadge]=\"item.badge ? item.badge() : null\"\r\n                                      [matBadgeHidden]=\"!item.badge || item.badge() === 0\"\r\n                                      aria-hidden=\"false\"\r\n                                      matListItemIcon>\r\n                                {{(item.icon | func:item) || 'radio_button_unchecked'}}\r\n                            </mat-icon>\r\n                        }\r\n                        @if (!avatar && item.title) {\r\n                            <span [style.color]=\"item.textColor\" matListItemTitle>{{item.title}}</span>\r\n                        }\r\n                        @if (avatar) {\r\n                            <mat-icon [fontSet]=\"fontSet\" matListAvatar>{{(item.icon | func:item) || 'radio_button_unchecked'}}</mat-icon>\r\n                        }\r\n                        @if (avatar) {\r\n                            <h3 matLine>{{item.title}}</h3>\r\n                        }\r\n                        @if (avatar && item.description) {\r\n                            <p matLine>{{item.description}}</p>\r\n                        }\r\n                    </a>\r\n                }\r\n                @if (item.divider && !avatar) {\r\n                    <mat-divider></mat-divider>\r\n                }\r\n                @if (!item.divider && avatar && !last) {\r\n                    <mat-divider [inset]=\"avatar\"></mat-divider>\r\n                }\r\n            }\r\n        }\r\n    </mat-accordion>\r\n</mat-nav-list>", styles: [":host ::ng-deep .mat-mdc-nav-list .mat-mdc-list-item.icon-only .mdc-list-item__content{display:none!important}:host ::ng-deep .mat-expansion-panel{background-color:transparent}:host ::ng-deep .mat-mdc-list-item:not(.active),:host ::ng-deep .mat-mdc-list-item:active,:host ::ng-deep .mat-mdc-list-item:focus,:host ::ng-deep .mat-expansion-panel:not(.active),:host ::ng-deep .mat-expansion-panel:active,:host ::ng-deep .mat-expansion-panel:focus{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item:not(.active):before,:host ::ng-deep .mat-mdc-list-item:active:before,:host ::ng-deep .mat-mdc-list-item:focus:before,:host ::ng-deep .mat-expansion-panel:not(.active):before,:host ::ng-deep .mat-expansion-panel:active:before,:host ::ng-deep .mat-expansion-panel:focus:before{background-color:transparent!important}:host ::ng-deep .mat-mdc-list-item,:host ::ng-deep .mat-expansion-panel{font-family:var(--mat-expansion-header-text-font, var(--mat-sys-title-medium-font));font-weight:var(--mat-expansion-header-text-weight, var(--mat-sys-title-medium-weight));line-height:var(--mat-expansion-header-text-line-height, var(--mat-sys-title-medium-line-height));letter-spacing:var(--mat-expansion-header-text-tracking, var(--mat-sys-title-medium-tracking))}:host ::ng-deep .mat-mdc-list-item mat-icon,:host ::ng-deep .mat-expansion-panel mat-icon{margin-right:18px;margin-bottom:3px}:host ::ng-deep .mat-mdc-list-item ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding-bottom:0!important}:host ::ng-deep .mat-mdc-list-item:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:4px 8px}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { items: [{
                 type: Input
             }], activeExact: [{
@@ -24990,6 +25269,10 @@ let MenuItem = class MenuItem extends AuditEntity {
      * The child menu items.
      */
     items;
+    /**
+     * A function that returns the badge count for the menu item.
+     */
+    badge;
 };
 __decorate([
     prop(),
@@ -25502,10 +25785,10 @@ class MenuFormIncludesResolve {
             return includes;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuFormIncludesResolve, deps: [{ token: i1$7.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuFormIncludesResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuFormIncludesResolve, deps: [{ token: i1$7.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuFormIncludesResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuFormIncludesResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuFormIncludesResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$7.OidcSecurityService }] });
 
@@ -25548,10 +25831,10 @@ class MenuItemFormIncludesResolve {
             return includes;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuItemFormIncludesResolve, deps: [{ token: i1$7.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuItemFormIncludesResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemFormIncludesResolve, deps: [{ token: i1$7.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemFormIncludesResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuItemFormIncludesResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemFormIncludesResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$7.OidcSecurityService }] });
 
@@ -25594,10 +25877,10 @@ class MenuListProjectionResolve {
             return projection;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuListProjectionResolve, deps: [{ token: i1$7.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuListProjectionResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListProjectionResolve, deps: [{ token: i1$7.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListProjectionResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuListProjectionResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuListProjectionResolve, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$7.OidcSecurityService }] });
 
@@ -25613,10 +25896,10 @@ class MenuSettingsResolve {
         // ServiceLocator.create([{ provide: MenuSettings, useValue: settings }]);
         return of(settings);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuSettingsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuSettingsResolve });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuSettingsResolve, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuSettingsResolve });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuSettingsResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuSettingsResolve, decorators: [{
             type: Injectable
         }] });
 
@@ -25628,10 +25911,10 @@ class MenuItemService extends GenericService {
     constructor() {
         super('menuitem');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuItemService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuItemService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuItemService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -25644,10 +25927,10 @@ class MenuService extends GenericService {
     constructor() {
         super('menu');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -25671,10 +25954,10 @@ class MenuResolve {
     resolve(route) {
         return this.menuService.getList(route.data || {}, undefined, { cache: 'yes' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuResolve, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuResolve, deps: [{ token: MenuService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuResolve, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MenuResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MenuResolve, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: MenuService }] });
@@ -25708,10 +25991,10 @@ class SubMenuResolve {
         }
         return undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SubMenuResolve, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SubMenuResolve, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SubMenuResolve, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SubMenuResolve, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SubMenuResolve, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SubMenuResolve, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }] });
@@ -25904,10 +26187,10 @@ class VdLayoutComponent {
     onSubMenuMouseOut($event) {
         this.closeMenu($event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdLayoutComponent, isStandalone: true, selector: "vd-layout", inputs: { menuItems: "menuItems", showDebugBanner: "showDebugBanner", mode: "mode", color: "color", opened: "opened", mini: "mini", sideGt: "sideGt", sidenavWidth: "sidenavWidth", subMenuWidth: "subMenuWidth" }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "subMenuDrawer", first: true, predicate: ["subMenuDrawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n  <mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n    <ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n    <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n  </mat-sidenav>\r\n  <mat-drawer-container fullscreen>\r\n    <mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n      <vd-menu [items]=\"menuItems\" [activeExact]=\"false\" [mobile]=\"mobile\" (click)=\"closeMenu($event)\"></vd-menu>\r\n    </mat-drawer>\r\n    @if (showDebugBanner) {\r\n      <div class=\"debug-banner\">DEBUG</div>\r\n    }\r\n    <ng-content></ng-content>\r\n  </mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;border-right:none}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:6px 0;height:52px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title{display:flex;flex-direction:column;width:80px;margin:0 auto;justify-content:center;font-size:.83em}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto 4px;padding:6px 0;height:66px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:.83em;font-weight:500;letter-spacing:-.5px;padding-top:2px}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before{background-color:inherit;width:56px;height:32px;border-radius:16px;position:absolute;top:3px;margin-right:auto;margin-bottom:4px;margin-left:auto}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before{background-color:var(--mat-sys-primary)!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-right:18px!important}:host ::ng-deep .debug-banner{position:fixed;top:11px;right:-38px;background-color:#6d0000;color:#fff;padding:1px 36px;font-size:12px;text-transform:uppercase;z-index:1000;transform:rotate(45deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar", "mobile"], outputs: ["click", "over", "out"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdLayoutComponent, isStandalone: true, selector: "vd-layout", inputs: { menuItems: "menuItems", showDebugBanner: "showDebugBanner", mode: "mode", color: "color", opened: "opened", mini: "mini", sideGt: "sideGt", sidenavWidth: "sidenavWidth", subMenuWidth: "subMenuWidth" }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "subMenuDrawer", first: true, predicate: ["subMenuDrawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n  <mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n    <ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n    <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n  </mat-sidenav>\r\n  <mat-drawer-container fullscreen>\r\n    <mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n      <vd-menu [items]=\"menuItems\" [activeExact]=\"false\" [mobile]=\"mobile\" (click)=\"closeMenu($event)\"></vd-menu>\r\n    </mat-drawer>\r\n    @if (showDebugBanner) {\r\n      <div class=\"debug-banner\">DEBUG</div>\r\n    }\r\n    <ng-content></ng-content>\r\n  </mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;border-right:none}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:6px 0;height:52px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title{display:flex;flex-direction:column;width:80px;margin:0 auto;justify-content:center;font-size:.83em}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto 4px;padding:6px 0;height:66px!important;justify-content:center;border-radius:18%}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:.7em;font-weight:500;padding-top:2px}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before{background-color:inherit;width:56px;height:32px;border-radius:16px;position:absolute;top:3px;margin-right:auto;margin-bottom:4px;margin-left:auto}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:hover:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:hover:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before{background-color:var(--mat-sys-primary)!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-right:18px!important}:host ::ng-deep .debug-banner{position:fixed;top:11px;right:-38px;background-color:#6d0000;color:#fff;padding:1px 36px;font-size:12px;text-transform:uppercase;z-index:1000;transform:rotate(45deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar", "mobile"], outputs: ["click", "over", "out"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout', imports: [
                         CommonModule,
@@ -25915,7 +26198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         MatToolbarModule,
                         MatCardModule,
                         VdMenuComponent
-                    ], template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n  <mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n    <ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n    <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n  </mat-sidenav>\r\n  <mat-drawer-container fullscreen>\r\n    <mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n      <vd-menu [items]=\"menuItems\" [activeExact]=\"false\" [mobile]=\"mobile\" (click)=\"closeMenu($event)\"></vd-menu>\r\n    </mat-drawer>\r\n    @if (showDebugBanner) {\r\n      <div class=\"debug-banner\">DEBUG</div>\r\n    }\r\n    <ng-content></ng-content>\r\n  </mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;border-right:none}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:6px 0;height:52px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title{display:flex;flex-direction:column;width:80px;margin:0 auto;justify-content:center;font-size:.83em}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto 4px;padding:6px 0;height:66px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:.83em;font-weight:500;letter-spacing:-.5px;padding-top:2px}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before{background-color:inherit;width:56px;height:32px;border-radius:16px;position:absolute;top:3px;margin-right:auto;margin-bottom:4px;margin-left:auto}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before{background-color:var(--mat-sys-primary)!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-right:18px!important}:host ::ng-deep .debug-banner{position:fixed;top:11px;right:-38px;background-color:#6d0000;color:#fff;padding:1px 36px;font-size:12px;text-transform:uppercase;z-index:1000;transform:rotate(45deg)}\n"] }]
+                    ], template: "<mat-sidenav-container fullscreen [ngClass]=\"{'sidenav-container-mini': mini}\">\r\n  <mat-sidenav #sidenav class=\"vd-layout-sidenav\" [mode]=\"mode\" [opened]=\"opened\" [ngClass]=\"{'sidenav-mini': mini}\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n    <ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n    <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n  </mat-sidenav>\r\n  <mat-drawer-container fullscreen>\r\n    <mat-drawer #subMenuDrawer mode=\"over\" class=\"mat-drawer-submenu\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n      <vd-menu [items]=\"menuItems\" [activeExact]=\"false\" [mobile]=\"mobile\" (click)=\"closeMenu($event)\"></vd-menu>\r\n    </mat-drawer>\r\n    @if (showDebugBanner) {\r\n      <div class=\"debug-banner\">DEBUG</div>\r\n    }\r\n    <ng-content></ng-content>\r\n  </mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host ::ng-deep>mat-sidenav-container>mat-sidenav{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column;border-right:none}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .vd-layout-nav-wrapper>mat-toolbar .vd-layout-menu-button{display:none!important}:host ::ng-deep>mat-sidenav-container.sidenav-container-mini .mat-drawer.mat-drawer-submenu{border-radius:0 16px 16px 0}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-expansion-panel-header-title mat-icon{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel>.mat-expansion-panel-header .mat-content-hide-toggle{margin-right:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0!important}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header{padding:6px 0;height:52px!important;justify-content:center}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-expansion-panel:not(.mobile)>.mat-expansion-panel-header>.mat-content>.mat-expansion-panel-header-title{display:flex;flex-direction:column;width:80px;margin:0 auto;justify-content:center;font-size:.83em}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto 4px;padding:6px 0;height:66px!important;justify-content:center;border-radius:18%}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:.7em;font-weight:500;padding-top:2px}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:before{background-color:inherit;width:56px;height:32px;border-radius:16px;position:absolute;top:3px;margin-right:auto;margin-bottom:4px;margin-left:auto}:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:hover:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive:hover:before,:host ::ng-deep .sidenav-mini .vd-navigation-drawer-menu-content mat-nav-list .mat-mdc-list-item.mat-mdc-list-item-interactive.active:before{background-color:var(--mat-sys-primary)!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline!important}:host ::ng-deep mat-nav-list .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-right:18px!important}:host ::ng-deep .debug-banner{position:fixed;top:11px;right:-38px;background-color:#6d0000;color:#fff;padding:1px 36px;font-size:12px;text-transform:uppercase;z-index:1000;transform:rotate(45deg)}\n"] }]
         }], ctorParameters: () => [{ type: VdMediaService }], propDecorators: { sidenav: [{
                 type: ViewChild,
                 args: [MatSidenav, { static: true }]
@@ -25971,10 +26254,10 @@ class VdLayoutCardOverComponent {
      * If [color] is not set, primary is used.
      */
     color = 'primary';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdLayoutCardOverComponent, isStandalone: true, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n  <div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\" [style.-webkit-box-flex]=\"1\">\r\n    <mat-card>\r\n      @if (cardTitle) {\r\n        <mat-card-title>{{cardTitle}}</mat-card-title>\r\n      }\r\n      @if (cardSubtitle) {\r\n        <mat-card-subtitle>{{cardSubtitle}}</mat-card-subtitle>\r\n      }\r\n      @if (cardTitle || cardSubtitle) {\r\n        <mat-divider></mat-divider>\r\n      }\r\n      <ng-content></ng-content>\r\n    </mat-card>\r\n    <ng-content select=\"[vd-after-card]\"></ng-content>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}:host.accordion>.vd-layout-card-over-wrapper>.vd-layout-card-over ::ng-deep>.mat-mdc-card{background-color:transparent;box-shadow:none;padding-bottom:24px;border:none}:host.tab>.vd-layout-card-over-wrapper{margin:-56px 0}:host mat-expansion-panel .mat-expansion-panel-header{font-size:1.1em}:host mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{padding-right:0}:host mat-expansion-panel .mat-expansion-panel-header.enabled[aria-disabled=true]{color:inherit}:host mat-expansion-panel .enabled .mat-expansion-panel-header[aria-disabled=true]{color:inherit}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media(min-width:960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media(max-width:959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$6.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutCardOverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdLayoutCardOverComponent, isStandalone: true, selector: "vd-layout-card-over", inputs: { cardTitle: "cardTitle", cardSubtitle: "cardSubtitle", cardWidth: "cardWidth", color: "color" }, ngImport: i0, template: "<mat-toolbar [color]=\"color\"></mat-toolbar>\r\n<div class=\"vd-layout-card-over-wrapper\">\r\n  <div class=\"vd-layout-card-over\" [style.max-width.%]=\"cardWidth\" [style.flex]=\"'1 1 ' + cardWidth + '%'\" [style.-ms-flex]=\"'1 1 ' + cardWidth + '%'\" [style.-webkit-box-flex]=\"1\">\r\n    <mat-card>\r\n      @if (cardTitle) {\r\n        <mat-card-title>{{cardTitle}}</mat-card-title>\r\n      }\r\n      @if (cardSubtitle) {\r\n        <mat-card-subtitle>{{cardSubtitle}}</mat-card-subtitle>\r\n      }\r\n      @if (cardTitle || cardSubtitle) {\r\n        <mat-divider></mat-divider>\r\n      }\r\n      <ng-content></ng-content>\r\n    </mat-card>\r\n    <ng-content select=\"[vd-after-card]\"></ng-content>\r\n  </div>\r\n</div>", styles: [":host{position:relative;display:block;z-index:2;width:100%;min-height:100%;height:100%}:host [vd-after-card]{display:block}:host.accordion>.vd-layout-card-over-wrapper>.vd-layout-card-over ::ng-deep>.mat-mdc-card{background-color:transparent;box-shadow:none;padding-bottom:24px;border:none}:host.tab>.vd-layout-card-over-wrapper{margin:-56px 0}:host mat-expansion-panel .mat-expansion-panel-header{font-size:1.1em}:host mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{padding-right:0}:host mat-expansion-panel .mat-expansion-panel-header.enabled[aria-disabled=true]{color:inherit}:host mat-expansion-panel .enabled .mat-expansion-panel-header[aria-disabled=true]{color:inherit}.vd-layout-card-over-wrapper{margin:-64px 0;width:100%;min-height:100%;height:100%}@media(min-width:960px){.vd-layout-card-over-wrapper{flex-direction:row;box-sizing:border-box;display:flex;align-items:flex-start;align-content:flex-start;justify-content:center}.vd-layout-card-over-wrapper .vd-layout-card-over{max-height:100%;box-sizing:border-box}}@media(max-width:959px){.vd-layout-card-over-wrapper .vd-layout-card-over{max-width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$6.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutCardOverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-card-over', imports: [
                         MatToolbarModule,
@@ -26147,10 +26430,10 @@ class VdLayoutCompactComponent {
             this.subMenuDrawer?.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutCompactComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutCompactComponent, isStandalone: true, selector: "vd-layout-compact", inputs: { menuItems: "menuItems", mode: "mode", opened: "opened", expanded: "expanded", sideGt: "sideGt", sidenavWidth: "sidenavWidth", subMenuWidth: "subMenuWidth" }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "subMenuDrawer", first: true, predicate: ["subMenuDrawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container class=\"sidenav-container-mini\" fullscreen>\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav sidenav-mini\" [mode]=\"mode\" [opened]=\"opened\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<mat-drawer-container fullscreen>\r\n\t\t<mat-drawer #subMenuDrawer mode=\"over\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseenter)=\"onSubMenuMouseOver($event)\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n\t\t\t<vd-menu [items]=\"menuItems\" [activeExact]=\"false\"></vd-menu>\r\n\t\t</mat-drawer>\r\n\t\t<ng-content></ng-content>\r\n\t</mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host ::ng-deep .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto;padding:6px 0;height:66px!important}:host ::ng-deep .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:12px;font-weight:400;letter-spacing:.1px;padding-top:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar", "mobile"], outputs: ["click", "over", "out"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutCompactComponent, deps: [{ token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutCompactComponent, isStandalone: true, selector: "vd-layout-compact", inputs: { menuItems: "menuItems", mode: "mode", opened: "opened", expanded: "expanded", sideGt: "sideGt", sidenavWidth: "sidenavWidth", subMenuWidth: "subMenuWidth" }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }, { propertyName: "subMenuDrawer", first: true, predicate: ["subMenuDrawer"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container class=\"sidenav-container-mini\" fullscreen>\r\n\t<mat-sidenav #sidenav class=\"vd-layout-sidenav sidenav-mini\" [mode]=\"mode\" [opened]=\"opened\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\" [disableClose]=\"disableClose\">\r\n\t\t<ng-content select=\"vd-navigation-drawer\"></ng-content>\r\n\t\t<ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n\t</mat-sidenav>\r\n\t<mat-drawer-container fullscreen>\r\n\t\t<mat-drawer #subMenuDrawer mode=\"over\" [style.max-width]=\"subMenuWidth\" [style.min-width]=\"subMenuWidth\" (mouseenter)=\"onSubMenuMouseOver($event)\" (mouseleave)=\"onSubMenuMouseOut($event)\">\r\n\t\t\t<vd-menu [items]=\"menuItems\" [activeExact]=\"false\"></vd-menu>\r\n\t\t</mat-drawer>\r\n\t\t<ng-content></ng-content>\r\n\t</mat-drawer-container>\r\n</mat-sidenav-container>", styles: [":host ::ng-deep .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item{display:flex;flex-direction:column;width:80px;margin:0 auto;padding:6px 0;height:66px!important}:host ::ng-deep .vd-navigation-drawer-content mat-nav-list .mat-mdc-list-item .mdc-list-item__content .mat-mdc-list-item-title{font-size:12px;font-weight:400;letter-spacing:.1px;padding-top:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i3$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i3$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar", "mobile"], outputs: ["click", "over", "out"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutCompactComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutCompactComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-compact', imports: [
                         MatSidenavModule,
@@ -26204,10 +26487,10 @@ class VdLayoutFooterComponent {
         this._elementRef = _elementRef;
         this._renderer.addClass(this._elementRef.nativeElement, 'vd-layout-footer');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutFooterComponent, isStandalone: true, selector: "vd-layout-footer,vd-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutFooterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutFooterComponent, isStandalone: true, selector: "vd-layout-footer,vd-layout-footer-inner", inputs: { color: "color" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-footer,vd-layout-footer-inner', template: "<ng-content></ng-content>", styles: [":host{display:block;padding:10px 16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { color: [{
@@ -26319,10 +26602,10 @@ class VdLayoutManageListComponent {
      * Proxy close method to access sidenav from outside (from vd-layout template).
      */
     close() { return this.sidenav?.close(); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdLayoutManageListComponent, isStandalone: true, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n  <!-- #region Side nav -->\r\n  <mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened && !mini\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n    <!-- #region Nav list toolbar -->\r\n    @if (title) {\r\n      <mat-toolbar dense>\r\n        <span>{{title}}</span>\r\n        <span flex></span>\r\n        @if (closable) {\r\n          <button mat-icon-button (click)=\"close()\">\r\n            <mat-icon fontSet=\"material-symbols-outlined\">menu_open</mat-icon>\r\n          </button>\r\n        }\r\n      </mat-toolbar>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom title toolbar -->\r\n    <ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n    <!-- #endregion -->\r\n\r\n    <div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n      <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n      <ng-content select=\"vd-menu\"></ng-content>\r\n      @if (menuItems) {\r\n        <vd-menu [items]=\"menuItems!\"></vd-menu>\r\n      }\r\n    </div>\r\n  </mat-sidenav>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Main content -->\r\n  <div class=\"vd-layout-manage-list-main\">\r\n    <!-- #region Toolbar projection -->\r\n    <ng-content select=\"mat-toolbar\"></ng-content>\r\n    <!-- <ng-content select=\"vd-list-toolbar\"></ng-content> -->\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Scrollable content -->\r\n    <div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Footer content -->\r\n    <ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n    <!-- #endregion -->\r\n  </div>\r\n  <!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:hidden;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-manage-list-main .vd-layout-manage-list-content ::ng-deep .mat-table-container{height:calc(100vh - 122px);max-height:calc(100vh - 122px)}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center;padding-left:4px}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "directive", type: i2$7.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar", "mobile"], outputs: ["click", "over", "out"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdLayoutManageListComponent, isStandalone: true, selector: "vd-layout-manage-list", inputs: { title: "title", closable: "closable", menuItems: "menuItems", mode: "mode", sideGt: "sideGt", opened: "opened", openedGt: "openedGt", sidenavWidth: "sidenavWidth", sidenavGtXsWidth: "sidenavGtXsWidth" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container fullscreen class=\"vd-layout-manage-list\">\r\n  <!-- #region Side nav -->\r\n  <mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened && !mini\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n    <!-- #region Nav list toolbar -->\r\n    @if (title) {\r\n      <mat-toolbar dense>\r\n        <span>{{title}}</span>\r\n        <span flex></span>\r\n        @if (closable) {\r\n          <button mat-icon-button (click)=\"close()\">\r\n            <mat-icon fontSet=\"material-symbols-outlined\">menu_open</mat-icon>\r\n          </button>\r\n        }\r\n      </mat-toolbar>\r\n    }\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Custom title toolbar -->\r\n    <ng-content select=\"mat-toolbar[vd-sidenav-content]\"></ng-content>\r\n    <!-- #endregion -->\r\n\r\n    <div class=\"vd-layout-manage-list-sidenav\" cdkScrollable>\r\n      <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n      <ng-content select=\"vd-menu\"></ng-content>\r\n      @if (menuItems) {\r\n        <vd-menu [items]=\"menuItems!\"></vd-menu>\r\n      }\r\n    </div>\r\n  </mat-sidenav>\r\n  <!-- #endregion -->\r\n\r\n  <!-- #region Main content -->\r\n  <div class=\"vd-layout-manage-list-main\">\r\n    <!-- #region Toolbar projection -->\r\n    <ng-content select=\"mat-toolbar\"></ng-content>\r\n    <!-- <ng-content select=\"vd-list-toolbar\"></ng-content> -->\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Scrollable content -->\r\n    <div class=\"vd-layout-manage-list-content\" cdkScrollable>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!-- #endregion -->\r\n\r\n    <!-- #region Footer content -->\r\n    <ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n    <!-- #endregion -->\r\n  </div>\r\n  <!-- #endregion -->\r\n</mat-sidenav-container>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list{flex:1}:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opened,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-opening,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closed,:host mat-sidenav-container.vd-layout-manage-list>mat-sidenav.mat-drawer-closing{box-shadow:0 1px 3px #0003}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container{overflow:hidden}:host mat-sidenav-container.vd-layout-manage-list ::ng-deep .mat-drawer-inner-container .mat-mdc-list-item .mat-mdc-list-item-title{overflow:hidden;text-overflow:ellipsis;display:inline}:host .vd-layout-manage-list-sidenav{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-manage-list-main{margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto;flex-direction:column;box-sizing:border-box;display:flex}:host .vd-layout-manage-list-main .vd-layout-manage-list-content{display:block;position:relative;overflow:hidden;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-manage-list-main .vd-layout-manage-list-content ::ng-deep .mat-table-container{height:calc(100vh - 122px);max-height:calc(100vh - 122px)}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-manage-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column}:host ::ng-deep .mat-toolbar{font-weight:400;display:flex;align-items:center;padding-left:4px}:host ::ng-deep .mat-toolbar *{overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .mat-toolbar>.mdc-icon-button{margin-right:-2px}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "directive", type: i2$7.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdMenuComponent, selector: "vd-menu", inputs: ["items", "activeExact", "fontSet", "avatar", "mobile"], outputs: ["click", "over", "out"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-manage-list', imports: [
                         MatSidenavModule,
@@ -26430,10 +26713,10 @@ class LayoutToggle {
             this._renderer.setStyle(this._elementRef.nativeElement, 'display', '');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LayoutToggle, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: LayoutToggle, isStandalone: true, inputs: { disabled: "disabled", hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutToggle, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: LayoutToggle, isStandalone: true, inputs: { disabled: "disabled", hideWhenOpened: "hideWhenOpened" }, host: { listeners: { "click": "clickListener($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LayoutToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LayoutToggle, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { disabled: [{
                 type: Input
@@ -26467,10 +26750,10 @@ class VdLayoutManageListToggleDirective extends LayoutToggle {
     onClick() {
         this._layout.toggle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutManageListToggleDirective, isStandalone: true, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutManageListToggleDirective, isStandalone: true, selector: "[vdLayoutManageListToggle]", inputs: { vdLayoutManageListToggle: "vdLayoutManageListToggle" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutManageListToggle]'
@@ -26503,10 +26786,10 @@ class VdLayoutManageListCloseDirective extends LayoutToggle {
     onClick() {
         this._layout.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutManageListCloseDirective, isStandalone: true, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutManageListCloseDirective, isStandalone: true, selector: "[vdLayoutManageListClose]", inputs: { vdLayoutManageListClose: "vdLayoutManageListClose" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutManageListClose]'
@@ -26539,10 +26822,10 @@ class VdLayoutManageListOpenDirective extends LayoutToggle {
     onClick() {
         this._layout.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutManageListOpenDirective, isStandalone: true, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutManageListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutManageListOpenDirective, isStandalone: true, selector: "[vdLayoutManageListOpen]", inputs: { vdLayoutManageListOpen: "vdLayoutManageListOpen" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutManageListOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutManageListOpen]'
@@ -26656,10 +26939,10 @@ class VdLayoutNavListComponent {
     close() {
         return this.sidenav?.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1$2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdLayoutNavListComponent, isStandalone: true, selector: "vd-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n  <mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n    <!-- #region Sidenav -->\r\n    <mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n      <!-- #region Sidenav toolbar -->\r\n      <mat-toolbar [color]=\"color\">\r\n        <ng-content select=\"[vd-menu-button]\"></ng-content>\r\n        @if (icon || logo || toolbarTitle) {\r\n          <span class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\">\r\n            @if (icon) {\r\n              <mat-icon>{{icon}}</mat-icon>\r\n            }\r\n            @if (logo && !icon) {\r\n              <mat-icon class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n            }\r\n            @if (toolbarTitle) {\r\n              <span>{{toolbarTitle}}</span>\r\n            }\r\n          </span>\r\n        }\r\n        <ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n      </mat-toolbar>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region Sidenav content -->\r\n      <div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n        <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </mat-sidenav>\r\n    <!-- #endregion -->\r\n\r\n    <div class=\"vd-layout-nav-list-main\">\r\n      <!-- #region Toolbar projection -->\r\n      <ng-content select=\"mat-toolbar\"></ng-content>\r\n      <ng-content select=\"vd-toolbar-content\"></ng-content>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region Scrollable content -->\r\n      <div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region Footer content -->\r\n      <ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n      <!-- #endregion -->\r\n    </div>\r\n  </mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "directive", type: i2$7.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListComponent, deps: [{ token: i1$2.Router, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdLayoutNavListComponent, isStandalone: true, selector: "vd-layout-nav-list", inputs: { toolbarTitle: "toolbarTitle", icon: "icon", logo: "logo", color: "color", mode: "mode", opened: "opened", sidenavWidth: "sidenavWidth", navigationRoute: "navigationRoute" }, viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<div class=\"vd-layout-nav-list-wrapper\">\r\n  <mat-sidenav-container fullscreen class=\"vd-layout-nav-list\">\r\n    <!-- #region Sidenav -->\r\n    <mat-sidenav #sidenav position=\"start\" [mode]=\"mode\" [opened]=\"opened\" [disableClose]=\"disableClose\" [style.max-width]=\"sidenavWidth\" [style.min-width]=\"sidenavWidth\">\r\n      <!-- #region Sidenav toolbar -->\r\n      <mat-toolbar [color]=\"color\">\r\n        <ng-content select=\"[vd-menu-button]\"></ng-content>\r\n        @if (icon || logo || toolbarTitle) {\r\n          <span class=\"vd-layout-nav-list-toolbar-content\" [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\">\r\n            @if (icon) {\r\n              <mat-icon>{{icon}}</mat-icon>\r\n            }\r\n            @if (logo && !icon) {\r\n              <mat-icon class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n            }\r\n            @if (toolbarTitle) {\r\n              <span>{{toolbarTitle}}</span>\r\n            }\r\n          </span>\r\n        }\r\n        <ng-content select=\"[vd-sidenav-toolbar-content]\"></ng-content>\r\n      </mat-toolbar>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region Sidenav content -->\r\n      <div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n        <ng-content select=\"[vd-sidenav-content]\"></ng-content>\r\n      </div>\r\n      <!-- #endregion -->\r\n    </mat-sidenav>\r\n    <!-- #endregion -->\r\n\r\n    <div class=\"vd-layout-nav-list-main\">\r\n      <!-- #region Toolbar projection -->\r\n      <ng-content select=\"mat-toolbar\"></ng-content>\r\n      <ng-content select=\"vd-toolbar-content\"></ng-content>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region Scrollable content -->\r\n      <div class=\"vd-layout-nav-list-content\" cdkScrollable>\r\n        <ng-content></ng-content>\r\n      </div>\r\n      <!-- #endregion -->\r\n\r\n      <!-- #region Footer content -->\r\n      <ng-content select=\"vd-layout-footer-inner\"></ng-content>\r\n      <!-- #endregion -->\r\n    </div>\r\n  </mat-sidenav-container>\r\n</div>\r\n<ng-content select=\"vd-layout-footer\"></ng-content>", styles: [":host{margin:0;width:100%;min-height:100%;height:100%;overflow:hidden;flex-direction:column;box-sizing:border-box;display:flex;flex:1}:host .vd-layout-nav-list-wrapper{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-content{text-align:start;flex:1;display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%;position:relative;overflow:auto}:host .vd-layout-nav-list-wrapper .vd-layout-nav-list-main .vd-layout-nav-list-content{display:block;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list{flex:1}:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opened,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-opening,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closed,:host .vd-layout-nav-list-wrapper mat-sidenav-container.vd-layout-nav-list>mat-sidenav.mat-drawer-closing{box-shadow:none}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>.mat-drawer-content{flex-grow:1}:host ::ng-deep mat-sidenav-container.vd-layout-nav-list>mat-sidenav{box-shadow:0 1px 3px #0003,0 1px 1px #00000024,0 2px 1px -1px #0000001f;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "directive", type: i2$7.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i3$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i3$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-nav-list', imports: [
                         MatSidenavModule,
@@ -26709,10 +26992,10 @@ class VdLayoutNavListToggleDirective extends LayoutToggle {
     onClick() {
         this._layout.toggle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutNavListToggleDirective, isStandalone: true, selector: "[vdLayoutNavListToggle]", inputs: { vdLayoutNavListToggle: "vdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListToggleDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutNavListToggleDirective, isStandalone: true, selector: "[vdLayoutNavListToggle]", inputs: { vdLayoutNavListToggle: "vdLayoutNavListToggle" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutNavListToggle]'
@@ -26744,10 +27027,10 @@ class VdLayoutNavListCloseDirective extends LayoutToggle {
     onClick() {
         this._layout.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutNavListCloseDirective, isStandalone: true, selector: "[vdLayoutNavListClose]", inputs: { vdLayoutNavListClose: "vdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListCloseDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutNavListCloseDirective, isStandalone: true, selector: "[vdLayoutNavListClose]", inputs: { vdLayoutNavListClose: "vdLayoutNavListClose" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutNavListClose]'
@@ -26779,10 +27062,10 @@ class VdLayoutNavListOpenDirective extends LayoutToggle {
     onClick() {
         this._layout.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutNavListOpenDirective, isStandalone: true, selector: "[vdLayoutNavListOpen]", inputs: { vdLayoutNavListOpen: "vdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListOpenDirective, deps: [{ token: forwardRef(() => VdLayoutNavListComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutNavListOpenDirective, isStandalone: true, selector: "[vdLayoutNavListOpen]", inputs: { vdLayoutNavListOpen: "vdLayoutNavListOpen" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavListOpenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavListOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutNavListOpen]'
@@ -26805,10 +27088,10 @@ class VdLayoutToggleDirective extends LayoutToggle {
     onClick() {
         this._layout.toggle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutToggleDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutToggleDirective, isStandalone: true, selector: "[vdLayoutToggle]", inputs: { vdLayoutToggle: "vdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutToggleDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutToggleDirective, isStandalone: true, selector: "[vdLayoutToggle]", inputs: { vdLayoutToggle: "vdLayoutToggle" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutToggle]'
@@ -26830,10 +27113,10 @@ class VdLayoutCloseDirective extends LayoutToggle {
     onClick() {
         this._layout.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutCloseDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutCloseDirective, isStandalone: true, selector: "[vdLayoutClose]", inputs: { vdLayoutClose: "vdLayoutClose" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutCloseDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutCloseDirective, isStandalone: true, selector: "[vdLayoutClose]", inputs: { vdLayoutClose: "vdLayoutClose" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutCloseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutClose]'
@@ -26855,10 +27138,10 @@ class VdLayoutOpenDirective extends LayoutToggle {
     onClick() {
         this._layout.open();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutOpenDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdLayoutOpenDirective, isStandalone: true, selector: "[vdLayoutOpen]", inputs: { vdLayoutClose: ["vdLayoutOpen", "vdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutOpenDirective, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdLayoutOpenDirective, isStandalone: true, selector: "[vdLayoutOpen]", inputs: { vdLayoutClose: ["vdLayoutOpen", "vdLayoutClose"] }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutOpenDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutOpenDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdLayoutOpen]'
@@ -26975,10 +27258,10 @@ class VdLayoutNavComponent {
             this.router.navigateByUrl(this.navigationRoute);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1$2.Router, optional: true }, { token: i1$2.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdLayoutNavComponent, isStandalone: true, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", editMode: "editMode", actions: "actions", data: "data", context: "context", hideToolbar: "hideToolbar", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n  @if (!hideToolbar || editMode) {\r\n    <mat-toolbar [color]=\"color\" class=\"primary-color\" dense>\r\n      <!-- #region Toggle buton -->\r\n      @if (!hideToggle) {\r\n        <button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\">menu</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Back button -->\r\n      @if (backNavigationRouteEnabled) {\r\n        <button mat-icon-button vd-menu-button (click)=\"handleBackNavigationClick()\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\">arrow_back</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Custom buttons -->\r\n      <ng-content select=\"[vd-menu-button]\"></ng-content>\r\n      <!-- #endregion -->\r\n      <!-- #region Logo with home link -->\r\n      @if (icon || logo || toolbarTitle) {\r\n        <span [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n          @if (icon) {\r\n            <mat-icon>{{icon}}</mat-icon>\r\n          }\r\n          @if (logo && !icon) {\r\n            <mat-icon class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n          }\r\n          @if (toolbarTitle) {\r\n            <span>{{toolbarTitle}}</span>\r\n            }&nbsp;\r\n            @if (editMode == false) {\r\n              <span>[<span i18n=\"@@add\">Add</span>]</span>\r\n            }\r\n            @if (editMode == true) {\r\n              <span>[@if (editMode == true) {\r\n                <span i18n=\"@@edit\">Edit</span>\r\n              }]</span>\r\n            }\r\n          </span>\r\n        }\r\n        <!-- #endregion -->\r\n        <!-- #region Custom content -->\r\n        <ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n        <!-- #endregion -->\r\n        <span flex></span>\r\n        <!-- #region Actions -->\r\n        @if (editMode==true) {\r\n          <vd-dynamic-menu [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n        }\r\n        <!-- #endregion-->\r\n        <!-- #region Custom right content -->\r\n        <ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n        <!-- #endregion -->\r\n      </mat-toolbar>\r\n    }\r\n    <div class=\"vd-layout-nav-content scrollbar-primary\" cdkScrollable>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <ng-content select=\"vd-layout-footer\"></ng-content>\r\n  </div>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .mat-toolbar{padding-left:4px}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;align-items:center;align-content:center;max-width:100%;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavComponent, deps: [{ token: i1$2.Router, optional: true }, { token: i1$2.ActivatedRoute, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdLayoutNavComponent, isStandalone: true, selector: "vd-layout-nav", inputs: { toolbarTitle: "toolbarTitle", editMode: "editMode", actions: "actions", data: "data", context: "context", hideToolbar: "hideToolbar", icon: "icon", logo: "logo", color: "color", hideToggle: "hideToggle", backNavigationRoute: "backNavigationRoute", navigationRoute: "navigationRoute" }, outputs: { reload: "reload" }, ngImport: i0, template: "<div class=\"vd-layout-nav-wrapper\">\r\n  @if (!hideToolbar || editMode) {\r\n    <mat-toolbar [color]=\"color\" class=\"primary-color\" dense>\r\n      <!-- #region Toggle buton -->\r\n      @if (!hideToggle) {\r\n        <button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\">menu</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Back button -->\r\n      @if (backNavigationRouteEnabled) {\r\n        <button mat-icon-button vd-menu-button (click)=\"handleBackNavigationClick()\">\r\n          <mat-icon fontSet=\"material-symbols-outlined\">arrow_back</mat-icon>\r\n        </button>\r\n      }\r\n      <!-- #endregion -->\r\n      <!-- #region Custom buttons -->\r\n      <ng-content select=\"[vd-menu-button]\"></ng-content>\r\n      <!-- #endregion -->\r\n      <!-- #region Logo with home link -->\r\n      @if (icon || logo || toolbarTitle) {\r\n        <span [class.cursor-pointer]=\"routerEnabled\" (click)=\"handleNavigationClick()\" class=\"vd-layout-nav-toolbar-content\">\r\n          @if (icon) {\r\n            <mat-icon>{{icon}}</mat-icon>\r\n          }\r\n          @if (logo && !icon) {\r\n            <mat-icon class=\"mat-icon-logo\" [svgIcon]=\"logo\"></mat-icon>\r\n          }\r\n          @if (toolbarTitle) {\r\n            <span>{{toolbarTitle}}</span>\r\n            }&nbsp;\r\n            @if (editMode == false) {\r\n              <span>[<span i18n=\"@@add\">Add</span>]</span>\r\n            }\r\n            @if (editMode == true) {\r\n              <span>[@if (editMode == true) {\r\n                <span i18n=\"@@edit\">Edit</span>\r\n              }]</span>\r\n            }\r\n          </span>\r\n        }\r\n        <!-- #endregion -->\r\n        <!-- #region Custom content -->\r\n        <ng-content select=\"[vd-toolbar-content]\"></ng-content>\r\n        <!-- #endregion -->\r\n        <span flex></span>\r\n        <!-- #region Actions -->\r\n        @if (editMode==true) {\r\n          <vd-dynamic-menu [items]=\"actions\" [data]=\"data\" [context]=\"context\"></vd-dynamic-menu>\r\n        }\r\n        <!-- #endregion-->\r\n        <!-- #region Custom right content -->\r\n        <ng-content select=\"[vd-toolbar-content-right]\"></ng-content>\r\n        <!-- #endregion -->\r\n      </mat-toolbar>\r\n    }\r\n    <div class=\"vd-layout-nav-content scrollbar-primary\" cdkScrollable>\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <ng-content select=\"vd-layout-footer\"></ng-content>\r\n  </div>", styles: [":host{display:flex;margin:0;width:100%;min-height:100%;height:100%;overflow:hidden}:host .vd-layout-nav-wrapper{flex-direction:column;box-sizing:border-box;display:flex;margin:0;width:100%;min-height:100%;height:100%}:host .vd-layout-nav-wrapper .mat-toolbar{padding-left:4px}:host .vd-layout-nav-wrapper .vd-layout-nav-toolbar-content{flex-direction:row;box-sizing:border-box;align-items:center;align-content:center;max-width:100%;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}:host .vd-layout-nav-wrapper .vd-layout-nav-content{flex-direction:column;box-sizing:border-box;display:flex;flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdLayoutNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-layout-nav', imports: [
                         MatToolbarModule,
@@ -27040,10 +27323,10 @@ class VdListToolbarComponent {
      * actions: ActionItem[]
      */
     actions = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdListToolbarComponent, isStandalone: true, selector: "vd-list-toolbar", inputs: { subtitle: "subtitle", mini: "mini", backButton: "backButton", actions: "actions" }, outputs: { back: "back" }, ngImport: i0, template: "<mat-toolbar dense>\r\n  <div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" [hideWhenOpened]=\"true\">\r\n      <mat-icon fontSet=\"material-symbols-outlined\">menu</mat-icon>\r\n    </button>\r\n    @if (backButton) {\r\n      <button mat-icon-button (click)=\"back.emit()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    <span>{{subtitle}}</span>\r\n    <span flex></span>\r\n    <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n  </div>\r\n</mat-toolbar>", dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "directive", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdListToolbarComponent, isStandalone: true, selector: "vd-list-toolbar", inputs: { subtitle: "subtitle", mini: "mini", backButton: "backButton", actions: "actions" }, outputs: { back: "back" }, ngImport: i0, template: "<mat-toolbar dense>\r\n  <div layout=\"row\" layout-align=\"start center\" flex>\r\n    <button mat-icon-button vd-menu-button [vdLayoutToggle]=\"true\" [hideWhenOpened]=\"true\">\r\n      <mat-icon fontSet=\"material-symbols-outlined\">menu</mat-icon>\r\n    </button>\r\n    @if (backButton) {\r\n      <button mat-icon-button (click)=\"back.emit()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">arrow_back</mat-icon>\r\n      </button>\r\n    }\r\n    <span>{{subtitle}}</span>\r\n    <span flex></span>\r\n    <vd-dynamic-menu [items]=\"actions\"></vd-dynamic-menu>\r\n  </div>\r\n</mat-toolbar>", dependencies: [{ kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "directive", type: VdLayoutToggleDirective, selector: "[vdLayoutToggle]", inputs: ["vdLayoutToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdListToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdListToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-list-toolbar', imports: [
                         MatToolbar,
@@ -27065,20 +27348,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class VdNavigationDrawerMenuDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdNavigationDrawerMenuDirective, isStandalone: true, selector: "[vd-navigation-drawer-menu]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdNavigationDrawerMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdNavigationDrawerMenuDirective, isStandalone: true, selector: "[vd-navigation-drawer-menu]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdNavigationDrawerMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdNavigationDrawerMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-navigation-drawer-menu]'
                 }]
         }] });
 class VdNavigationDrawerToolbarDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdNavigationDrawerToolbarDirective, isStandalone: true, selector: "[vd-navigation-drawer-toolbar]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdNavigationDrawerToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdNavigationDrawerToolbarDirective, isStandalone: true, selector: "[vd-navigation-drawer-toolbar]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdNavigationDrawerToolbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdNavigationDrawerToolbarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-navigation-drawer-toolbar]'
@@ -27289,10 +27572,10 @@ class VdNavigationDrawerComponent {
             this._closeSubscription = undefined;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$2.Router, optional: true }, { token: i1$3.DomSanitizer }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n  <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n  @if (!isCustomToolbar && !mini) {\r\n    @if (email && name) {\r\n      <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n    }\r\n    @if (email || name) {\r\n      <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n        <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n        @if (isMenuAvailable) {\r\n          <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n            @if (!menuToggled) {\r\n              <mat-icon>arrow_drop_down</mat-icon>\r\n            }\r\n            @if (menuToggled) {\r\n              <mat-icon>arrow_drop_up</mat-icon>\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n  @if (mini && !expanded) {\r\n    <div layout=\"column\" layout-align=\"center center\" flex>\r\n      <button mat-icon-button (click)=\"toggleMenu()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</mat-toolbar>\r\n\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary\" [@vdCollapse]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n  <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], animations: [vdCollapseAnimation] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdNavigationDrawerComponent, deps: [{ token: forwardRef(() => VdLayoutComponent) }, { token: i1$2.Router, optional: true }, { token: i1$3.DomSanitizer }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: VdNavigationDrawerComponent, isStandalone: true, selector: "vd-navigation-drawer", inputs: { sidenavTitle: "sidenavTitle", icon: "icon", logo: "logo", avatar: "avatar", color: "color", navigationRoute: "navigationRoute", backgroundUrl: "backgroundUrl", sideGt: "sideGt", name: "name", email: "email" }, queries: [{ propertyName: "_drawerMenu", predicate: VdNavigationDrawerMenuDirective, descendants: true }, { propertyName: "_toolbar", predicate: VdNavigationDrawerToolbarDirective, descendants: true }], ngImport: i0, template: "<mat-toolbar [color]=\"color\" [style.background-image]=\"backgroundImage\" [class.vd-toolbar-background]=\"!!isBackgroundAvailable\" class=\"vd-nagivation-drawer-toolbar\" [ngClass]=\"{'drawer-mini': mini && !expanded}\" dense flex layout=\"column\">\r\n  <ng-content select=\"[vd-navigation-drawer-toolbar]\"></ng-content>\r\n  @if (!isCustomToolbar && !mini) {\r\n    @if (email && name) {\r\n      <div class=\"vd-navigation-drawer-name\">{{name}}</div>\r\n    }\r\n    @if (email || name) {\r\n      <div class=\"vd-navigation-drawer-menu-toggle\" href (click)=\"toggleMenu()\">\r\n        <span class=\"vd-navigation-drawer-label\">{{ email || name }}</span>\r\n        @if (isMenuAvailable) {\r\n          <button mat-icon-button class=\"vd-navigation-drawer-menu-button\">\r\n            @if (!menuToggled) {\r\n              <mat-icon>arrow_drop_down</mat-icon>\r\n            }\r\n            @if (menuToggled) {\r\n              <mat-icon>arrow_drop_up</mat-icon>\r\n            }\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n  @if (mini && !expanded) {\r\n    <div layout=\"column\" layout-align=\"center center\" flex>\r\n      <button mat-icon-button (click)=\"toggleMenu()\">\r\n        <mat-icon fontSet=\"material-symbols-outlined\">format_list_bulleted</mat-icon>\r\n      </button>\r\n    </div>\r\n  }\r\n</mat-toolbar>\r\n\r\n<div class=\"vd-navigation-drawer-content scrollbar-primary\" [@vdCollapse]=\"menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<div class=\"vd-navigation-drawer-menu-content\" [@vdCollapse]=\"!menuToggled\" [ngClass]=\"{'drawer-mini': mini}\">\r\n  <ng-content select=\"[vd-navigation-drawer-menu]\"></ng-content>\r\n</div>", styles: [":host{width:100%}:host .vd-navigation-drawer-content.ng-animating,:host .vd-navigation-drawer-menu-content.ng-animating{overflow:hidden}:host .vd-navigation-drawer-content ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content ::ng-deep .mat-mdc-nav-list{padding-top:0!important;padding-bottom:12px}:host .vd-navigation-drawer-content.drawer-mini ::ng-deep .mat-mdc-nav-list,:host .vd-navigation-drawer-menu-content.drawer-mini ::ng-deep .mat-mdc-nav-list{padding-bottom:0!important}:host mat-toolbar:not(.drawer-mini){padding:16px}:host mat-toolbar.drawer-mini{padding:0!important}:host mat-toolbar.vd-nagivation-drawer-toolbar{flex-direction:column;align-items:stretch}:host mat-toolbar.vd-toolbar-background{background-repeat:no-repeat;background-size:cover}:host mat-toolbar.vd-nagivation-drawer-toolbar:not(.drawer-mini){flex-direction:column;height:auto!important;display:block!important}:host mat-toolbar .vd-navigation-drawer-toolbar-content{flex-direction:row;box-sizing:border-box;display:flex;align-items:center;align-content:center;max-width:100%;justify-content:flex-start}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-nagivation-drawer-toolbar-avatar{border-radius:50%;height:60px;width:60px;margin:0 12px 12px 0}:host mat-toolbar .vd-navigation-drawer-toolbar-content .vd-navigation-drawer-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle{flex-direction:row;box-sizing:border-box;display:flex;cursor:pointer}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host mat-toolbar .vd-navigation-drawer-menu-toggle .vd-navigation-drawer-menu-button{height:24px;line-height:24px;width:24px;padding:0!important}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], animations: [vdCollapseAnimation] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdNavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vd-navigation-drawer', animations: [vdCollapseAnimation], imports: [
                         CommonModule,
@@ -27461,10 +27744,10 @@ class VdMediaToggleDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMediaToggleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdMediaToggleDirective, isStandalone: true, selector: "[vdMediaToggle]", inputs: { query: ["vdMediaToggle", "query"], attributes: ["mediaAttributes", "attributes"], classes: ["mediaClasses", "classes"], styles: ["mediaStyles", "styles"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMediaToggleDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: VdMediaService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdMediaToggleDirective, isStandalone: true, selector: "[vdMediaToggle]", inputs: { query: ["vdMediaToggle", "query"], attributes: ["mediaAttributes", "attributes"], classes: ["mediaClasses", "classes"], styles: ["mediaStyles", "styles"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdMediaToggleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdMediaToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vdMediaToggle]'
@@ -27503,10 +27786,10 @@ class VdTableFieldDirective extends CdkPortal {
     constructor(templateRef, viewContainerRef) {
         super(templateRef, viewContainerRef);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdTableFieldDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: VdTableFieldDirective, isStandalone: true, selector: "[vd-table-field]ng-template", inputs: { row: "row", inline: "inline" }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdTableFieldDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: VdTableFieldDirective, isStandalone: true, selector: "[vd-table-field]ng-template", inputs: { row: "row", inline: "inline" }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VdTableFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: VdTableFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vd-table-field]ng-template'
@@ -27665,10 +27948,10 @@ class PaginatorIntl extends MatPaginatorIntl {
         const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
         return `${startIndex + 1} - ${endIndex} / ${length}`;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginatorIntl });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorIntl });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginatorIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PaginatorIntl, decorators: [{
             type: Injectable
         }] });
 
@@ -27676,5 +27959,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, whitelist };
+export { AbstractMatFormField, AbstractSelectFormField, ActionItem, Api, ApiResponse, AppEvent, AppEventType, AppSetting, AppStorage, AsyncValidationDirective, AuditEntity, AuditUser, AuthHelper, AuthUser, AutofocusDirective, BaseComponent, BaseDirective, BaseEntity, BaseInterceptor, BaseService, BindPipe, CachingInterceptor, Column, ColumnObject, Common, CommonError, CommonHandlerContext, ConfirmExitGuard, ContextHelper, DIALOG_PROVIDER, DIALOG_PROVIDER_FACTORY, DataSourceFilterDirective, DataSourcePipe, DatePickerHeaderComponent, DisableControlDirective, Display, DisplayNameNumberProjection, DisplayNameProjection, DynamicBuilder, DynamicComponentCompiler, EXPORT_DIALOG_COMPONENT, EmptyStringResetDirective, EnumMetadata, EnumPipe, EnumService, EqualValidator, ErrorMessageBindingStrategy, EventQueueService, Facet, FacetValue, FieldFuncPipe, FileControlDirective, FileService, FileSizePipe, FilterClearComponent, FilterDateComponent, FilterGlue, FilterInputComponent, FilterOperator, FilterPipe, FilterSelectComponent, FirstLetterPipe, Form, FormArrayPipe, FormBuilderConfiguration, FormControlPipe, FormDefinition, FormField, FormFieldDefinition, FormFieldGroup, FormFieldGroupDefinition, FormFieldType, FormGroupPipe, FuncPipe, GenericEmbeddedListComponent, GenericFormBaseComponent, GenericFormComponent, GenericListComponent, GenericReactiveFormComponent, GenericService, GlobalRoles, Grid, GroupFilterPipe, HtmlControlTemplateDirective, IAbstractControl, Icon, ImageFileControlDirective, IpVersion, KeyValue, KeysPipe, LayoutToggle, LoadingScreenInterceptor, LoadingScreenService, MEDIA_PROVIDER, MEDIA_PROVIDER_FACTORY, MatFormFieldEditorDirective, MatFormFieldReadonlyDirective, Menu, MenuClient, MenuDepartment, MenuFormIncludesResolve, MenuItem, MenuItemClient, MenuItemDepartment, MenuItemFormIncludesResolve, MenuItemService, MenuItemTarget, MenuListProjectionResolve, MenuResolve, MenuScope, MenuSettings, MenuSettingsResolve, MessageType, ModifiableEntity, MonthNamePipe, NameNumberProjection, NameProjection, NativeElementInjectorDirective, NumericValueType, OnlyNumberDirective, OrderPipe, Pagination, PaginatorIntl, ParseDecimalDirective, Permission, PlaceholderPipe, PrefixDirective, PrintService, PropertyJoinPipe, ReactiveFormConfig, ReactiveTypedFormsModule, RemoveWhitespaceDirective, ResetFormType, RxFormArray, RxFormBuilder, RxFormControl, RxFormControlDirective, RxFormGroup, RxReactiveFormsModule, RxwebFormDirective, RxwebValidators, SafeHtmlPipe, Salutation, SaveAction, SplitPipe, SubMenuResolve, SuffixButton, Table, TableColumn, TableColumnConfig, TableColumnType, TableConfig, TableDataSource, TableDefinition, TableQueryConfig, TableStaticDataSource, TaskDialogData, Templates, TimePipe, TitleCase, TitleProjection, TruncatePipe, TypedForm, TypedFormBuilder, UniqueValidatorDirective, UrlValidationType, Utils, ValidationAlphabetLocale, ValueAccessorBase, ValuesPipe, VdAlertDialogComponent, VdChipsComponent, VdCodeDirective, VdConfirmDialogComponent, VdCustomDirective, VdDelayedHoverDirective, VdDialogActionsDirective, VdDialogComponent, VdDialogContentDirective, VdDialogService, VdDialogTitleDirective, VdDynamicMenuComponent, VdDynamicTableComponent, VdDynamicTableConfigDialogComponent, VdEditorDirective, VdFileDirective, VdFileInputComponent, VdFileModule, VdFilterOptionDirective, VdGenericFormComponent, VdGenericFormCustomFieldDirective, VdLayoutCardOverComponent, VdLayoutCloseDirective, VdLayoutCompactComponent, VdLayoutComponent, VdLayoutFooterComponent, VdLayoutManageListCloseDirective, VdLayoutManageListComponent, VdLayoutManageListOpenDirective, VdLayoutManageListToggleDirective, VdLayoutNavComponent, VdLayoutNavListCloseDirective, VdLayoutNavListComponent, VdLayoutNavListOpenDirective, VdLayoutNavListToggleDirective, VdLayoutOpenDirective, VdLayoutToggleDirective, VdListOptionDirective, VdListToolbarComponent, VdMediaService, VdMediaToggleDirective, VdMenuComponent, VdNavigationDrawerComponent, VdNavigationDrawerMenuDirective, VdNavigationDrawerToolbarDirective, VdPromptDialogComponent, VdSelectComponent, VdSelectOptionDirective, VdSelectTriggerDirective, VdTableFieldDirective, VdTaskDialogComponent, allOf, allOfAsync, alpha, alphaAsync, alphaNumeric, alphaNumericAsync, and, ascii, async, blacklist, choice, choiceAsync, compare, compose, contains, containsAsync, creditCard, creditCardAsync, cusip, custom, customAsync, dataUri, date, dateAsync, different, digit, disable, elementClass, email, endpointMetadataKey, endsWith, endsWithAsync, error, escape, even, extension, extensionAsync, factor, factorAsync, file, fileAsync, fileSize, fileSizeAsync, formDefinitionMetadataKey, formFieldGroupsMetadataKey, formFieldsMetadataKey, getDisplay, getEndpoint, getFormDefinition, getFormGroups, getTableDefinition, greaterThan, greaterThanAsync, greaterThanEqualTo, greaterThanEqualToAsync, grid, headerMetadataKey, hexColor, iban, ibanAsync, image, imageAsync, json, latLong, latitude, leapYear, lessThan, lessThanAsync, lessThanEqualTo, lessThanEqualToAsync, longitude, lowerCase, ltrim, mac, mask, maxDate, maxDateAsync, maxLength, maxLengthAsync, maxNumber, maxNumberAsync, maxTime, maxTimeAsync, minDate, minDateAsync, minLength, minLengthAsync, minNumber, minNumberAsync, minTime, minTimeAsync, mixinDisableRipple, mixinDisabled, model, noneOf, noneOfAsync, not, notEmpty, numeric, numericAsync, odd, oneOf, oneOfAsync, or, password, passwordAsync, pattern, patternAsync, port, prefix, primeNumber, prop, propArray, propObject, range, rangeAsync, required, requiredTrue, rtrim, rule, sanitize, startsWith, startsWithAsync, stripLow, suffix, tableColumnsMetadataKey, tableDefinitionMetadataKey, time, timeAsync, toBoolean, toDate, toDouble, toFloat, toInt, toString, trim, unique, updateOn, upperCase, url, urlAsync, vdCollapseAnimation, whitelist };
 //# sourceMappingURL=messaia-cdk.mjs.map