@vality/matez 22.0.1-ccdb67f.0 → 22.0.1-d9bef0b.0

package/fesm2022/vality-matez.mjs

@@ -1,7 +1,7 @@
 import * as i1$1 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';
@@ -27,13 +27,23 @@ import { MatTableDataSource, MatTable, MatColumnDef, MatCellDef, MatHeaderCellDe
 import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 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 { form, required, disabled, FormField, transformedValue } 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';
@@ -157,6 +159,7 @@ var DialogResponseStatus;
 class DialogComponent {
     hostClass = true;
     title;
+    description;
     disabled = false;
     progress;
     hasDivider = true;
@@ -173,16 +176,18 @@ class DialogComponent {
         this.cancel.emit();
     }
     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", 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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            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        </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 }]
@@ -346,6 +351,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             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();
+    control = form(this.value, (path) => {
+        required(path, { when: () => this.required() });
+        disabled(path, () => this.disabled());
+    });
+    label;
+    placeholder = '';
+    type = 'string';
+    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 */ []));
+    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: 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 } }, 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
+            }], 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(', ')) : '';
 }
@@ -429,10 +632,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$) {
@@ -612,6 +811,9 @@ function getErrorsTree(control) {
     return errors;
 }
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class AbstractControlSuperclass extends WrappedControlSuperclass {
     _cdr = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
@@ -644,6 +846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             type: Directive
         }] });
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormGroupSuperclass extends AbstractControlSuperclass {
     emptyValue;
     setDisabledState(_isDisabled) {
@@ -688,6 +893,9 @@ const createControlProviders = (component) => [
     provideValidators(component),
 ];
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormControlSuperclass extends AbstractControlSuperclass {
     control = new FormControl();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: FormControlSuperclass, deps: null, target: i0.ɵɵFactoryTarget.Directive });
@@ -697,6 +905,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             type: Directive
         }] });
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormComponentSuperclass extends FormComponentSuperclass$1 {
     _cdr = inject(ChangeDetectorRef);
     _destroyRef = inject(DestroyRef);
@@ -722,6 +933,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             type: Directive
         }] });
 
+/**
+ * @deprecated Use FormControlValue
+ */
 class FormArraySuperclass extends FormGroupSuperclass {
     outerToInnerValue(outer) {
         if (hasControls(this.control)) {
@@ -1167,6 +1381,7 @@ class PagedObservableResource extends ObservableResource {
             this.initPaged(options);
     }
     initPaged({ loader, size, ...options }) {
+        this.pagedOptions = { size: size || 25 };
         // TODO: fix types
         super.init({
             params: EMPTY,
@@ -1181,7 +1396,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$;
@@ -1223,190 +1437,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(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    hintText = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "hintText" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldComponent, deps: null, 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: { 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]):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.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"] }], 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', providers: createControlProviders(() => InputFieldComponent), 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        [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: "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, ReactiveFormsModule, MatIcon, MatIconButton], exports: [InputFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: InputFieldModule, imports: [CommonModule, MatInputModule, ReactiveFormsModule, 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, ReactiveFormsModule, MatIcon, MatIconButton],
-                }]
-        }] });
-
-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 currencyAmountValueToString(value) {
     if (typeof value?.value !== 'number') {
         return '';
@@ -1480,7 +1510,7 @@ class ValueComponent {
         });
     }
     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() && 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 ɵ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() && 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\n                                        [matTooltip]=\"\n                                            v.error?.['error']?.['message'] ||\n                                            v.error?.['message'] ||\n                                            (v.error | json)\n                                        \"\n                                        >error</mat-icon\n                                    >\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ValueComponent, decorators: [{
             type: Component,
@@ -1496,7 +1526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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() && 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\n                                        [matTooltip]=\"\n                                            v.error?.['error']?.['message'] ||\n                                            v.error?.['message'] ||\n                                            (v.error | json)\n                                        \"\n                                        >error</mat-icon\n                                    >\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"] }]
         }], 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 }]
@@ -2142,7 +2172,7 @@ class TableInfoBarComponent {
         }
     }
     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: ["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"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: TableInfoBarComponent, decorators: [{
             type: Component,
@@ -2405,7 +2435,7 @@ class TableComponent {
         }
     }
     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$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 ɵ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: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2436,7 +2466,7 @@ class CustomizeComponent extends DialogSuperclass {
         hidden: false,
     }));
     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", "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 ɵ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: "22.0.7", ngImport: i0, type: CustomizeComponent, decorators: [{
             type: Component,
@@ -2656,8 +2686,10 @@ 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: "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: `
@@ -2714,7 +2746,7 @@ class ConfirmDialogComponent extends DialogSuperclass {
             : undefined);
     }
     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", "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]):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.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 ɵ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: "22.0.7", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -2761,7 +2793,7 @@ class FiltersDialogComponent extends DialogSuperclass {
             this.dialogData.filters.merge);
     }
     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", "disabled", "progress", "hasDivider", "noContent", "noActions", "noCloseButton", "fullSize"], outputs: ["cancel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: FiltersDialogComponent, decorators: [{
             type: Component,
@@ -2939,7 +2971,7 @@ class DateRangeFieldComponent extends FormGroupSuperclass {
             { 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]):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.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], 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: "22.0.7", ngImport: i0, type: DateRangeFieldComponent, decorators: [{
             type: Component,
@@ -3012,7 +3044,7 @@ class NumberRangeFieldComponent extends FormGroupSuperclass {
         end: undefined,
     });
     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.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.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: NumberRangeFieldComponent, decorators: [{
             type: Component,
@@ -3049,7 +3081,7 @@ class ListFieldComponent extends FormControlSuperclass {
         return splitBySeparators(inner || '');
     }
     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.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.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: ListFieldComponent, decorators: [{
             type: Component,
@@ -3138,31 +3170,45 @@ 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 = [];
     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;
     ngOnInit() {
-        super.ngOnInit();
         if (this.externalSearch) {
             timer(0)
                 .pipe(first$1())
                 .subscribe(() => {
-                this.search.set(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,
         });
     }
@@ -3177,13 +3223,13 @@ class SelectFieldComponent extends FormControlSuperclass {
                 .subscribe(() => select.close());
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFieldComponent, deps: null, 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: { 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: false, isRequired: false, transformFunction: null }, 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: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { search: "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        #select\n        [closeOnSelect]=\"!multiple\"\n        [formControl]=\"control\"\n        [items]=\"options\"\n        [loading]=\"progress\"\n        [markFirst]=\"true\"\n        [multiple]=\"multiple\"\n        [notFoundText]=\"externalSearch && !search() ? 'Enter your search term' : 'No items found'\"\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        (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$3.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.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: SelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-select-field', providers: createControlProviders(() => SelectFieldComponent), 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        [closeOnSelect]=\"!multiple\"\n        [formControl]=\"control\"\n        [items]=\"options\"\n        [loading]=\"progress\"\n        [markFirst]=\"true\"\n        [multiple]=\"multiple\"\n        [notFoundText]=\"externalSearch && !search() ? 'Enter your search term' : 'No items found'\"\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        (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: { 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
             }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], appearance: [{
                 type: Input
@@ -3191,20 +3237,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 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
             }] } });
 
@@ -3214,13 +3262,12 @@ class SelectFieldModule {
             MatInputModule,
             MtxSelectModule,
             FormsModule,
-            ReactiveFormsModule,
+            FormField,
             MatCheckboxModule], exports: [SelectFieldComponent] });
     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: "22.0.7", ngImport: i0, type: SelectFieldModule, decorators: [{
@@ -3233,7 +3280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MatInputModule,
                         MtxSelectModule,
                         FormsModule,
-                        ReactiveFormsModule,
+                        FormField,
                         MatCheckboxModule,
                     ],
                 }]
@@ -3298,7 +3345,7 @@ class AutocompleteFieldComponent extends FormControlSuperclass {
         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.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.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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    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: "22.0.7", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
             type: Component,
@@ -4066,7 +4113,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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) => {
@@ -4095,11 +4143,11 @@ class NavComponent {
             .filter((link) => !link.isHidden)))));
     }
     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.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", "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 });
+    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: "22.0.7", ngImport: i0, type: NavComponent, decorators: [{
             type: Component,
-            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.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 {
@@ -4125,7 +4173,7 @@ class CmdkComponent {
         this.router.navigate([option.url]);
     }
     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.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.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 ɵ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: "22.0.7", ngImport: i0, type: CmdkComponent, decorators: [{
             type: Component,