@vality/matez 21.0.1-pr-496-5e2c2b6.0 → 22.0.1-1a8ec1d.0

package/fesm2022/vality-matez.mjs

@@ -1,7 +1,7 @@
 import * as i1$1 from '@angular/common';
-import { CommonModule, AsyncPipe, formatCurrency as formatCurrency$1, getCurrencySymbol, formatDate, NgClass } from '@angular/common';
+import { CommonModule, AsyncPipe, formatDate, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, NgModule, Input, EventEmitter, booleanAttribute, Output, HostBinding, InjectionToken, inject, Injectable, Directive, input, numberAttribute, isSignal, ChangeDetectorRef, DestroyRef, forwardRef, Injector, ElementRef, Renderer2, LOCALE_ID, model, runInInjectionContext, output, viewChild, computed, signal, ViewChild, TemplateRef, ContentChild, effect, ViewEncapsulation, DEFAULT_CURRENCY_CODE, Pipe } from '@angular/core';
+import { ChangeDetectionStrategy, Component, NgModule, Input, EventEmitter, booleanAttribute, Output, HostBinding, InjectionToken, inject, Injectable, Directive, input, numberAttribute, model, output, ElementRef, Renderer2, DestroyRef, Injector, isSignal, ChangeDetectorRef, forwardRef, LOCALE_ID, runInInjectionContext, viewChild, computed, signal, ViewChild, TemplateRef, ContentChild, effect, ViewEncapsulation, DEFAULT_CURRENCY_CODE, Pipe } from '@angular/core';
 import * as i1$2 from '@angular/material/button';
 import { MatButtonModule, MatIconButton, MatButton } from '@angular/material/button';
 import * as i4 from '@angular/material/dialog';
@@ -14,11 +14,11 @@ import * as i1 from '@angular/material/progress-bar';
 import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
 import * as i10 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
-import * as i3 from '@angular/forms';
+import * as i3$2 from '@angular/forms';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, NonNullableFormBuilder, FormsModule } from '@angular/forms';
 import * as i7 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i3$2 from '@angular/material/card';
+import * as i3$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i9 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -26,14 +26,24 @@ import * as i1$4 from '@angular/material/table';
 import { MatTableDataSource, MatTable, MatColumnDef, MatCellDef, MatHeaderCellDef, MatFooterCellDef, MatTableModule, MatRow } from '@angular/material/table';
 import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { random, get, difference, isEqual as isEqual$1, isObject as isObject$2, capitalize, negate, isEmpty as isEmpty$1, lowerFirst, isNil as isNil$1 } from 'lodash-es';
+import { random, isNil as isNil$1, get, difference, isEqual as isEqual$1, isObject as isObject$2, capitalize, negate, isEmpty as isEmpty$1, lowerFirst } from 'lodash-es';
+import * as i3 from '@angular/forms/signals';
+import { transformedValue, form, required, disabled, FormField } from '@angular/forms/signals';
 import * as i2$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i2$3 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { combineLatest, isObservable, defer, merge, mergeMap, EMPTY, catchError, of, scan, takeLast, from, switchMap, ReplaySubject, debounce, interval, concat, timer, tap, take, fromEvent, filter as filter$1, map as map$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, shareReplay as shareReplay$1, BehaviorSubject, Subject, Observable, debounceTime as debounceTime$1, first as first$1, forkJoin, lastValueFrom, timeout, skipWhile as skipWhile$1, race, skip, mergeScan as mergeScan$1, takeUntil, combineLatestWith, throttleTime } from 'rxjs';
+import { distinctUntilChanged, map, finalize, delay, startWith, shareReplay, catchError as catchError$1, filter, mergeScan, switchMap as switchMap$1, mergeWith, skipWhile, take as take$1, first, debounceTime, share } from 'rxjs/operators';
+import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
+import * as i1$6 from '@angular/router';
+import { Router, RouterModule, ActivatedRoute, RouterLink } from '@angular/router';
+export { MtxTooltip as Tooltip } from '@ng-matero/extensions/tooltip';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import * as i1$3 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import startCase from 'lodash-es/startCase';
 import { isPrimitive } from 'utility-types';
-import { isObservable, defer, merge, combineLatest, mergeMap, EMPTY, catchError, of, scan, takeLast, from, switchMap, ReplaySubject, debounce, interval, concat, timer, tap, take, fromEvent, filter as filter$1, map as map$1, startWith as startWith$1, distinctUntilChanged as distinctUntilChanged$1, shareReplay as shareReplay$1, BehaviorSubject, Subject, Observable, debounceTime as debounceTime$1, first as first$1, forkJoin, lastValueFrom, timeout, skipWhile as skipWhile$1, race, skip, mergeScan as mergeScan$1, takeUntil, combineLatestWith, throttleTime } from 'rxjs';
-import { finalize, map, delay, startWith, distinctUntilChanged, shareReplay, catchError as catchError$1, filter, mergeScan, switchMap as switchMap$1, mergeWith, skipWhile, take as take$1, first, debounceTime, share } from 'rxjs/operators';
-import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { isPromise } from 'rxjs/internal/util/isPromise';
 import { WrappedControlSuperclass, FormComponentSuperclass as FormComponentSuperclass$1 } from '@s-libs/ng-core';
 import omitBy from 'lodash-es/omitBy';
@@ -46,14 +56,6 @@ import isObject$1 from 'lodash-es/isObject';
 import * as papaparse from 'papaparse';
 import papaparse__default from 'papaparse';
 import autoBind from 'auto-bind';
-import * as i2$3 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i1$6 from '@angular/router';
-import { Router, RouterModule, ActivatedRoute, RouterLink } from '@angular/router';
-export { MtxTooltip as Tooltip } from '@ng-matero/extensions/tooltip';
-import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
-import * as i1$3 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i2$4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -65,7 +67,7 @@ import { enGB } from 'date-fns/locale';
 import { MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
 import { isEqual as isEqual$2, endOfDay, subDays, startOfDay, format, isValid, formatDistanceToNow } from 'date-fns';
-import * as i3$3 from '@ng-matero/extensions/select';
+import * as i3$4 from '@ng-matero/extensions/select';
 import { MtxSelectModule } from '@ng-matero/extensions/select';
 import * as i4$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -78,20 +80,20 @@ import * as i2$5 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 
 class ActionsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ActionsComponent, isStandalone: false, selector: "v-actions", ngImport: i0, template: "<div class=\"v-actions\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .v-actions{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:16px}::ng-deep .v-actions>*:first-child:not(:last-child){margin-right:auto}::ng-deep .v-actions>*:first-child:last-child{margin-left:auto}@media screen and (max-width:600px){::ng-deep .v-actions>*{margin-left:auto!important;margin-right:auto!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ActionsComponent, isStandalone: false, selector: "v-actions", ngImport: i0, template: "<div class=\"v-actions\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .v-actions{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:16px}::ng-deep .v-actions>*:first-child:not(:last-child){margin-right:auto}::ng-deep .v-actions>*:first-child:last-child{margin-left:auto}@media screen and (max-width:600px){::ng-deep .v-actions>*{margin-left:auto!important;margin-right:auto!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"v-actions\">\n    <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .v-actions{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:16px}::ng-deep .v-actions>*:first-child:not(:last-child){margin-right:auto}::ng-deep .v-actions>*:first-child:last-child{margin-left:auto}@media screen and (max-width:600px){::ng-deep .v-actions>*{margin-left:auto!important;margin-right:auto!important}}\n"] }]
         }] });
 
 class ActionsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: ActionsModule, declarations: [ActionsComponent], exports: [ActionsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionsModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ActionsModule, declarations: [ActionsComponent], exports: [ActionsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ActionsModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ActionsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ActionsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -114,22 +116,22 @@ class ProgressComponent {
             ? Math.max(Math.min((1 - this.progress) * 100, 100), 0)
             : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ProgressComponent, isStandalone: false, selector: "v-progress", inputs: { progress: "progress" }, ngImport: i0, template: "@if (!!mode) {\n    <mat-progress-bar [mode]=\"mode\" [value]=\"value\"></mat-progress-bar>\n}\n", dependencies: [{ kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ProgressComponent, isStandalone: false, selector: "v-progress", inputs: { progress: "progress" }, ngImport: i0, template: "@if (!!mode) {\n    <mat-progress-bar [mode]=\"mode\" [value]=\"value\"></mat-progress-bar>\n}\n", dependencies: [{ kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-progress', standalone: false, template: "@if (!!mode) {\n    <mat-progress-bar [mode]=\"mode\" [value]=\"value\"></mat-progress-bar>\n}\n" }]
+            args: [{ selector: 'v-progress', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "@if (!!mode) {\n    <mat-progress-bar [mode]=\"mode\" [value]=\"value\"></mat-progress-bar>\n}\n" }]
         }], propDecorators: { progress: [{
                 type: Input
             }] } });
 
 class ProgressModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: ProgressModule, declarations: [ProgressComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressModule, imports: [CommonModule, MatProgressBarModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ProgressModule, declarations: [ProgressComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressModule, imports: [CommonModule, MatProgressBarModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProgressComponent],
@@ -139,12 +141,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class DialogActionsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: DialogActionsComponent, isStandalone: false, selector: "v-dialog-actions", ngImport: i0, template: "<v-actions><ng-content></ng-content></v-actions>\n", dependencies: [{ kind: "component", type: ActionsComponent, selector: "v-actions" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DialogActionsComponent, isStandalone: false, selector: "v-dialog-actions", ngImport: i0, template: "<v-actions><ng-content></ng-content></v-actions>\n", dependencies: [{ kind: "component", type: ActionsComponent, selector: "v-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-dialog-actions', standalone: false, template: "<v-actions><ng-content></ng-content></v-actions>\n" }]
+            args: [{ selector: 'v-dialog-actions', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<v-actions><ng-content></ng-content></v-actions>\n" }]
         }] });
 
 var DialogResponseStatus;
@@ -157,6 +159,7 @@ var DialogResponseStatus;
 class DialogComponent {
     hostClass = true;
     title;
+    description;
     disabled = false;
     progress;
     hasDivider = true;
@@ -172,17 +175,19 @@ class DialogComponent {
     cancelDialog() {
         this.cancel.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: false, selector: "v-dialog", inputs: { title: "title", disabled: ["disabled", "disabled", booleanAttribute], progress: "progress", hasDivider: ["hasDivider", "hasDivider", booleanAttribute], noContent: ["noContent", "noContent", booleanAttribute], noActions: ["noActions", "noActions", booleanAttribute], noCloseButton: ["noCloseButton", "noCloseButton", booleanAttribute], fullSize: ["fullSize", "fullSize", booleanAttribute] }, outputs: { cancel: "cancel" }, host: { properties: { "class.v-dialog": "this.hostClass" } }, ngImport: i0, template: "<div [ngClass]=\"{ 'full-size': fullSize }\" class=\"dialog\">\n    <div class=\"dialog-title\">\n        <div>\n            <h2 class=\"font-normal text-2xl\">{{ title }}</h2>\n        </div>\n        @if (!noCloseButton) {\n            <mat-icon\n                [matDialogClose]=\"cancelData\"\n                class=\"dialog-title-close\"\n                inline\n                (click)=\"cancelDialog()\"\n                >clear</mat-icon\n            >\n        }\n    </div>\n\n    @if (!noContent) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-content\">\n            <ng-content></ng-content>\n        </div>\n    }\n    @if (!noActions) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-actions\">\n            <ng-content select=\"v-dialog-actions\"></ng-content>\n        </div>\n    }\n\n    <v-progress [progress]=\"progress\"></v-progress>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.dialog{flex-direction:column;box-sizing:border-box;display:flex;flex:1 1 100%;max-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog{max-height:calc(100vh - 48px)!important}}.dialog.full-size{min-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog.full-size{min-height:calc(100vh - 48px)!important}}.dialog-title{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center;padding:24px}.dialog-title h1,.dialog-title h2,.dialog-title h3,.dialog-title h4,.dialog-title h5,.dialog-title h6{margin:0}.dialog-title-close.dialog-title-close{cursor:pointer;font-size:24px}.dialog-title-close.dialog-title-close:hover{opacity:.5}.dialog-content{flex:1 1 100%;box-sizing:border-box;padding:24px;overflow:auto;display:grid}.dialog-actions{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: ProgressComponent, selector: "v-progress", inputs: ["progress"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DialogComponent, isStandalone: false, selector: "v-dialog", inputs: { title: "title", description: "description", disabled: ["disabled", "disabled", booleanAttribute], progress: "progress", hasDivider: ["hasDivider", "hasDivider", booleanAttribute], noContent: ["noContent", "noContent", booleanAttribute], noActions: ["noActions", "noActions", booleanAttribute], noCloseButton: ["noCloseButton", "noCloseButton", booleanAttribute], fullSize: ["fullSize", "fullSize", booleanAttribute] }, outputs: { cancel: "cancel" }, host: { properties: { "class.v-dialog": "this.hostClass" } }, ngImport: i0, template: "<div [ngClass]=\"{ 'full-size': fullSize }\" class=\"dialog\">\n    <div class=\"dialog-title\">\n        <div>\n            <h2 class=\"font-normal text-2xl\">{{ title }}</h2>\n            @if (description) {\n                <div class=\"text-sm text-[var(--mat-sys-outline)] font-normal mt-0.5\">\n                    {{ description }}\n                </div>\n            }\n        </div>\n        @if (!noCloseButton) {\n            <mat-icon\n                [matDialogClose]=\"cancelData\"\n                class=\"dialog-title-close\"\n                inline\n                (click)=\"cancelDialog()\"\n                >clear</mat-icon\n            >\n        }\n    </div>\n\n    @if (!noContent) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-content\">\n            <ng-content></ng-content>\n        </div>\n    }\n    @if (!noActions) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-actions\">\n            <ng-content select=\"v-dialog-actions\"></ng-content>\n        </div>\n    }\n\n    <v-progress [progress]=\"progress\"></v-progress>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.dialog{flex-direction:column;box-sizing:border-box;display:flex;flex:1 1 100%;max-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog{max-height:calc(100vh - 48px)!important}}.dialog.full-size{min-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog.full-size{min-height:calc(100vh - 48px)!important}}.dialog-title{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center;padding:24px}.dialog-title h1,.dialog-title h2,.dialog-title h3,.dialog-title h4,.dialog-title h5,.dialog-title h6{margin:0}.dialog-title-close.dialog-title-close{cursor:pointer;font-size:24px}.dialog-title-close.dialog-title-close:hover{opacity:.5}.dialog-content{flex:1 1 100%;box-sizing:border-box;padding:24px;overflow:auto;display:grid}.dialog-actions{padding:24px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: ProgressComponent, selector: "v-progress", inputs: ["progress"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-dialog', standalone: false, template: "<div [ngClass]=\"{ 'full-size': fullSize }\" class=\"dialog\">\n    <div class=\"dialog-title\">\n        <div>\n            <h2 class=\"font-normal text-2xl\">{{ title }}</h2>\n        </div>\n        @if (!noCloseButton) {\n            <mat-icon\n                [matDialogClose]=\"cancelData\"\n                class=\"dialog-title-close\"\n                inline\n                (click)=\"cancelDialog()\"\n                >clear</mat-icon\n            >\n        }\n    </div>\n\n    @if (!noContent) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-content\">\n            <ng-content></ng-content>\n        </div>\n    }\n    @if (!noActions) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-actions\">\n            <ng-content select=\"v-dialog-actions\"></ng-content>\n        </div>\n    }\n\n    <v-progress [progress]=\"progress\"></v-progress>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.dialog{flex-direction:column;box-sizing:border-box;display:flex;flex:1 1 100%;max-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog{max-height:calc(100vh - 48px)!important}}.dialog.full-size{min-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog.full-size{min-height:calc(100vh - 48px)!important}}.dialog-title{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center;padding:24px}.dialog-title h1,.dialog-title h2,.dialog-title h3,.dialog-title h4,.dialog-title h5,.dialog-title h6{margin:0}.dialog-title-close.dialog-title-close{cursor:pointer;font-size:24px}.dialog-title-close.dialog-title-close:hover{opacity:.5}.dialog-content{flex:1 1 100%;box-sizing:border-box;padding:24px;overflow:auto;display:grid}.dialog-actions{padding:24px}\n"] }]
+            args: [{ selector: 'v-dialog', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [ngClass]=\"{ 'full-size': fullSize }\" class=\"dialog\">\n    <div class=\"dialog-title\">\n        <div>\n            <h2 class=\"font-normal text-2xl\">{{ title }}</h2>\n            @if (description) {\n                <div class=\"text-sm text-[var(--mat-sys-outline)] font-normal mt-0.5\">\n                    {{ description }}\n                </div>\n            }\n        </div>\n        @if (!noCloseButton) {\n            <mat-icon\n                [matDialogClose]=\"cancelData\"\n                class=\"dialog-title-close\"\n                inline\n                (click)=\"cancelDialog()\"\n                >clear</mat-icon\n            >\n        }\n    </div>\n\n    @if (!noContent) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-content\">\n            <ng-content></ng-content>\n        </div>\n    }\n    @if (!noActions) {\n        @if (hasDivider) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"dialog-actions\">\n            <ng-content select=\"v-dialog-actions\"></ng-content>\n        </div>\n    }\n\n    <v-progress [progress]=\"progress\"></v-progress>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;height:100%}.dialog{flex-direction:column;box-sizing:border-box;display:flex;flex:1 1 100%;max-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog{max-height:calc(100vh - 48px)!important}}.dialog.full-size{min-height:calc(90vh - 48px)!important}@media screen and (max-width:959px){.dialog.full-size{min-height:calc(100vh - 48px)!important}}.dialog-title{flex-direction:row;box-sizing:border-box;display:flex;place-content:center space-between;align-items:center;padding:24px}.dialog-title h1,.dialog-title h2,.dialog-title h3,.dialog-title h4,.dialog-title h5,.dialog-title h6{margin:0}.dialog-title-close.dialog-title-close{cursor:pointer;font-size:24px}.dialog-title-close.dialog-title-close:hover{opacity:.5}.dialog-content{flex:1 1 100%;box-sizing:border-box;padding:24px;overflow:auto;display:grid}.dialog-actions{padding:24px}\n"] }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.v-dialog']
             }], title: [{
                 type: Input
+            }], description: [{
+                type: Input
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -255,10 +260,10 @@ class DialogService {
             ...config,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -266,8 +271,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class DialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: DialogModule, declarations: [DialogComponent, DialogActionsComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: DialogModule, declarations: [DialogComponent, DialogActionsComponent], imports: [CommonModule,
             MatDividerModule,
             MatButtonModule,
             ActionsModule,
@@ -275,7 +280,7 @@ class DialogModule {
             MatProgressBarModule,
             MatDialogModule,
             ProgressModule], exports: [DialogComponent, DialogActionsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogModule, providers: [DialogService], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogModule, providers: [DialogService], imports: [CommonModule,
             MatDividerModule,
             MatButtonModule,
             ActionsModule,
@@ -284,7 +289,7 @@ class DialogModule {
             MatDialogModule,
             ProgressModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -325,25 +330,237 @@ class DialogSuperclass {
             data,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogSuperclass, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: DialogSuperclass, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogSuperclass, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: DialogSuperclass, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogSuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DialogSuperclass, decorators: [{
             type: Directive
         }] });
 
 class ContentLoadingComponent {
-    width = input(random(35, 80) + '%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    width = input(random(35, 80) + '%', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     textSize = input(0, { ...(ngDevMode ? { debugName: "textSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    hiddenText = input(...(ngDevMode ? [undefined, { debugName: "hiddenText" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContentLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: ContentLoadingComponent, isStandalone: true, selector: "v-content-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hiddenText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n    [ngClass]=\"{ 'content-loading__text': !!hiddenText() }\"\n    [style.width]=\"hiddenText() || textSize() ? undefined : width()\"\n    class=\"content-loading\"\n    >{{ hiddenText() || '&nbsp;'.repeat(textSize() || 1) }}</span\n>\n", styles: ["@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.content-loading{color:transparent;display:inline-block;line-height:100%;background-color:#00000014;animation:content-loading-animation 1.5s ease-in-out infinite}.content-loading__text{color:inherit;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    hiddenText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hiddenText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: ContentLoadingComponent, isStandalone: true, selector: "v-content-loading", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, textSize: { classPropertyName: "textSize", publicName: "textSize", isSignal: true, isRequired: false, transformFunction: null }, hiddenText: { classPropertyName: "hiddenText", publicName: "hiddenText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n    [ngClass]=\"{ 'content-loading__text': !!hiddenText() }\"\n    [style.width]=\"hiddenText() || textSize() ? undefined : width()\"\n    class=\"content-loading\"\n    >{{ hiddenText() || '&nbsp;'.repeat(textSize() || 1) }}</span\n>\n", styles: ["@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.content-loading{color:transparent;display:inline-block;line-height:100%;background-color:#00000014;animation:content-loading-animation 1.5s ease-in-out infinite}.content-loading__text{color:inherit;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContentLoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ContentLoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-content-loading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<span\n    [ngClass]=\"{ 'content-loading__text': !!hiddenText() }\"\n    [style.width]=\"hiddenText() || textSize() ? undefined : width()\"\n    class=\"content-loading\"\n    >{{ hiddenText() || '&nbsp;'.repeat(textSize() || 1) }}</span\n>\n", styles: ["@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.content-loading{color:transparent;display:inline-block;line-height:100%;background-color:#00000014;animation:content-loading-animation 1.5s ease-in-out infinite}.content-loading__text{color:inherit;background-color:transparent}\n"] }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], textSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textSize", required: false }] }], hiddenText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenText", required: false }] }] } });
 
+class InputFieldComponent {
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    touch = output();
+    label;
+    placeholder = '';
+    type = 'text';
+    appearance;
+    size;
+    cleanButton = input(false, { ...(ngDevMode ? { debugName: "cleanButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    hintText = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hintText" }] : /* istanbul ignore next */ []));
+    formValue = transformedValue(this.value, {
+        parse: (rawValue) => ({
+            value: rawValue,
+        }),
+        format: (value) => {
+            if (this.type === 'number') {
+                return value ?? null;
+            }
+            return value ?? '';
+        },
+    });
+    control = form(this.formValue, (path) => {
+        required(path, { when: () => this.required() });
+        disabled(path, () => this.disabled());
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: InputFieldComponent, isStandalone: false, selector: "v-input-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: (v) => (v === 'string' ? 'text' : v) }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, cleanButton: { classPropertyName: "cleanButton", publicName: "cleanButton", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch" }, ngImport: i0, template: "<mat-form-field\n    [appearance]=\"appearance\"\n    [ngClass]=\"{\n        'v-input-field__small': size === 'small',\n        'v-input-field__outline': appearance === 'outline',\n    }\"\n    class=\"v-input-field\"\n>\n    @if (icon()) {\n        <div class=\"prefix\" matPrefix>\n            <mat-icon>{{ icon() }}</mat-icon>\n        </div>\n    }\n    <mat-label>{{ label }}</mat-label>\n    <input\n        [formField]=\"control\"\n        [placeholder]=\"placeholder\"\n        [type]=\"type\"\n        autocomplete=\"false\"\n        matInput\n        (blur)=\"touch.emit()\"\n    />\n    <div class=\"postfix\" matSuffix>\n        @if (cleanButton()) {\n            <button\n                [disabled]=\"!value()\"\n                [style.visibility]=\"value() ? '' : 'hidden'\"\n                mat-icon-button\n                type=\"button\"\n                (click)=\"control().reset(); value.set(undefined)\"\n            >\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n    </div>\n    @if (hintText()) {\n        <mat-hint>{{ hintText() }}</mat-hint>\n    }\n</mat-form-field>\n", styles: [".v-input-field{width:100%}.v-input-field .postfix{white-space:nowrap}.v-input-field__small ::ng-deep .mat-icon{transform:scale(.75)!important}.v-input-field__outline .postfix{padding-right:4px}.v-input-field__outline .prefix{padding-left:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'v-input-field', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<mat-form-field\n    [appearance]=\"appearance\"\n    [ngClass]=\"{\n        'v-input-field__small': size === 'small',\n        'v-input-field__outline': appearance === 'outline',\n    }\"\n    class=\"v-input-field\"\n>\n    @if (icon()) {\n        <div class=\"prefix\" matPrefix>\n            <mat-icon>{{ icon() }}</mat-icon>\n        </div>\n    }\n    <mat-label>{{ label }}</mat-label>\n    <input\n        [formField]=\"control\"\n        [placeholder]=\"placeholder\"\n        [type]=\"type\"\n        autocomplete=\"false\"\n        matInput\n        (blur)=\"touch.emit()\"\n    />\n    <div class=\"postfix\" matSuffix>\n        @if (cleanButton()) {\n            <button\n                [disabled]=\"!value()\"\n                [style.visibility]=\"value() ? '' : 'hidden'\"\n                mat-icon-button\n                type=\"button\"\n                (click)=\"control().reset(); value.set(undefined)\"\n            >\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n    </div>\n    @if (hintText()) {\n        <mat-hint>{{ hintText() }}</mat-hint>\n    }\n</mat-form-field>\n", styles: [".v-input-field{width:100%}.v-input-field .postfix{white-space:nowrap}.v-input-field__small ::ng-deep .mat-icon{transform:scale(.75)!important}.v-input-field__outline .postfix{padding-right:4px}.v-input-field__outline .prefix{padding-left:4px}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input,
+                args: [{ transform: (v) => (v === 'string' ? 'text' : v) }]
+            }], appearance: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], cleanButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleanButton", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }] } });
+
+class InputFieldModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: InputFieldModule, declarations: [InputFieldComponent], imports: [CommonModule, MatInputModule, FormField, MatIcon, MatIconButton], exports: [InputFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldModule, imports: [CommonModule, MatInputModule, MatIcon, MatIconButton] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [InputFieldComponent],
+                    exports: [InputFieldComponent],
+                    imports: [CommonModule, MatInputModule, FormField, MatIcon, MatIconButton],
+                }]
+        }] });
+
+function getProgressByCount(count, completedCount = Number.MIN_VALUE) {
+    return 1 - completedCount / count;
+}
+
+class TagComponent {
+    hostClass = true;
+    color;
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TagComponent, isStandalone: false, selector: "v-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-tag": "this.hostClass" } }, ngImport: i0, template: "<mat-chip-row\n    [disabled]=\"progress()\"\n    [ngClass]=\"{ loading: progress(), action: !!icon() }\"\n    class=\"tag {{ 'color-' + color }}\"\n    disableRipple\n>\n    @if (icon()) {\n        <button matChipRemove>\n            <mat-icon>{{ progress() ? 'autorenew' : icon() }}</mat-icon>\n        </button>\n    }\n    <ng-content></ng-content>\n</mat-chip-row>\n", styles: [":host ::ng-deep{pointer-events:none}:host .action ::ng-deep{pointer-events:auto;cursor:pointer}:host .action ::ng-deep button{pointer-events:none}:host ::ng-deep *:before{border:none!important}@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.tag.tag{transition:all .3s ease-in-out;background-color:var(--mat-sys-primary-container)}.tag.tag.color-pending{background-color:var(--v-color-pending-bg)}.tag.tag.color-pending ::ng-deep *{color:var(--v-color-pending-text)}.tag.tag.color-success{background-color:var(--v-color-success-bg)}.tag.tag.color-success ::ng-deep *{color:var(--v-color-success-text)}.tag.tag.color-warn{background-color:var(--mat-sys-error)}.tag.tag.color-warn ::ng-deep *{color:var(--mat-sys-on-primary)}.loading{animation:content-loading-animation 1.5s ease-in-out infinite}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'v-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-chip-row\n    [disabled]=\"progress()\"\n    [ngClass]=\"{ loading: progress(), action: !!icon() }\"\n    class=\"tag {{ 'color-' + color }}\"\n    disableRipple\n>\n    @if (icon()) {\n        <button matChipRemove>\n            <mat-icon>{{ progress() ? 'autorenew' : icon() }}</mat-icon>\n        </button>\n    }\n    <ng-content></ng-content>\n</mat-chip-row>\n", styles: [":host ::ng-deep{pointer-events:none}:host .action ::ng-deep{pointer-events:auto;cursor:pointer}:host .action ::ng-deep button{pointer-events:none}:host ::ng-deep *:before{border:none!important}@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.tag.tag{transition:all .3s ease-in-out;background-color:var(--mat-sys-primary-container)}.tag.tag.color-pending{background-color:var(--v-color-pending-bg)}.tag.tag.color-pending ::ng-deep *{color:var(--v-color-pending-text)}.tag.tag.color-success{background-color:var(--v-color-success-bg)}.tag.tag.color-success ::ng-deep *{color:var(--v-color-success-text)}.tag.tag.color-warn{background-color:var(--mat-sys-error)}.tag.tag.color-warn ::ng-deep *{color:var(--mat-sys-on-primary)}.loading{animation:content-loading-animation 1.5s ease-in-out infinite}\n"] }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.v-tag']
+            }], color: [{
+                type: Input
+            }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
+
+class TagModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: TagModule, declarations: [TagComponent], imports: [CommonModule, MatChipsModule, MatIconModule], exports: [TagComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagModule, imports: [CommonModule, MatChipsModule, MatIconModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TagModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TagComponent],
+                    imports: [CommonModule, MatChipsModule, MatIconModule],
+                    exports: [TagComponent],
+                }]
+        }] });
+
+const SPACES = /[\s\u00A0]/g;
+function normalizeString(str) {
+    return (str || '').replace(SPACES, ' ');
+}
+
+class HighlightDirective {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    dr = inject(DestroyRef);
+    injector = inject(Injector);
+    vHighlightText = input('', { ...(ngDevMode ? { debugName: "vHighlightText" } : /* istanbul ignore next */ {}), transform: (v) => String(v || '') });
+    vHighlightSearch = input('', { ...(ngDevMode ? { debugName: "vHighlightSearch" } : /* istanbul ignore next */ {}), transform: (v) => String(v || '') });
+    ngOnInit() {
+        combineLatest([
+            toObservable(this.vHighlightText, { injector: this.injector }).pipe(distinctUntilChanged(), map((text) => this.escapeHtml(text))),
+            toObservable(this.vHighlightSearch, { injector: this.injector }).pipe(distinctUntilChanged(), map((text) => this.escapeHtml(text))),
+        ])
+            .pipe(map(([text, search]) => {
+            if (!search) {
+                return text;
+            }
+            const re = new RegExp(`(${search.replace(SPACES, '\\s')})`, 'gi');
+            return text.replace(re, `<mark>$1</mark>`);
+        }), distinctUntilChanged(), takeUntilDestroyed(this.dr))
+            .subscribe((text) => {
+            this.renderer.setProperty(this.el.nativeElement, 'innerHTML', text);
+        });
+    }
+    escapeHtml(html) {
+        return html
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HighlightDirective, isStandalone: true, selector: "[vHighlight]", inputs: { vHighlightText: { classPropertyName: "vHighlightText", publicName: "vHighlightText", isSignal: true, isRequired: false, transformFunction: null }, vHighlightSearch: { classPropertyName: "vHighlightSearch", publicName: "vHighlightSearch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[vHighlight]',
+                }]
+        }], propDecorators: { vHighlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "vHighlightText", required: false }] }], vHighlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "vHighlightSearch", required: false }] }] } });
+
+class MenuValueComponent {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MenuValueComponent, isStandalone: true, selector: "v-menu-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` @if (value(); as v) {
+        <button [matMenuTriggerFor]="menu" class="button" mat-icon-button>
+            <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+            @for (item of v.params.items; track item; let index = $index) {
+                <button [disabled]="!!item?.disabled" mat-menu-item (click)="item?.click?.($event)">
+                    {{ item.label }}
+                </button>
+            }
+        </mat-menu>
+    }`, isInline: true, styles: [""], dependencies: [{ 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"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'v-menu-value', imports: [MatIcon, MatIconButton, MatMenu, MatMenuItem, MatMenuTrigger], template: ` @if (value(); as v) {
+        <button [matMenuTriggerFor]="menu" class="button" mat-icon-button>
+            <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+            @for (item of v.params.items; track item; let index = $index) {
+                <button [disabled]="!!item?.disabled" mat-menu-item (click)="item?.click?.($event)">
+                    {{ item.label }}
+                </button>
+            }
+        </mat-menu>
+    }`, changeDetection: ChangeDetectionStrategy.Eager }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class ToggleValueComponent {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToggleValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ToggleValueComponent, isStandalone: true, selector: "v-toggle-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` @if (value(); as v) {
+        <mat-slide-toggle
+            [checked]="value().value"
+            (change)="$event.source.checked = !!value().value"
+        >
+        </mat-slide-toggle>
+    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToggleValueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'v-toggle-value',
+                    imports: [MatSlideToggleModule],
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    template: ` @if (value(); as v) {
+        <mat-slide-toggle
+            [checked]="value().value"
+            (change)="$event.source.checked = !!value().value"
+        >
+        </mat-slide-toggle>
+    }`,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
 function renderList(list, renderItem, isMore) {
     return list.length ? (isMore ? '…' : list.map(renderItem).join(', ')) : '';
 }
@@ -427,10 +644,6 @@ function passError(handler, value) {
     }));
 }
 
-function getProgressByCount(count, completedCount = Number.MIN_VALUE) {
-    return 1 - completedCount / count;
-}
-
 function forkJoinToResult(sources, progress$, dataItems = [], concurrency = 4) {
     let completed = 0;
     if (progress$) {
@@ -499,10 +712,10 @@ class AsyncTransform {
         this.args$.next(args);
         return this.asyncPipe.transform(this.result$);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AsyncTransform, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AsyncTransform });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AsyncTransform, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AsyncTransform });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AsyncTransform, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AsyncTransform, decorators: [{
             type: Injectable
         }] });
 
@@ -550,7 +763,7 @@ function asyncStartWith(value, timerMs = 0) {
     return (src$) => concat(...(value ? [of(value)] : []), timer(timerMs).pipe(switchMap(() => src$)));
 }
 
-function tapLog(message = `Log`) {
+function tapLog(message = 'Log') {
     return (source) => {
         return source.pipe(tap((value) => console.log(`${message}:`, value)));
     };
@@ -610,6 +823,9 @@ function getErrorsTree(control) {
     return errors;
 }
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class AbstractControlSuperclass extends WrappedControlSuperclass {
     _cdr = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
@@ -635,13 +851,16 @@ class AbstractControlSuperclass extends WrappedControlSuperclass {
         return EMPTY;
     }
     onValidatorChange = () => undefined;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AbstractControlSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: AbstractControlSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AbstractControlSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: AbstractControlSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AbstractControlSuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AbstractControlSuperclass, decorators: [{
             type: Directive
         }] });
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormGroupSuperclass extends AbstractControlSuperclass {
     emptyValue;
     setDisabledState(_isDisabled) {
@@ -662,10 +881,10 @@ class FormGroupSuperclass extends AbstractControlSuperclass {
         }
         return outer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormGroupSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: FormGroupSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FormGroupSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormGroupSuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormGroupSuperclass, decorators: [{
             type: Directive
         }] });
 
@@ -686,15 +905,21 @@ const createControlProviders = (component) => [
     provideValidators(component),
 ];
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormControlSuperclass extends AbstractControlSuperclass {
     control = new FormControl();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormControlSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: FormControlSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FormControlSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormControlSuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlSuperclass, decorators: [{
             type: Directive
         }] });
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormComponentSuperclass extends FormComponentSuperclass$1 {
     _cdr = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
@@ -713,13 +938,16 @@ class FormComponentSuperclass extends FormComponentSuperclass$1 {
         this.onValidatorChange = fn;
     }
     onValidatorChange = () => undefined;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormComponentSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: FormComponentSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormComponentSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FormComponentSuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormComponentSuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormComponentSuperclass, decorators: [{
             type: Directive
         }] });
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormArraySuperclass extends FormGroupSuperclass {
     outerToInnerValue(outer) {
         if (hasControls(this.control)) {
@@ -734,10 +962,10 @@ class FormArraySuperclass extends FormGroupSuperclass {
         }
         return outer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormArraySuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: FormArraySuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormArraySuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: FormArraySuperclass, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FormArraySuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormArraySuperclass, decorators: [{
             type: Directive
         }] });
 
@@ -784,11 +1012,26 @@ const toMajor = (amount, currencyCode) => toMajorByExponent(amount, getCurrencyE
 const toMinorByExponent = (amount, exponent) => Math.round(amount * 10 ** exponent);
 const toMinor = (amount, currencyCode) => toMinorByExponent(amount, getCurrencyExponent(currencyCode));
 
+const DEFAULT_EXPONENT = 2;
 function formatCurrency(amount, currencyCode = 'USD', format = 'long', locale = 'en-GB', exponent, isMajor = false) {
-    if (typeof exponent !== 'number') {
-        exponent = getCurrencyExponent(currencyCode) || 0;
-    }
-    return formatCurrency$1(isMajor ? amount : toMajorByExponent(amount, exponent), locale, getCurrencySymbol(currencyCode, 'narrow', locale), currencyCode, format === 'short' ? `1.0-${exponent}` : `1.${exponent}-${exponent}`);
+    const unknownExponent = isMajor || isNil$1(exponent);
+    if (unknownExponent)
+        exponent = getCurrencyExponent(currencyCode) || DEFAULT_EXPONENT;
+    const value = isMajor ? amount : toMajorByExponent(amount, exponent);
+    let result;
+    try {
+        result = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: currencyCode,
+        }).format(value);
+    }
+    catch {
+        result = `${Intl.NumberFormat(locale, {
+            style: 'decimal',
+            minimumFractionDigits: exponent,
+        }).format(value)} ${currencyCode}`;
+    }
+    return (result + (unknownExponent ? (format === 'short' ? '' : ` [default exp: ${exponent}]`) : ''));
 }
 
 function select(obj, selectFn, defaultValue, restParams = []) {
@@ -1128,6 +1371,7 @@ class ObservableResource {
             value$,
             value: toSignal(value$, { injector: this.injector }),
             map: (fn) => this.map(fn, value$),
+            getFirstValue: () => combineLatest([value$, this.isLoading$]).pipe(skipWhile(([_, isLoading]) => isLoading), map(([value]) => value), take$1(1)),
         });
     }
 }
@@ -1149,6 +1393,7 @@ class PagedObservableResource extends ObservableResource {
             this.initPaged(options);
     }
     initPaged({ loader, size, ...options }) {
+        this.pagedOptions = { size: size || 25 };
         // TODO: fix types
         super.init({
             params: EMPTY,
@@ -1163,7 +1408,6 @@ class PagedObservableResource extends ObservableResource {
             },
             map: (value) => value.result,
         });
-        this.pagedOptions = { size: size || 20 };
         this.hasMore$ = this.accValue$.pipe(map$1((value) => !!value.continuationToken));
         this.hasMore = toSignal(this.hasMore$, { initialValue: false });
         this.result$ = this.value$;
@@ -1205,184 +1449,6 @@ function fetchAll(loadFn, continuationToken) {
     }));
 }
 
-class InputFieldComponent extends FormControlSuperclass {
-    label;
-    placeholder = '';
-    type = 'string';
-    appearance;
-    size;
-    cleanButton = input(false, { ...(ngDevMode ? { debugName: "cleanButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    hintText = input(...(ngDevMode ? [undefined, { debugName: "hintText" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputFieldComponent, isStandalone: false, selector: "v-input-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, cleanButton: { classPropertyName: "cleanButton", publicName: "cleanButton", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: true, isRequired: false, transformFunction: null } }, providers: createControlProviders(() => InputFieldComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field\n    [appearance]=\"appearance\"\n    [ngClass]=\"{\n        'v-input-field__small': size === 'small',\n        'v-input-field__outline': appearance === 'outline',\n    }\"\n    class=\"v-input-field\"\n>\n    @if (icon()) {\n        <div class=\"prefix\" matPrefix>\n            <mat-icon>{{ icon() }}</mat-icon>\n        </div>\n    }\n    <mat-label>{{ label }}</mat-label>\n    <input\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [type]=\"type\"\n        autocomplete=\"false\"\n        matInput\n    />\n    <div class=\"postfix\" matSuffix>\n        @if (cleanButton()) {\n            <button\n                [disabled]=\"!control.value\"\n                [style.visibility]=\"control.value ? '' : 'hidden'\"\n                mat-icon-button\n                (click)=\"control.reset()\"\n            >\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n    </div>\n    @if (hintText()) {\n        <mat-hint>{{ hintText() }}</mat-hint>\n    }\n</mat-form-field>\n", styles: [".v-input-field{width:100%}.v-input-field .postfix{white-space:nowrap}.v-input-field__small ::ng-deep .mat-icon{transform:scale(.75)!important}.v-input-field__outline .postfix{padding-right:4px}.v-input-field__outline .prefix{padding-left:4px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$2.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.2.5", ngImport: i0, type: InputFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'v-input-field', providers: createControlProviders(() => InputFieldComponent), standalone: false, template: "<mat-form-field\n    [appearance]=\"appearance\"\n    [ngClass]=\"{\n        'v-input-field__small': size === 'small',\n        'v-input-field__outline': appearance === 'outline',\n    }\"\n    class=\"v-input-field\"\n>\n    @if (icon()) {\n        <div class=\"prefix\" matPrefix>\n            <mat-icon>{{ icon() }}</mat-icon>\n        </div>\n    }\n    <mat-label>{{ label }}</mat-label>\n    <input\n        [formControl]=\"control\"\n        [placeholder]=\"placeholder\"\n        [type]=\"type\"\n        autocomplete=\"false\"\n        matInput\n    />\n    <div class=\"postfix\" matSuffix>\n        @if (cleanButton()) {\n            <button\n                [disabled]=\"!control.value\"\n                [style.visibility]=\"control.value ? '' : 'hidden'\"\n                mat-icon-button\n                (click)=\"control.reset()\"\n            >\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n    </div>\n    @if (hintText()) {\n        <mat-hint>{{ hintText() }}</mat-hint>\n    }\n</mat-form-field>\n", styles: [".v-input-field{width:100%}.v-input-field .postfix{white-space:nowrap}.v-input-field__small ::ng-deep .mat-icon{transform:scale(.75)!important}.v-input-field__outline .postfix{padding-right:4px}.v-input-field__outline .prefix{padding-left:4px}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], cleanButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleanButton", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], hintText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintText", required: false }] }] } });
-
-class InputFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: InputFieldModule, declarations: [InputFieldComponent], imports: [CommonModule, MatInputModule, ReactiveFormsModule, MatIcon, MatIconButton], exports: [InputFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputFieldModule, imports: [CommonModule, MatInputModule, ReactiveFormsModule, MatIcon, MatIconButton] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [InputFieldComponent],
-                    exports: [InputFieldComponent],
-                    imports: [CommonModule, MatInputModule, ReactiveFormsModule, MatIcon, MatIconButton],
-                }]
-        }] });
-
-class TagComponent {
-    hostClass = true;
-    color;
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TagComponent, isStandalone: false, selector: "v-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.v-tag": "this.hostClass" } }, ngImport: i0, template: "<mat-chip-row\n    [disabled]=\"progress()\"\n    [ngClass]=\"{ loading: progress(), action: !!icon() }\"\n    class=\"tag {{ 'color-' + color }}\"\n    disableRipple\n>\n    @if (icon()) {\n        <button matChipRemove>\n            <mat-icon>{{ progress() ? 'autorenew' : icon() }}</mat-icon>\n        </button>\n    }\n    <ng-content></ng-content>\n</mat-chip-row>\n", styles: [":host ::ng-deep{pointer-events:none}:host .action ::ng-deep{pointer-events:auto;cursor:pointer}:host .action ::ng-deep button{pointer-events:none}:host ::ng-deep *:before{border:none!important}@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.tag.tag{transition:all .3s ease-in-out;background-color:var(--mat-sys-primary-container)}.tag.tag.color-pending{background-color:var(--v-color-pending-bg)}.tag.tag.color-pending ::ng-deep *{color:var(--v-color-pending-text)}.tag.tag.color-success{background-color:var(--v-color-success-bg)}.tag.tag.color-success ::ng-deep *{color:var(--v-color-success-text)}.tag.tag.color-warn{background-color:var(--mat-sys-error)}.tag.tag.color-warn ::ng-deep *{color:var(--mat-sys-on-primary)}.loading{animation:content-loading-animation 1.5s ease-in-out infinite}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'v-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-chip-row\n    [disabled]=\"progress()\"\n    [ngClass]=\"{ loading: progress(), action: !!icon() }\"\n    class=\"tag {{ 'color-' + color }}\"\n    disableRipple\n>\n    @if (icon()) {\n        <button matChipRemove>\n            <mat-icon>{{ progress() ? 'autorenew' : icon() }}</mat-icon>\n        </button>\n    }\n    <ng-content></ng-content>\n</mat-chip-row>\n", styles: [":host ::ng-deep{pointer-events:none}:host .action ::ng-deep{pointer-events:auto;cursor:pointer}:host .action ::ng-deep button{pointer-events:none}:host ::ng-deep *:before{border:none!important}@keyframes content-loading-animation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.tag.tag{transition:all .3s ease-in-out;background-color:var(--mat-sys-primary-container)}.tag.tag.color-pending{background-color:var(--v-color-pending-bg)}.tag.tag.color-pending ::ng-deep *{color:var(--v-color-pending-text)}.tag.tag.color-success{background-color:var(--v-color-success-bg)}.tag.tag.color-success ::ng-deep *{color:var(--v-color-success-text)}.tag.tag.color-warn{background-color:var(--mat-sys-error)}.tag.tag.color-warn ::ng-deep *{color:var(--mat-sys-on-primary)}.loading{animation:content-loading-animation 1.5s ease-in-out infinite}\n"] }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.v-tag']
-            }], color: [{
-                type: Input
-            }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
-
-class TagModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: TagModule, declarations: [TagComponent], imports: [CommonModule, MatChipsModule, MatIconModule], exports: [TagComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TagModule, imports: [CommonModule, MatChipsModule, MatIconModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TagModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TagComponent],
-                    imports: [CommonModule, MatChipsModule, MatIconModule],
-                    exports: [TagComponent],
-                }]
-        }] });
-
-const SPACES = /[\s\u00A0]/g;
-function normalizeString(str) {
-    return (str || '').replace(SPACES, ' ');
-}
-
-class HighlightDirective {
-    el = inject(ElementRef);
-    renderer = inject(Renderer2);
-    dr = inject(DestroyRef);
-    injector = inject(Injector);
-    vHighlightText = input('', { ...(ngDevMode ? { debugName: "vHighlightText" } : /* istanbul ignore next */ {}), transform: (v) => String(v || '') });
-    vHighlightSearch = input('', { ...(ngDevMode ? { debugName: "vHighlightSearch" } : /* istanbul ignore next */ {}), transform: (v) => String(v || '') });
-    ngOnInit() {
-        combineLatest([
-            toObservable(this.vHighlightText, { injector: this.injector }).pipe(distinctUntilChanged(), map((text) => this.escapeHtml(text))),
-            toObservable(this.vHighlightSearch, { injector: this.injector }).pipe(distinctUntilChanged(), map((text) => this.escapeHtml(text))),
-        ])
-            .pipe(map(([text, search]) => {
-            if (!search) {
-                return text;
-            }
-            const re = new RegExp(`(${search.replace(SPACES, '\\s')})`, 'gi');
-            return text.replace(re, `<mark>$1</mark>`);
-        }), distinctUntilChanged(), takeUntilDestroyed(this.dr))
-            .subscribe((text) => {
-            this.renderer.setProperty(this.el.nativeElement, 'innerHTML', text);
-        });
-    }
-    escapeHtml(html) {
-        return html
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#39;');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: HighlightDirective, isStandalone: true, selector: "[vHighlight]", inputs: { vHighlightText: { classPropertyName: "vHighlightText", publicName: "vHighlightText", isSignal: true, isRequired: false, transformFunction: null }, vHighlightSearch: { classPropertyName: "vHighlightSearch", publicName: "vHighlightSearch", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HighlightDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[vHighlight]',
-                }]
-        }], propDecorators: { vHighlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "vHighlightText", required: false }] }], vHighlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "vHighlightSearch", required: false }] }] } });
-
-class MenuValueComponent {
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MenuValueComponent, isStandalone: true, selector: "v-menu-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` @if (value(); as v) {
-        <button [matMenuTriggerFor]="menu" class="button" mat-icon-button>
-            <mat-icon>more_vert</mat-icon>
-        </button>
-        <mat-menu #menu="matMenu">
-            @for (item of v.params.items; track item; let index = $index) {
-                <button [disabled]="!!item?.disabled" mat-menu-item (click)="item?.click?.($event)">
-                    {{ item.label }}
-                </button>
-            }
-        </mat-menu>
-    }`, isInline: true, styles: [""], dependencies: [{ 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"] }, { kind: "component", type: 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: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MenuValueComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'v-menu-value', imports: [MatIcon, MatIconButton, MatMenu, MatMenuItem, MatMenuTrigger], template: ` @if (value(); as v) {
-        <button [matMenuTriggerFor]="menu" class="button" mat-icon-button>
-            <mat-icon>more_vert</mat-icon>
-        </button>
-        <mat-menu #menu="matMenu">
-            @for (item of v.params.items; track item; let index = $index) {
-                <button [disabled]="!!item?.disabled" mat-menu-item (click)="item?.click?.($event)">
-                    {{ item.label }}
-                </button>
-            }
-        </mat-menu>
-    }` }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
-
-class ToggleValueComponent {
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToggleValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ToggleValueComponent, isStandalone: true, selector: "v-toggle-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` @if (value(); as v) {
-        <mat-slide-toggle
-            [checked]="value().value"
-            (change)="$event.source.checked = !!value().value"
-        >
-        </mat-slide-toggle>
-    }`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$3.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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToggleValueComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'v-toggle-value',
-                    imports: [MatSlideToggleModule],
-                    template: ` @if (value(); as v) {
-        <mat-slide-toggle
-            [checked]="value().value"
-            (change)="$event.source.checked = !!value().value"
-        >
-        </mat-slide-toggle>
-    }`,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
-
 function currencyAmountValueToString(value) {
     if (typeof value?.value !== 'number') {
         return '';
@@ -1419,14 +1485,26 @@ function valueToString(value) {
 class ValueComponent {
     injector = inject(Injector);
     router = inject(Router);
-    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    lazyValue = input(...(ngDevMode ? [undefined, { debugName: "lazyValue" }] : /* istanbul ignore next */ []));
-    lazyVisible = model(false, ...(ngDevMode ? [{ debugName: "lazyVisible" }] : /* istanbul ignore next */ []));
+    value = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    lazyValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lazyValue" }] : /* istanbul ignore next */ []));
+    lazyVisible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyVisible" }] : /* istanbul ignore next */ []));
     progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     inline = false;
     emptySymbol = '―';
     highlight;
-    value$ = combineLatest([toObservable(this.value), toObservable(this.lazyValue)]).pipe(switchMap(([value, lazyValue]) => (isObservable(lazyValue) ? lazyValue : of(value))), shareReplay({ refCount: true, bufferSize: 1 }));
+    value$ = combineLatest([
+        toObservable(this.value),
+        toObservable(this.lazyValue),
+        toObservable(this.lazyVisible),
+    ]).pipe(switchMap(([value, lazyValue, lazyVisible]) => {
+        if (lazyVisible && isObservable(lazyValue)) {
+            return lazyValue;
+        }
+        return of(value);
+    }), shareReplay({ refCount: true, bufferSize: 1 }));
     valueText$ = this.value$.pipe(map((value) => runInInjectionContext(this.injector, () => valueToString(value))), shareReplay({ refCount: true, bufferSize: 1 }));
     inProgress$ = combineLatest([
         toObservable(this.progress),
@@ -1452,10 +1530,10 @@ class ValueComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ValueComponent, isStandalone: true, selector: "v-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lazyValue: { classPropertyName: "lazyValue", publicName: "lazyValue", isSignal: true, isRequired: false, transformFunction: null }, lazyVisible: { classPropertyName: "lazyVisible", publicName: "lazyVisible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptySymbol: { classPropertyName: "emptySymbol", publicName: "emptySymbol", isSignal: false, isRequired: false, transformFunction: (v) => (v === false ? '' : typeof v === 'string' ? v : '―') }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { lazyVisible: "lazyVisibleChange" }, host: { properties: { "class.inline": "inline" } }, ngImport: i0, template: "@if (!value() && lazyValue() && !lazyVisible()) {\n    <button class=\"button\" mat-icon-button (click)=\"lazyVisible.set(true)\">\n        <mat-icon>sync</mat-icon>\n    </button>\n} @else {\n    @if (value$ | async; as v) {\n        <div class=\"flex gap-1 items-center\">\n            @if (v.prefix) {\n                <button\n                    class=\"action ml-[-16px]\"\n                    mat-icon-button\n                    (click)=\"v.prefix.click ? v.prefix.click($event) : undefined\"\n                >\n                    <mat-icon>{{ v.prefix.icon }}</mat-icon>\n                </button>\n            }\n            <div\n                [ngClass]=\"{ wrapper__action: v.click || v.link }\"\n                class=\"wrapper\"\n                (click)=\"click($event)\"\n            >\n                @if (v.template) {\n                    <ng-container *ngTemplateOutlet=\"v.template; context: {}\"></ng-container>\n                } @else {\n                    @if (v.color) {\n                        <v-tag [color]=\"v.color\">\n                            <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                        </v-tag>\n                    } @else {\n                        <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                    }\n\n                    <ng-template #tooltipTemplate>\n                        @if (v.tooltip) {\n                            <span\n                                [matTooltip]=\"v.tooltip\"\n                                class=\"tooltip\"\n                                matTooltipClass=\"tooltip-content\"\n                            >\n                                <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                            </span>\n                        } @else {\n                            <span [title]=\"v.value\">\n                                <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                            </span>\n                        }\n                    </ng-template>\n\n                    <ng-template #valueTemplate>\n                        @switch (v.type) {\n                            @case ('menu') {\n                                <v-menu-value [value]=\"v\"></v-menu-value>\n                            }\n                            @case ('toggle') {\n                                <v-toggle-value [value]=\"v\"></v-toggle-value>\n                            }\n                            @default {\n                                @let valueText = valueText$ | async;\n                                @if (inProgress$ | async) {\n                                    <v-content-loading [hiddenText]=\"valueText\"></v-content-loading>\n                                } @else if (valueText) {\n                                    <span\n                                        [ngClass]=\"{ value__click: v.click, value__link: v.link }\"\n                                        [vHighlightSearch]=\"highlight\"\n                                        [vHighlightText]=\"valueText\"\n                                        vHighlight\n                                    ></span>\n                                } @else if (v.error) {\n                                    <mat-icon [matTooltip]=\"v.error | json\">error</mat-icon>\n                                } @else if (emptySymbol) {\n                                    <span class=\"text-[var(--mat-sys-outline)]\">{{\n                                        emptySymbol\n                                    }}</span>\n                                }\n                            }\n                        }\n                    </ng-template>\n                }\n\n                @if (v.description) {\n                    <div\n                        [title]=\"v.description\"\n                        [vHighlightSearch]=\"highlight\"\n                        [vHighlightText]=\"v.description\"\n                        class=\"description text-[var(--mat-sys-outline)] text-xs\"\n                        vHighlight\n                    ></div>\n                }\n            </div>\n            @if (v.postfix) {\n                <button\n                    class=\"action ml-auto mr-[-16px]\"\n                    mat-icon-button\n                    (click)=\"v.postfix.click ? v.postfix.click($event) : undefined\"\n                >\n                    <mat-icon>{{ v.postfix.icon }}</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <v-content-loading></v-content-loading>\n    }\n}\n", styles: [":host{cursor:default;text-align:left}.action{opacity:.1;transition:opacity .2s ease-in-out}.action:hover{opacity:1}::ng-deep .inline,::ng-deep .inline *{white-space:nowrap}.tooltip{text-decoration:underline;text-decoration-style:dotted}::ng-deep .tooltip-content{white-space:pre-line}.wrapper__action{cursor:pointer}.value__click,.value__link{color:var(--mat-sys-primary)}.value__click:hover{text-decoration:underline;text-decoration-style:dashed}.value__link:hover{text-decoration:underline}.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: TagComponent, selector: "v-tag", inputs: ["color", "icon", "progress"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MenuValueComponent, selector: "v-menu-value", inputs: ["value"] }, { kind: "component", type: ContentLoadingComponent, selector: "v-content-loading", inputs: ["width", "textSize", "hiddenText"] }, { kind: "directive", type: HighlightDirective, selector: "[vHighlight]", inputs: ["vHighlightText", "vHighlightSearch"] }, { kind: "component", type: ToggleValueComponent, selector: "v-toggle-value", inputs: ["value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ValueComponent, isStandalone: true, selector: "v-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, lazyValue: { classPropertyName: "lazyValue", publicName: "lazyValue", isSignal: true, isRequired: false, transformFunction: null }, lazyVisible: { classPropertyName: "lazyVisible", publicName: "lazyVisible", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, emptySymbol: { classPropertyName: "emptySymbol", publicName: "emptySymbol", isSignal: false, isRequired: false, transformFunction: (v) => (v === false ? '' : typeof v === 'string' ? v : '―') }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { lazyVisible: "lazyVisibleChange" }, host: { properties: { "class.inline": "inline" } }, ngImport: i0, template: "@if (value$ | async; as v) {\n    <div class=\"flex gap-1 items-center\">\n        @if (lazyValue() && !lazyVisible()) {\n            <button\n                class=\"button ml-[-8px] mr-[-8px]\"\n                mat-icon-button\n                (click)=\"lazyVisible.set(true)\"\n            >\n                <mat-icon>sync</mat-icon>\n            </button>\n        }\n        @if (v.error) {\n            <mat-icon\n                [matTooltip]=\"\n                    v.error?.['error']?.['message'] || v.error?.['message'] || (v.error | json)\n                \"\n                >error</mat-icon\n            >\n        }\n        @if (v.prefix) {\n            <button\n                class=\"action ml-[-16px]\"\n                mat-icon-button\n                (click)=\"v.prefix.click ? v.prefix.click($event) : undefined\"\n            >\n                <mat-icon>{{ v.prefix.icon }}</mat-icon>\n            </button>\n        }\n        <div\n            [ngClass]=\"{ wrapper__action: v.click || v.link }\"\n            class=\"wrapper\"\n            (click)=\"click($event)\"\n        >\n            @if (v.template) {\n                <ng-container *ngTemplateOutlet=\"v.template; context: {}\"></ng-container>\n            } @else {\n                @if (v.color) {\n                    <v-tag [color]=\"v.color\">\n                        <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                    </v-tag>\n                } @else {\n                    <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                }\n\n                <ng-template #tooltipTemplate>\n                    @if (v.tooltip) {\n                        <span\n                            [matTooltip]=\"v.tooltip\"\n                            class=\"tooltip\"\n                            matTooltipClass=\"tooltip-content\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                        </span>\n                    } @else {\n                        <span [title]=\"v.value\">\n                            <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                        </span>\n                    }\n                </ng-template>\n\n                <ng-template #valueTemplate>\n                    @switch (v.type) {\n                        @case ('menu') {\n                            <v-menu-value [value]=\"v\"></v-menu-value>\n                        }\n                        @case ('toggle') {\n                            <v-toggle-value [value]=\"v\"></v-toggle-value>\n                        }\n                        @default {\n                            @let valueText = valueText$ | async;\n                            @if (inProgress$ | async) {\n                                <v-content-loading [hiddenText]=\"valueText\"></v-content-loading>\n                            } @else if (valueText) {\n                                <span\n                                    [ngClass]=\"{ value__click: v.click, value__link: v.link }\"\n                                    [vHighlightSearch]=\"highlight\"\n                                    [vHighlightText]=\"valueText\"\n                                    vHighlight\n                                ></span>\n                            } @else if (emptySymbol) {\n                                <span class=\"text-[var(--mat-sys-outline)]\">{{ emptySymbol }}</span>\n                            }\n                        }\n                    }\n                </ng-template>\n            }\n\n            @if (v.description) {\n                <div\n                    [title]=\"v.description\"\n                    [vHighlightSearch]=\"highlight\"\n                    [vHighlightText]=\"v.description\"\n                    class=\"description text-[var(--mat-sys-outline)] text-xs\"\n                    vHighlight\n                ></div>\n            }\n        </div>\n        @if (v.postfix) {\n            <button\n                class=\"action ml-auto mr-[-16px]\"\n                mat-icon-button\n                (click)=\"v.postfix.click ? v.postfix.click($event) : undefined\"\n            >\n                <mat-icon>{{ v.postfix.icon }}</mat-icon>\n            </button>\n        }\n    </div>\n} @else if (lazyValue() && !lazyVisible()) {\n    <button class=\"button ml-[-8px]\" mat-icon-button (click)=\"lazyVisible.set(true)\">\n        <mat-icon>sync</mat-icon>\n    </button>\n} @else {\n    <v-content-loading></v-content-loading>\n}\n", styles: [":host{cursor:default;text-align:left}.action{opacity:.1;transition:opacity .2s ease-in-out}.action:hover{opacity:1}::ng-deep .inline,::ng-deep .inline *{white-space:nowrap}.tooltip{text-decoration:underline;text-decoration-style:dotted}::ng-deep .tooltip-content{white-space:pre-line}.wrapper__action{cursor:pointer}.value__click,.value__link{color:var(--mat-sys-primary)}.value__click:hover{text-decoration:underline;text-decoration-style:dashed}.value__link:hover{text-decoration:underline}.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: TagComponent, selector: "v-tag", inputs: ["color", "icon", "progress"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MenuValueComponent, selector: "v-menu-value", inputs: ["value"] }, { kind: "component", type: ContentLoadingComponent, selector: "v-content-loading", inputs: ["width", "textSize", "hiddenText"] }, { kind: "directive", type: HighlightDirective, selector: "[vHighlight]", inputs: ["vHighlightText", "vHighlightSearch"] }, { kind: "component", type: ToggleValueComponent, selector: "v-toggle-value", inputs: ["value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-value', imports: [
                         CommonModule,
@@ -1469,7 +1547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         MatButtonModule,
                     ], host: {
                         '[class.inline]': 'inline',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!value() && lazyValue() && !lazyVisible()) {\n    <button class=\"button\" mat-icon-button (click)=\"lazyVisible.set(true)\">\n        <mat-icon>sync</mat-icon>\n    </button>\n} @else {\n    @if (value$ | async; as v) {\n        <div class=\"flex gap-1 items-center\">\n            @if (v.prefix) {\n                <button\n                    class=\"action ml-[-16px]\"\n                    mat-icon-button\n                    (click)=\"v.prefix.click ? v.prefix.click($event) : undefined\"\n                >\n                    <mat-icon>{{ v.prefix.icon }}</mat-icon>\n                </button>\n            }\n            <div\n                [ngClass]=\"{ wrapper__action: v.click || v.link }\"\n                class=\"wrapper\"\n                (click)=\"click($event)\"\n            >\n                @if (v.template) {\n                    <ng-container *ngTemplateOutlet=\"v.template; context: {}\"></ng-container>\n                } @else {\n                    @if (v.color) {\n                        <v-tag [color]=\"v.color\">\n                            <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                        </v-tag>\n                    } @else {\n                        <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                    }\n\n                    <ng-template #tooltipTemplate>\n                        @if (v.tooltip) {\n                            <span\n                                [matTooltip]=\"v.tooltip\"\n                                class=\"tooltip\"\n                                matTooltipClass=\"tooltip-content\"\n                            >\n                                <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                            </span>\n                        } @else {\n                            <span [title]=\"v.value\">\n                                <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                            </span>\n                        }\n                    </ng-template>\n\n                    <ng-template #valueTemplate>\n                        @switch (v.type) {\n                            @case ('menu') {\n                                <v-menu-value [value]=\"v\"></v-menu-value>\n                            }\n                            @case ('toggle') {\n                                <v-toggle-value [value]=\"v\"></v-toggle-value>\n                            }\n                            @default {\n                                @let valueText = valueText$ | async;\n                                @if (inProgress$ | async) {\n                                    <v-content-loading [hiddenText]=\"valueText\"></v-content-loading>\n                                } @else if (valueText) {\n                                    <span\n                                        [ngClass]=\"{ value__click: v.click, value__link: v.link }\"\n                                        [vHighlightSearch]=\"highlight\"\n                                        [vHighlightText]=\"valueText\"\n                                        vHighlight\n                                    ></span>\n                                } @else if (v.error) {\n                                    <mat-icon [matTooltip]=\"v.error | json\">error</mat-icon>\n                                } @else if (emptySymbol) {\n                                    <span class=\"text-[var(--mat-sys-outline)]\">{{\n                                        emptySymbol\n                                    }}</span>\n                                }\n                            }\n                        }\n                    </ng-template>\n                }\n\n                @if (v.description) {\n                    <div\n                        [title]=\"v.description\"\n                        [vHighlightSearch]=\"highlight\"\n                        [vHighlightText]=\"v.description\"\n                        class=\"description text-[var(--mat-sys-outline)] text-xs\"\n                        vHighlight\n                    ></div>\n                }\n            </div>\n            @if (v.postfix) {\n                <button\n                    class=\"action ml-auto mr-[-16px]\"\n                    mat-icon-button\n                    (click)=\"v.postfix.click ? v.postfix.click($event) : undefined\"\n                >\n                    <mat-icon>{{ v.postfix.icon }}</mat-icon>\n                </button>\n            }\n        </div>\n    } @else {\n        <v-content-loading></v-content-loading>\n    }\n}\n", styles: [":host{cursor:default;text-align:left}.action{opacity:.1;transition:opacity .2s ease-in-out}.action:hover{opacity:1}::ng-deep .inline,::ng-deep .inline *{white-space:nowrap}.tooltip{text-decoration:underline;text-decoration-style:dotted}::ng-deep .tooltip-content{white-space:pre-line}.wrapper__action{cursor:pointer}.value__click,.value__link{color:var(--mat-sys-primary)}.value__click:hover{text-decoration:underline;text-decoration-style:dashed}.value__link:hover{text-decoration:underline}.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (value$ | async; as v) {\n    <div class=\"flex gap-1 items-center\">\n        @if (lazyValue() && !lazyVisible()) {\n            <button\n                class=\"button ml-[-8px] mr-[-8px]\"\n                mat-icon-button\n                (click)=\"lazyVisible.set(true)\"\n            >\n                <mat-icon>sync</mat-icon>\n            </button>\n        }\n        @if (v.error) {\n            <mat-icon\n                [matTooltip]=\"\n                    v.error?.['error']?.['message'] || v.error?.['message'] || (v.error | json)\n                \"\n                >error</mat-icon\n            >\n        }\n        @if (v.prefix) {\n            <button\n                class=\"action ml-[-16px]\"\n                mat-icon-button\n                (click)=\"v.prefix.click ? v.prefix.click($event) : undefined\"\n            >\n                <mat-icon>{{ v.prefix.icon }}</mat-icon>\n            </button>\n        }\n        <div\n            [ngClass]=\"{ wrapper__action: v.click || v.link }\"\n            class=\"wrapper\"\n            (click)=\"click($event)\"\n        >\n            @if (v.template) {\n                <ng-container *ngTemplateOutlet=\"v.template; context: {}\"></ng-container>\n            } @else {\n                @if (v.color) {\n                    <v-tag [color]=\"v.color\">\n                        <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                    </v-tag>\n                } @else {\n                    <ng-container *ngTemplateOutlet=\"tooltipTemplate\"></ng-container>\n                }\n\n                <ng-template #tooltipTemplate>\n                    @if (v.tooltip) {\n                        <span\n                            [matTooltip]=\"v.tooltip\"\n                            class=\"tooltip\"\n                            matTooltipClass=\"tooltip-content\"\n                        >\n                            <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                        </span>\n                    } @else {\n                        <span [title]=\"v.value\">\n                            <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n                        </span>\n                    }\n                </ng-template>\n\n                <ng-template #valueTemplate>\n                    @switch (v.type) {\n                        @case ('menu') {\n                            <v-menu-value [value]=\"v\"></v-menu-value>\n                        }\n                        @case ('toggle') {\n                            <v-toggle-value [value]=\"v\"></v-toggle-value>\n                        }\n                        @default {\n                            @let valueText = valueText$ | async;\n                            @if (inProgress$ | async) {\n                                <v-content-loading [hiddenText]=\"valueText\"></v-content-loading>\n                            } @else if (valueText) {\n                                <span\n                                    [ngClass]=\"{ value__click: v.click, value__link: v.link }\"\n                                    [vHighlightSearch]=\"highlight\"\n                                    [vHighlightText]=\"valueText\"\n                                    vHighlight\n                                ></span>\n                            } @else if (emptySymbol) {\n                                <span class=\"text-[var(--mat-sys-outline)]\">{{ emptySymbol }}</span>\n                            }\n                        }\n                    }\n                </ng-template>\n            }\n\n            @if (v.description) {\n                <div\n                    [title]=\"v.description\"\n                    [vHighlightSearch]=\"highlight\"\n                    [vHighlightText]=\"v.description\"\n                    class=\"description text-[var(--mat-sys-outline)] text-xs\"\n                    vHighlight\n                ></div>\n            }\n        </div>\n        @if (v.postfix) {\n            <button\n                class=\"action ml-auto mr-[-16px]\"\n                mat-icon-button\n                (click)=\"v.postfix.click ? v.postfix.click($event) : undefined\"\n            >\n                <mat-icon>{{ v.postfix.icon }}</mat-icon>\n            </button>\n        }\n    </div>\n} @else if (lazyValue() && !lazyVisible()) {\n    <button class=\"button ml-[-8px]\" mat-icon-button (click)=\"lazyVisible.set(true)\">\n        <mat-icon>sync</mat-icon>\n    </button>\n} @else {\n    <v-content-loading></v-content-loading>\n}\n", styles: [":host{cursor:default;text-align:left}.action{opacity:.1;transition:opacity .2s ease-in-out}.action:hover{opacity:1}::ng-deep .inline,::ng-deep .inline *{white-space:nowrap}.tooltip{text-decoration:underline;text-decoration-style:dotted}::ng-deep .tooltip-content{white-space:pre-line}.wrapper__action{cursor:pointer}.value__click,.value__link{color:var(--mat-sys-primary)}.value__click:hover{text-decoration:underline;text-decoration-style:dashed}.value__link:hover{text-decoration:underline}.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], lazyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValue", required: false }] }], lazyVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyVisible", required: false }] }, { type: i0.Output, args: ["lazyVisibleChange"] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], inline: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1483,9 +1561,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 class ValueListComponent {
-    list = input(...(ngDevMode ? [undefined, { debugName: "list" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ValueListComponent, isStandalone: true, selector: "v-value-list", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    list = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "list" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ValueListComponent, isStandalone: true, selector: "v-value-list", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (list(); as items) {
             @if (items.length > 1) {
                 <div class="list">
@@ -1499,9 +1578,9 @@ class ValueListComponent {
         } @else {
             <v-value [progress]="true" inline></v-value>
         }
-    `, isInline: true, styles: [".list{display:flex;flex-direction:column}.list>*{overflow:hidden;text-overflow:ellipsis;min-height:20px}\n"], dependencies: [{ kind: "component", type: ValueComponent, selector: "v-value", inputs: ["value", "lazyValue", "lazyVisible", "progress", "inline", "emptySymbol", "highlight"], outputs: ["lazyVisibleChange"] }] });
+    `, isInline: true, styles: [".list{display:flex;flex-direction:column}.list>*{overflow:hidden;text-overflow:ellipsis;min-height:20px}\n"], dependencies: [{ kind: "component", type: ValueComponent, selector: "v-value", inputs: ["value", "lazyValue", "lazyVisible", "progress", "inline", "emptySymbol", "highlight"], outputs: ["lazyVisibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ValueListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-value-list', imports: [ValueComponent], template: `
         @if (list(); as items) {
@@ -1517,7 +1596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         } @else {
             <v-value [progress]="true" inline></v-value>
         }
-    `, styles: [".list{display:flex;flex-direction:column}.list>*{overflow:hidden;text-overflow:ellipsis;min-height:20px}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.Eager, styles: [".list{display:flex;flex-direction:column}.list>*{overflow:hidden;text-overflow:ellipsis;min-height:20px}\n"] }]
         }], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: false }] }] } });
 
 function createUniqueColumnDef(name) {
@@ -1822,8 +1901,8 @@ function toColumnsData(src$) {
 class NoRecordsComponent {
     noRecords = input(false, { ...(ngDevMode ? { debugName: "noRecords" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NoRecordsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NoRecordsComponent, isStandalone: true, selector: "v-no-records", inputs: { noRecords: { classPropertyName: "noRecords", publicName: "noRecords", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NoRecordsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NoRecordsComponent, isStandalone: true, selector: "v-no-records", inputs: { noRecords: { classPropertyName: "noRecords", publicName: "noRecords", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (noRecords()) {
             <div class="no-records mat-body-large">
                 {{ progress() ? 'Loading...' : 'No records' }}
@@ -1831,7 +1910,7 @@ class NoRecordsComponent {
         }
     `, isInline: true, styles: [".no-records{position:absolute;z-index:999;top:calc(50% + 28px);left:50%;transform:translate(-50%) translateY(-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NoRecordsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NoRecordsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-no-records', template: `
         @if (noRecords()) {
@@ -1872,10 +1951,10 @@ class InfinityScrollDirective {
             this.vInfinityScrollMore.emit();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InfinityScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: InfinityScrollDirective, isStandalone: true, selector: "[vInfinityScroll]", inputs: { vInfinityScroll: { classPropertyName: "vInfinityScroll", publicName: "vInfinityScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { vInfinityScrollMore: "vInfinityScrollMore" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InfinityScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: InfinityScrollDirective, isStandalone: true, selector: "[vInfinityScroll]", inputs: { vInfinityScroll: { classPropertyName: "vInfinityScroll", publicName: "vInfinityScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { vInfinityScrollMore: "vInfinityScrollMore" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InfinityScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InfinityScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vInfinityScroll]',
@@ -1884,12 +1963,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }], propDecorators: { vInfinityScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "vInfinityScroll", required: false }] }], vInfinityScrollMore: [{ type: i0.Output, args: ["vInfinityScrollMore"] }] } });
 
 class BaseColumnComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     table = inject(MatTable);
-    columnDef = viewChild(MatColumnDef, ...(ngDevMode ? [{ debugName: "columnDef" }] : /* istanbul ignore next */ []));
-    cellDef = viewChild(MatCellDef, ...(ngDevMode ? [{ debugName: "cellDef" }] : /* istanbul ignore next */ []));
-    headerCellDef = viewChild(MatHeaderCellDef, ...(ngDevMode ? [{ debugName: "headerCellDef" }] : /* istanbul ignore next */ []));
-    footerCellDef = viewChild(MatFooterCellDef, ...(ngDevMode ? [{ debugName: "footerCellDef" }] : /* istanbul ignore next */ []));
+    columnDef = viewChild(MatColumnDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnDef" }] : /* istanbul ignore next */ []));
+    cellDef = viewChild(MatCellDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellDef" }] : /* istanbul ignore next */ []));
+    headerCellDef = viewChild(MatHeaderCellDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCellDef" }] : /* istanbul ignore next */ []));
+    footerCellDef = viewChild(MatFooterCellDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerCellDef" }] : /* istanbul ignore next */ []));
     addedColumnDef;
     ngOnInit() {
         const columnDef = this.columnDef();
@@ -1911,20 +1995,22 @@ class BaseColumnComponent {
             this.table.removeColumnDef(this.addedColumnDef);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.5", type: BaseColumnComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, isSignal: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, isSignal: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, isSignal: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BaseColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.7", type: BaseColumnComponent, isStandalone: true, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, isSignal: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, isSignal: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BaseColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BaseColumnComponent, decorators: [{
             type: Directive
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], columnDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], cellDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCellDef), { isSignal: true }] }], headerCellDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatHeaderCellDef), { isSignal: true }] }], footerCellDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatFooterCellDef), { isSignal: true }] }] } });
 
 class SelectColumnComponent extends BaseColumnComponent {
     dr = inject(DestroyRef);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    selected = model([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    selected = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data = input([], { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), transform: arrayAttribute });
-    progress = input(false, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    progress = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
     selection = new SelectionModel(true, []);
     isAllSelected$ = combineLatest([
         this.selection.changed.pipe(startWith(null)),
@@ -1958,8 +2044,8 @@ class SelectColumnComponent extends BaseColumnComponent {
         this.selection.deselect(...this.selection.selected.filter((s) => !newSelected.includes(s)));
         this.selection.select(...newSelected);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SelectColumnComponent, isStandalone: true, selector: "v-select-column", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: SelectColumnComponent, isStandalone: true, selector: "v-select-column", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container [matColumnDef]="name()" [sticky]="true">
             @let columnClasses = 'column';
             <th *matHeaderCellDef [class]="columnClasses" mat-header-cell>
@@ -1986,7 +2072,7 @@ class SelectColumnComponent extends BaseColumnComponent {
         </ng-container>
     `, isInline: true, styles: [".column{padding-left:4px;padding-right:4px;width:48px;border-right:1px solid;text-overflow:clip}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.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: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-select-column', template: `
         <ng-container [matColumnDef]="name()" [sticky]="true">
@@ -2018,8 +2104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class DndColumnComponent extends BaseColumnComponent {
     dragged = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DndColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: DndColumnComponent, isStandalone: true, selector: "v-dnd-column", outputs: { dragged: "dragged" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DndColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: DndColumnComponent, isStandalone: true, selector: "v-dnd-column", outputs: { dragged: "dragged" }, usesInheritance: true, ngImport: i0, template: `
         <ng-container [matColumnDef]="name()" [sticky]="true">
             @let columnClasses = 'column';
             <th *matHeaderCellDef [class]="columnClasses" mat-header-cell></th>
@@ -2037,7 +2123,7 @@ class DndColumnComponent extends BaseColumnComponent {
         </ng-container>
     `, isInline: true, styles: [".column .position{display:flex;align-items:center;gap:8px}.column .position .dragCursor{cursor:move}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DndColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DndColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-dnd-column', template: `
         <ng-container [matColumnDef]="name()" [sticky]="true">
@@ -2067,14 +2153,20 @@ class TableInfoBarComponent {
     noDownload = input(false, { ...(ngDevMode ? { debugName: "noDownload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     noToolbar = input(false, { ...(ngDevMode ? { debugName: "noToolbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dataProgress = input(false, { ...(ngDevMode ? { debugName: "dataProgress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    tableInputsContent = input(...(ngDevMode ? [undefined, { debugName: "tableInputsContent" }] : /* istanbul ignore next */ []));
+    columns = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    tableInputsContent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tableInputsContent" }] : /* istanbul ignore next */ []));
     size = input(0, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     preloadSize = input(0, { ...(ngDevMode ? { debugName: "preloadSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-    count = input(undefined, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
-    filteredCount = input(0, ...(ngDevMode ? [{ debugName: "filteredCount" }] : /* istanbul ignore next */ []));
-    selectedCount = input(0, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
-    filter = input('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    count = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    filteredCount = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredCount" }] : /* istanbul ignore next */ []));
+    selectedCount = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    filter = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
     filterChange = output();
     filterControl = new FormControl('', { nonNullable: true });
     standaloneFilter = input(false, { ...(ngDevMode ? { debugName: "standaloneFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2090,7 +2182,8 @@ class TableInfoBarComponent {
             this.count()
         : this.progress() || this.count() !== 0
             ? '...'
-            : '0', ...(ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []));
+            : '0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.filterControl.valueChanges.pipe(takeUntilDestroyed(this.dr)).subscribe((v) => {
             this.filterChange.emit(v);
@@ -2099,23 +2192,23 @@ class TableInfoBarComponent {
             this.filterControl.setValue(this.filter(), { emitEvent: false });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableInfoBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TableInfoBarComponent, isStandalone: false, selector: "v-table-info-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, hasLoad: { classPropertyName: "hasLoad", publicName: "hasLoad", isSignal: true, isRequired: false, transformFunction: null }, isPreload: { classPropertyName: "isPreload", publicName: "isPreload", isSignal: true, isRequired: false, transformFunction: null }, noDownload: { classPropertyName: "noDownload", publicName: "noDownload", isSignal: true, isRequired: false, transformFunction: null }, noToolbar: { classPropertyName: "noToolbar", publicName: "noToolbar", isSignal: true, isRequired: false, transformFunction: null }, dataProgress: { classPropertyName: "dataProgress", publicName: "dataProgress", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableInputsContent: { classPropertyName: "tableInputsContent", publicName: "tableInputsContent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, preloadSize: { classPropertyName: "preloadSize", publicName: "preloadSize", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, filteredCount: { classPropertyName: "filteredCount", publicName: "filteredCount", isSignal: true, isRequired: false, transformFunction: null }, selectedCount: { classPropertyName: "selectedCount", publicName: "selectedCount", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, standaloneFilter: { classPropertyName: "standaloneFilter", publicName: "standaloneFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", downloadCsv: "downloadCsv", load: "load", preload: "preload" }, ngImport: i0, template: "<div class=\"wrapper\">\n    @if (standaloneFilter()) {\n        <div class=\"header-wrapper\">\n            <ng-content *ngTemplateOutlet=\"tableInputsContent()\"></ng-content>\n            <v-input-field [formControl]=\"filterControl\" cleanButton label=\"Search\"></v-input-field>\n        </div>\n    }\n    <v-actions>\n        <v-actions>\n            @if (!noToolbar()) {\n                @if (!standaloneFilter()) {\n                    <div>\n                        <v-input-field\n                            [formControl]=\"filterControl\"\n                            appearance=\"outline\"\n                            class=\"filter filter__extended\"\n                            cleanButton\n                            icon=\"manage_search\"\n                            label=\"Search\"\n                            size=\"small\"\n                        ></v-input-field>\n                    </div>\n                }\n                <div class=\"details\">\n                    @if (hasLoad() || hasMore()) {\n                        <button\n                            [disabled]=\"progress() || !hasMore()\"\n                            mat-icon-button\n                            matTooltip=\"Preload {{ preloadSize() }}{{\n                                isPreload() && hasMore() ? ' more' : ''\n                            }} elements\"\n                            (click)=\"preload.emit()\"\n                        >\n                            <mat-icon>\n                                {{\n                                    hasMore()\n                                        ? isPreload()\n                                            ? 'downloading'\n                                            : 'download'\n                                        : 'download_done'\n                                }}\n                            </mat-icon>\n                        </button>\n                    }\n                    @if (!noDownload()) {\n                        <button\n                            [disabled]=\"progress() || !count()\"\n                            mat-icon-button\n                            matTooltip=\"Download CSV\"\n                            (click)=\"downloadCsv.emit()\"\n                        >\n                            <mat-icon>file_save</mat-icon>\n                        </button>\n                    }\n                    <!-- <button mat-icon-button matTooltip=\"Customize table\" (click)=\"tune()\">\n                        <mat-icon>tune</mat-icon>\n                    </button> -->\n                </div>\n            }\n            <div\n                [matBadge]=\"selectedCount() || ''\"\n                [matBadgeDisabled]=\"progress() || dataProgress()\"\n                [matTooltip]=\"\n                    dataProgress()\n                        ? 'Preparing data for sorting, filtering and downloading...'\n                        : progress()\n                          ? 'Loading...'\n                          : hasLoad()\n                            ? 'Reload ' + size() + ' elements'\n                            : ''\n                \"\n                class=\"count\"\n                (click)=\"hasLoad() ? load.emit() : undefined\"\n            >\n                <v-tag\n                    [icon]=\"hasLoad() ? 'refresh' : undefined\"\n                    [progress]=\"progress() || dataProgress()\"\n                >\n                    {{ countText() }}\n                </v-tag>\n            </div>\n        </v-actions>\n        <v-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-actions>\n    </v-actions>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px}.inputs{display:none}.header-wrapper{display:flex;gap:16px}::ng-deep .header-wrapper>*{flex:1}.header-wrapper ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}.details{display:flex;align-items:center}.details ::ng-deep button{margin:-6px 0}.count{align-self:anchor-center}.filter__extended{max-width:200px}.filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InputFieldComponent, selector: "v-input-field", inputs: ["label", "placeholder", "type", "appearance", "size", "cleanButton", "icon", "hintText"] }, { kind: "component", type: ActionsComponent, selector: "v-actions" }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TagComponent, selector: "v-tag", inputs: ["color", "icon", "progress"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableInfoBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableInfoBarComponent, isStandalone: false, selector: "v-table-info-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, hasLoad: { classPropertyName: "hasLoad", publicName: "hasLoad", isSignal: true, isRequired: false, transformFunction: null }, isPreload: { classPropertyName: "isPreload", publicName: "isPreload", isSignal: true, isRequired: false, transformFunction: null }, noDownload: { classPropertyName: "noDownload", publicName: "noDownload", isSignal: true, isRequired: false, transformFunction: null }, noToolbar: { classPropertyName: "noToolbar", publicName: "noToolbar", isSignal: true, isRequired: false, transformFunction: null }, dataProgress: { classPropertyName: "dataProgress", publicName: "dataProgress", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, tableInputsContent: { classPropertyName: "tableInputsContent", publicName: "tableInputsContent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, preloadSize: { classPropertyName: "preloadSize", publicName: "preloadSize", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, filteredCount: { classPropertyName: "filteredCount", publicName: "filteredCount", isSignal: true, isRequired: false, transformFunction: null }, selectedCount: { classPropertyName: "selectedCount", publicName: "selectedCount", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, standaloneFilter: { classPropertyName: "standaloneFilter", publicName: "standaloneFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", downloadCsv: "downloadCsv", load: "load", preload: "preload" }, ngImport: i0, template: "<div class=\"wrapper\">\n    @if (standaloneFilter()) {\n        <div class=\"header-wrapper\">\n            <ng-content *ngTemplateOutlet=\"tableInputsContent()\"></ng-content>\n            <v-input-field [formControl]=\"filterControl\" cleanButton label=\"Search\"></v-input-field>\n        </div>\n    }\n    <v-actions>\n        <v-actions>\n            @if (!noToolbar()) {\n                @if (!standaloneFilter()) {\n                    <div>\n                        <v-input-field\n                            [formControl]=\"filterControl\"\n                            appearance=\"outline\"\n                            class=\"filter filter__extended\"\n                            cleanButton\n                            icon=\"manage_search\"\n                            label=\"Search\"\n                            size=\"small\"\n                        ></v-input-field>\n                    </div>\n                }\n                <div class=\"details\">\n                    @if (hasLoad() || hasMore()) {\n                        <button\n                            [disabled]=\"progress() || !hasMore()\"\n                            mat-icon-button\n                            matTooltip=\"Preload {{ preloadSize() }}{{\n                                isPreload() && hasMore() ? ' more' : ''\n                            }} elements\"\n                            (click)=\"preload.emit()\"\n                        >\n                            <mat-icon>\n                                {{\n                                    hasMore()\n                                        ? isPreload()\n                                            ? 'downloading'\n                                            : 'download'\n                                        : 'download_done'\n                                }}\n                            </mat-icon>\n                        </button>\n                    }\n                    @if (!noDownload()) {\n                        <button\n                            [disabled]=\"progress() || !count()\"\n                            mat-icon-button\n                            matTooltip=\"Download CSV\"\n                            (click)=\"downloadCsv.emit()\"\n                        >\n                            <mat-icon>file_save</mat-icon>\n                        </button>\n                    }\n                    <!-- <button mat-icon-button matTooltip=\"Customize table\" (click)=\"tune()\">\n                        <mat-icon>tune</mat-icon>\n                    </button> -->\n                </div>\n            }\n            <div\n                [matBadge]=\"selectedCount() || ''\"\n                [matBadgeDisabled]=\"progress() || dataProgress()\"\n                [matTooltip]=\"\n                    dataProgress()\n                        ? 'Preparing data for sorting, filtering and downloading...'\n                        : progress()\n                          ? 'Loading...'\n                          : hasLoad()\n                            ? 'Reload ' + size() + ' elements'\n                            : ''\n                \"\n                class=\"count\"\n                (click)=\"hasLoad() ? load.emit() : undefined\"\n            >\n                <v-tag\n                    [icon]=\"hasLoad() ? 'refresh' : undefined\"\n                    [progress]=\"progress() || dataProgress()\"\n                >\n                    {{ countText() }}\n                </v-tag>\n            </div>\n        </v-actions>\n        <v-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-actions>\n    </v-actions>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px}.inputs{display:none}.header-wrapper{display:flex;gap:16px}::ng-deep .header-wrapper>*{flex:1}.header-wrapper ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}.details{display:flex;align-items:center}.details ::ng-deep button{margin:-6px 0}.count{align-self:anchor-center}.filter__extended{max-width:200px}.filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: InputFieldComponent, selector: "v-input-field", inputs: ["value", "disabled", "required", "label", "placeholder", "type", "appearance", "size", "cleanButton", "icon", "hintText"], outputs: ["valueChange", "touch"] }, { kind: "component", type: ActionsComponent, selector: "v-actions" }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: TagComponent, selector: "v-tag", inputs: ["color", "icon", "progress"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableInfoBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableInfoBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-table-info-bar', standalone: false, template: "<div class=\"wrapper\">\n    @if (standaloneFilter()) {\n        <div class=\"header-wrapper\">\n            <ng-content *ngTemplateOutlet=\"tableInputsContent()\"></ng-content>\n            <v-input-field [formControl]=\"filterControl\" cleanButton label=\"Search\"></v-input-field>\n        </div>\n    }\n    <v-actions>\n        <v-actions>\n            @if (!noToolbar()) {\n                @if (!standaloneFilter()) {\n                    <div>\n                        <v-input-field\n                            [formControl]=\"filterControl\"\n                            appearance=\"outline\"\n                            class=\"filter filter__extended\"\n                            cleanButton\n                            icon=\"manage_search\"\n                            label=\"Search\"\n                            size=\"small\"\n                        ></v-input-field>\n                    </div>\n                }\n                <div class=\"details\">\n                    @if (hasLoad() || hasMore()) {\n                        <button\n                            [disabled]=\"progress() || !hasMore()\"\n                            mat-icon-button\n                            matTooltip=\"Preload {{ preloadSize() }}{{\n                                isPreload() && hasMore() ? ' more' : ''\n                            }} elements\"\n                            (click)=\"preload.emit()\"\n                        >\n                            <mat-icon>\n                                {{\n                                    hasMore()\n                                        ? isPreload()\n                                            ? 'downloading'\n                                            : 'download'\n                                        : 'download_done'\n                                }}\n                            </mat-icon>\n                        </button>\n                    }\n                    @if (!noDownload()) {\n                        <button\n                            [disabled]=\"progress() || !count()\"\n                            mat-icon-button\n                            matTooltip=\"Download CSV\"\n                            (click)=\"downloadCsv.emit()\"\n                        >\n                            <mat-icon>file_save</mat-icon>\n                        </button>\n                    }\n                    <!-- <button mat-icon-button matTooltip=\"Customize table\" (click)=\"tune()\">\n                        <mat-icon>tune</mat-icon>\n                    </button> -->\n                </div>\n            }\n            <div\n                [matBadge]=\"selectedCount() || ''\"\n                [matBadgeDisabled]=\"progress() || dataProgress()\"\n                [matTooltip]=\"\n                    dataProgress()\n                        ? 'Preparing data for sorting, filtering and downloading...'\n                        : progress()\n                          ? 'Loading...'\n                          : hasLoad()\n                            ? 'Reload ' + size() + ' elements'\n                            : ''\n                \"\n                class=\"count\"\n                (click)=\"hasLoad() ? load.emit() : undefined\"\n            >\n                <v-tag\n                    [icon]=\"hasLoad() ? 'refresh' : undefined\"\n                    [progress]=\"progress() || dataProgress()\"\n                >\n                    {{ countText() }}\n                </v-tag>\n            </div>\n        </v-actions>\n        <v-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-actions>\n    </v-actions>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px}.inputs{display:none}.header-wrapper{display:flex;gap:16px}::ng-deep .header-wrapper>*{flex:1}.header-wrapper ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}.details{display:flex;align-items:center}.details ::ng-deep button{margin:-6px 0}.count{align-self:anchor-center}.filter__extended{max-width:200px}.filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}\n"] }]
+            args: [{ selector: 'v-table-info-bar', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"wrapper\">\n    @if (standaloneFilter()) {\n        <div class=\"header-wrapper\">\n            <ng-content *ngTemplateOutlet=\"tableInputsContent()\"></ng-content>\n            <v-input-field [formControl]=\"filterControl\" cleanButton label=\"Search\"></v-input-field>\n        </div>\n    }\n    <v-actions>\n        <v-actions>\n            @if (!noToolbar()) {\n                @if (!standaloneFilter()) {\n                    <div>\n                        <v-input-field\n                            [formControl]=\"filterControl\"\n                            appearance=\"outline\"\n                            class=\"filter filter__extended\"\n                            cleanButton\n                            icon=\"manage_search\"\n                            label=\"Search\"\n                            size=\"small\"\n                        ></v-input-field>\n                    </div>\n                }\n                <div class=\"details\">\n                    @if (hasLoad() || hasMore()) {\n                        <button\n                            [disabled]=\"progress() || !hasMore()\"\n                            mat-icon-button\n                            matTooltip=\"Preload {{ preloadSize() }}{{\n                                isPreload() && hasMore() ? ' more' : ''\n                            }} elements\"\n                            (click)=\"preload.emit()\"\n                        >\n                            <mat-icon>\n                                {{\n                                    hasMore()\n                                        ? isPreload()\n                                            ? 'downloading'\n                                            : 'download'\n                                        : 'download_done'\n                                }}\n                            </mat-icon>\n                        </button>\n                    }\n                    @if (!noDownload()) {\n                        <button\n                            [disabled]=\"progress() || !count()\"\n                            mat-icon-button\n                            matTooltip=\"Download CSV\"\n                            (click)=\"downloadCsv.emit()\"\n                        >\n                            <mat-icon>file_save</mat-icon>\n                        </button>\n                    }\n                    <!-- <button mat-icon-button matTooltip=\"Customize table\" (click)=\"tune()\">\n                        <mat-icon>tune</mat-icon>\n                    </button> -->\n                </div>\n            }\n            <div\n                [matBadge]=\"selectedCount() || ''\"\n                [matBadgeDisabled]=\"progress() || dataProgress()\"\n                [matTooltip]=\"\n                    dataProgress()\n                        ? 'Preparing data for sorting, filtering and downloading...'\n                        : progress()\n                          ? 'Loading...'\n                          : hasLoad()\n                            ? 'Reload ' + size() + ' elements'\n                            : ''\n                \"\n                class=\"count\"\n                (click)=\"hasLoad() ? load.emit() : undefined\"\n            >\n                <v-tag\n                    [icon]=\"hasLoad() ? 'refresh' : undefined\"\n                    [progress]=\"progress() || dataProgress()\"\n                >\n                    {{ countText() }}\n                </v-tag>\n            </div>\n        </v-actions>\n        <v-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-actions>\n    </v-actions>\n</div>\n", styles: [".wrapper{display:flex;flex-direction:column;gap:24px}.inputs{display:none}.header-wrapper{display:flex;gap:16px}::ng-deep .header-wrapper>*{flex:1}.header-wrapper ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}.details{display:flex;align-items:center}.details ::ng-deep button{margin:-6px 0}.count{align-self:anchor-center}.filter__extended{max-width:200px}.filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}\n"] }]
         }], propDecorators: { progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], hasLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLoad", required: false }] }], isPreload: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPreload", required: false }] }], noDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDownload", required: false }] }], noToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "noToolbar", required: false }] }], dataProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProgress", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], tableInputsContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableInputsContent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], preloadSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "preloadSize", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], filteredCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filteredCount", required: false }] }], selectedCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCount", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], standaloneFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "standaloneFilter", required: false }] }], downloadCsv: [{ type: i0.Output, args: ["downloadCsv"] }], load: [{ type: i0.Output, args: ["load"] }], preload: [{ type: i0.Output, args: ["preload"] }] } });
 
 class TableActionsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: TableActionsComponent, isStandalone: false, selector: "v-table-actions", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TableActionsComponent, isStandalone: false, selector: "v-table-actions", ngImport: i0, template: `
         <v-actions>
             <ng-content></ng-content>
         </v-actions>
     `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "v-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'v-table-actions',
@@ -2134,7 +2227,8 @@ class TableComponent {
     injector = inject(Injector);
     cdr = inject(ChangeDetectorRef);
     data = input([], { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), transform: arrayAttribute });
-    treeData = input(...(ngDevMode ? [undefined, { debugName: "treeData" }] : /* istanbul ignore next */ []));
+    treeData = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "treeData" }] : /* istanbul ignore next */ []));
     columns = input([], { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: arrayAttribute });
     progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: Boolean });
     hasMore = input(false, { ...(ngDevMode ? { debugName: "hasMore" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2143,7 +2237,8 @@ class TableComponent {
     noDownload = input(false, { ...(ngDevMode ? { debugName: "noDownload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     noToolbar = input(false, { ...(ngDevMode ? { debugName: "noToolbar" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     // Filter
-    filter = model('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    filter = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
     filter$ = toObservable(this.filter).pipe(map((v) => (v || '').trim()), distinctUntilChanged(), debounceTime$1(DEBOUNCE_TIME_MS), shareReplay({ refCount: true, bufferSize: 1 }));
     standaloneFilter = input(false, { ...(ngDevMode ? { debugName: "standaloneFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     externalFilter = input(false, { ...(ngDevMode ? { debugName: "externalFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -2156,9 +2251,11 @@ class TableComponent {
     displayedCount$ = this.displayedData$.pipe(map((data) => data.length), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
     // Select
     rowSelectable = input(false, { ...(ngDevMode ? { debugName: "rowSelectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    rowSelected = model([], ...(ngDevMode ? [{ debugName: "rowSelected" }] : /* istanbul ignore next */ []));
+    rowSelected = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowSelected" }] : /* istanbul ignore next */ []));
     // Sort
-    sort = model(DEFAULT_SORT, ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+    sort = model(DEFAULT_SORT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
     sortComponent;
     // Drag & drop
     rowDragDrop = input(false, { ...(ngDevMode ? { debugName: "rowDragDrop" } : /* istanbul ignore next */ {}), transform: (v) => {
@@ -2170,13 +2267,15 @@ class TableComponent {
     rowDropped = output();
     dragDisabled = true;
     // Contents
-    tableInputsContent = input(...(ngDevMode ? [undefined, { debugName: "tableInputsContent" }] : /* istanbul ignore next */ []));
+    tableInputsContent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tableInputsContent" }] : /* istanbul ignore next */ []));
     update$ = new Subject();
     update = outputFromObservable(this.update$);
     more = output();
     loadedLazyItems = new WeakMap();
     dataSource = new TableDataSource();
-    normColumns = computed(() => this.columns().map((c) => new NormColumn(c)), ...(ngDevMode ? [{ debugName: "normColumns" }] : /* istanbul ignore next */ []));
+    normColumns = computed(() => this.columns().map((c) => new NormColumn(c)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normColumns" }] : /* istanbul ignore next */ []));
     displayedNormColumns$ = toObservable(this.normColumns).pipe(switchMap((cols) => combineLatest(cols.map((c) => c.hidden)).pipe(map((c) => cols.filter((_, idx) => !c[idx])))), shareReplay({ refCount: true, bufferSize: 1 }));
     columnsData$$ = combineLatest({
         isTree: this.dataSource.isTreeData$,
@@ -2189,8 +2288,10 @@ class TableComponent {
     }), toColumnsData, tap(() => {
         this.columnsDataProgress$.next(false);
     }), shareReplay({ refCount: true, bufferSize: 1 }));
-    isPreload = signal(false, ...(ngDevMode ? [{ debugName: "isPreload" }] : /* istanbul ignore next */ []));
-    loadSize = computed(() => (this.isPreload() ? this.maxSize() : this.size()), ...(ngDevMode ? [{ debugName: "loadSize" }] : /* istanbul ignore next */ []));
+    isPreload = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPreload" }] : /* istanbul ignore next */ []));
+    loadSize = computed(() => (this.isPreload() ? this.maxSize() : this.size()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadSize" }] : /* istanbul ignore next */ []));
     hasAutoShowMore$ = combineLatest([
         toObservable(this.hasMore),
         this.dataSource.data$.pipe(map((d) => d?.length)),
@@ -2303,16 +2404,14 @@ class TableComponent {
             const { previousIndex, currentIndex } = event;
             const previousData = data;
             const currentData = previousData.slice();
-            let currentDataIndex = 0;
+            const currentDataIndex = previousIndex > currentIndex ? currentIndex : currentIndex - 1;
             if (previousIndex > currentIndex) {
                 currentData.splice(previousIndex, 1);
                 currentData.splice(currentIndex, 0, event.item.data);
-                currentDataIndex = currentIndex;
             }
             else {
                 currentData.splice(currentIndex, 0, event.item.data);
                 currentData.splice(previousIndex, 1);
-                currentDataIndex = currentIndex - 1;
             }
             this.rowDropped.emit({
                 previousIndex,
@@ -2356,12 +2455,12 @@ class TableComponent {
             this.loadedLazyItems.set(item, true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, noDownload: { classPropertyName: "noDownload", publicName: "noDownload", isSignal: true, isRequired: false, transformFunction: null }, noToolbar: { classPropertyName: "noToolbar", publicName: "noToolbar", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, standaloneFilter: { classPropertyName: "standaloneFilter", publicName: "standaloneFilter", isSignal: true, isRequired: false, transformFunction: null }, externalFilter: { classPropertyName: "externalFilter", publicName: "externalFilter", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, rowDragDrop: { classPropertyName: "rowDragDrop", publicName: "rowDragDrop", isSignal: true, isRequired: false, transformFunction: null }, tableInputsContent: { classPropertyName: "tableInputsContent", publicName: "tableInputsContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", rowSelected: "rowSelectedChange", sort: "sortChange", rowDropped: "rowDropped", update: "update", more: "more" }, viewQueries: [{ propertyName: "sortComponent", first: true, predicate: MatSort, descendants: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "tableRow", first: true, predicate: MatRow, descendants: true }], ngImport: i0, template: "@let columnsData = columnsData$$ | async;\n\n<div class=\"wrapper\">\n    <v-table-info-bar\n        [(filter)]=\"filter\"\n        [columns]=\"normColumns()\"\n        [count]=\"(dataSource.data$ | async)?.length\"\n        [dataProgress]=\"!!(columnsDataProgress$ | async) && !hasMore()\"\n        [filteredCount]=\"displayedCount$ | async\"\n        [hasLoad]=\"update$.observed\"\n        [hasMore]=\"hasMore()\"\n        [isPreload]=\"isPreload()\"\n        [noDownload]=\"noDownload()\"\n        [noToolbar]=\"noToolbar()\"\n        [preloadSize]=\"maxSize()\"\n        [progress]=\"progress()\"\n        [selectedCount]=\"rowSelected()?.length\"\n        [size]=\"size()\"\n        [standaloneFilter]=\"standaloneFilter()\"\n        [tableInputsContent]=\"tableInputsContent()\"\n        (downloadCsv)=\"downloadCsv()\"\n        (load)=\"load()\"\n        (preload)=\"preload()\"\n    >\n        <v-table-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-table-actions>\n    </v-table-info-bar>\n    <mat-card #scrollViewport appearance=\"outlined\" class=\"card\">\n        <v-no-records\n            [noRecords]=\"!(displayedCount$ | async)\"\n            [progress]=\"progress()\"\n        ></v-no-records>\n        <table\n            #matTable\n            [cdkDropListDisabled]=\"dragDisabled\"\n            [dataSource]=\"dataSource\"\n            [matSortActive]=\"(columnsDataProgress$ | async) || progress() ? '' : sort().active\"\n            [matSortDirection]=\"sort().direction\"\n            cdkDropList\n            cdkDropListData=\"dataSource\"\n            mat-table\n            matSort\n            (cdkDropListDropped)=\"drop($event)\"\n            (matSortChange)=\"sort.set($event)\"\n        >\n            @let displayedColumns = (displayedColumns$ | async) || [];\n\n            @if (displayedColumns.includes(columnDefs.drag)) {\n                <v-dnd-column\n                    [name]=\"columnDefs.drag\"\n                    (dragged)=\"dragDisabled = false\"\n                ></v-dnd-column>\n            }\n            @if (displayedColumns.includes(columnDefs.select)) {\n                <v-select-column\n                    [(selected)]=\"rowSelected\"\n                    [data]=\"displayedData$ | async\"\n                    [name]=\"columnDefs.select\"\n                    [progress]=\"progress()\"\n                ></v-select-column>\n            }\n            @for (col of displayedNormColumns$ | async; track col; let colIndex = $index) {\n                @let stickyStart = col.params.sticky === 'start';\n                @let stickyEnd = col.params.sticky === 'end';\n                @let columnClasses =\n                    {\n                        column: true,\n                        'column__sticky-start': stickyStart,\n                        'column__sticky-end': stickyEnd,\n                    };\n                <ng-container\n                    [matColumnDef]=\"col.field\"\n                    [sticky]=\"stickyStart\"\n                    [stickyEnd]=\"stickyEnd\"\n                >\n                    <th\n                        *matHeaderCellDef\n                        [disabled]=\"(col.sort | async) === false || hasMore() || progress()\"\n                        [mat-sort-header]=\"col.field\"\n                        [ngClass]=\"columnClasses\"\n                        mat-header-cell\n                    >\n                        <v-value [value]=\"col?.header | async\" emptySymbol=\"\" inline></v-value>\n                    </th>\n\n                    <ng-template let-element let-rowIndex=\"index\" matCellDef>\n                        @let cell = columnsData?.get?.(element)?.get(col);\n                        <td\n                            [ngClass]=\"columnClasses\"\n                            [ngStyle]=\"col?.params?.style\"\n                            [style.border-bottom]=\"cell?.isNextChild && !col.child ? 'none' : ''\"\n                            mat-cell\n                        >\n                            <v-value\n                                [emptySymbol]=\"!(cell?.isChild && !col?.child)\"\n                                [highlight]=\"filter$ | async\"\n                                [lazyValue]=\"cell?.lazyValue\"\n                                [lazyVisible]=\"loadedLazyItems.has(element)\"\n                                [value]=\"cell?.value | async\"\n                                inline\n                                (lazyVisibleChange)=\"loadedLazyItems.set(element, true)\"\n                            ></v-value>\n                        </td>\n                    </ng-template>\n                    <td *matFooterCellDef [ngClass]=\"columnClasses\" mat-footer-cell>\n                        <v-content-loading></v-content-loading>\n                    </td>\n                </ng-container>\n            }\n\n            <tr *matHeaderRowDef=\"displayedColumns$ | async; sticky: true\" mat-header-row></tr>\n            <tr\n                *matRowDef=\"let row; columns: displayedColumns$ | async\"\n                [cdkDragData]=\"row\"\n                cdkDrag\n                mat-row\n            ></tr>\n            <tr\n                *matFooterRowDef=\"displayedColumns$ | async\"\n                [ngClass]=\"{ row__hidden: !(hasAutoShowMore$ | async) || !tableRow }\"\n                [vInfinityScroll]=\"!progress()\"\n                mat-footer-row\n                (vInfinityScrollMore)=\"showMore()\"\n            ></tr>\n        </table>\n    </mat-card>\n</div>\n", styles: [":host{min-height:0;--mat-table-row-item-outline-color: var(--mat-sys-surface-variant)}.wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:max-content;gap:24px;height:100%}.wrapper .card{width:100%;height:100%;min-height:300px;overflow:auto;transform:translateZ(0)}.wrapper .card ::ng-deep .mdc-data-table__row:last-child .mat-mdc-cell{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}::ng-deep table ::ng-deep .cdk-drag-placeholder,::ng-deep .cdk-drag-preview ::ng-deep .cdk-drag-placeholder{background:#eee}::ng-deep table .column,::ng-deep .cdk-drag-preview .column{max-width:max(20px,30vw);border-color:var(--mat-sys-surface-variant)!important}::ng-deep table .column__sticky-start,::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-end{width:0}::ng-deep table .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-start{border-right:1px solid}::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-end{border-left:1px solid}::ng-deep table .row__hidden,::ng-deep .cdk-drag-preview .row__hidden{display:none}::ng-deep .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff!important;display:flex!important;align-items:center}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging ::ng-deep .mat-mdc-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drag-preview ::ng-deep td{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: ValueComponent, selector: "v-value", inputs: ["value", "lazyValue", "lazyVisible", "progress", "inline", "emptySymbol", "highlight"], outputs: ["lazyVisibleChange"] }, { kind: "component", type: NoRecordsComponent, selector: "v-no-records", inputs: ["noRecords", "progress"] }, { kind: "component", type: ContentLoadingComponent, selector: "v-content-loading", inputs: ["width", "textSize", "hiddenText"] }, { kind: "directive", type: InfinityScrollDirective, selector: "[vInfinityScroll]", inputs: ["vInfinityScroll"], outputs: ["vInfinityScrollMore"] }, { kind: "component", type: SelectColumnComponent, selector: "v-select-column", inputs: ["selected", "data", "progress"], outputs: ["selectedChange"] }, { kind: "directive", type: i9.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DndColumnComponent, selector: "v-dnd-column", outputs: ["dragged"] }, { kind: "component", type: TableInfoBarComponent, selector: "v-table-info-bar", inputs: ["progress", "hasMore", "hasLoad", "isPreload", "noDownload", "noToolbar", "dataProgress", "columns", "tableInputsContent", "size", "preloadSize", "count", "filteredCount", "selectedCount", "filter", "standaloneFilter"], outputs: ["filterChange", "downloadCsv", "load", "preload"] }, { kind: "component", type: TableActionsComponent, selector: "v-table-actions" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, noDownload: { classPropertyName: "noDownload", publicName: "noDownload", isSignal: true, isRequired: false, transformFunction: null }, noToolbar: { classPropertyName: "noToolbar", publicName: "noToolbar", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, standaloneFilter: { classPropertyName: "standaloneFilter", publicName: "standaloneFilter", isSignal: true, isRequired: false, transformFunction: null }, externalFilter: { classPropertyName: "externalFilter", publicName: "externalFilter", isSignal: true, isRequired: false, transformFunction: null }, rowSelectable: { classPropertyName: "rowSelectable", publicName: "rowSelectable", isSignal: true, isRequired: false, transformFunction: null }, rowSelected: { classPropertyName: "rowSelected", publicName: "rowSelected", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, rowDragDrop: { classPropertyName: "rowDragDrop", publicName: "rowDragDrop", isSignal: true, isRequired: false, transformFunction: null }, tableInputsContent: { classPropertyName: "tableInputsContent", publicName: "tableInputsContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange", rowSelected: "rowSelectedChange", sort: "sortChange", rowDropped: "rowDropped", update: "update", more: "more" }, viewQueries: [{ propertyName: "sortComponent", first: true, predicate: MatSort, descendants: true }, { propertyName: "scrollViewport", first: true, predicate: ["scrollViewport"], descendants: true, read: ElementRef }, { propertyName: "table", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "tableRow", first: true, predicate: MatRow, descendants: true }], ngImport: i0, template: "@let columnsData = columnsData$$ | async;\n\n<div class=\"wrapper\">\n    <v-table-info-bar\n        [(filter)]=\"filter\"\n        [columns]=\"normColumns()\"\n        [count]=\"$safeNavigationMigration((dataSource.data$ | async)?.length)\"\n        [dataProgress]=\"!!(columnsDataProgress$ | async) && !hasMore()\"\n        [filteredCount]=\"displayedCount$ | async\"\n        [hasLoad]=\"update$.observed\"\n        [hasMore]=\"hasMore()\"\n        [isPreload]=\"isPreload()\"\n        [noDownload]=\"noDownload()\"\n        [noToolbar]=\"noToolbar()\"\n        [preloadSize]=\"maxSize()\"\n        [progress]=\"progress()\"\n        [selectedCount]=\"$safeNavigationMigration(rowSelected()?.length)\"\n        [size]=\"size()\"\n        [standaloneFilter]=\"standaloneFilter()\"\n        [tableInputsContent]=\"tableInputsContent()\"\n        (downloadCsv)=\"downloadCsv()\"\n        (load)=\"load()\"\n        (preload)=\"preload()\"\n    >\n        <v-table-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-table-actions>\n    </v-table-info-bar>\n    <mat-card #scrollViewport appearance=\"outlined\" class=\"card\">\n        <v-no-records\n            [noRecords]=\"!(displayedCount$ | async)\"\n            [progress]=\"progress()\"\n        ></v-no-records>\n        <table\n            #matTable\n            [cdkDropListDisabled]=\"dragDisabled\"\n            [dataSource]=\"dataSource\"\n            [matSortActive]=\"(columnsDataProgress$ | async) || progress() ? '' : sort().active\"\n            [matSortDirection]=\"sort().direction\"\n            cdkDropList\n            cdkDropListData=\"dataSource\"\n            mat-table\n            matSort\n            (cdkDropListDropped)=\"drop($event)\"\n            (matSortChange)=\"sort.set($event)\"\n        >\n            @let displayedColumns = (displayedColumns$ | async) || [];\n\n            @if (displayedColumns.includes(columnDefs.drag)) {\n                <v-dnd-column\n                    [name]=\"columnDefs.drag\"\n                    (dragged)=\"dragDisabled = false\"\n                ></v-dnd-column>\n            }\n            @if (displayedColumns.includes(columnDefs.select)) {\n                <v-select-column\n                    [(selected)]=\"rowSelected\"\n                    [data]=\"displayedData$ | async\"\n                    [name]=\"columnDefs.select\"\n                    [progress]=\"progress()\"\n                ></v-select-column>\n            }\n            @for (col of displayedNormColumns$ | async; track col; let colIndex = $index) {\n                @let stickyStart = col.params.sticky === 'start';\n                @let stickyEnd = col.params.sticky === 'end';\n                @let columnClasses =\n                    {\n                        column: true,\n                        'column__sticky-start': stickyStart,\n                        'column__sticky-end': stickyEnd,\n                    };\n                <ng-container\n                    [matColumnDef]=\"col.field\"\n                    [sticky]=\"stickyStart\"\n                    [stickyEnd]=\"stickyEnd\"\n                >\n                    <th\n                        *matHeaderCellDef\n                        [disabled]=\"(col.sort | async) === false || hasMore() || progress()\"\n                        [mat-sort-header]=\"col.field\"\n                        [ngClass]=\"columnClasses\"\n                        mat-header-cell\n                    >\n                        <v-value\n                            [value]=\"$safeNavigationMigration(col?.header) | async\"\n                            emptySymbol=\"\"\n                            inline\n                        ></v-value>\n                    </th>\n\n                    <ng-template let-element let-rowIndex=\"index\" matCellDef>\n                        @let cell = $safeNavigationMigration(columnsData?.get?.(element)?.get(col));\n                        <td\n                            [ngClass]=\"columnClasses\"\n                            [ngStyle]=\"$safeNavigationMigration(col?.params?.style)\"\n                            [style.border-bottom]=\"cell?.isNextChild && !col.child ? 'none' : ''\"\n                            mat-cell\n                        >\n                            <v-value\n                                [emptySymbol]=\"!(cell?.isChild && !col?.child)\"\n                                [highlight]=\"filter$ | async\"\n                                [lazyValue]=\"$safeNavigationMigration(cell?.lazyValue)\"\n                                [lazyVisible]=\"loadedLazyItems.has(element)\"\n                                [value]=\"$safeNavigationMigration(cell?.value) | async\"\n                                inline\n                                (lazyVisibleChange)=\"loadedLazyItems.set(element, true)\"\n                            ></v-value>\n                        </td>\n                    </ng-template>\n                    <td *matFooterCellDef [ngClass]=\"columnClasses\" mat-footer-cell>\n                        <v-content-loading></v-content-loading>\n                    </td>\n                </ng-container>\n            }\n\n            <tr *matHeaderRowDef=\"displayedColumns$ | async; sticky: true\" mat-header-row></tr>\n            <tr\n                *matRowDef=\"let row; columns: displayedColumns$ | async\"\n                [cdkDragData]=\"row\"\n                cdkDrag\n                mat-row\n            ></tr>\n            <tr\n                *matFooterRowDef=\"displayedColumns$ | async\"\n                [ngClass]=\"{ row__hidden: !(hasAutoShowMore$ | async) || !tableRow }\"\n                [vInfinityScroll]=\"!progress()\"\n                mat-footer-row\n                (vInfinityScrollMore)=\"showMore()\"\n            ></tr>\n        </table>\n    </mat-card>\n</div>\n", styles: [":host{min-height:0;--mat-table-row-item-outline-color: var(--mat-sys-surface-variant)}.wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:max-content;gap:24px;height:100%}.wrapper .card{width:100%;height:100%;min-height:300px;overflow:auto;transform:translateZ(0)}.wrapper .card ::ng-deep .mdc-data-table__row:last-child .mat-mdc-cell{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}::ng-deep table ::ng-deep .cdk-drag-placeholder,::ng-deep .cdk-drag-preview ::ng-deep .cdk-drag-placeholder{background:#eee}::ng-deep table .column,::ng-deep .cdk-drag-preview .column{max-width:max(20px,30vw);border-color:var(--mat-sys-surface-variant)!important}::ng-deep table .column__sticky-start,::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-end{width:0}::ng-deep table .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-start{border-right:1px solid}::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-end{border-left:1px solid}::ng-deep table .row__hidden,::ng-deep .cdk-drag-preview .row__hidden{display:none}::ng-deep .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff!important;display:flex!important;align-items:center}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging ::ng-deep .mat-mdc-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drag-preview ::ng-deep td{border:none!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$4.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$4.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$4.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: ValueComponent, selector: "v-value", inputs: ["value", "lazyValue", "lazyVisible", "progress", "inline", "emptySymbol", "highlight"], outputs: ["lazyVisibleChange"] }, { kind: "component", type: NoRecordsComponent, selector: "v-no-records", inputs: ["noRecords", "progress"] }, { kind: "component", type: ContentLoadingComponent, selector: "v-content-loading", inputs: ["width", "textSize", "hiddenText"] }, { kind: "directive", type: InfinityScrollDirective, selector: "[vInfinityScroll]", inputs: ["vInfinityScroll"], outputs: ["vInfinityScrollMore"] }, { kind: "component", type: SelectColumnComponent, selector: "v-select-column", inputs: ["selected", "data", "progress"], outputs: ["selectedChange"] }, { kind: "directive", type: i9.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DndColumnComponent, selector: "v-dnd-column", outputs: ["dragged"] }, { kind: "component", type: TableInfoBarComponent, selector: "v-table-info-bar", inputs: ["progress", "hasMore", "hasLoad", "isPreload", "noDownload", "noToolbar", "dataProgress", "columns", "tableInputsContent", "size", "preloadSize", "count", "filteredCount", "selectedCount", "filter", "standaloneFilter"], outputs: ["filterChange", "downloadCsv", "load", "preload"] }, { kind: "component", type: TableActionsComponent, selector: "v-table-actions" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let columnsData = columnsData$$ | async;\n\n<div class=\"wrapper\">\n    <v-table-info-bar\n        [(filter)]=\"filter\"\n        [columns]=\"normColumns()\"\n        [count]=\"(dataSource.data$ | async)?.length\"\n        [dataProgress]=\"!!(columnsDataProgress$ | async) && !hasMore()\"\n        [filteredCount]=\"displayedCount$ | async\"\n        [hasLoad]=\"update$.observed\"\n        [hasMore]=\"hasMore()\"\n        [isPreload]=\"isPreload()\"\n        [noDownload]=\"noDownload()\"\n        [noToolbar]=\"noToolbar()\"\n        [preloadSize]=\"maxSize()\"\n        [progress]=\"progress()\"\n        [selectedCount]=\"rowSelected()?.length\"\n        [size]=\"size()\"\n        [standaloneFilter]=\"standaloneFilter()\"\n        [tableInputsContent]=\"tableInputsContent()\"\n        (downloadCsv)=\"downloadCsv()\"\n        (load)=\"load()\"\n        (preload)=\"preload()\"\n    >\n        <v-table-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-table-actions>\n    </v-table-info-bar>\n    <mat-card #scrollViewport appearance=\"outlined\" class=\"card\">\n        <v-no-records\n            [noRecords]=\"!(displayedCount$ | async)\"\n            [progress]=\"progress()\"\n        ></v-no-records>\n        <table\n            #matTable\n            [cdkDropListDisabled]=\"dragDisabled\"\n            [dataSource]=\"dataSource\"\n            [matSortActive]=\"(columnsDataProgress$ | async) || progress() ? '' : sort().active\"\n            [matSortDirection]=\"sort().direction\"\n            cdkDropList\n            cdkDropListData=\"dataSource\"\n            mat-table\n            matSort\n            (cdkDropListDropped)=\"drop($event)\"\n            (matSortChange)=\"sort.set($event)\"\n        >\n            @let displayedColumns = (displayedColumns$ | async) || [];\n\n            @if (displayedColumns.includes(columnDefs.drag)) {\n                <v-dnd-column\n                    [name]=\"columnDefs.drag\"\n                    (dragged)=\"dragDisabled = false\"\n                ></v-dnd-column>\n            }\n            @if (displayedColumns.includes(columnDefs.select)) {\n                <v-select-column\n                    [(selected)]=\"rowSelected\"\n                    [data]=\"displayedData$ | async\"\n                    [name]=\"columnDefs.select\"\n                    [progress]=\"progress()\"\n                ></v-select-column>\n            }\n            @for (col of displayedNormColumns$ | async; track col; let colIndex = $index) {\n                @let stickyStart = col.params.sticky === 'start';\n                @let stickyEnd = col.params.sticky === 'end';\n                @let columnClasses =\n                    {\n                        column: true,\n                        'column__sticky-start': stickyStart,\n                        'column__sticky-end': stickyEnd,\n                    };\n                <ng-container\n                    [matColumnDef]=\"col.field\"\n                    [sticky]=\"stickyStart\"\n                    [stickyEnd]=\"stickyEnd\"\n                >\n                    <th\n                        *matHeaderCellDef\n                        [disabled]=\"(col.sort | async) === false || hasMore() || progress()\"\n                        [mat-sort-header]=\"col.field\"\n                        [ngClass]=\"columnClasses\"\n                        mat-header-cell\n                    >\n                        <v-value [value]=\"col?.header | async\" emptySymbol=\"\" inline></v-value>\n                    </th>\n\n                    <ng-template let-element let-rowIndex=\"index\" matCellDef>\n                        @let cell = columnsData?.get?.(element)?.get(col);\n                        <td\n                            [ngClass]=\"columnClasses\"\n                            [ngStyle]=\"col?.params?.style\"\n                            [style.border-bottom]=\"cell?.isNextChild && !col.child ? 'none' : ''\"\n                            mat-cell\n                        >\n                            <v-value\n                                [emptySymbol]=\"!(cell?.isChild && !col?.child)\"\n                                [highlight]=\"filter$ | async\"\n                                [lazyValue]=\"cell?.lazyValue\"\n                                [lazyVisible]=\"loadedLazyItems.has(element)\"\n                                [value]=\"cell?.value | async\"\n                                inline\n                                (lazyVisibleChange)=\"loadedLazyItems.set(element, true)\"\n                            ></v-value>\n                        </td>\n                    </ng-template>\n                    <td *matFooterCellDef [ngClass]=\"columnClasses\" mat-footer-cell>\n                        <v-content-loading></v-content-loading>\n                    </td>\n                </ng-container>\n            }\n\n            <tr *matHeaderRowDef=\"displayedColumns$ | async; sticky: true\" mat-header-row></tr>\n            <tr\n                *matRowDef=\"let row; columns: displayedColumns$ | async\"\n                [cdkDragData]=\"row\"\n                cdkDrag\n                mat-row\n            ></tr>\n            <tr\n                *matFooterRowDef=\"displayedColumns$ | async\"\n                [ngClass]=\"{ row__hidden: !(hasAutoShowMore$ | async) || !tableRow }\"\n                [vInfinityScroll]=\"!progress()\"\n                mat-footer-row\n                (vInfinityScrollMore)=\"showMore()\"\n            ></tr>\n        </table>\n    </mat-card>\n</div>\n", styles: [":host{min-height:0;--mat-table-row-item-outline-color: var(--mat-sys-surface-variant)}.wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:max-content;gap:24px;height:100%}.wrapper .card{width:100%;height:100%;min-height:300px;overflow:auto;transform:translateZ(0)}.wrapper .card ::ng-deep .mdc-data-table__row:last-child .mat-mdc-cell{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}::ng-deep table ::ng-deep .cdk-drag-placeholder,::ng-deep .cdk-drag-preview ::ng-deep .cdk-drag-placeholder{background:#eee}::ng-deep table .column,::ng-deep .cdk-drag-preview .column{max-width:max(20px,30vw);border-color:var(--mat-sys-surface-variant)!important}::ng-deep table .column__sticky-start,::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-end{width:0}::ng-deep table .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-start{border-right:1px solid}::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-end{border-left:1px solid}::ng-deep table .row__hidden,::ng-deep .cdk-drag-preview .row__hidden{display:none}::ng-deep .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff!important;display:flex!important;align-items:center}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging ::ng-deep .mat-mdc-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drag-preview ::ng-deep td{border:none!important}\n"] }]
+            args: [{ selector: 'v-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@let columnsData = columnsData$$ | async;\n\n<div class=\"wrapper\">\n    <v-table-info-bar\n        [(filter)]=\"filter\"\n        [columns]=\"normColumns()\"\n        [count]=\"$safeNavigationMigration((dataSource.data$ | async)?.length)\"\n        [dataProgress]=\"!!(columnsDataProgress$ | async) && !hasMore()\"\n        [filteredCount]=\"displayedCount$ | async\"\n        [hasLoad]=\"update$.observed\"\n        [hasMore]=\"hasMore()\"\n        [isPreload]=\"isPreload()\"\n        [noDownload]=\"noDownload()\"\n        [noToolbar]=\"noToolbar()\"\n        [preloadSize]=\"maxSize()\"\n        [progress]=\"progress()\"\n        [selectedCount]=\"$safeNavigationMigration(rowSelected()?.length)\"\n        [size]=\"size()\"\n        [standaloneFilter]=\"standaloneFilter()\"\n        [tableInputsContent]=\"tableInputsContent()\"\n        (downloadCsv)=\"downloadCsv()\"\n        (load)=\"load()\"\n        (preload)=\"preload()\"\n    >\n        <v-table-actions>\n            <ng-content select=\"v-table-actions\"></ng-content>\n        </v-table-actions>\n    </v-table-info-bar>\n    <mat-card #scrollViewport appearance=\"outlined\" class=\"card\">\n        <v-no-records\n            [noRecords]=\"!(displayedCount$ | async)\"\n            [progress]=\"progress()\"\n        ></v-no-records>\n        <table\n            #matTable\n            [cdkDropListDisabled]=\"dragDisabled\"\n            [dataSource]=\"dataSource\"\n            [matSortActive]=\"(columnsDataProgress$ | async) || progress() ? '' : sort().active\"\n            [matSortDirection]=\"sort().direction\"\n            cdkDropList\n            cdkDropListData=\"dataSource\"\n            mat-table\n            matSort\n            (cdkDropListDropped)=\"drop($event)\"\n            (matSortChange)=\"sort.set($event)\"\n        >\n            @let displayedColumns = (displayedColumns$ | async) || [];\n\n            @if (displayedColumns.includes(columnDefs.drag)) {\n                <v-dnd-column\n                    [name]=\"columnDefs.drag\"\n                    (dragged)=\"dragDisabled = false\"\n                ></v-dnd-column>\n            }\n            @if (displayedColumns.includes(columnDefs.select)) {\n                <v-select-column\n                    [(selected)]=\"rowSelected\"\n                    [data]=\"displayedData$ | async\"\n                    [name]=\"columnDefs.select\"\n                    [progress]=\"progress()\"\n                ></v-select-column>\n            }\n            @for (col of displayedNormColumns$ | async; track col; let colIndex = $index) {\n                @let stickyStart = col.params.sticky === 'start';\n                @let stickyEnd = col.params.sticky === 'end';\n                @let columnClasses =\n                    {\n                        column: true,\n                        'column__sticky-start': stickyStart,\n                        'column__sticky-end': stickyEnd,\n                    };\n                <ng-container\n                    [matColumnDef]=\"col.field\"\n                    [sticky]=\"stickyStart\"\n                    [stickyEnd]=\"stickyEnd\"\n                >\n                    <th\n                        *matHeaderCellDef\n                        [disabled]=\"(col.sort | async) === false || hasMore() || progress()\"\n                        [mat-sort-header]=\"col.field\"\n                        [ngClass]=\"columnClasses\"\n                        mat-header-cell\n                    >\n                        <v-value\n                            [value]=\"$safeNavigationMigration(col?.header) | async\"\n                            emptySymbol=\"\"\n                            inline\n                        ></v-value>\n                    </th>\n\n                    <ng-template let-element let-rowIndex=\"index\" matCellDef>\n                        @let cell = $safeNavigationMigration(columnsData?.get?.(element)?.get(col));\n                        <td\n                            [ngClass]=\"columnClasses\"\n                            [ngStyle]=\"$safeNavigationMigration(col?.params?.style)\"\n                            [style.border-bottom]=\"cell?.isNextChild && !col.child ? 'none' : ''\"\n                            mat-cell\n                        >\n                            <v-value\n                                [emptySymbol]=\"!(cell?.isChild && !col?.child)\"\n                                [highlight]=\"filter$ | async\"\n                                [lazyValue]=\"$safeNavigationMigration(cell?.lazyValue)\"\n                                [lazyVisible]=\"loadedLazyItems.has(element)\"\n                                [value]=\"$safeNavigationMigration(cell?.value) | async\"\n                                inline\n                                (lazyVisibleChange)=\"loadedLazyItems.set(element, true)\"\n                            ></v-value>\n                        </td>\n                    </ng-template>\n                    <td *matFooterCellDef [ngClass]=\"columnClasses\" mat-footer-cell>\n                        <v-content-loading></v-content-loading>\n                    </td>\n                </ng-container>\n            }\n\n            <tr *matHeaderRowDef=\"displayedColumns$ | async; sticky: true\" mat-header-row></tr>\n            <tr\n                *matRowDef=\"let row; columns: displayedColumns$ | async\"\n                [cdkDragData]=\"row\"\n                cdkDrag\n                mat-row\n            ></tr>\n            <tr\n                *matFooterRowDef=\"displayedColumns$ | async\"\n                [ngClass]=\"{ row__hidden: !(hasAutoShowMore$ | async) || !tableRow }\"\n                [vInfinityScroll]=\"!progress()\"\n                mat-footer-row\n                (vInfinityScrollMore)=\"showMore()\"\n            ></tr>\n        </table>\n    </mat-card>\n</div>\n", styles: [":host{min-height:0;--mat-table-row-item-outline-color: var(--mat-sys-surface-variant)}.wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:max-content;gap:24px;height:100%}.wrapper .card{width:100%;height:100%;min-height:300px;overflow:auto;transform:translateZ(0)}.wrapper .card ::ng-deep .mdc-data-table__row:last-child .mat-mdc-cell{border-bottom-color:var(--mat-table-row-item-outline-color, rgba(0, 0, 0, .12))!important;border-bottom-width:var(--mat-table-row-item-outline-width, 1px)!important;border-bottom-style:solid!important}::ng-deep table ::ng-deep .cdk-drag-placeholder,::ng-deep .cdk-drag-preview ::ng-deep .cdk-drag-placeholder{background:#eee}::ng-deep table .column,::ng-deep .cdk-drag-preview .column{max-width:max(20px,30vw);border-color:var(--mat-sys-surface-variant)!important}::ng-deep table .column__sticky-start,::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-end{width:0}::ng-deep table .column__sticky-start,::ng-deep .cdk-drag-preview .column__sticky-start{border-right:1px solid}::ng-deep table .column__sticky-end,::ng-deep .cdk-drag-preview .column__sticky-end{border-left:1px solid}::ng-deep table .row__hidden,::ng-deep .cdk-drag-preview .row__hidden{display:none}::ng-deep .cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background:#fff!important;display:flex!important;align-items:center}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drop-list-dragging ::ng-deep .mat-mdc-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}::ng-deep .cdk-drag-preview ::ng-deep td{border:none!important}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], treeData: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeData", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], noDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDownload", required: false }] }], noToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "noToolbar", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], standaloneFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "standaloneFilter", required: false }] }], externalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalFilter", required: false }] }], rowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelectable", required: false }] }], rowSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelected", required: false }] }, { type: i0.Output, args: ["rowSelectedChange"] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], sortComponent: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -2387,19 +2486,19 @@ class CustomizeComponent extends DialogSuperclass {
         name: c.field,
         hidden: false,
     }));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CustomizeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: CustomizeComponent, isStandalone: false, selector: "v-customize", usesInheritance: true, ngImport: i0, template: "<v-dialog title=\"Customize table\">\n    <v-table [columns]=\"columns\" [data]=\"data\" [rowDragDrop]=\"['priority']\" noToolbar></v-table>\n    <v-dialog-actions>\n        <button mat-button>Save</button>\n    </v-dialog-actions>\n</v-dialog>\n", dependencies: [{ kind: "component", type: i1$2.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: DialogComponent, selector: "v-dialog", inputs: ["title", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "component", type: DialogActionsComponent, selector: "v-dialog-actions" }, { kind: "component", type: TableComponent, selector: "v-table", inputs: ["data", "treeData", "columns", "progress", "hasMore", "size", "maxSize", "noDownload", "noToolbar", "filter", "standaloneFilter", "externalFilter", "rowSelectable", "rowSelected", "sort", "rowDragDrop", "tableInputsContent"], outputs: ["filterChange", "rowSelectedChange", "sortChange", "rowDropped", "update", "more"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CustomizeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: CustomizeComponent, isStandalone: false, selector: "v-customize", usesInheritance: true, ngImport: i0, template: "<v-dialog title=\"Customize table\">\n    <v-table [columns]=\"columns\" [data]=\"data\" [rowDragDrop]=\"['priority']\" noToolbar></v-table>\n    <v-dialog-actions>\n        <button mat-button>Save</button>\n    </v-dialog-actions>\n</v-dialog>\n", dependencies: [{ kind: "component", type: i1$2.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: DialogComponent, selector: "v-dialog", inputs: ["title", "description", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "component", type: DialogActionsComponent, selector: "v-dialog-actions" }, { kind: "component", type: TableComponent, selector: "v-table", inputs: ["data", "treeData", "columns", "progress", "hasMore", "size", "maxSize", "noDownload", "noToolbar", "filter", "standaloneFilter", "externalFilter", "rowSelectable", "rowSelected", "sort", "rowDragDrop", "tableInputsContent"], outputs: ["filterChange", "rowSelectedChange", "sortChange", "rowDropped", "update", "more"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CustomizeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CustomizeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-customize', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<v-dialog title=\"Customize table\">\n    <v-table [columns]=\"columns\" [data]=\"data\" [rowDragDrop]=\"['priority']\" noToolbar></v-table>\n    <v-dialog-actions>\n        <button mat-button>Save</button>\n    </v-dialog-actions>\n</v-dialog>\n" }]
         }] });
 
 class TableInputsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: TableInputsComponent, isStandalone: false, selector: "v-table-inputs", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TableInputsComponent, isStandalone: false, selector: "v-table-inputs", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableInputsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableInputsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'v-table-inputs',
@@ -2411,25 +2510,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class TableProgressBarComponent {
     progress = input(false, { ...(ngDevMode ? { debugName: "progress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TableProgressBarComponent, isStandalone: true, selector: "v-table-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableProgressBarComponent, isStandalone: true, selector: "v-table-progress-bar", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (progress()) {
             <mat-progress-bar class="progress-bar" mode="indeterminate"></mat-progress-bar>
         }
-    `, isInline: true, styles: [".progress-bar{position:absolute;z-index:999}\n"], dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    `, isInline: true, styles: [".progress-bar{position:absolute;z-index:999}\n"], dependencies: [{ kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-table-progress-bar', imports: [MatProgressBar], template: `
         @if (progress()) {
             <mat-progress-bar class="progress-bar" mode="indeterminate"></mat-progress-bar>
         }
-    `, styles: [".progress-bar{position:absolute;z-index:999}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.Eager, styles: [".progress-bar{position:absolute;z-index:999}\n"] }]
         }], propDecorators: { progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
 
 class TableModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: TableModule, declarations: [CustomizeComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: TableModule, declarations: [CustomizeComponent,
             TableComponent,
             TableInfoBarComponent,
             TableInputsComponent,
@@ -2459,7 +2558,7 @@ class TableModule {
             ReactiveFormsModule,
             TagModule,
             DndColumnComponent], exports: [TableComponent, TableInputsComponent, TableActionsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableModule, imports: [CommonModule,
             MatTableModule,
             MatCardModule,
             ValueComponent,
@@ -2481,7 +2580,7 @@ class TableModule {
             TagModule,
             DndColumnComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2585,17 +2684,22 @@ const createMenuColumn = createColumn((params) => {
 });
 
 class TableResourceComponent {
-    resource = input(...(ngDevMode ? [undefined, { debugName: "resource" }] : /* istanbul ignore next */ []));
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    filter = model('', ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    resource = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "resource" }] : /* istanbul ignore next */ []));
+    columns = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    filter = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
     externalFilter = input(false, { ...(ngDevMode ? { debugName: "externalFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     noDownload = input(false, { ...(ngDevMode ? { debugName: "noDownload" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     standaloneFilter = input(false, { ...(ngDevMode ? { debugName: "standaloneFilter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    tableInputsContent = input(...(ngDevMode ? [undefined, { debugName: "tableInputsContent" }] : /* istanbul ignore next */ []));
+    tableInputsContent = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tableInputsContent" }] : /* istanbul ignore next */ []));
     hasMore = computed(() => {
         const res = this.resource();
         return 'hasMore' in res ? res.hasMore() : false;
-    }, ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
     more() {
         const res = this.resource();
         if ('more' in res)
@@ -2603,11 +2707,13 @@ class TableResourceComponent {
     }
     update(options) {
         const res = this.resource();
-        if ('setOptions' in res)
+        if (res && 'setOptions' in res)
             res.setOptions(options);
+        else if (res && 'reload' in res)
+            res.reload();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: TableResourceComponent, isStandalone: true, selector: "v-table-resource", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilter: { classPropertyName: "externalFilter", publicName: "externalFilter", isSignal: true, isRequired: false, transformFunction: null }, noDownload: { classPropertyName: "noDownload", publicName: "noDownload", isSignal: true, isRequired: false, transformFunction: null }, standaloneFilter: { classPropertyName: "standaloneFilter", publicName: "standaloneFilter", isSignal: true, isRequired: false, transformFunction: null }, tableInputsContent: { classPropertyName: "tableInputsContent", publicName: "tableInputsContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: TableResourceComponent, isStandalone: true, selector: "v-table-resource", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, externalFilter: { classPropertyName: "externalFilter", publicName: "externalFilter", isSignal: true, isRequired: false, transformFunction: null }, noDownload: { classPropertyName: "noDownload", publicName: "noDownload", isSignal: true, isRequired: false, transformFunction: null }, standaloneFilter: { classPropertyName: "standaloneFilter", publicName: "standaloneFilter", isSignal: true, isRequired: false, transformFunction: null }, tableInputsContent: { classPropertyName: "tableInputsContent", publicName: "tableInputsContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filterChange" }, ngImport: i0, template: `
         <v-table
             [(filter)]="filter"
             [columns]="columns()"
@@ -2624,9 +2730,9 @@ class TableResourceComponent {
         >
             <v-table-actions><ng-content select="v-table-actions"></ng-content></v-table-actions>
         </v-table>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: TableComponent, selector: "v-table", inputs: ["data", "treeData", "columns", "progress", "hasMore", "size", "maxSize", "noDownload", "noToolbar", "filter", "standaloneFilter", "externalFilter", "rowSelectable", "rowSelected", "sort", "rowDragDrop", "tableInputsContent"], outputs: ["filterChange", "rowSelectedChange", "sortChange", "rowDropped", "update", "more"] }, { kind: "component", type: TableActionsComponent, selector: "v-table-actions" }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: TableComponent, selector: "v-table", inputs: ["data", "treeData", "columns", "progress", "hasMore", "size", "maxSize", "noDownload", "noToolbar", "filter", "standaloneFilter", "externalFilter", "rowSelectable", "rowSelected", "sort", "rowDragDrop", "tableInputsContent"], outputs: ["filterChange", "rowSelectedChange", "sortChange", "rowDropped", "update", "more"] }, { kind: "component", type: TableActionsComponent, selector: "v-table-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TableResourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableResourceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'v-table-resource',
@@ -2648,6 +2754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             <v-table-actions><ng-content select="v-table-actions"></ng-content></v-table-actions>
         </v-table>
     `,
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     imports: [TableModule],
                 }]
         }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], externalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalFilter", required: false }] }], noDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDownload", required: false }] }], standaloneFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "standaloneFilter", required: false }] }], tableInputsContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableInputsContent", required: false }] }] } });
@@ -2659,24 +2766,24 @@ class ConfirmDialogComponent extends DialogSuperclass {
             ? { reason: this.control.value }
             : undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConfirmDialogComponent, isStandalone: false, selector: "v-action-dialog", usesInheritance: true, ngImport: i0, template: "<v-dialog\n    [noContent]=\"!(dialogData && (dialogData.hasReason || dialogData.description))\"\n    [title]=\"dialogData?.['title'] ?? 'Confirm this action?'\"\n    noCloseButton\n>\n    @if (dialogData && dialogData.description) {\n        <div class=\"mat-body-large\">\n            {{ dialogData.description }}\n        </div>\n    }\n    @if (dialogData && dialogData.hasReason) {\n        <mat-form-field style=\"width: 100%\">\n            <mat-label>Reason</mat-label>\n            <input [formControl]=\"control\" matInput />\n        </mat-form-field>\n    }\n    <v-dialog-actions>\n        <button mat-button (click)=\"closeWithCancellation()\">Cancel</button>\n        <button mat-flat-button (click)=\"confirm()\">\n            {{ dialogData?.['confirmLabel'] || 'Confirm' }}\n        </button>\n    </v-dialog-actions>\n</v-dialog>\n", dependencies: [{ kind: "component", type: i1$2.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: DialogComponent, selector: "v-dialog", inputs: ["title", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "component", type: DialogActionsComponent, selector: "v-dialog-actions" }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.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: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ConfirmDialogComponent, isStandalone: false, selector: "v-action-dialog", usesInheritance: true, ngImport: i0, template: "<v-dialog\n    [noContent]=\"!(dialogData && (dialogData.hasReason || dialogData.description))\"\n    [title]=\"dialogData?.['title'] ?? 'Confirm this action?'\"\n    noCloseButton\n>\n    @if (dialogData && dialogData.description) {\n        <div class=\"mat-body-large\">\n            {{ dialogData.description }}\n        </div>\n    }\n    @if (dialogData && dialogData.hasReason) {\n        <mat-form-field style=\"width: 100%\">\n            <mat-label>Reason</mat-label>\n            <input [formControl]=\"control\" matInput />\n        </mat-form-field>\n    }\n    <v-dialog-actions>\n        <button mat-button (click)=\"closeWithCancellation()\">Cancel</button>\n        <button mat-flat-button (click)=\"confirm()\">\n            {{ dialogData?.['confirmLabel'] || 'Confirm' }}\n        </button>\n    </v-dialog-actions>\n</v-dialog>\n", dependencies: [{ kind: "component", type: i1$2.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: DialogComponent, selector: "v-dialog", inputs: ["title", "description", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "component", type: DialogActionsComponent, selector: "v-dialog-actions" }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-action-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<v-dialog\n    [noContent]=\"!(dialogData && (dialogData.hasReason || dialogData.description))\"\n    [title]=\"dialogData?.['title'] ?? 'Confirm this action?'\"\n    noCloseButton\n>\n    @if (dialogData && dialogData.description) {\n        <div class=\"mat-body-large\">\n            {{ dialogData.description }}\n        </div>\n    }\n    @if (dialogData && dialogData.hasReason) {\n        <mat-form-field style=\"width: 100%\">\n            <mat-label>Reason</mat-label>\n            <input [formControl]=\"control\" matInput />\n        </mat-form-field>\n    }\n    <v-dialog-actions>\n        <button mat-button (click)=\"closeWithCancellation()\">Cancel</button>\n        <button mat-flat-button (click)=\"confirm()\">\n            {{ dialogData?.['confirmLabel'] || 'Confirm' }}\n        </button>\n    </v-dialog-actions>\n</v-dialog>\n" }]
         }] });
 
 class ConfirmDialogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogModule, declarations: [ConfirmDialogComponent], imports: [MatDialogModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ConfirmDialogModule, declarations: [ConfirmDialogComponent], imports: [MatDialogModule,
             MatButtonModule,
             DialogModule,
             MatFormFieldModule,
             CommonModule,
             MatInputModule,
             ReactiveFormsModule], exports: [ConfirmDialogComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogModule, imports: [MatDialogModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmDialogModule, imports: [MatDialogModule,
             MatButtonModule,
             DialogModule,
             MatFormFieldModule,
@@ -2684,7 +2791,7 @@ class ConfirmDialogModule {
             MatInputModule,
             ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfirmDialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfirmDialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2706,20 +2813,20 @@ class FiltersDialogComponent extends DialogSuperclass {
         return (!this.dialogData.filters.otherFiltersDirective?.templateRef ||
             this.dialogData.filters.merge);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FiltersDialogComponent, isStandalone: false, selector: "v-filters-dialog", usesInheritance: true, ngImport: i0, template: "<v-dialog noActions title=\"Filters\">\n    <div\n        [ngClass]=\"[\n            'v-filters-dialog-cols-' +\n                (isShowMainFilters ? (dialogData.filters.repeat$ | async) : 1),\n            'filters',\n        ]\"\n    >\n        @if (isShowMainFilters) {\n            <ng-container *ngTemplateOutlet=\"dialogData.filters.mainFiltersTemplate\"></ng-container>\n        }\n        @if (dialogData.filters.otherFiltersTemplate) {\n            <div class=\"other-filters\">\n                <ng-container\n                    *ngTemplateOutlet=\"dialogData.filters.otherFiltersTemplate\"\n                ></ng-container>\n            </div>\n        }\n    </div>\n</v-dialog>\n", styles: [".filters{display:grid;grid-template-columns:1fr}.filters .other-filters{display:block!important}::ng-deep .v-filters-dialog-cols-1>*:nth-child(-n+1){display:none}::ng-deep .v-filters-dialog-cols-2>*:nth-child(-n+2){display:none}::ng-deep .v-filters-dialog-cols-3>*:nth-child(-n+3){display:none}::ng-deep .v-filters-dialog-cols-4>*:nth-child(-n+4){display:none}::ng-deep .v-filters-dialog-cols-5>*:nth-child(-n+5){display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogComponent, selector: "v-dialog", inputs: ["title", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: FiltersDialogComponent, isStandalone: false, selector: "v-filters-dialog", usesInheritance: true, ngImport: i0, template: "<v-dialog noActions title=\"Filters\">\n    <div\n        [ngClass]=\"[\n            'v-filters-dialog-cols-' +\n                (isShowMainFilters ? (dialogData.filters.repeat$ | async) : 1),\n            'filters',\n        ]\"\n    >\n        @if (isShowMainFilters) {\n            <ng-container *ngTemplateOutlet=\"dialogData.filters.mainFiltersTemplate\"></ng-container>\n        }\n        @if (dialogData.filters.otherFiltersTemplate) {\n            <div class=\"other-filters\">\n                <ng-container\n                    *ngTemplateOutlet=\"dialogData.filters.otherFiltersTemplate\"\n                ></ng-container>\n            </div>\n        }\n    </div>\n</v-dialog>\n", styles: [".filters{display:grid;grid-template-columns:1fr}.filters .other-filters{display:block!important}::ng-deep .v-filters-dialog-cols-1>*:nth-child(-n+1){display:none}::ng-deep .v-filters-dialog-cols-2>*:nth-child(-n+2){display:none}::ng-deep .v-filters-dialog-cols-3>*:nth-child(-n+3){display:none}::ng-deep .v-filters-dialog-cols-4>*:nth-child(-n+4){display:none}::ng-deep .v-filters-dialog-cols-5>*:nth-child(-n+5){display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DialogComponent, selector: "v-dialog", inputs: ["title", "description", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-filters-dialog', standalone: false, template: "<v-dialog noActions title=\"Filters\">\n    <div\n        [ngClass]=\"[\n            'v-filters-dialog-cols-' +\n                (isShowMainFilters ? (dialogData.filters.repeat$ | async) : 1),\n            'filters',\n        ]\"\n    >\n        @if (isShowMainFilters) {\n            <ng-container *ngTemplateOutlet=\"dialogData.filters.mainFiltersTemplate\"></ng-container>\n        }\n        @if (dialogData.filters.otherFiltersTemplate) {\n            <div class=\"other-filters\">\n                <ng-container\n                    *ngTemplateOutlet=\"dialogData.filters.otherFiltersTemplate\"\n                ></ng-container>\n            </div>\n        }\n    </div>\n</v-dialog>\n", styles: [".filters{display:grid;grid-template-columns:1fr}.filters .other-filters{display:block!important}::ng-deep .v-filters-dialog-cols-1>*:nth-child(-n+1){display:none}::ng-deep .v-filters-dialog-cols-2>*:nth-child(-n+2){display:none}::ng-deep .v-filters-dialog-cols-3>*:nth-child(-n+3){display:none}::ng-deep .v-filters-dialog-cols-4>*:nth-child(-n+4){display:none}::ng-deep .v-filters-dialog-cols-5>*:nth-child(-n+5){display:none}\n"] }]
+            args: [{ selector: 'v-filters-dialog', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<v-dialog noActions title=\"Filters\">\n    <div\n        [ngClass]=\"[\n            'v-filters-dialog-cols-' +\n                (isShowMainFilters ? (dialogData.filters.repeat$ | async) : 1),\n            'filters',\n        ]\"\n    >\n        @if (isShowMainFilters) {\n            <ng-container *ngTemplateOutlet=\"dialogData.filters.mainFiltersTemplate\"></ng-container>\n        }\n        @if (dialogData.filters.otherFiltersTemplate) {\n            <div class=\"other-filters\">\n                <ng-container\n                    *ngTemplateOutlet=\"dialogData.filters.otherFiltersTemplate\"\n                ></ng-container>\n            </div>\n        }\n    </div>\n</v-dialog>\n", styles: [".filters{display:grid;grid-template-columns:1fr}.filters .other-filters{display:block!important}::ng-deep .v-filters-dialog-cols-1>*:nth-child(-n+1){display:none}::ng-deep .v-filters-dialog-cols-2>*:nth-child(-n+2){display:none}::ng-deep .v-filters-dialog-cols-3>*:nth-child(-n+3){display:none}::ng-deep .v-filters-dialog-cols-4>*:nth-child(-n+4){display:none}::ng-deep .v-filters-dialog-cols-5>*:nth-child(-n+5){display:none}\n"] }]
         }] });
 
 class MainFiltersDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MainFiltersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: MainFiltersDirective, isStandalone: false, selector: "[vMainFilters]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MainFiltersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MainFiltersDirective, isStandalone: false, selector: "[vMainFilters]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MainFiltersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MainFiltersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vMainFilters]',
@@ -2729,10 +2836,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class OtherFiltersDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: OtherFiltersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: OtherFiltersDirective, isStandalone: false, selector: "[vOtherFilters]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OtherFiltersDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: OtherFiltersDirective, isStandalone: false, selector: "[vOtherFilters]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: OtherFiltersDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: OtherFiltersDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vOtherFilters]',
@@ -2746,7 +2853,8 @@ class FiltersComponent {
     active = 0;
     merge = false;
     // TODO: to change from outside you need to change the logic and set $rows in two SCSS
-    rows = signal(1, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    rows = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     clear = new EventEmitter();
     filtersTemplate;
     otherFiltersDirective;
@@ -2780,12 +2888,12 @@ class FiltersComponent {
     open() {
         this.dialog.open(FiltersDialogComponent, { filters: this });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.5", type: FiltersComponent, isStandalone: false, selector: "v-filters", inputs: { active: "active", merge: ["merge", "merge", booleanAttribute] }, outputs: { clear: "clear" }, queries: [{ propertyName: "filtersTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "otherFiltersDirective", first: true, predicate: OtherFiltersDirective, descendants: true, static: true }, { propertyName: "mainFiltersDirective", first: true, predicate: MainFiltersDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div #content [ngClass]=\"['v-filters-cols-' + (repeat$ | async), 'filters']\">\n    <ng-container *ngTemplateOutlet=\"mainFiltersTemplate\"></ng-container>\n</div>\n", styles: [".filters{display:flex;gap:8px}::ng-deep .filters>*{min-width:0;flex:1}.filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}::ng-deep .v-filters-cols-1>*:nth-child(n+2){display:none}::ng-deep .v-filters-cols-2>*:nth-child(n+3){display:none}::ng-deep .v-filters-cols-3>*:nth-child(n+4){display:none}::ng-deep .v-filters-cols-4>*:nth-child(n+5){display:none}::ng-deep .v-filters-cols-5>*:nth-child(n+6){display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.7", type: FiltersComponent, isStandalone: false, selector: "v-filters", inputs: { active: "active", merge: ["merge", "merge", booleanAttribute] }, outputs: { clear: "clear" }, queries: [{ propertyName: "filtersTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "otherFiltersDirective", first: true, predicate: OtherFiltersDirective, descendants: true, static: true }, { propertyName: "mainFiltersDirective", first: true, predicate: MainFiltersDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div #content [ngClass]=\"['v-filters-cols-' + (repeat$ | async), 'filters']\">\n    <ng-container *ngTemplateOutlet=\"mainFiltersTemplate\"></ng-container>\n</div>\n", styles: [".filters{display:flex;gap:8px}::ng-deep .filters>*{min-width:0;flex:1}.filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}::ng-deep .v-filters-cols-1>*:nth-child(n+2){display:none}::ng-deep .v-filters-cols-2>*:nth-child(n+3){display:none}::ng-deep .v-filters-cols-3>*:nth-child(n+4){display:none}::ng-deep .v-filters-cols-4>*:nth-child(n+5){display:none}::ng-deep .v-filters-cols-5>*:nth-child(n+6){display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-filters', standalone: false, template: "<div #content [ngClass]=\"['v-filters-cols-' + (repeat$ | async), 'filters']\">\n    <ng-container *ngTemplateOutlet=\"mainFiltersTemplate\"></ng-container>\n</div>\n", styles: [".filters{display:flex;gap:8px}::ng-deep .filters>*{min-width:0;flex:1}.filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}::ng-deep .v-filters-cols-1>*:nth-child(n+2){display:none}::ng-deep .v-filters-cols-2>*:nth-child(n+3){display:none}::ng-deep .v-filters-cols-3>*:nth-child(n+4){display:none}::ng-deep .v-filters-cols-4>*:nth-child(n+5){display:none}::ng-deep .v-filters-cols-5>*:nth-child(n+6){display:none}\n"] }]
+            args: [{ selector: 'v-filters', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div #content [ngClass]=\"['v-filters-cols-' + (repeat$ | async), 'filters']\">\n    <ng-container *ngTemplateOutlet=\"mainFiltersTemplate\"></ng-container>\n</div>\n", styles: [".filters{display:flex;gap:8px}::ng-deep .filters>*{min-width:0;flex:1}.filters ::ng-deep .mat-mdc-form-field-subscript-wrapper{height:0}::ng-deep .v-filters-cols-1>*:nth-child(n+2){display:none}::ng-deep .v-filters-cols-2>*:nth-child(n+3){display:none}::ng-deep .v-filters-cols-3>*:nth-child(n+4){display:none}::ng-deep .v-filters-cols-4>*:nth-child(n+5){display:none}::ng-deep .v-filters-cols-5>*:nth-child(n+6){display:none}\n"] }]
         }], propDecorators: { active: [{
                 type: Input
             }], merge: [{
@@ -2809,19 +2917,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 class MoreFiltersButtonComponent {
     filters;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MoreFiltersButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MoreFiltersButtonComponent, isStandalone: false, selector: "v-more-filters-button", inputs: { filters: "filters" }, ngImport: i0, template: "<v-actions>\n    @if (filters.active && filters.clear.observed) {\n        <button mat-icon-button (click)=\"filters.clear.emit()\">\n            <mat-icon [matBadge]=\"filters.active || undefined\" matBadgeColor=\"accent\"\n                >restart_alt</mat-icon\n            >\n        </button>\n    }\n    @if (\n        filters.otherFiltersDirective ||\n        ((filters.filtersCount$ | async) ?? 0) - ((filters.displayedFiltersCount$ | async) ?? 0) > 0\n    ) {\n        <button mat-icon-button (click)=\"filters.open()\">\n            <mat-icon>filter_alt</mat-icon>\n        </button>\n    }\n</v-actions>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ActionsComponent, selector: "v-actions" }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MoreFiltersButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MoreFiltersButtonComponent, isStandalone: false, selector: "v-more-filters-button", inputs: { filters: "filters" }, ngImport: i0, template: "<v-actions>\n    @if (filters.active && filters.clear.observed) {\n        <button mat-icon-button (click)=\"filters.clear.emit()\">\n            <mat-icon [matBadge]=\"filters.active || undefined\" matBadgeColor=\"accent\"\n                >restart_alt</mat-icon\n            >\n        </button>\n    }\n    @if (\n        filters.otherFiltersDirective ||\n        ((filters.filtersCount$ | async) ?? 0) - ((filters.displayedFiltersCount$ | async) ?? 0) > 0\n    ) {\n        <button mat-icon-button (click)=\"filters.open()\">\n            <mat-icon>filter_alt</mat-icon>\n        </button>\n    }\n</v-actions>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ActionsComponent, selector: "v-actions" }, { kind: "directive", type: i7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MoreFiltersButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MoreFiltersButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-more-filters-button', standalone: false, template: "<v-actions>\n    @if (filters.active && filters.clear.observed) {\n        <button mat-icon-button (click)=\"filters.clear.emit()\">\n            <mat-icon [matBadge]=\"filters.active || undefined\" matBadgeColor=\"accent\"\n                >restart_alt</mat-icon\n            >\n        </button>\n    }\n    @if (\n        filters.otherFiltersDirective ||\n        ((filters.filtersCount$ | async) ?? 0) - ((filters.displayedFiltersCount$ | async) ?? 0) > 0\n    ) {\n        <button mat-icon-button (click)=\"filters.open()\">\n            <mat-icon>filter_alt</mat-icon>\n        </button>\n    }\n</v-actions>\n" }]
+            args: [{ selector: 'v-more-filters-button', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<v-actions>\n    @if (filters.active && filters.clear.observed) {\n        <button mat-icon-button (click)=\"filters.clear.emit()\">\n            <mat-icon [matBadge]=\"filters.active || undefined\" matBadgeColor=\"accent\"\n                >restart_alt</mat-icon\n            >\n        </button>\n    }\n    @if (\n        filters.otherFiltersDirective ||\n        ((filters.filtersCount$ | async) ?? 0) - ((filters.displayedFiltersCount$ | async) ?? 0) > 0\n    ) {\n        <button mat-icon-button (click)=\"filters.open()\">\n            <mat-icon>filter_alt</mat-icon>\n        </button>\n    }\n</v-actions>\n" }]
         }], propDecorators: { filters: [{
                 type: Input
             }] } });
 
 class FiltersModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: FiltersModule, declarations: [FiltersComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: FiltersModule, declarations: [FiltersComponent,
             MoreFiltersButtonComponent,
             FiltersDialogComponent,
             OtherFiltersDirective,
@@ -2835,7 +2943,7 @@ class FiltersModule {
             MoreFiltersButtonComponent,
             OtherFiltersDirective,
             MainFiltersDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersModule, imports: [CommonModule,
             MatButtonModule,
             MatIconModule,
             DialogModule,
@@ -2843,7 +2951,7 @@ class FiltersModule {
             ActionsModule,
             MatBadgeModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FiltersModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FiltersModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2878,43 +2986,43 @@ class DateRangeFieldComponent extends FormGroupSuperclass {
         start: undefined,
         end: undefined,
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DateRangeFieldComponent, isStandalone: false, selector: "v-date-range-field", inputs: { required: ["required", "required", booleanAttribute] }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DateRangeFieldComponent, isStandalone: false, selector: "v-date-range-field", inputs: { required: ["required", "required", booleanAttribute] }, providers: [
             ...createControlProviders(() => DateRangeFieldComponent),
             { provide: MAT_DATE_LOCALE, useValue: enGB },
             { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
             { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
-        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>Date range</mat-label>\n    <mat-date-range-input\n        [formGroup]=\"control\"\n        [rangePicker]=\"picker\"\n        [required]=\"required || false\"\n    >\n        <input formControlName=\"start\" matStartDate placeholder=\"Start date\" />\n        <input formControlName=\"end\" matEndDate placeholder=\"End date\" />\n    </mat-date-range-input>\n    <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n    <mat-date-range-picker #picker>\n        <mat-date-range-picker-actions>\n            <v-actions class=\"actions\">\n                @if (!required) {\n                    <button\n                        [disabled]=\"!control.value?.start && !control.value?.end\"\n                        mat-button\n                        (click)=\"control.reset(); picker.close()\"\n                    >\n                        Reset\n                    </button>\n                }\n                <button mat-flat-button matDateRangePickerApply>Apply</button>\n            </v-actions>\n        </mat-date-range-picker-actions>\n    </mat-date-range-picker>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto!important}input{text-overflow:ellipsis}.actions{width:100%}\n"], dependencies: [{ kind: "component", type: i1$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i1$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$5.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$5.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i1$5.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i1$5.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$2.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: ActionsComponent, selector: "v-actions" }] });
+        ], usesInheritance: true, ngImport: i0, template: "<mat-form-field>\n    <mat-label>Date range</mat-label>\n    <mat-date-range-input\n        [formGroup]=\"control\"\n        [rangePicker]=\"picker\"\n        [required]=\"required || false\"\n    >\n        <input formControlName=\"start\" matStartDate placeholder=\"Start date\" />\n        <input formControlName=\"end\" matEndDate placeholder=\"End date\" />\n    </mat-date-range-input>\n    <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n    <mat-date-range-picker #picker>\n        <mat-date-range-picker-actions>\n            <v-actions class=\"actions\">\n                @if (!required) {\n                    <button\n                        [disabled]=\"!control.value?.start && !control.value?.end\"\n                        mat-button\n                        (click)=\"control.reset(); picker.close()\"\n                    >\n                        Reset\n                    </button>\n                }\n                <button mat-flat-button matDateRangePickerApply>Apply</button>\n            </v-actions>\n        </mat-date-range-picker-actions>\n    </mat-date-range-picker>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto!important}input{text-overflow:ellipsis}.actions{width:100%}\n"], dependencies: [{ kind: "component", type: i1$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i1$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$5.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$5.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i1$5.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i1$5.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$2.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: ActionsComponent, selector: "v-actions" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-date-range-field', providers: [
                         ...createControlProviders(() => DateRangeFieldComponent),
                         { provide: MAT_DATE_LOCALE, useValue: enGB },
                         { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
                         { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
-                    ], standalone: false, template: "<mat-form-field>\n    <mat-label>Date range</mat-label>\n    <mat-date-range-input\n        [formGroup]=\"control\"\n        [rangePicker]=\"picker\"\n        [required]=\"required || false\"\n    >\n        <input formControlName=\"start\" matStartDate placeholder=\"Start date\" />\n        <input formControlName=\"end\" matEndDate placeholder=\"End date\" />\n    </mat-date-range-input>\n    <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n    <mat-date-range-picker #picker>\n        <mat-date-range-picker-actions>\n            <v-actions class=\"actions\">\n                @if (!required) {\n                    <button\n                        [disabled]=\"!control.value?.start && !control.value?.end\"\n                        mat-button\n                        (click)=\"control.reset(); picker.close()\"\n                    >\n                        Reset\n                    </button>\n                }\n                <button mat-flat-button matDateRangePickerApply>Apply</button>\n            </v-actions>\n        </mat-date-range-picker-actions>\n    </mat-date-range-picker>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto!important}input{text-overflow:ellipsis}.actions{width:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<mat-form-field>\n    <mat-label>Date range</mat-label>\n    <mat-date-range-input\n        [formGroup]=\"control\"\n        [rangePicker]=\"picker\"\n        [required]=\"required || false\"\n    >\n        <input formControlName=\"start\" matStartDate placeholder=\"Start date\" />\n        <input formControlName=\"end\" matEndDate placeholder=\"End date\" />\n    </mat-date-range-input>\n    <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n    <mat-date-range-picker #picker>\n        <mat-date-range-picker-actions>\n            <v-actions class=\"actions\">\n                @if (!required) {\n                    <button\n                        [disabled]=\"!control.value?.start && !control.value?.end\"\n                        mat-button\n                        (click)=\"control.reset(); picker.close()\"\n                    >\n                        Reset\n                    </button>\n                }\n                <button mat-flat-button matDateRangePickerApply>Apply</button>\n            </v-actions>\n        </mat-date-range-picker-actions>\n    </mat-date-range-picker>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}::ng-deep .mat-mdc-form-field-infix{width:auto!important}input{text-overflow:ellipsis}.actions{width:100%}\n"] }]
         }], propDecorators: { required: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }] } });
 
 class DateRangeFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: DateRangeFieldModule, declarations: [DateRangeFieldComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: DateRangeFieldModule, declarations: [DateRangeFieldComponent], imports: [CommonModule,
             MatDatepickerModule,
             MatInputModule,
             ReactiveFormsModule,
             MatButtonModule,
             ActionsModule], exports: [DateRangeFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateRangeFieldModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeFieldModule, imports: [CommonModule,
             MatDatepickerModule,
             MatInputModule,
             ReactiveFormsModule,
             MatButtonModule,
             ActionsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DateRangeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DateRangeFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DateRangeFieldComponent],
@@ -2956,22 +3064,22 @@ class NumberRangeFieldComponent extends FormGroupSuperclass {
         start: undefined,
         end: undefined,
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NumberRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: NumberRangeFieldComponent, isStandalone: false, selector: "v-number-range-field", inputs: { label: "label" }, providers: createControlProviders(() => NumberRangeFieldComponent), usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"control\" class=\"wrapper\">\n    <mat-form-field>\n        <mat-label>{{ label }} from</mat-label>\n        <input formControlName=\"start\" matInput type=\"number\" />\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label>{{ label }} to</mat-label>\n        <input formControlName=\"end\" matInput type=\"number\" />\n    </mat-form-field>\n</div>\n", styles: [".wrapper{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px}\n"], dependencies: [{ kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: NumberRangeFieldComponent, isStandalone: false, selector: "v-number-range-field", inputs: { label: "label" }, providers: createControlProviders(() => NumberRangeFieldComponent), usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"control\" class=\"wrapper\">\n    <mat-form-field>\n        <mat-label>{{ label }} from</mat-label>\n        <input formControlName=\"start\" matInput type=\"number\" />\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label>{{ label }} to</mat-label>\n        <input formControlName=\"end\" matInput type=\"number\" />\n    </mat-form-field>\n</div>\n", styles: [".wrapper{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px}\n"], dependencies: [{ kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NumberRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberRangeFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-number-range-field', providers: createControlProviders(() => NumberRangeFieldComponent), standalone: false, template: "<div [formGroup]=\"control\" class=\"wrapper\">\n    <mat-form-field>\n        <mat-label>{{ label }} from</mat-label>\n        <input formControlName=\"start\" matInput type=\"number\" />\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label>{{ label }} to</mat-label>\n        <input formControlName=\"end\" matInput type=\"number\" />\n    </mat-form-field>\n</div>\n", styles: [".wrapper{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px}\n"] }]
+            args: [{ selector: 'v-number-range-field', providers: createControlProviders(() => NumberRangeFieldComponent), changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div [formGroup]=\"control\" class=\"wrapper\">\n    <mat-form-field>\n        <mat-label>{{ label }} from</mat-label>\n        <input formControlName=\"start\" matInput type=\"number\" />\n    </mat-form-field>\n    <mat-form-field>\n        <mat-label>{{ label }} to</mat-label>\n        <input formControlName=\"end\" matInput type=\"number\" />\n    </mat-form-field>\n</div>\n", styles: [".wrapper{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }] } });
 
 class NumberRangeFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NumberRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: NumberRangeFieldModule, declarations: [NumberRangeFieldComponent], imports: [ReactiveFormsModule, MatInputModule], exports: [NumberRangeFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NumberRangeFieldModule, imports: [ReactiveFormsModule, MatInputModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberRangeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: NumberRangeFieldModule, declarations: [NumberRangeFieldComponent], imports: [ReactiveFormsModule, MatInputModule], exports: [NumberRangeFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberRangeFieldModule, imports: [ReactiveFormsModule, MatInputModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NumberRangeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NumberRangeFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [NumberRangeFieldComponent],
@@ -2993,12 +3101,12 @@ class ListFieldComponent extends FormControlSuperclass {
     getValue(inner = this.control.value) {
         return splitBySeparators(inner || '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ListFieldComponent, isStandalone: false, selector: "v-list-field", inputs: { label: "label", focusedHint: "focusedHint" }, providers: createControlProviders(() => ListFieldComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n    <input #input=\"matInput\" [formControl]=\"control\" autocomplete=\"false\" matInput type=\"string\" />\n    <mat-hint class=\"text-[var(--mat-sys-outline)]\">{{\n        (items$ | async)?.length\n            ? (items$ | async)?.length === 1\n                ? '1 item'\n                : (items$ | async)?.length + ' items'\n            : input.focused\n              ? focusedHint || 'item_1, item_2'\n              : ''\n    }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ListFieldComponent, isStandalone: false, selector: "v-list-field", inputs: { label: "label", focusedHint: "focusedHint" }, providers: createControlProviders(() => ListFieldComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n    <input #input=\"matInput\" [formControl]=\"control\" autocomplete=\"false\" matInput type=\"string\" />\n    <mat-hint class=\"text-[var(--mat-sys-outline)]\">{{\n        (items$ | async)?.length\n            ? (items$ | async)?.length === 1\n                ? '1 item'\n                : (items$ | async)?.length + ' items'\n            : input.focused\n              ? focusedHint || 'item_1, item_2'\n              : ''\n    }}</mat-hint>\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-list-field', providers: createControlProviders(() => ListFieldComponent), standalone: false, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n    <input #input=\"matInput\" [formControl]=\"control\" autocomplete=\"false\" matInput type=\"string\" />\n    <mat-hint class=\"text-[var(--mat-sys-outline)]\">{{\n        (items$ | async)?.length\n            ? (items$ | async)?.length === 1\n                ? '1 item'\n                : (items$ | async)?.length + ' items'\n            : input.focused\n              ? focusedHint || 'item_1, item_2'\n              : ''\n    }}</mat-hint>\n</mat-form-field>\n" }]
+            args: [{ selector: 'v-list-field', providers: createControlProviders(() => ListFieldComponent), changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n    <input #input=\"matInput\" [formControl]=\"control\" autocomplete=\"false\" matInput type=\"string\" />\n    <mat-hint class=\"text-[var(--mat-sys-outline)]\">{{\n        (items$ | async)?.length\n            ? (items$ | async)?.length === 1\n                ? '1 item'\n                : (items$ | async)?.length + ' items'\n            : input.focused\n              ? focusedHint || 'item_1, item_2'\n              : ''\n    }}</mat-hint>\n</mat-form-field>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], focusedHint: [{
@@ -3006,11 +3114,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 class ListFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: ListFieldModule, declarations: [ListFieldComponent], imports: [CommonModule, MatInputModule, ReactiveFormsModule], exports: [ListFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListFieldModule, imports: [CommonModule, MatInputModule, ReactiveFormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ListFieldModule, declarations: [ListFieldComponent], imports: [CommonModule, MatInputModule, ReactiveFormsModule], exports: [ListFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListFieldModule, imports: [CommonModule, MatInputModule, ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ListFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ListFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ListFieldComponent],
@@ -3020,21 +3128,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class ErrorPageComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: ErrorPageComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"error\">\n    <div class=\"text-2xl font-normal title\">\n        <mat-icon>error</mat-icon>\n        <div>Page not found</div>\n    </div>\n    <h2 class=\"mat-headline-small text-[var(--mat-sys-outline)]\">\n        This page doesn't exist<br />or no permission to access this page\n    </h2>\n</div>\n", styles: [".error{margin:0 auto;padding:96px 24px;text-align:center}.error .title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}.error .title mat-icon{font-size:40px;width:auto;height:auto}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: ErrorPageComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: "<div class=\"error\">\n    <div class=\"text-2xl font-normal title\">\n        <mat-icon>error</mat-icon>\n        <div>Page not found</div>\n    </div>\n    <h2 class=\"mat-headline-small text-[var(--mat-sys-outline)]\">\n        This page doesn't exist<br />or no permission to access this page\n    </h2>\n</div>\n", styles: [".error{margin:0 auto;padding:96px 24px;text-align:center}.error .title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}.error .title mat-icon{font-size:40px;width:auto;height:auto}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<div class=\"error\">\n    <div class=\"text-2xl font-normal title\">\n        <mat-icon>error</mat-icon>\n        <div>Page not found</div>\n    </div>\n    <h2 class=\"mat-headline-small text-[var(--mat-sys-outline)]\">\n        This page doesn't exist<br />or no permission to access this page\n    </h2>\n</div>\n", styles: [".error{margin:0 auto;padding:96px 24px;text-align:center}.error .title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}.error .title mat-icon{font-size:40px;width:auto;height:auto}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"error\">\n    <div class=\"text-2xl font-normal title\">\n        <mat-icon>error</mat-icon>\n        <div>Page not found</div>\n    </div>\n    <h2 class=\"mat-headline-small text-[var(--mat-sys-outline)]\">\n        This page doesn't exist<br />or no permission to access this page\n    </h2>\n</div>\n", styles: [".error{margin:0 auto;padding:96px 24px;text-align:center}.error .title{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}.error .title mat-icon{font-size:40px;width:auto;height:auto}\n"] }]
         }] });
 
 const ROUTES = [{ path: '', component: ErrorPageComponent }];
 class ErrorPageRoutingModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageRoutingModule, imports: [i1$6.RouterModule], exports: [RouterModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageRoutingModule, imports: [RouterModule.forChild(ROUTES), RouterModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageRoutingModule, imports: [i1$6.RouterModule], exports: [RouterModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageRoutingModule, imports: [RouterModule.forChild(ROUTES), RouterModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(ROUTES)],
@@ -3043,11 +3151,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class ErrorPageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageModule, declarations: [ErrorPageComponent], imports: [ErrorPageRoutingModule, MatIconModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageModule, imports: [ErrorPageRoutingModule, MatIconModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageModule, declarations: [ErrorPageComponent], imports: [ErrorPageRoutingModule, MatIconModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageModule, imports: [ErrorPageRoutingModule, MatIconModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ErrorPageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ErrorPageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ErrorPageRoutingModule, MatIconModule],
@@ -3083,86 +3191,107 @@ function getHintText(options, selected, hint, opts = {}) {
     return opts.showLabel ? option?.label : option?.description;
 }
 
-class SelectFieldComponent extends FormControlSuperclass {
+class SelectFieldComponent {
+    value = model(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touch = output();
+    selection = transformedValue(this.value, {
+        parse: (value) => ({ value }),
+        format: (value) => (value === '' ? undefined : value),
+    });
+    control = form(this.selection, (path) => {
+        required(path, { when: () => this.required() });
+        disabled(path, () => this.disabled());
+    });
     options = [];
-    searchChange = new EventEmitter();
+    search = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
     appearance;
     label;
     hint;
+    placeholder;
     error;
     progress = false;
+    clearable = true;
     externalSearch = false;
     multiple = false;
-    required = false;
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     size;
-    searchStr = '';
     ngOnInit() {
-        super.ngOnInit();
         if (this.externalSearch) {
             timer(0)
                 .pipe(first$1())
                 .subscribe(() => {
-                this.searchChange.emit(String(this.control.value));
+                this.search.set(String(this.selection() ?? ''));
             });
         }
     }
     get hintText() {
-        return getHintText(this.options, this.multiple ? this.control.value : [this.control.value], this.hint, {
+        return getHintText(this.options, this.multiple ? this.selection() : [this.selection()], this.hint, {
             multiple: this.multiple,
         });
     }
-    search = (term, item) => {
+    searchFn = (term, item) => {
         return this.externalSearch || isSearchOption(item, term.toLowerCase());
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SelectFieldComponent, isStandalone: false, selector: "v-select-field", inputs: { options: "options", appearance: "appearance", label: "label", hint: "hint", error: "error", progress: "progress", externalSearch: ["externalSearch", "externalSearch", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], required: ["required", "required", booleanAttribute], size: "size" }, outputs: { searchChange: "searchChange" }, providers: createControlProviders(() => SelectFieldComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" [ngClass]=\"{ 'v-input-field__small': size === 'small' }\">\n    <mat-label>{{ label }}</mat-label>\n\n    <mtx-select\n        [closeOnSelect]=\"!multiple\"\n        [formControl]=\"control\"\n        [items]=\"options\"\n        [loading]=\"progress\"\n        [markFirst]=\"true\"\n        [multiple]=\"multiple\"\n        [notFoundText]=\"externalSearch && !searchStr ? 'Enter your search term' : 'No items found'\"\n        [required]=\"required\"\n        [searchable]=\"true\"\n        [searchFn]=\"search\"\n        [selectableGroup]=\"true\"\n        [selectableGroupAsModel]=\"false\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        groupBy=\"type\"\n        (clear)=\"searchChange.emit(''); searchStr = ''\"\n        (search)=\"searchChange.emit($event.term); searchStr = $event.term\"\n    >\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-optgroup-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    {{ item.type | uppercase }}\n                </mat-checkbox>\n            } @else {\n                {{ item.type | uppercase }}\n            }\n        </ng-template>\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-option-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n                </mat-checkbox>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n            }\n            <ng-template #text>\n                <div class=\"label\">{{ item.label }}</div>\n                @if (item.description) {\n                    <div class=\"description mat-label-medium text-[var(--mat-sys-outline)]\">\n                        {{ item.description }}\n                    </div>\n                }\n            </ng-template>\n        </ng-template>\n    </mtx-select>\n\n    <mat-hint>{{ hintText }}</mat-hint>\n    <mat-error>{{ error }}</mat-error>\n</mat-form-field>\n", styles: ["::ng-deep .mat-mdc-form-field{width:100%}::ng-deep .mat-mdc-form-field>*{max-height:56px}::ng-deep .mat-mdc-form-field .ng-value-container{flex-wrap:nowrap!important;overflow-x:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom{margin-top:-4px}.checkbox-option{margin:-12px 0 -12px -8px}.label,.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$3.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: i3$3.MtxSelectOptgroupTemplate, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i3$3.MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$4.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: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] });
+    // TODO: close not working for mouse click
+    close(select) {
+        if (!this.multiple) {
+            timer(0)
+                .pipe(first$1())
+                .subscribe(() => select.close());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SelectFieldComponent, isStandalone: false, selector: "v-select-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, externalSearch: { classPropertyName: "externalSearch", publicName: "externalSearch", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", search: "searchChange" }, ngImport: i0, template: "<mat-form-field [appearance]=\"appearance\" [ngClass]=\"{ 'v-input-field__small': size === 'small' }\">\n    <mat-label>{{ label }}</mat-label>\n\n    <mtx-select\n        #select\n        [clearable]=\"clearable\"\n        [closeOnSelect]=\"!multiple\"\n        [formField]=\"control\"\n        [items]=\"\n            options?.length || !selection() ? options : [{ value: selection(), label: selection() }]\n        \"\n        [loading]=\"progress\"\n        [markFirst]=\"true\"\n        [multiple]=\"multiple\"\n        [notFoundText]=\"externalSearch && !search() ? 'Enter your search term' : 'No items found'\"\n        [placeholder]=\"placeholder\"\n        [required]=\"required()\"\n        [searchable]=\"true\"\n        [searchFn]=\"searchFn\"\n        [selectableGroup]=\"true\"\n        [selectableGroupAsModel]=\"false\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        groupBy=\"type\"\n        (blur)=\"touch.emit()\"\n        (change)=\"close(select)\"\n        (clear)=\"search.set('')\"\n        (search)=\"search.set($event.term)\"\n    >\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-optgroup-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    {{ item.type | uppercase }}\n                </mat-checkbox>\n            } @else {\n                {{ item.type | uppercase }}\n            }\n        </ng-template>\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-option-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n                </mat-checkbox>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n            }\n            <ng-template #text>\n                <div class=\"label\">{{ item.label }}</div>\n                @if (item.description) {\n                    <div class=\"description mat-label-medium text-[var(--mat-sys-outline)]\">\n                        {{ item.description }}\n                    </div>\n                }\n            </ng-template>\n        </ng-template>\n    </mtx-select>\n\n    <mat-hint>{{ hintText }}</mat-hint>\n    <mat-error>{{ error }}</mat-error>\n</mat-form-field>\n", styles: ["::ng-deep .mat-mdc-form-field{width:100%}::ng-deep .mat-mdc-form-field>*{max-height:56px}::ng-deep .mat-mdc-form-field .ng-value-container{flex-wrap:nowrap!important;overflow-x:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom{margin-top:-4px}.checkbox-option{margin:-12px 0 -12px -8px}.label,.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3$4.MtxSelect, selector: "mtx-select", inputs: ["usePopover", "addTag", "addTagText", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearable", "clearAllText", "clearOnBackspace", "compareWith", "panelPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "panelDisabled", "fixedPlaceholder", "preventToggleOnRightClick", "clearSearchOnAdd", "deselectOnClick", "tabIndex", "inputId", "inputAttrs", "panelClass", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "ariaLabel", "ariaLabelledby", "ariaDescribedby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: i2$4.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: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-select-field', providers: createControlProviders(() => SelectFieldComponent), standalone: false, template: "<mat-form-field [appearance]=\"appearance\" [ngClass]=\"{ 'v-input-field__small': size === 'small' }\">\n    <mat-label>{{ label }}</mat-label>\n\n    <mtx-select\n        [closeOnSelect]=\"!multiple\"\n        [formControl]=\"control\"\n        [items]=\"options\"\n        [loading]=\"progress\"\n        [markFirst]=\"true\"\n        [multiple]=\"multiple\"\n        [notFoundText]=\"externalSearch && !searchStr ? 'Enter your search term' : 'No items found'\"\n        [required]=\"required\"\n        [searchable]=\"true\"\n        [searchFn]=\"search\"\n        [selectableGroup]=\"true\"\n        [selectableGroupAsModel]=\"false\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        groupBy=\"type\"\n        (clear)=\"searchChange.emit(''); searchStr = ''\"\n        (search)=\"searchChange.emit($event.term); searchStr = $event.term\"\n    >\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-optgroup-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    {{ item.type | uppercase }}\n                </mat-checkbox>\n            } @else {\n                {{ item.type | uppercase }}\n            }\n        </ng-template>\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-option-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n                </mat-checkbox>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n            }\n            <ng-template #text>\n                <div class=\"label\">{{ item.label }}</div>\n                @if (item.description) {\n                    <div class=\"description mat-label-medium text-[var(--mat-sys-outline)]\">\n                        {{ item.description }}\n                    </div>\n                }\n            </ng-template>\n        </ng-template>\n    </mtx-select>\n\n    <mat-hint>{{ hintText }}</mat-hint>\n    <mat-error>{{ error }}</mat-error>\n</mat-form-field>\n", styles: ["::ng-deep .mat-mdc-form-field{width:100%}::ng-deep .mat-mdc-form-field>*{max-height:56px}::ng-deep .mat-mdc-form-field .ng-value-container{flex-wrap:nowrap!important;overflow-x:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom{margin-top:-4px}.checkbox-option{margin:-12px 0 -12px -8px}.label,.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], propDecorators: { options: [{
+            args: [{ selector: 'v-select-field', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<mat-form-field [appearance]=\"appearance\" [ngClass]=\"{ 'v-input-field__small': size === 'small' }\">\n    <mat-label>{{ label }}</mat-label>\n\n    <mtx-select\n        #select\n        [clearable]=\"clearable\"\n        [closeOnSelect]=\"!multiple\"\n        [formField]=\"control\"\n        [items]=\"\n            options?.length || !selection() ? options : [{ value: selection(), label: selection() }]\n        \"\n        [loading]=\"progress\"\n        [markFirst]=\"true\"\n        [multiple]=\"multiple\"\n        [notFoundText]=\"externalSearch && !search() ? 'Enter your search term' : 'No items found'\"\n        [placeholder]=\"placeholder\"\n        [required]=\"required()\"\n        [searchable]=\"true\"\n        [searchFn]=\"searchFn\"\n        [selectableGroup]=\"true\"\n        [selectableGroupAsModel]=\"false\"\n        bindLabel=\"label\"\n        bindValue=\"value\"\n        groupBy=\"type\"\n        (blur)=\"touch.emit()\"\n        (change)=\"close(select)\"\n        (clear)=\"search.set('')\"\n        (search)=\"search.set($event.term)\"\n    >\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-optgroup-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    {{ item.type | uppercase }}\n                </mat-checkbox>\n            } @else {\n                {{ item.type | uppercase }}\n            }\n        </ng-template>\n        <ng-template let-index=\"index\" let-item=\"item\" let-item$=\"item$\" ng-option-tmp>\n            @if (multiple) {\n                <mat-checkbox\n                    [ngModel]=\"item$.selected\"\n                    class=\"checkbox-option\"\n                    id=\"item-{{ index }}\"\n                >\n                    <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n                </mat-checkbox>\n            } @else {\n                <ng-container *ngTemplateOutlet=\"text\"></ng-container>\n            }\n            <ng-template #text>\n                <div class=\"label\">{{ item.label }}</div>\n                @if (item.description) {\n                    <div class=\"description mat-label-medium text-[var(--mat-sys-outline)]\">\n                        {{ item.description }}\n                    </div>\n                }\n            </ng-template>\n        </ng-template>\n    </mtx-select>\n\n    <mat-hint>{{ hintText }}</mat-hint>\n    <mat-error>{{ error }}</mat-error>\n</mat-form-field>\n", styles: ["::ng-deep .mat-mdc-form-field{width:100%}::ng-deep .mat-mdc-form-field>*{max-height:56px}::ng-deep .mat-mdc-form-field .ng-value-container{flex-wrap:nowrap!important;overflow-x:hidden}::ng-deep .ng-dropdown-panel.ng-select-bottom{margin-top:-4px}.checkbox-option{margin:-12px 0 -12px -8px}.label,.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], options: [{
                 type: Input
-            }], searchChange: [{
-                type: Output
-            }], appearance: [{
+            }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], appearance: [{
                 type: Input
             }], label: [{
                 type: Input
             }], hint: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], error: [{
                 type: Input
             }], progress: [{
                 type: Input
-            }], externalSearch: [{
+            }], clearable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], multiple: [{
+            }], externalSearch: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], required: [{
+            }], multiple: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], size: [{
+            }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{
                 type: Input
             }] } });
 
 class SelectFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: SelectFieldModule, declarations: [SelectFieldComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldModule, declarations: [SelectFieldComponent], imports: [CommonModule,
             MatInputModule,
             MtxSelectModule,
             FormsModule,
-            ReactiveFormsModule,
+            FormField,
             MatCheckboxModule], exports: [SelectFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectFieldModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldModule, imports: [CommonModule,
             MatInputModule,
             MtxSelectModule,
             FormsModule,
-            ReactiveFormsModule,
             MatCheckboxModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SelectFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SelectFieldComponent],
@@ -3172,43 +3301,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
                         MatInputModule,
                         MtxSelectModule,
                         FormsModule,
-                        ReactiveFormsModule,
+                        FormField,
                         MatCheckboxModule,
                     ],
                 }]
         }] });
 
 class AutocompleteFieldComponent extends FormControlSuperclass {
-    options = [];
+    dr = inject(DestroyRef);
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    externalSearch = input(false, { ...(ngDevMode ? { debugName: "externalSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    searchChange = output();
+    requireSelection = input(false, { ...(ngDevMode ? { debugName: "requireSelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     label;
-    hint;
     error;
     type = 'text';
     mono = false;
     required = false;
-    get hintText() {
-        return getHintText(this.options, [this.control.value], this.hint, { showLabel: true });
+    hintText$ = combineLatest([
+        getValidValueChanges(this.control),
+        toObservable(this.options),
+        toObservable(this.hint),
+    ]).pipe(map(([value, options, hint]) => getHintText(options, [value], hint, { showLabel: true })), shareReplay({ refCount: true, bufferSize: 1 }));
+    selected$ = combineLatest([getValueChanges(this.control), toObservable(this.options)]).pipe(map(([value, options]) => (options || []).find((o) => o.value === value)), shareReplay({ refCount: true, bufferSize: 1 }));
+    filteredOptions$ = combineLatest([
+        getValueChanges(this.control).pipe(map((value) => String(value ?? '').toLowerCase())),
+        toObservable(this.options),
+    ]).pipe(map(([value, options]) => searchOptions(options, value)), shareReplay({ refCount: true, bufferSize: 1 }));
+    ngOnInit() {
+        super.ngOnInit();
+        getValueChanges(this.control)
+            .pipe(takeUntilDestroyed(this.dr))
+            .subscribe((value) => {
+            this.searchChange.emit(String(value ?? ''));
+        });
     }
-    options$ = new BehaviorSubject([]);
-    selected$ = merge(this.control.valueChanges, this.options$).pipe(map(() => (this.options || []).find((o) => o.value === this.control.value)), shareReplay({ refCount: true, bufferSize: 1 }));
-    filteredOptions$ = merge(this.control.valueChanges, this.options$).pipe(map(() => String(this.control.value ?? '').toLowerCase()), map((filter) => searchOptions(this.options, filter)), shareReplay({ refCount: true, bufferSize: 1 }));
-    ngOnChanges(changes) {
-        super.ngOnChanges(changes);
-        if (changes.options) {
-            this.options$.next(this.options || []);
+    onBlur() {
+        const value = this.control.value;
+        const validValue = this.getValidValue(value);
+        if (value !== validValue) {
+            this.control.setValue(validValue);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AutocompleteFieldComponent, isStandalone: false, selector: "v-autocomplete-field", inputs: { options: "options", label: "label", hint: "hint", error: "error", type: "type", mono: ["mono", "mono", booleanAttribute], required: ["required", "required", booleanAttribute] }, providers: createControlProviders(() => AutocompleteFieldComponent), usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n\n    <input\n        #trigger=\"matAutocompleteTrigger\"\n        [formControl]=\"control\"\n        [matAutocomplete]=\"auto\"\n        [ngClass]=\"{ 'mat-mono': mono }\"\n        [required]=\"required\"\n        [type]=\"options?.length ? 'text' : type\"\n        matInput\n    />\n\n    <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption>\n        @for (option of filteredOptions$ | async; track option) {\n            <mat-option [value]=\"option.value\">\n                <div [ngClass]=\"{ 'mat-mono': mono }\" class=\"label\">{{ option.label }}</div>\n                @if (option.description) {\n                    <div\n                        [ngClass]=\"{ 'mat-mono': mono }\"\n                        class=\"description mat-label-medium text-[var(--mat-sys-outline)]\"\n                    >\n                        {{ option.description }}\n                    </div>\n                }\n            </mat-option>\n        }\n    </mat-autocomplete>\n\n    <div matSuffix style=\"display: flex; gap: 4px\">\n        @if (control.value) {\n            <button mat-icon-button (click)=\"control.reset(); $event.stopPropagation()\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n        @if (options?.length) {\n            <button\n                mat-icon-button\n                (click)=\"\n                    auto.isOpen ? trigger.closePanel() : trigger.openPanel();\n                    $event.stopPropagation()\n                \"\n            >\n                <mat-icon>{{ auto.isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n            </button>\n        }\n    </div>\n    <mat-hint>{{ hintText }}</mat-hint>\n    <mat-error>{{\n        error ??\n            ((selected$ | async) ? (selected$ | async)?.label + (hint ? ' | ' + hint : '') : hint)\n    }}</mat-error>\n</mat-form-field>\n", styles: [".label,.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    innerToOuterValue(inner) {
+        return this.getValidValue(inner);
+    }
+    getValidValue(value) {
+        if (isNil$1(value)) {
+            return value;
+        }
+        if (value === '' ||
+            (this.requireSelection() &&
+                !this.options().some((o) => String(o.value) === String(value)))) {
+            return undefined;
+        }
+        if (this.type === 'text')
+            return value;
+        const res = Number(value);
+        if (isNaN(res))
+            return undefined;
+        return res;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AutocompleteFieldComponent, isStandalone: false, selector: "v-autocomplete-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, externalSearch: { classPropertyName: "externalSearch", publicName: "externalSearch", isSignal: true, isRequired: false, transformFunction: null }, requireSelection: { classPropertyName: "requireSelection", publicName: "requireSelection", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { searchChange: "searchChange" }, providers: createControlProviders(() => AutocompleteFieldComponent), usesInheritance: true, ngImport: i0, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n\n    <input\n        #trigger=\"matAutocompleteTrigger\"\n        [formControl]=\"control\"\n        [matAutocomplete]=\"auto\"\n        [ngClass]=\"{ 'mat-mono': mono }\"\n        [required]=\"required\"\n        matInput\n        type=\"text\"\n        (blur)=\"onBlur()\"\n    />\n\n    <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption>\n        @for (option of externalSearch() ? options() : (filteredOptions$ | async); track option) {\n            <mat-option [value]=\"option.value\">\n                <div [ngClass]=\"{ 'mat-mono': mono }\" class=\"label\">{{ option.label }}</div>\n                @if (option.description) {\n                    <div\n                        [ngClass]=\"{ 'mat-mono': mono }\"\n                        class=\"description mat-label-medium text-[var(--mat-sys-outline)]\"\n                    >\n                        {{ option.description }}\n                    </div>\n                }\n            </mat-option>\n        }\n    </mat-autocomplete>\n\n    <div matSuffix style=\"display: flex; gap: 4px\">\n        @if (control.value) {\n            <button mat-icon-button (click)=\"control.reset(); $event.stopPropagation()\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n        @if (options()?.length) {\n            <button\n                mat-icon-button\n                (click)=\"\n                    auto.isOpen ? trigger.closePanel() : trigger.openPanel();\n                    $event.stopPropagation()\n                \"\n            >\n                <mat-icon>{{ auto.isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n            </button>\n        }\n    </div>\n    <mat-hint>{{ hintText$ | async }}</mat-hint>\n    <mat-error>{{\n        error ??\n            ((selected$ | async)\n                ? (selected$ | async)?.label + (hint() ? ' | ' + hint() : '')\n                : hint())\n    }}</mat-error>\n</mat-form-field>\n", styles: [".label,.description{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-autocomplete-field', providers: createControlProviders(() => AutocompleteFieldComponent), standalone: false, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n\n    <input\n        #trigger=\"matAutocompleteTrigger\"\n        [formControl]=\"control\"\n        [matAutocomplete]=\"auto\"\n        [ngClass]=\"{ 'mat-mono': mono }\"\n        [required]=\"required\"\n        [type]=\"options?.length ? 'text' : type\"\n        matInput\n    />\n\n    <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption>\n        @for (option of filteredOptions$ | async; track option) {\n            <mat-option [value]=\"option.value\">\n                <div [ngClass]=\"{ 'mat-mono': mono }\" class=\"label\">{{ option.label }}</div>\n                @if (option.description) {\n                    <div\n                        [ngClass]=\"{ 'mat-mono': mono }\"\n                        class=\"description mat-label-medium text-[var(--mat-sys-outline)]\"\n                    >\n                        {{ option.description }}\n                    </div>\n                }\n            </mat-option>\n        }\n    </mat-autocomplete>\n\n    <div matSuffix style=\"display: flex; gap: 4px\">\n        @if (control.value) {\n            <button mat-icon-button (click)=\"control.reset(); $event.stopPropagation()\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n        @if (options?.length) {\n            <button\n                mat-icon-button\n                (click)=\"\n                    auto.isOpen ? trigger.closePanel() : trigger.openPanel();\n                    $event.stopPropagation()\n                \"\n            >\n                <mat-icon>{{ auto.isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n            </button>\n        }\n    </div>\n    <mat-hint>{{ hintText }}</mat-hint>\n    <mat-error>{{\n        error ??\n            ((selected$ | async) ? (selected$ | async)?.label + (hint ? ' | ' + hint : '') : hint)\n    }}</mat-error>\n</mat-form-field>\n", styles: [".label,.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], hint: [{
+            args: [{ selector: 'v-autocomplete-field', providers: createControlProviders(() => AutocompleteFieldComponent), changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<mat-form-field style=\"width: 100%\">\n    <mat-label>{{ label }}</mat-label>\n\n    <input\n        #trigger=\"matAutocompleteTrigger\"\n        [formControl]=\"control\"\n        [matAutocomplete]=\"auto\"\n        [ngClass]=\"{ 'mat-mono': mono }\"\n        [required]=\"required\"\n        matInput\n        type=\"text\"\n        (blur)=\"onBlur()\"\n    />\n\n    <mat-autocomplete #auto=\"matAutocomplete\" autoActiveFirstOption>\n        @for (option of externalSearch() ? options() : (filteredOptions$ | async); track option) {\n            <mat-option [value]=\"option.value\">\n                <div [ngClass]=\"{ 'mat-mono': mono }\" class=\"label\">{{ option.label }}</div>\n                @if (option.description) {\n                    <div\n                        [ngClass]=\"{ 'mat-mono': mono }\"\n                        class=\"description mat-label-medium text-[var(--mat-sys-outline)]\"\n                    >\n                        {{ option.description }}\n                    </div>\n                }\n            </mat-option>\n        }\n    </mat-autocomplete>\n\n    <div matSuffix style=\"display: flex; gap: 4px\">\n        @if (control.value) {\n            <button mat-icon-button (click)=\"control.reset(); $event.stopPropagation()\">\n                <mat-icon>clear</mat-icon>\n            </button>\n        }\n        @if (options()?.length) {\n            <button\n                mat-icon-button\n                (click)=\"\n                    auto.isOpen ? trigger.closePanel() : trigger.openPanel();\n                    $event.stopPropagation()\n                \"\n            >\n                <mat-icon>{{ auto.isOpen ? 'expand_less' : 'expand_more' }}</mat-icon>\n            </button>\n        }\n    </div>\n    <mat-hint>{{ hintText$ | async }}</mat-hint>\n    <mat-error>{{\n        error ??\n            ((selected$ | async)\n                ? (selected$ | async)?.label + (hint() ? ' | ' + hint() : '')\n                : hint())\n    }}</mat-error>\n</mat-form-field>\n", styles: [".label,.description{overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], externalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalSearch", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], requireSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSelection", required: false }] }], label: [{
                 type: Input
             }], error: [{
                 type: Input
@@ -3223,15 +3386,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 class AutocompleteFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutocompleteFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: AutocompleteFieldModule, declarations: [AutocompleteFieldComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteFieldModule, declarations: [AutocompleteFieldComponent], imports: [CommonModule,
             MatInputModule,
             FormsModule,
             ReactiveFormsModule,
             MatAutocompleteModule,
             MatButtonModule,
             MatIconModule], exports: [AutocompleteFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutocompleteFieldModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteFieldModule, imports: [CommonModule,
             MatInputModule,
             FormsModule,
             ReactiveFormsModule,
@@ -3239,7 +3402,7 @@ class AutocompleteFieldModule {
             MatButtonModule,
             MatIconModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AutocompleteFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AutocompleteFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AutocompleteFieldComponent],
@@ -3262,10 +3425,10 @@ class ConfigServiceSuperclass {
     async init({ configUrl }) {
         this.config = await lastValueFrom(this.http.get(configUrl));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfigServiceSuperclass, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfigServiceSuperclass });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfigServiceSuperclass, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfigServiceSuperclass });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConfigServiceSuperclass, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ConfigServiceSuperclass, decorators: [{
             type: Injectable
         }] });
 
@@ -3351,20 +3514,20 @@ class NotifyLogService {
             .pipe(first$1(), timeout(DEFAULT_TIMEOUT_MS))
             .subscribe(subscribe);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NotifyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NotifyLogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NotifyLogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NotifyLogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NotifyLogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NotifyLogService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class LogModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: LogModule, imports: [MatSnackBarModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LogModule, providers: [NotifyLogService], imports: [MatSnackBarModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: LogModule, imports: [MatSnackBarModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LogModule, providers: [NotifyLogService], imports: [MatSnackBarModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: LogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [MatSnackBarModule],
@@ -3568,23 +3731,23 @@ class QueryParamsService {
     deserializeNamespace(strParams) {
         return strParams ? JSON.parse(strParams) : {};
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class QueryParamsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsModule, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsModule, providers: [
             { provide: QUERY_PARAMS_SERIALIZERS, useValue: DATE_QUERY_PARAMS_SERIALIZERS },
             QueryParamsService,
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: QueryParamsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: QueryParamsModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
@@ -3601,17 +3764,18 @@ class UrlService {
     router = inject(Router);
     url$ = this.router.events.pipe(startWith(null), map(() => this.getUrl()), filter((url) => this.router.navigated || (!!url && url !== '/')), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
     url = toSignal(this.url$, { initialValue: this.getUrl() });
-    path = computed(() => getUrlPath(this.url()), ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    path = computed(() => getUrlPath(this.url()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
     path$ = toObservable(this.path);
     getUrl() {
         return this.router.url && this.router.url !== '/'
             ? this.router.url.split('?', 1)[0].split('#', 1)[0]
             : window.location.pathname;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UrlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: UrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: UrlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UrlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: UrlService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3661,12 +3825,12 @@ class ToastComponent {
             }, this.data.duration ?? DEFAULT_DURATION);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ToastComponent, isStandalone: true, selector: "v-toast", ngImport: i0, template: "<span>\n    {{ message$ | async }}\n</span>\n\n@if (data.progress$ | async) {\n    <mat-spinner [diameter]=\"24\" color=\"white\"></mat-spinner>\n} @else {\n    <button class=\"button\" mat-button (click)=\"dismissWithAction()\">OK</button>\n}\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;--mat-progress-spinner-active-indicator-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ToastComponent, isStandalone: true, selector: "v-toast", ngImport: i0, template: "<span>\n    {{ message$ | async }}\n</span>\n\n@if (data.progress$ | async) {\n    <mat-spinner [diameter]=\"24\" color=\"white\"></mat-spinner>\n} @else {\n    <button class=\"button\" mat-button (click)=\"dismissWithAction()\">OK</button>\n}\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;--mat-progress-spinner-active-indicator-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-toast', imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule], template: "<span>\n    {{ message$ | async }}\n</span>\n\n@if (data.progress$ | async) {\n    <mat-spinner [diameter]=\"24\" color=\"white\"></mat-spinner>\n} @else {\n    <button class=\"button\" mat-button (click)=\"dismissWithAction()\">OK</button>\n}\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;--mat-progress-spinner-active-indicator-color: white}\n"] }]
+            args: [{ selector: 'v-toast', changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, MatProgressSpinnerModule, MatButtonModule], template: "<span>\n    {{ message$ | async }}\n</span>\n\n@if (data.progress$ | async) {\n    <mat-spinner [diameter]=\"24\" color=\"white\"></mat-spinner>\n} @else {\n    <button class=\"button\" mat-button (click)=\"dismissWithAction()\">OK</button>\n}\n", styles: [":host{display:flex;justify-content:space-between;align-items:center;--mat-progress-spinner-active-indicator-color: white}\n"] }]
         }], ctorParameters: () => [] });
 
 class ToastService {
@@ -3678,10 +3842,10 @@ class ToastService {
             data,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ToastService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3691,8 +3855,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 class ThemeService {
     storageKey = 'theme';
     isSystemDark = toSignal(fromEvent(window.matchMedia('(prefers-color-scheme: dark)'), 'change').pipe(map$1((event) => event.matches)), { initialValue: window.matchMedia('(prefers-color-scheme: dark)').matches });
-    theme = signal(this.getStoredTheme(), ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    isDark = computed(() => this.theme() === 'dark' || (this.theme() === 'system' && this.isSystemDark()), ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    theme = signal(this.getStoredTheme(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    isDark = computed(() => this.theme() === 'dark' || (this.theme() === 'system' && this.isSystemDark()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => this.updateTheme(this.isDark()));
     }
@@ -3712,18 +3878,21 @@ class ThemeService {
             document.body.classList.remove('dark-mode');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
 class AppModeService {
-    mode = signal(this.getInitialMode(), ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    isSimple = computed(() => this.mode() === 'simple', ...(ngDevMode ? [{ debugName: "isSimple" }] : /* istanbul ignore next */ []));
-    isAdvanced = computed(() => this.mode() === 'advanced', ...(ngDevMode ? [{ debugName: "isAdvanced" }] : /* istanbul ignore next */ []));
+    mode = signal(this.getInitialMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    isSimple = computed(() => this.mode() === 'simple', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSimple" }] : /* istanbul ignore next */ []));
+    isAdvanced = computed(() => this.mode() === 'advanced', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAdvanced" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             localStorage.setItem('app-mode', this.mode());
@@ -3736,10 +3905,10 @@ class AppModeService {
     setMode(mode) {
         this.mode.set(mode);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AppModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AppModeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AppModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AppModeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AppModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AppModeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3769,12 +3938,12 @@ class FileUploadComponent {
         this.file = file;
         this.upload.emit(this.file);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: FileUploadComponent, isStandalone: false, selector: "v-file-upload", inputs: { label: "label", extensions: "extensions" }, outputs: { upload: "upload" }, ngImport: i0, template: "<div class=\"wrapper\">\n    <button mat-button type=\"button\" (click)=\"fileInput.click()\">\n        {{ label ?? 'Choose File' }}\n    </button>\n\n    <div class=\"mat-body-medium text-[var(--mat-sys-outline)] m-0 file-name\">\n        {{ file?.name }}\n    </div>\n</div>\n\n<input #fileInput hidden type=\"file\" (change)=\"loadFile($event)\" />\n", styles: [".wrapper{display:grid;grid-template-columns:min-content auto;align-items:center;grid-gap:16px}.wrapper>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.wrapper .file-name{height:auto}\n"], dependencies: [{ kind: "component", type: i1$2.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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: FileUploadComponent, isStandalone: false, selector: "v-file-upload", inputs: { label: "label", extensions: "extensions" }, outputs: { upload: "upload" }, ngImport: i0, template: "<div class=\"wrapper\">\n    <button mat-button type=\"button\" (click)=\"fileInput.click()\">\n        {{ label ?? 'Choose File' }}\n    </button>\n\n    <div class=\"mat-body-medium text-[var(--mat-sys-outline)] m-0 file-name\">\n        {{ file?.name }}\n    </div>\n</div>\n\n<input #fileInput hidden type=\"file\" (change)=\"loadFile($event)\" />\n", styles: [".wrapper{display:grid;grid-template-columns:min-content auto;align-items:center;grid-gap:16px}.wrapper>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.wrapper .file-name{height:auto}\n"], dependencies: [{ kind: "component", type: i1$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-file-upload', standalone: false, template: "<div class=\"wrapper\">\n    <button mat-button type=\"button\" (click)=\"fileInput.click()\">\n        {{ label ?? 'Choose File' }}\n    </button>\n\n    <div class=\"mat-body-medium text-[var(--mat-sys-outline)] m-0 file-name\">\n        {{ file?.name }}\n    </div>\n</div>\n\n<input #fileInput hidden type=\"file\" (change)=\"loadFile($event)\" />\n", styles: [".wrapper{display:grid;grid-template-columns:min-content auto;align-items:center;grid-gap:16px}.wrapper>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.wrapper .file-name{height:auto}\n"] }]
+            args: [{ selector: 'v-file-upload', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"wrapper\">\n    <button mat-button type=\"button\" (click)=\"fileInput.click()\">\n        {{ label ?? 'Choose File' }}\n    </button>\n\n    <div class=\"mat-body-medium text-[var(--mat-sys-outline)] m-0 file-name\">\n        {{ file?.name }}\n    </div>\n</div>\n\n<input #fileInput hidden type=\"file\" (change)=\"loadFile($event)\" />\n", styles: [".wrapper{display:grid;grid-template-columns:min-content auto;align-items:center;grid-gap:16px}.wrapper>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.wrapper .file-name{height:auto}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], extensions: [{
@@ -3784,11 +3953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 class FileUploadModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule, MatButtonModule], exports: [FileUploadComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadModule, imports: [CommonModule, MatButtonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: FileUploadModule, declarations: [FileUploadComponent], imports: [CommonModule, MatButtonModule], exports: [FileUploadComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadModule, imports: [CommonModule, MatButtonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FileUploadComponent],
@@ -3856,22 +4025,22 @@ class DatetimeFieldComponent extends FormComponentSuperclass$1 {
     emitValue() {
         return this.emitOutgoingValue(getNoTimeZoneIsoString(this.datetime));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DatetimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DatetimeFieldComponent, isStandalone: false, selector: "v-datetime-field", inputs: { label: "label", required: ["required", "required", booleanAttribute], hint: "hint" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatetimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: DatetimeFieldComponent, isStandalone: false, selector: "v-datetime-field", inputs: { label: "label", required: ["required", "required", booleanAttribute], hint: "hint" }, providers: [
             ...createControlProviders(() => DatetimeFieldComponent),
             { provide: MAT_DATE_LOCALE, useValue: enGB },
             { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
             { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\">\n    <mat-form-field class=\"date\">\n        <mat-label>\n            {{ label }}\n        </mat-label>\n        <mat-hint>{{ hint }}</mat-hint>\n        <input\n            [matDatepicker]=\"picker\"\n            [required]=\"required\"\n            [value]=\"datetime\"\n            matInput\n            (dateInput)=\"dateChanged($event)\"\n        />\n        <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    @if (datetime) {\n        <mat-form-field class=\"time\">\n            <input [value]=\"time\" matInput type=\"time\" (input)=\"timeChanged($event)\" />\n        </mat-form-field>\n    }\n</div>\n", styles: [".wrapper{display:flex;gap:8px}.wrapper .date{flex:1}.wrapper .time{width:100px}\n"], dependencies: [{ kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$2.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: i1$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\">\n    <mat-form-field class=\"date\">\n        <mat-label>\n            {{ label }}\n        </mat-label>\n        <mat-hint>{{ hint }}</mat-hint>\n        <input\n            [matDatepicker]=\"picker\"\n            [required]=\"required\"\n            [value]=\"datetime\"\n            matInput\n            (dateInput)=\"dateChanged($event)\"\n        />\n        <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    @if (datetime) {\n        <mat-form-field class=\"time\">\n            <input [value]=\"time\" matInput type=\"time\" (input)=\"timeChanged($event)\" />\n        </mat-form-field>\n    }\n</div>\n", styles: [".wrapper{display:flex;gap:8px}.wrapper .date{flex:1}.wrapper .time{width:100px}\n"], dependencies: [{ kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i2$2.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: i1$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatetimeFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-datetime-field', providers: [
                         ...createControlProviders(() => DatetimeFieldComponent),
                         { provide: MAT_DATE_LOCALE, useValue: enGB },
                         { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
                         { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
-                    ], standalone: false, template: "<div class=\"wrapper\">\n    <mat-form-field class=\"date\">\n        <mat-label>\n            {{ label }}\n        </mat-label>\n        <mat-hint>{{ hint }}</mat-hint>\n        <input\n            [matDatepicker]=\"picker\"\n            [required]=\"required\"\n            [value]=\"datetime\"\n            matInput\n            (dateInput)=\"dateChanged($event)\"\n        />\n        <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    @if (datetime) {\n        <mat-form-field class=\"time\">\n            <input [value]=\"time\" matInput type=\"time\" (input)=\"timeChanged($event)\" />\n        </mat-form-field>\n    }\n</div>\n", styles: [".wrapper{display:flex;gap:8px}.wrapper .date{flex:1}.wrapper .time{width:100px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div class=\"wrapper\">\n    <mat-form-field class=\"date\">\n        <mat-label>\n            {{ label }}\n        </mat-label>\n        <mat-hint>{{ hint }}</mat-hint>\n        <input\n            [matDatepicker]=\"picker\"\n            [required]=\"required\"\n            [value]=\"datetime\"\n            matInput\n            (dateInput)=\"dateChanged($event)\"\n        />\n        <mat-datepicker-toggle [for]=\"picker\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #picker></mat-datepicker>\n    </mat-form-field>\n    @if (datetime) {\n        <mat-form-field class=\"time\">\n            <input [value]=\"time\" matInput type=\"time\" (input)=\"timeChanged($event)\" />\n        </mat-form-field>\n    }\n</div>\n", styles: [".wrapper{display:flex;gap:8px}.wrapper .date{flex:1}.wrapper .time{width:100px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], required: [{
@@ -3882,11 +4051,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             }] } });
 
 class DatetimeFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DatetimeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: DatetimeFieldModule, declarations: [DatetimeFieldComponent], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], exports: [DatetimeFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DatetimeFieldModule, imports: [CommonModule, MatFormFieldModule, MatInputModule, MatDatepickerModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatetimeFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: DatetimeFieldModule, declarations: [DatetimeFieldComponent], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], exports: [DatetimeFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatetimeFieldModule, imports: [CommonModule, MatFormFieldModule, MatInputModule, MatDatepickerModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DatetimeFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: DatetimeFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DatetimeFieldComponent],
@@ -3922,7 +4091,6 @@ class SwitchButtonComponent extends FormControlSuperclass {
         this.control.setValue(this.getValue(this.nextIndex));
     }
     ngOnChanges(changes) {
-        super.ngOnChanges(changes);
         if (changes.states && this.states.length) {
             if (!isNil(this.states?.[0]?.value)) {
                 this.hasChangeValue = true;
@@ -3940,22 +4108,22 @@ class SwitchButtonComponent extends FormControlSuperclass {
     getValue(index) {
         return this.hasChangeValue ? this.states[index]?.value : index;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: SwitchButtonComponent, isStandalone: false, selector: "v-switch-button", inputs: { states: "states" }, providers: createControlProviders(() => SwitchButtonComponent), usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button [matTooltip]=\"tooltip\" class=\"button\" mat-icon-button (click)=\"change()\">\n    <mat-icon class=\"icon\">{{ state?.icon }}</mat-icon>\n</button>\n", dependencies: [{ kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SwitchButtonComponent, isStandalone: false, selector: "v-switch-button", inputs: { states: "states" }, providers: createControlProviders(() => SwitchButtonComponent), usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button [matTooltip]=\"tooltip\" class=\"button\" mat-icon-button (click)=\"change()\">\n    <mat-icon class=\"icon\">{{ state?.icon }}</mat-icon>\n</button>\n", dependencies: [{ kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-switch-button', providers: createControlProviders(() => SwitchButtonComponent), standalone: false, template: "<button [matTooltip]=\"tooltip\" class=\"button\" mat-icon-button (click)=\"change()\">\n    <mat-icon class=\"icon\">{{ state?.icon }}</mat-icon>\n</button>\n" }]
+            args: [{ selector: 'v-switch-button', providers: createControlProviders(() => SwitchButtonComponent), changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<button [matTooltip]=\"tooltip\" class=\"button\" mat-icon-button (click)=\"change()\">\n    <mat-icon class=\"icon\">{{ state?.icon }}</mat-icon>\n</button>\n" }]
         }], propDecorators: { states: [{
                 type: Input
             }] } });
 
 class SwitchButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: SwitchButtonModule, declarations: [SwitchButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], exports: [SwitchButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchButtonModule, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: SwitchButtonModule, declarations: [SwitchButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], exports: [SwitchButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchButtonModule, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SwitchButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SwitchButtonComponent],
@@ -3966,7 +4134,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 
 function isActiveLink(link, url) {
     return (!isNil$1(url) &&
-        (url.startsWith(link.url || '') || (!!link.checkUrl && url.startsWith(link.checkUrl || ''))));
+        ((Boolean(link.url) && url.startsWith(link.url)) ||
+            (Boolean(link.checkUrl) && url.startsWith(link.checkUrl))));
 }
 function getActiveLinks(links, url) {
     return links.reduce((acc, link) => {
@@ -3979,7 +4148,8 @@ function getActiveLinks(links, url) {
 class NavComponent {
     urlService = inject(UrlService);
     injector = inject(Injector);
-    links = input([], ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+    links = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
     viewedLinks$ = combineLatest([toObservable(this.links), this.urlService.url$]).pipe(switchMap(([links, url]) => this.getViewedLinks(links, url)), shareReplay$1({ refCount: true, bufferSize: 1 }));
     activeLinks$ = this.viewedLinks$.pipe(combineLatestWith(this.urlService.url$), map$1(([links, url]) => getActiveLinks(links, url)), shareReplay$1({ refCount: true, bufferSize: 1 }));
     getViewedLinks(links, url) {
@@ -3993,12 +4163,12 @@ class NavComponent {
         }))
             .filter((link) => !link.isHidden)))));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: NavComponent, isStandalone: true, selector: "v-nav", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"v-nav gap-3\">\n    @let activeLinks = (activeLinks$ | async) || [];\n\n    @for (linkGroup of viewedLinks$ | async; track linkGroup; let index = $index) {\n        @if (index > 0) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"flex flex-col\">\n            @for (link of linkGroup.children; track link) {\n                @let isActive = activeLinks.includes(link);\n\n                @if (link.children) {\n                    <button\n                        [ngClass]=\"{\n                            '!text-[var(--mat-sys-on-surface-variant)]': !isActive,\n                        }\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-end mx-2 !px-4 !flex-row-reverse\"\n                        matButton\n                    >\n                        {{ link.label }}\n                        <mat-icon class=\"pl-2\">{{\n                            link.children.length\n                                ? isActive\n                                    ? 'keyboard_arrow_down'\n                                    : 'keyboard_arrow_up'\n                                : 'keyboard_arrow_right'\n                        }}</mat-icon>\n                    </button>\n                } @else {\n                    <button\n                        [matButton]=\"isActive ? 'tonal' : 'text'\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                    >\n                        {{ link.label }}\n                    </button>\n                }\n                @if (isActive && link.children?.length) {\n                    <div class=\"pl-2 flex flex-col\">\n                        @for (childLink of link.children; track childLink) {\n                            <button\n                                [matButton]=\"activeLinks.includes(childLink) ? 'tonal' : 'text'\"\n                                [routerLink]=\"childLink.url\"\n                                [title]=\"childLink.label\"\n                                class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                            >\n                                {{ childLink.label }}\n                            </button>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".v-nav{display:flex;flex-direction:column}.v-nav .item{cursor:pointer;padding:12px 24px 12px 12px}.v-nav .item__active{font-weight:500}.v-nav .item:after{display:block;content:attr(title);font-weight:500;height:0;color:transparent;overflow:hidden;visibility:hidden}.v-nav__secondary .item{border-left:solid 4px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: MatDividerModule }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: NavComponent, isStandalone: true, selector: "v-nav", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"v-nav gap-3\">\n    @let activeLinks = (activeLinks$ | async) || [];\n\n    @for (linkGroup of viewedLinks$ | async; track linkGroup; let index = $index) {\n        @if (index > 0) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"flex flex-col\">\n            @for (link of linkGroup.children; track link) {\n                @let isActive = activeLinks.includes(link);\n\n                @if (link.divider) {\n                    <mat-divider></mat-divider>\n                } @else if (link.children) {\n                    <button\n                        [ngClass]=\"{\n                            '!text-[var(--mat-sys-on-surface-variant)]': !isActive,\n                        }\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-end mx-2 !px-4 !flex-row-reverse\"\n                        matButton\n                    >\n                        {{ link.label }}\n                        <mat-icon class=\"pl-2\">{{\n                            link.children.length\n                                ? isActive\n                                    ? 'keyboard_arrow_down'\n                                    : 'keyboard_arrow_up'\n                                : 'keyboard_arrow_right'\n                        }}</mat-icon>\n                    </button>\n                } @else {\n                    <button\n                        [matButton]=\"isActive ? 'tonal' : 'text'\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                    >\n                        {{ link.label }}\n                    </button>\n                }\n                @if (isActive && link.children?.length) {\n                    <div\n                        class=\"flex flex-col border-l-1 border-[var(--mat-sys-outline-variant)] ml-6 mb-2\"\n                    >\n                        @for (childLink of link.children; track childLink) {\n                            @if (childLink.divider) {\n                                <mat-divider></mat-divider>\n                            } @else {\n                                <button\n                                    [matButton]=\"activeLinks.includes(childLink) ? 'tonal' : 'text'\"\n                                    [routerLink]=\"childLink.url\"\n                                    [title]=\"childLink.label\"\n                                    class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                                >\n                                    {{ childLink.label }}\n                                </button>\n                            }\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".v-nav{display:flex;flex-direction:column}.v-nav .item{cursor:pointer;padding:12px 24px 12px 12px}.v-nav .item__active{font-weight:500}.v-nav .item:after{display:block;content:attr(title);font-weight:500;height:0;color:transparent;overflow:hidden;visibility:hidden}.v-nav__secondary .item{border-left:solid 4px}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: MatDividerModule }, { kind: "component", type: i2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: NavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-nav', imports: [RouterLink, MatButtonModule, MatDividerModule, CommonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"v-nav gap-3\">\n    @let activeLinks = (activeLinks$ | async) || [];\n\n    @for (linkGroup of viewedLinks$ | async; track linkGroup; let index = $index) {\n        @if (index > 0) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"flex flex-col\">\n            @for (link of linkGroup.children; track link) {\n                @let isActive = activeLinks.includes(link);\n\n                @if (link.children) {\n                    <button\n                        [ngClass]=\"{\n                            '!text-[var(--mat-sys-on-surface-variant)]': !isActive,\n                        }\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-end mx-2 !px-4 !flex-row-reverse\"\n                        matButton\n                    >\n                        {{ link.label }}\n                        <mat-icon class=\"pl-2\">{{\n                            link.children.length\n                                ? isActive\n                                    ? 'keyboard_arrow_down'\n                                    : 'keyboard_arrow_up'\n                                : 'keyboard_arrow_right'\n                        }}</mat-icon>\n                    </button>\n                } @else {\n                    <button\n                        [matButton]=\"isActive ? 'tonal' : 'text'\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                    >\n                        {{ link.label }}\n                    </button>\n                }\n                @if (isActive && link.children?.length) {\n                    <div class=\"pl-2 flex flex-col\">\n                        @for (childLink of link.children; track childLink) {\n                            <button\n                                [matButton]=\"activeLinks.includes(childLink) ? 'tonal' : 'text'\"\n                                [routerLink]=\"childLink.url\"\n                                [title]=\"childLink.label\"\n                                class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                            >\n                                {{ childLink.label }}\n                            </button>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".v-nav{display:flex;flex-direction:column}.v-nav .item{cursor:pointer;padding:12px 24px 12px 12px}.v-nav .item__active{font-weight:500}.v-nav .item:after{display:block;content:attr(title);font-weight:500;height:0;color:transparent;overflow:hidden;visibility:hidden}.v-nav__secondary .item{border-left:solid 4px}\n"] }]
+            args: [{ selector: 'v-nav', imports: [RouterLink, MatButtonModule, MatDividerModule, CommonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.Eager, encapsulation: ViewEncapsulation.None, template: "<div class=\"v-nav gap-3\">\n    @let activeLinks = (activeLinks$ | async) || [];\n\n    @for (linkGroup of viewedLinks$ | async; track linkGroup; let index = $index) {\n        @if (index > 0) {\n            <mat-divider></mat-divider>\n        }\n        <div class=\"flex flex-col\">\n            @for (link of linkGroup.children; track link) {\n                @let isActive = activeLinks.includes(link);\n\n                @if (link.divider) {\n                    <mat-divider></mat-divider>\n                } @else if (link.children) {\n                    <button\n                        [ngClass]=\"{\n                            '!text-[var(--mat-sys-on-surface-variant)]': !isActive,\n                        }\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-end mx-2 !px-4 !flex-row-reverse\"\n                        matButton\n                    >\n                        {{ link.label }}\n                        <mat-icon class=\"pl-2\">{{\n                            link.children.length\n                                ? isActive\n                                    ? 'keyboard_arrow_down'\n                                    : 'keyboard_arrow_up'\n                                : 'keyboard_arrow_right'\n                        }}</mat-icon>\n                    </button>\n                } @else {\n                    <button\n                        [matButton]=\"isActive ? 'tonal' : 'text'\"\n                        [routerLink]=\"link.url\"\n                        [title]=\"link.label\"\n                        class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                    >\n                        {{ link.label }}\n                    </button>\n                }\n                @if (isActive && link.children?.length) {\n                    <div\n                        class=\"flex flex-col border-l-1 border-[var(--mat-sys-outline-variant)] ml-6 mb-2\"\n                    >\n                        @for (childLink of link.children; track childLink) {\n                            @if (childLink.divider) {\n                                <mat-divider></mat-divider>\n                            } @else {\n                                <button\n                                    [matButton]=\"activeLinks.includes(childLink) ? 'tonal' : 'text'\"\n                                    [routerLink]=\"childLink.url\"\n                                    [title]=\"childLink.label\"\n                                    class=\"!justify-start mx-2 !px-4 !text-[var(--mat-sys-on-surface-variant)]\"\n                                >\n                                    {{ childLink.label }}\n                                </button>\n                            }\n                        }\n                    </div>\n                }\n            }\n        </div>\n    }\n</div>\n", styles: [".v-nav{display:flex;flex-direction:column}.v-nav .item{cursor:pointer;padding:12px 24px 12px 12px}.v-nav .item__active{font-weight:500}.v-nav .item:after{display:block;content:attr(title);font-weight:500;height:0;color:transparent;overflow:hidden;visibility:hidden}.v-nav__secondary .item{border-left:solid 4px}\n"] }]
         }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
 
 class CmdkComponent {
@@ -4023,10 +4193,10 @@ class CmdkComponent {
         }
         this.router.navigate([option.url]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CmdkComponent, isStandalone: true, selector: "v-cmdk", ngImport: i0, template: "<div class=\"p-8 overflow-auto h-full flex flex-col\">\n    <div>\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <mat-label>Search</mat-label>\n            <input [formControl]=\"searchControl\" matInput />\n            <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n    </div>\n\n    <mat-list class=\"overflow-y-auto\">\n        @let options = options$ | async;\n\n        @if (options?.length) {\n            @for (option of options; track $index) {\n                <mat-list-item\n                    [title]=\"option.tooltip\"\n                    class=\"!cursor-pointer\"\n                    (click)=\"action(option)\"\n                >\n                    <mat-icon matListItemIcon>{{ option.icon || 'article' }}</mat-icon>\n                    <span\n                        [vHighlightSearch]=\"searchControl.value\"\n                        [vHighlightText]=\"option.label\"\n                        matListItemTitle\n                        vHighlight\n                    ></span>\n                    <span\n                        [vHighlightSearch]=\"searchControl.value\"\n                        [vHighlightText]=\"option.description\"\n                        matListItemLine\n                        vHighlight\n                    ></span>\n                </mat-list-item>\n            }\n        } @else if (searchControl.value) {\n            @if (inProgress$ | async) {\n                <mat-list-item>\n                    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n                </mat-list-item>\n            } @else {\n                <mat-list-item>\n                    <mat-icon matListItemIcon>list</mat-icon>\n                    <span matListItemTitle>No results found</span>\n                </mat-list-item>\n            }\n        } @else {\n            <mat-list-item>\n                <mat-icon matListItemIcon>help</mat-icon>\n                <span matListItemTitle>Start typing to search</span>\n            </mat-list-item>\n        }\n    </mat-list>\n</div>\n", styles: ["::ng-deep .cmdk-backdrop{-webkit-backdrop-filter:blur(6px) saturate(80%) brightness(80%);backdrop-filter:blur(6px) saturate(80%) brightness(80%)}::ng-deep .cmdk-panel{display:block;border-radius:12px;max-height:calc(80vh - 32px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: HighlightDirective, selector: "[vHighlight]", inputs: ["vHighlightText", "vHighlightSearch"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CmdkComponent, isStandalone: true, selector: "v-cmdk", ngImport: i0, template: "<div class=\"p-8 overflow-auto h-full flex flex-col\">\n    <div>\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n            <mat-label>Search</mat-label>\n            <input [formControl]=\"searchControl\" matInput />\n            <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n    </div>\n\n    <mat-list class=\"overflow-y-auto\">\n        @let options = options$ | async;\n\n        @if (options?.length) {\n            @for (option of options; track $index) {\n                <mat-list-item\n                    [title]=\"option.tooltip\"\n                    class=\"!cursor-pointer\"\n                    (click)=\"action(option)\"\n                >\n                    <mat-icon matListItemIcon>{{ option.icon || 'article' }}</mat-icon>\n                    <span\n                        [vHighlightSearch]=\"searchControl.value\"\n                        [vHighlightText]=\"option.label\"\n                        matListItemTitle\n                        vHighlight\n                    ></span>\n                    <span\n                        [vHighlightSearch]=\"searchControl.value\"\n                        [vHighlightText]=\"option.description\"\n                        matListItemLine\n                        vHighlight\n                    ></span>\n                </mat-list-item>\n            }\n        } @else if (searchControl.value) {\n            @if (inProgress$ | async) {\n                <mat-list-item>\n                    <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n                </mat-list-item>\n            } @else {\n                <mat-list-item>\n                    <mat-icon matListItemIcon>list</mat-icon>\n                    <span matListItemTitle>No results found</span>\n                </mat-list-item>\n            }\n        } @else {\n            <mat-list-item>\n                <mat-icon matListItemIcon>help</mat-icon>\n                <span matListItemTitle>Start typing to search</span>\n            </mat-list-item>\n        }\n    </mat-list>\n</div>\n", styles: ["::ng-deep .cmdk-backdrop{-webkit-backdrop-filter:blur(6px) saturate(80%) brightness(80%);backdrop-filter:blur(6px) saturate(80%) brightness(80%)}::ng-deep .cmdk-panel{display:block;border-radius:12px;max-height:calc(80vh - 32px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.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: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$5.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: HighlightDirective, selector: "[vHighlight]", inputs: ["vHighlightText", "vHighlightSearch"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-cmdk', imports: [
                         MatDialogModule,
@@ -4047,7 +4217,8 @@ class CmdkService {
     dialog = inject(MatDialog);
     dr = inject(DestroyRef);
     injector = inject(Injector);
-    config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    config = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     search$ = new Subject();
     inProgress$ = toObservable(this.config).pipe(switchMap((config) => config?.progress
         ? toObservable(config.progress, { injector: this.injector })
@@ -4097,10 +4268,10 @@ class CmdkService {
             this.toggle();
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4110,8 +4281,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
 class CmdkButtonComponent {
     cmdkService = inject(CmdkService);
     searchChange = output();
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    progress = input(false, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    progress = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
     searchKeys = [navigator.platform.toUpperCase().includes('MAC') ? '⌘' : 'Ctrl', 'K'];
     ngOnInit() {
         this.cmdkService.init({
@@ -4122,8 +4295,8 @@ class CmdkButtonComponent {
             progress: this.progress,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CmdkButtonComponent, isStandalone: true, selector: "v-cmdk-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: CmdkButtonComponent, isStandalone: true, selector: "v-cmdk-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, ngImport: i0, template: `
         <button
             class="!text-[var(--mat-sys-outline)] !shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1),inset_0_2px_2px_0_rgba(0,0,0,0.06)]"
             matButton
@@ -4143,13 +4316,14 @@ class CmdkButtonComponent {
                 </div>
             </div>
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'v-cmdk-button',
                     imports: [MatIconModule, NgClass, MatButtonModule],
+                    changeDetection: ChangeDetectionStrategy.Eager,
                     template: `
         <button
             class="!text-[var(--mat-sys-outline)] !shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1),inset_0_2px_2px_0_rgba(0,0,0,0.06)]"
@@ -4175,11 +4349,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }], propDecorators: { searchChange: [{ type: i0.Output, args: ["searchChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }] } });
 
 class CmdkModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: CmdkModule, imports: [CmdkButtonComponent], exports: [CmdkButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkModule, imports: [CmdkButtonComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: CmdkModule, imports: [CmdkButtonComponent], exports: [CmdkButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkModule, imports: [CmdkButtonComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CmdkModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CmdkModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CmdkButtonComponent],
@@ -4196,10 +4370,10 @@ class AmountCurrencyPipe {
         }
         return amount;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AmountCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: AmountCurrencyPipe, isStandalone: true, name: "amountCurrency" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AmountCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: AmountCurrencyPipe, isStandalone: true, name: "amountCurrency" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AmountCurrencyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AmountCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4211,10 +4385,10 @@ class EnumKeyValuesPipe {
     transform(value) {
         return getEnumKeyValues(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EnumKeyValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: EnumKeyValuesPipe, isStandalone: true, name: "enumKeyValues" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EnumKeyValuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: EnumKeyValuesPipe, isStandalone: true, name: "enumKeyValues" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EnumKeyValuesPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EnumKeyValuesPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4226,10 +4400,10 @@ class EnumKeyPipe {
     transform(value, enumObj) {
         return !isNil(value) && enumObj ? getEnumKey(enumObj, value) : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EnumKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: EnumKeyPipe, isStandalone: true, name: "enumKey" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EnumKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: EnumKeyPipe, isStandalone: true, name: "enumKey" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EnumKeyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EnumKeyPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4241,10 +4415,10 @@ class EnumKeysPipe {
     transform(value) {
         return getEnumKeys(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EnumKeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: EnumKeysPipe, isStandalone: true, name: "enumKeys" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EnumKeysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: EnumKeysPipe, isStandalone: true, name: "enumKeys" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EnumKeysPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: EnumKeysPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4259,10 +4433,10 @@ class HumanizedDurationPipe extends AsyncTransform {
     transform(...params) {
         return super.asyncTransform(params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HumanizedDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: HumanizedDurationPipe, isStandalone: true, name: "humanizedDuration", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HumanizedDurationPipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HumanizedDurationPipe, isStandalone: true, name: "humanizedDuration", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: HumanizedDurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HumanizedDurationPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4275,10 +4449,10 @@ class InlineJsonPipe {
     transform(value, maxReadableLever = 1) {
         return inlineJson(value, maxReadableLever === false ? Infinity : maxReadableLever);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InlineJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: InlineJsonPipe, isStandalone: false, name: "inlineJson" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InlineJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: InlineJsonPipe, isStandalone: false, name: "inlineJson" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InlineJsonPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InlineJsonPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'inlineJson',
@@ -4302,10 +4476,10 @@ class VSelectPipe {
     ngOnDestroy() {
         this.asyncPipe?.ngOnDestroy?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: VSelectPipe, isStandalone: true, name: "vSelect", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VSelectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: VSelectPipe, isStandalone: true, name: "vSelect", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VSelectPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: VSelectPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -4315,8 +4489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         }] });
 
 class PipesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: PipesModule, declarations: [InlineJsonPipe], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: PipesModule, declarations: [InlineJsonPipe], imports: [CommonModule,
             EnumKeyPipe,
             EnumKeysPipe,
             EnumKeyValuesPipe,
@@ -4329,9 +4503,9 @@ class PipesModule {
             AmountCurrencyPipe,
             VSelectPipe,
             HumanizedDurationPipe] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PipesModule, imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PipesModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PipesModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InlineJsonPipe],