@wolkabout/commons 0.0.45 → 0.0.47

package/fesm2022/wolkabout-commons.mjs

@@ -57,7 +57,7 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i12 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i11 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import * as i10 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i9 from '@angular/material/tabs';
@@ -65,10 +65,12 @@ import { MatTabsModule } from '@angular/material/tabs';
 import * as i32 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i0 from '@angular/core';
-import { NgModule, InjectionToken, inject, Injectable, Injector, DOCUMENT, Inject, Input, Directive, forwardRef, HostListener, TemplateRef, PLATFORM_ID, Pipe, ViewChild, ContentChild, Optional, Self, Component, input, computed, untracked, signal, viewChild, afterNextRender, effect, output, afterRenderEffect, contentChild } from '@angular/core';
+import { NgModule, InjectionToken, inject, Injectable, DOCUMENT, Inject, Input, Directive, forwardRef, HostListener, TemplateRef, PLATFORM_ID, Pipe, ViewChild, ContentChild, Optional, Self, Component, input, computed, untracked, signal, viewChild, afterNextRender, effect, output, afterRenderEffect, contentChild } from '@angular/core';
 import { BehaviorSubject, catchError, of, switchMap, EMPTY, tap, filter, map, combineLatestWith, forkJoin, from, distinctUntilChanged, shareReplay, merge, Subject, takeUntil, combineLatest, take, first } from 'rxjs';
 import { jwtDecode } from 'jwt-decode';
 import { loadRemoteModule } from '@angular-architects/native-federation';
+import * as i1$3 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/material/snack-bar';
 import { TonalPalette, Hct, argbFromHex, hexFromArgb } from '@material/material-color-utilities';
@@ -81,8 +83,6 @@ import { NgxEchartsDirective } from 'ngx-echarts';
 import { NgxMatTimepickerDirective, NgxMatTimepickerComponent } from 'ngx-mat-timepicker';
 import { GoogleMap } from '@angular/google-maps';
 import { MarkerClusterer } from '@googlemaps/markerclusterer';
-import * as i1$3 from '@angular/platform-browser';
-import { DomSanitizer } from '@angular/platform-browser';
 import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { DndDraggableDirective } from 'ngx-drag-drop';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
@@ -128,8 +128,8 @@ const shared = [
     DragDropModule
 ];
 class SharedModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
             MatCheckboxModule,
             MatToolbarModule,
             MatMenuModule,
@@ -196,7 +196,7 @@ class SharedModule {
             RouterOutlet,
             RouterLinkActive,
             DragDropModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
             MatCheckboxModule,
             MatToolbarModule,
             MatMenuModule,
@@ -258,7 +258,7 @@ class SharedModule {
             CommonModule,
             DragDropModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: shared,
@@ -408,10 +408,10 @@ class AuthenticationService {
         const payload = jwtDecode(token);
         return payload[claim];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthenticationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthenticationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AuthenticationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AuthenticationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AuthenticationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AuthenticationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -450,10 +450,10 @@ class PermissionsService {
         const everythingInFeature = moduleFeaturePermission[0] + '.' + moduleFeaturePermission[1] + '.*';
         return allPermissions.some((grantedPermission) => grantedPermission === '*' || grantedPermission === everythingInModule || grantedPermission === everythingInFeature || grantedPermission === permission);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PermissionsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PermissionsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PermissionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PermissionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -501,18 +501,33 @@ class AssetManager {
     setAssetLocation(featureSet, host) {
         this.assetLocations[featureSet] = host;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AssetManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AssetManager, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AssetManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AssetManager, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AssetManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AssetManager, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }] });
 
+class IconRegistryService {
+    matIconRegistry = inject(MatIconRegistry);
+    domSanitizer = inject(DomSanitizer);
+    registerIcon(name, path) {
+        this.matIconRegistry.addSvgIcon(name, this.domSanitizer.bypassSecurityTrustResourceUrl(path));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: IconRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class FeatureRegistry {
-    injector = inject(Injector);
+    iconRegistryService = inject(IconRegistryService);
+    assetManagerService = inject(AssetManager);
     loadedFeatures = [];
     _features$ = new BehaviorSubject([]);
     /**
@@ -529,6 +544,7 @@ class FeatureRegistry {
     loadExternalFeatures(features) {
         if (!features || features.length === 0) {
             this.noExternalModules();
+            return;
         }
         forkJoin(features.map((feature) => from(loadRemoteModule(feature.remote, feature.feature)).pipe(map(module => module.default), catchError((error) => {
             console.warn("Unable to load: ", feature.remote + '/' + feature.feature, error);
@@ -544,18 +560,19 @@ class FeatureRegistry {
     }
     registerFeature(feature) {
         this.loadedFeatures.push(feature);
-        if (feature.init) {
-            feature.init(this.injector);
+        if (feature.iconPath) {
+            const assetLocation = this.assetManagerService.getAssetLocation(feature.app);
+            this.iconRegistryService.registerIcon(feature.icon.id, assetLocation + '/' + feature.iconPath);
         }
         console.info('Loaded feature: ', feature.name);
     }
     get features$() {
         return this._features$.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FeatureRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FeatureRegistry, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeatureRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FeatureRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -600,10 +617,10 @@ class MapsLoaderService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MapsLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MapsLoaderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MapsLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MapsLoaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MapsLoaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MapsLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -636,10 +653,10 @@ class NotificationService {
     showNotification(panelClass, message, duration) {
         this.snackBar.open(message, '', { duration, panelClass });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, deps: [{ token: i1.MatSnackBar }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotificationService, deps: [{ token: i1.MatSnackBar }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.MatSnackBar }, { type: i1$1.TranslateService }] });
@@ -1443,10 +1460,10 @@ class TenantPropertiesService {
     setTimeZone(timeZone) {
         this.timezone = timeZone;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TenantPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TenantPropertiesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantPropertiesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TenantPropertiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TenantPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2391,10 +2408,10 @@ class ThemeService {
             value: hex,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2417,10 +2434,10 @@ class LoadingIndicatorDirective {
     constructor(element) {
         this.element = element;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: LoadingIndicatorDirective, isStandalone: true, selector: "[appLoadingIndicator]", inputs: { appLoadingShimmer: ["appLoadingIndicator", "appLoadingShimmer"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: LoadingIndicatorDirective, isStandalone: true, selector: "[appLoadingIndicator]", inputs: { appLoadingShimmer: ["appLoadingIndicator", "appLoadingShimmer"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appLoadingIndicator]',
@@ -2519,8 +2536,8 @@ class LocalizedNumericInputDirective {
         //final format
         return sign + parsedInt + (parsedDec || endsInDecMark ? '.' : '') + parsedDec;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumericInputDirective, deps: [{ token: i0.ElementRef }, { token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: LocalizedNumericInputDirective, isStandalone: true, selector: "input[wolkaboutLocalizedNumericInput]", host: { listeners: { "input": "input($event.target.value)", "focus": "onFocus()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocalizedNumericInputDirective, deps: [{ token: i0.ElementRef }, { token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: LocalizedNumericInputDirective, isStandalone: true, selector: "input[wolkaboutLocalizedNumericInput]", host: { listeners: { "input": "input($event.target.value)", "focus": "onFocus()" } }, providers: [
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: LocalizedNumericInputDirective },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2529,7 +2546,7 @@ class LocalizedNumericInputDirective {
             },
         ], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumericInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocalizedNumericInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[wolkaboutLocalizedNumericInput]',
@@ -2639,10 +2656,10 @@ class MessageTooltipDirective {
         clearTimeout(this.showTimeout);
         this.overlayRef?.dispose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageTooltipDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: MessageTooltipDirective, isStandalone: true, selector: "[appMessageTooltip]", inputs: { tooltipTemplate: ["appMessageTooltip", "tooltipTemplate"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MessageTooltipDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MessageTooltipDirective, isStandalone: true, selector: "[appMessageTooltip]", inputs: { tooltipTemplate: ["appMessageTooltip", "tooltipTemplate"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MessageTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MessageTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appMessageTooltip]',
@@ -2661,10 +2678,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class NgTemplateContentDirective {
     template = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgTemplateContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NgTemplateContentDirective, isStandalone: true, selector: "[appNgTemplateContent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NgTemplateContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: NgTemplateContentDirective, isStandalone: true, selector: "[appNgTemplateContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgTemplateContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NgTemplateContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appNgTemplateContent]'
@@ -2694,10 +2711,10 @@ class OverflowClassDirective {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverflowClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: OverflowClassDirective, isStandalone: true, selector: "[overflowClass]", inputs: { overflowClass: "overflowClass" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverflowClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: OverflowClassDirective, isStandalone: true, selector: "[overflowClass]", inputs: { overflowClass: "overflowClass" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverflowClassDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: OverflowClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowClass]',
@@ -2730,10 +2747,10 @@ class RequiresAllGlobalOrAssetPermissionsDirective {
         this.viewContainer = viewContainer;
         this.permissions = permissions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresAllGlobalOrAssetPermissionsDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: RequiresAllGlobalOrAssetPermissionsDirective, isStandalone: true, selector: "[appRequiresAllGlobalOrAssetPermissions]", inputs: { appRequiresAllGlobalOrAssetPermissions: "appRequiresAllGlobalOrAssetPermissions" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresAllGlobalOrAssetPermissionsDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: RequiresAllGlobalOrAssetPermissionsDirective, isStandalone: true, selector: "[appRequiresAllGlobalOrAssetPermissions]", inputs: { appRequiresAllGlobalOrAssetPermissions: "appRequiresAllGlobalOrAssetPermissions" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresAllGlobalOrAssetPermissionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresAllGlobalOrAssetPermissionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresAllGlobalOrAssetPermissions]'
@@ -2765,10 +2782,10 @@ class RequiresAllPermissionDirective {
         this.viewContainer = viewContainer;
         this.permissions = permissions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresAllPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: RequiresAllPermissionDirective, isStandalone: true, selector: "[appRequiresAllPermissions]", inputs: { appRequiresAllPermissions: "appRequiresAllPermissions" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresAllPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: RequiresAllPermissionDirective, isStandalone: true, selector: "[appRequiresAllPermissions]", inputs: { appRequiresAllPermissions: "appRequiresAllPermissions" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresAllPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresAllPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresAllPermissions]'
@@ -2800,10 +2817,10 @@ class RequiresGlobalOrAsserPermissionDirective {
         this.viewContainer = viewContainer;
         this.permissions = permissions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresGlobalOrAsserPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: RequiresGlobalOrAsserPermissionDirective, isStandalone: true, selector: "[appRequiresGlobalOrAssetPermission]", inputs: { appRequiresGlobalOrAssetPermission: "appRequiresGlobalOrAssetPermission" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresGlobalOrAsserPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: RequiresGlobalOrAsserPermissionDirective, isStandalone: true, selector: "[appRequiresGlobalOrAssetPermission]", inputs: { appRequiresGlobalOrAssetPermission: "appRequiresGlobalOrAssetPermission" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresGlobalOrAsserPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresGlobalOrAsserPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresGlobalOrAssetPermission]'
@@ -2837,10 +2854,10 @@ class RequiresPermissionDirective {
         this.viewContainer = viewContainer;
         this.permissions = permissions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: RequiresPermissionDirective, isStandalone: true, selector: "[appRequiresPermission]", inputs: { appRequiresPermission: "appRequiresPermission" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PermissionsService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: RequiresPermissionDirective, isStandalone: true, selector: "[appRequiresPermission]", inputs: { appRequiresPermission: "appRequiresPermission" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: RequiresPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RequiresPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresPermission]'
@@ -2871,10 +2888,10 @@ class ScrollIntoViewDirective {
             this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ScrollIntoViewDirective, isStandalone: true, selector: "[appScrollIntoView]", inputs: { appScrollIntoView: "appScrollIntoView" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ScrollIntoViewDirective, isStandalone: true, selector: "[appScrollIntoView]", inputs: { appScrollIntoView: "appScrollIntoView" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appScrollIntoView]',
@@ -2917,10 +2934,10 @@ class DurationPipe {
     transform(totalSeconds) {
         return formatDuration(totalSeconds);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: DurationPipe, isStandalone: true, name: "duration" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: DurationPipe, isStandalone: true, name: "duration" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DurationPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DurationPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'duration',
@@ -2946,10 +2963,10 @@ class LocalizedNumberPipe {
             maximumFractionDigits: decimals
         }).format(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumberPipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumberPipe, isStandalone: true, name: "localizedNumber" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocalizedNumberPipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: LocalizedNumberPipe, isStandalone: true, name: "localizedNumber" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalizedNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocalizedNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'localizedNumber',
@@ -2976,10 +2993,10 @@ class SimpleDateTimePipe {
         const formattedDateTime = date + '  ' + time;
         return showTimeZone ? `${formattedDateTime}  ${zone}` : formattedDateTime;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SimpleDateTimePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SimpleDateTimePipe, isStandalone: true, name: "simpleDateTime" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SimpleDateTimePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SimpleDateTimePipe, isStandalone: true, name: "simpleDateTime" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SimpleDateTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SimpleDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleDateTime',
@@ -3003,10 +3020,10 @@ class SimpleDatePipe {
         const zone = dateTime.offsetNameShort;
         return showTimeZone ? `${date} ${zone}` : date;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SimpleDatePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SimpleDatePipe, isStandalone: true, name: "simpleDate" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SimpleDatePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SimpleDatePipe, isStandalone: true, name: "simpleDate" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SimpleDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SimpleDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleDate',
@@ -3030,10 +3047,10 @@ class SimpleTimePipe {
         const zone = dateTime.offsetNameShort;
         return showTimeZone ? `${time} ${zone}` : time;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SimpleTimePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SimpleTimePipe, isStandalone: true, name: "simpleTime" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SimpleTimePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SimpleTimePipe, isStandalone: true, name: "simpleTime" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SimpleTimePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SimpleTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleTime',
@@ -3063,10 +3080,10 @@ class SortPipe {
         });
         return array;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SortPipe, isStandalone: true, name: "sort" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.1", ngImport: i0, type: SortPipe, isStandalone: true, name: "sort" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SortPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SortPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sort',
@@ -3285,10 +3302,10 @@ class MissingTranslationHelper {
     handle(params) {
         return params.interpolateParams ? params.interpolateParams.default || params.key : params.key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MissingTranslationHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MissingTranslationHelper });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MissingTranslationHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MissingTranslationHelper });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MissingTranslationHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MissingTranslationHelper, decorators: [{
             type: Injectable
         }] });
 
@@ -4119,10 +4136,10 @@ class AutocompleteComponent {
         document.removeEventListener('wheel', this.scrollEvent, true);
         document.removeEventListener('touchmove', this.scrollEvent, true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\r\n  <div class=\"w-full\">\r\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [formControl]=\"formControl\" [placeholder]=\"name | translate\" autocomplete=\"off\" [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" [disabled]=\"disabled\" type='button'>\r\n        <mat-icon class=\"text-mat-sys-primary\">clear</mat-icon>\r\n      </button>\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\r\n    @if (loading$ | async) {\r\n      <mat-option>\r\n        <div>{{ 'Loading...' }}</div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </mat-option>\r\n    } @else {\r\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</ng-container>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "component", type: i20.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "component", type: i25.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i25.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\r\n  <div class=\"w-full\">\r\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [formControl]=\"formControl\" [placeholder]=\"name | translate\" autocomplete=\"off\" [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" [disabled]=\"disabled\" type='button'>\r\n        <mat-icon class=\"text-mat-sys-primary\">clear</mat-icon>\r\n      </button>\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\r\n    @if (loading$ | async) {\r\n      <mat-option>\r\n        <div>{{ 'Loading...' }}</div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </mat-option>\r\n    } @else {\r\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</ng-container>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "component", type: i20.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "component", type: i25.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i25.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-autocomplete', imports: [shared], template: "<ng-container>\r\n  <div class=\"w-full\">\r\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [formControl]=\"formControl\" [placeholder]=\"name | translate\" autocomplete=\"off\" [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" [disabled]=\"disabled\" type='button'>\r\n        <mat-icon class=\"text-mat-sys-primary\">clear</mat-icon>\r\n      </button>\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\r\n    @if (loading$ | async) {\r\n      <mat-option>\r\n        <div>{{ 'Loading...' }}</div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </mat-option>\r\n    } @else {\r\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n      </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n</ng-container>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i30.NgControl, decorators: [{
@@ -4233,10 +4250,10 @@ class AutocompleteChipsComponent {
         document.removeEventListener('wheel', this.scrollEvent, true);
         document.removeEventListener('touchmove', this.scrollEvent, true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AutocompleteChipsComponent, isStandalone: true, selector: "app-autocomplete-chips", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["autoCompleteInput"], descendants: true }], ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\r\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n    <mat-label>\r\n      <span>{{ name | translate }}</span>\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid>\r\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\r\n                    [removable]=\"!disabled\"\r\n                    (removed)=\"removeItem(i, items)\">\r\n        {{ displayFunction(item) }}\r\n        <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\r\n      </mat-chip-row>\r\n      <input matInput\r\n             #autoCompleteInput\r\n             [placeholder]=\"name | translate\"\r\n             autocomplete=\"off\"\r\n             [formControl]=\"formControl\"\r\n             [matAutocomplete]=\"auto\"\r\n             [matChipInputFor]=\"chipGrid\"\r\n             (blur)=\"onTouched($event)\"/>\r\n    </mat-chip-grid>\r\n  </mat-form-field>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    @if (!formControl.untouched && !(items$ | async)?.length) {\r\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n    }\r\n  }\r\n</div>\r\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\r\n  @if (loading$ | async) {\r\n    <mat-option>\r\n      <div>{{ 'Loading...' }}</div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </mat-option>\r\n  } @else {\r\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\r\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\r\n        <mat-option\r\n          [value]=\"item\"\r\n          class=\"autocomplete-option\"\r\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n        </mat-option>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "component", type: i20.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "component", type: i25.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i25.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "component", type: i26.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i26.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i26.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i26.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AutocompleteChipsComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: AutocompleteChipsComponent, isStandalone: true, selector: "app-autocomplete-chips", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["autoCompleteInput"], descendants: true }], ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\r\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n    <mat-label>\r\n      <span>{{ name | translate }}</span>\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid>\r\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\r\n                    [removable]=\"!disabled\"\r\n                    (removed)=\"removeItem(i, items)\">\r\n        {{ displayFunction(item) }}\r\n        <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\r\n      </mat-chip-row>\r\n      <input matInput\r\n             #autoCompleteInput\r\n             [placeholder]=\"name | translate\"\r\n             autocomplete=\"off\"\r\n             [formControl]=\"formControl\"\r\n             [matAutocomplete]=\"auto\"\r\n             [matChipInputFor]=\"chipGrid\"\r\n             (blur)=\"onTouched($event)\"/>\r\n    </mat-chip-grid>\r\n  </mat-form-field>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    @if (!formControl.untouched && !(items$ | async)?.length) {\r\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n    }\r\n  }\r\n</div>\r\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\r\n  @if (loading$ | async) {\r\n    <mat-option>\r\n      <div>{{ 'Loading...' }}</div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </mat-option>\r\n  } @else {\r\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\r\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\r\n        <mat-option\r\n          [value]=\"item\"\r\n          class=\"autocomplete-option\"\r\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n        </mat-option>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "component", type: i20.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "component", type: i25.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i25.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "component", type: i26.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i26.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i26.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i26.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AutocompleteChipsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AutocompleteChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-autocomplete-chips', imports: [shared], template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\r\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\r\n    <mat-label>\r\n      <span>{{ name | translate }}</span>\r\n    </mat-label>\r\n    <mat-chip-grid #chipGrid>\r\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\r\n                    [removable]=\"!disabled\"\r\n                    (removed)=\"removeItem(i, items)\">\r\n        {{ displayFunction(item) }}\r\n        <mat-icon matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\r\n      </mat-chip-row>\r\n      <input matInput\r\n             #autoCompleteInput\r\n             [placeholder]=\"name | translate\"\r\n             autocomplete=\"off\"\r\n             [formControl]=\"formControl\"\r\n             [matAutocomplete]=\"auto\"\r\n             [matChipInputFor]=\"chipGrid\"\r\n             (blur)=\"onTouched($event)\"/>\r\n    </mat-chip-grid>\r\n  </mat-form-field>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    @if (!formControl.untouched && !(items$ | async)?.length) {\r\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n    }\r\n  }\r\n</div>\r\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\r\n  @if (loading$ | async) {\r\n    <mat-option>\r\n      <div>{{ 'Loading...' }}</div>\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </mat-option>\r\n  } @else {\r\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\r\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\r\n        <mat-option\r\n          [value]=\"item\"\r\n          class=\"autocomplete-option\"\r\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\r\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\r\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\r\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\r\n        </mat-option>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-autocomplete>\r\n", styles: [".mat-option-hidden{display:none}.autocomplete-option{height:fit-content}.autocomplete-option.autocomplete-option__active,.autocomplete-option.autocomplete-option__active:hover{background-color:var(--color-primary-50)}.autocomplete-info{height:30px;font-size:14px}.autocomplete-info.secondary{font-size:12px;height:25px}.autocomplete-info .autocomplete-item{text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i30.NgControl, decorators: [{
@@ -4334,10 +4351,10 @@ class BasicTimeSeriesGraphComponent {
             end: event.batch?.[0]?.end
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, deps: [{ token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: BasicTimeSeriesGraphComponent, isStandalone: true, selector: "app-basic-time-series-graph", inputs: { timeSeries: { classPropertyName: "timeSeries", publicName: "timeSeries", isSignal: true, isRequired: true, transformFunction: null }, desiredTimeFrame: { classPropertyName: "desiredTimeFrame", publicName: "desiredTimeFrame", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SimpleDatePipe, SimpleDateTimePipe], ngImport: i0, template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: BasicTimeSeriesGraphComponent, deps: [{ token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: BasicTimeSeriesGraphComponent, isStandalone: true, selector: "app-basic-time-series-graph", inputs: { timeSeries: { classPropertyName: "timeSeries", publicName: "timeSeries", isSignal: true, isRequired: true, transformFunction: null }, desiredTimeFrame: { classPropertyName: "desiredTimeFrame", publicName: "desiredTimeFrame", isSignal: true, isRequired: false, transformFunction: null }, primaryColor: { classPropertyName: "primaryColor", publicName: "primaryColor", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SimpleDatePipe, SimpleDateTimePipe], ngImport: i0, template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BasicTimeSeriesGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: BasicTimeSeriesGraphComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-basic-time-series-graph', imports: [NgxEchartsDirective], providers: [SimpleDatePipe, SimpleDateTimePipe], template: "<div echarts [options]=\"graphOptions()\" (chartDataZoom)=\"chartZoom($event)\" [theme]=\"chartTheme()!\" class=\"w-full h-full\"></div>\r\n" }]
         }], ctorParameters: () => [{ type: SimpleDateTimePipe }], propDecorators: { timeSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSeries", required: true }] }], desiredTimeFrame: [{ type: i0.Input, args: [{ isSignal: true, alias: "desiredTimeFrame", required: false }] }], primaryColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryColor", required: false }] }] } });
@@ -4360,10 +4377,10 @@ class CardLabeledValueComponent {
             : this.permissionService.hasAnyPermission(requiredPermissions);
     }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
     hasPermission = toSignal(this.permissionFunction());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CardLabeledValueComponent, isStandalone: true, selector: "app-card-labeled-value", inputs: { permissions: { classPropertyName: "permissions", publicName: "permissions", isSignal: true, isRequired: false, transformFunction: null }, useAssetPermissions: { classPropertyName: "useAssetPermissions", publicName: "useAssetPermissions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, editFunction: { classPropertyName: "editFunction", publicName: "editFunction", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-card-labeled-value', imports: [shared], template: "<mat-card\r\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\r\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\r\n  [matTooltip]=\"tooltip() | translate\"\r\n  matTooltipPosition=\"above\"\r\n>\r\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\r\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\r\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\r\n      <div class=\"text-mat-sys-primary flex items-center grow\">\r\n        <ng-content/>\r\n      </div>\r\n    </div>\r\n    @if (editFunction() && hasPermission()) {\r\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\r\n        <mat-icon>{{ icon() }}</mat-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n</mat-card>\r\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"] }]
         }], propDecorators: { permissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "permissions", required: false }] }], useAssetPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAssetPermissions", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], editFunction: [{ type: i0.Input, args: [{ isSignal: true, alias: "editFunction", required: false }] }] } });
@@ -4378,10 +4395,10 @@ class ConfirmationDialogComponent {
     confirm() {
         this.dialog.close(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i14.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\r\n  <div class=\"flex flex-col flex-auto gap-y-4\">\r\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\r\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\r\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\r\n    <button [ngClass]=\"{'bg-mat-sys-error-container text-mat-sys-on-error-container': data.deleteDialog}\" mat-flat-button\r\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "directive", type: i14.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i14.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ConfirmationDialogComponent, isStandalone: true, selector: "app-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\r\n  <div class=\"flex flex-col flex-auto gap-y-4\">\r\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\r\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\r\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\r\n    <button [ngClass]=\"{'bg-mat-sys-error-container text-mat-sys-on-error-container': data.deleteDialog}\" mat-flat-button\r\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "directive", type: i14.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-confirmation-dialog', imports: [shared], template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\r\n  <div class=\"flex flex-col flex-auto gap-y-4\">\r\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\r\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\r\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\r\n    <button [ngClass]=\"{'bg-mat-sys-error-container text-mat-sys-on-error-container': data.deleteDialog}\" mat-flat-button\r\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -4532,8 +4549,8 @@ class DateRangeInputComponent {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateRangeInputComponent, deps: [{ token: i0.DestroyRef }, { token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DateRangeInputComponent, isStandalone: true, selector: "app-date-range-input", inputs: { availableDateOptions: { classPropertyName: "availableDateOptions", publicName: "availableDateOptions", isSignal: true, isRequired: false, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, allowCustomTimespan: { classPropertyName: "allowCustomTimespan", publicName: "allowCustomTimespan", isSignal: true, isRequired: false, transformFunction: null }, isInForm: { classPropertyName: "isInForm", publicName: "isInForm", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DateRangeInputComponent, deps: [{ token: i0.DestroyRef }, { token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DateRangeInputComponent, isStandalone: true, selector: "app-date-range-input", inputs: { availableDateOptions: { classPropertyName: "availableDateOptions", publicName: "availableDateOptions", isSignal: true, isRequired: false, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, allowCustomTimespan: { classPropertyName: "allowCustomTimespan", publicName: "allowCustomTimespan", isSignal: true, isRequired: false, transformFunction: null }, isInForm: { classPropertyName: "isInForm", publicName: "isInForm", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangeInputComponent),
@@ -4546,7 +4563,7 @@ class DateRangeInputComponent {
             }
         ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\r\n  @if (isInForm()) {\r\n    <mat-form-field class=\"flex\">\r\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\r\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\r\n        @for (periodOption of availableDateOptions(); track $index) {\r\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\r\n        }\r\n        @if (allowCustomTimespan()) {\r\n          <mat-option [value]=\"CUSTOM_PERIOD\">\r\n            <div class=\"flex flex-row gap-x-4\">\r\n              @if (dateRangeForm.get('from')?.value) {\r\n                <div class=\"flex flex-row\">\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                </div>\r\n              } @else {\r\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\r\n              }\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\r\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\r\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\r\n      </mat-date-range-input>\r\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\r\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      }\r\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\r\n        <mat-error>\r\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\r\n        </mat-error>\r\n      }\r\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\r\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\r\n      }\r\n    </mat-form-field>\r\n  } @else {\r\n    <div class=\"flex\">\r\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\r\n        @for (periodOption of availableDateOptions(); track $index) {\r\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\r\n        }\r\n        @if (allowCustomTimespan()) {\r\n          <mat-option [value]=\"CUSTOM_PERIOD\">\r\n            <div class=\"flex flex-row gap-x-4\">\r\n              @if (dateRangeForm.get('from')?.value) {\r\n                <div class=\"flex flex-row\">\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\r\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\r\n                </div>\r\n              } @else {\r\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\r\n              }\r\n            </div>\r\n          </mat-option>\r\n        }\r\n      </mat-select>\r\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\r\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\r\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\r\n      </mat-date-range-input>\r\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\r\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\r\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "component", type: i24.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i24.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i24.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i24.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i24.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i30.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i30.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateRangeInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-range-input', imports: [shared, SimpleDatePipe], providers: [
                         {
@@ -4656,8 +4673,8 @@ class DateTimeFormFieldComponent {
             this.onTimeInputChange.next(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DateTimeFormFieldComponent, isStandalone: true, selector: "app-date-time-form-field", inputs: { dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: false, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: false, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DateTimeFormFieldComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DateTimeFormFieldComponent, isStandalone: true, selector: "app-date-time-form-field", inputs: { dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: false, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: false, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimeFormFieldComponent),
@@ -4670,7 +4687,7 @@ class DateTimeFormFieldComponent {
             }
         ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\r\n  <div class=\"flex flex-col gap-y-4\">\r\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\r\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\r\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\r\n      <mat-datepicker #picker></mat-datepicker>\r\n      @for (error of getDateErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\r\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\r\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\r\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\r\n      @for (error of getTimeErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "component", type: i24.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i24.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i24.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i30.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i30.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "component", type: NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-time-form-field', imports: [shared, NgxMatTimepickerDirective, NgxMatTimepickerComponent], providers: [
                         {
@@ -4811,10 +4828,10 @@ class DragDropFileUploadComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i30.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DragDropFileUploadComponent, isStandalone: true, selector: "application-drag-drop-file-upload", inputs: { accept: "accept", multiple: "multiple", prompt: "prompt" }, viewQueries: [{ propertyName: "dragDropZone", first: true, predicate: ["dragDropZone"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'application-drag-drop-file-upload', imports: [shared], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\r\n  @if (files$ | async; as files) {\r\n    @if (files.length > 0) {\r\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\r\n        @for (file of files; track $index) {\r\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\r\n            <mat-icon>description</mat-icon>\r\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\r\n            <mat-icon class=\"delete-button text-warning-color\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      <span>{{ prompt | translate }}</span>\r\n    }\r\n  } @else {\r\n    <span>{{ prompt | translate }}</span>\r\n  }\r\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\r\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\r\n  }\r\n</div>\r\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\r\n", styles: [":host{display:block;position:relative}input[type=file]{display:none}.drag-drop-zone{min-height:100px;min-width:250px;border:1px dashed var(--neutral-variant-color-60);cursor:pointer;border-radius:5px}.drag-drop-zone.highlight{background-color:var(--mat-sys-primary-container);border:1px solid var(--mat-sys-on-primary-container)}.drag-drop-zone.disabled{opacity:.5;pointer-events:none;cursor:no-drop}.drag-drop-zone .name-wrapper{cursor:auto}.drag-drop-zone .delete-button{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i30.NgControl, decorators: [{
@@ -5003,10 +5020,10 @@ class GoogleMapComponent {
         });
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, deps: [{ token: i1$1.TranslateService }, { token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\r\n  <div class=\"map-controls\">\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GoogleMapComponent, deps: [{ token: i1$1.TranslateService }, { token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: GoogleMapComponent, isStandalone: true, selector: "app-google-map", inputs: { googleMapId: { classPropertyName: "googleMapId", publicName: "googleMapId", isSignal: true, isRequired: true, transformFunction: null }, darkTheme: { classPropertyName: "darkTheme", publicName: "darkTheme", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, pinColor: { classPropertyName: "pinColor", publicName: "pinColor", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { markerClicked: "markerClicked" }, providers: [SimpleDateTimePipe], viewQueries: [{ propertyName: "map", first: true, predicate: GoogleMap, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"map-wrapper\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\r\n  <div class=\"map-controls\">\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GoogleMapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-google-map', imports: [GoogleMap, shared], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" class=\"map-full\"/>\r\n  <div class=\"map-controls\">\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"fitBounds()\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>filter_center_focus</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(+1)\" [disabled]=\"zoom() === 21\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>add</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n    <mat-card>\r\n      <button mat-mini-fab (click)=\"changeZoom(-1)\" [disabled]=\"zoom() === 2\" class=\"text-mat-sys-on-surface\" type=\"button\">\r\n        <mat-icon>remove</mat-icon>\r\n      </button>\r\n    </mat-card>\r\n  </div>\r\n</div>\r\n", styles: [".map-wrapper{display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}.map-controls{position:absolute;bottom:1.75rem;right:.75rem;display:flex;flex-direction:column;row-gap:.25rem}.map-controls mat-card{border:none!important}.map-controls button{background-color:transparent!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: SimpleDateTimePipe }], propDecorators: { map: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GoogleMap), { isSignal: true }] }], googleMapId: [{ type: i0.Input, args: [{ isSignal: true, alias: "googleMapId", required: true }] }], darkTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkTheme", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], pinColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinColor", required: true }] }], markerClicked: [{ type: i0.Output, args: ["markerClicked"] }] } });
@@ -5046,10 +5063,10 @@ class ImagePreviewComponent {
     isHtml(image) {
         return image !== null && image.constructor.name === 'SafeHtmlImpl';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImagePreviewComponent, isStandalone: true, selector: "app-image-preview", viewQueries: [{ propertyName: "image", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"relative overflow-hidden\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-surface\" matDialogClose>close</mat-icon>\r\n  @if (!isHtml(data.image)) {\r\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\r\n  } @else {\r\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "directive", type: i14.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i32.DragDropModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ImagePreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ImagePreviewComponent, isStandalone: true, selector: "app-image-preview", viewQueries: [{ propertyName: "image", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "svgElement", first: true, predicate: ["svgElement"], descendants: true }], ngImport: i0, template: "<div class=\"relative overflow-hidden\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-surface\" matDialogClose>close</mat-icon>\r\n  @if (!isHtml(data.image)) {\r\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\r\n  } @else {\r\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "directive", type: i14.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: i32.DragDropModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ImagePreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-image-preview', imports: [shared], template: "<div class=\"relative overflow-hidden\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-surface\" matDialogClose>close</mat-icon>\r\n  @if (!isHtml(data.image)) {\r\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\r\n  } @else {\r\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -5085,20 +5102,20 @@ class ImageDisplayComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageDisplayComponent, isStandalone: true, selector: "app-image-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl(); as image) {\r\n  @if (isHtml(image)) {\r\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\r\n  } @else {\r\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\r\n  }\r\n}\r\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ImageDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ImageDisplayComponent, isStandalone: true, selector: "app-image-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (imageUrl(); as image) {\r\n  @if (isHtml(image)) {\r\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\r\n  } @else {\r\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\r\n  }\r\n}\r\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ImageDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-image-display', imports: [], template: "@if (imageUrl(); as image) {\r\n  @if (isHtml(image)) {\r\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\r\n  } @else {\r\n    <img (click)=\"openImage(image)\" [attr.src]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\" alt=\"\"/>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class LabeledValueComponent {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: LabeledValueComponent, isStandalone: true, selector: "app-labeled-value", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-2 items-center\">\r\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\r\n  <div class=\"flex flex-row items-center gap-x-2\">\r\n    <ng-content/>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: LabeledValueComponent, isStandalone: true, selector: "app-labeled-value", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-2 items-center\">\r\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\r\n  <div class=\"flex flex-row items-center gap-x-2\">\r\n    <ng-content/>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LabeledValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LabeledValueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-labeled-value', imports: [TranslateModule], template: "<div class=\"flex flex-row gap-x-2 items-center\">\r\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\r\n  <div class=\"flex flex-row items-center gap-x-2\">\r\n    <ng-content/>\r\n  </div>\r\n</div>\r\n" }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }] } });
@@ -5133,10 +5150,10 @@ class LoadedIconComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoadedIconComponent, isStandalone: true, selector: "app-loaded-icon", inputs: { iconRequest: { classPropertyName: "iconRequest", publicName: "iconRequest", isSignal: true, isRequired: true, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\r\n  @if (icon() | async; as icon) {\r\n    <div [innerHTML]=\"icon\"></div>\r\n  } @else {\r\n    @if (isSvgIcon(); as icon) {\r\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\r\n    } @else {\r\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\r\n    }\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LoadedIconComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: LoadedIconComponent, isStandalone: true, selector: "app-loaded-icon", inputs: { iconRequest: { classPropertyName: "iconRequest", publicName: "iconRequest", isSignal: true, isRequired: true, transformFunction: null }, defaultIcon: { classPropertyName: "defaultIcon", publicName: "defaultIcon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\r\n  @if (icon() | async; as icon) {\r\n    <div [innerHTML]=\"icon\"></div>\r\n  } @else {\r\n    @if (isSvgIcon(); as icon) {\r\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\r\n    } @else {\r\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\r\n    }\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoadedIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LoadedIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-loaded-icon', imports: [shared], template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\r\n  @if (icon() | async; as icon) {\r\n    <div [innerHTML]=\"icon\"></div>\r\n  } @else {\r\n    @if (isSvgIcon(); as icon) {\r\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\r\n    } @else {\r\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\r\n    }\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { iconRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconRequest", required: true }] }], defaultIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultIcon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
@@ -5197,10 +5214,10 @@ class LocalSortTableComponent {
             this.sorting.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, deps: [{ token: TenantPropertiesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocalSortTableComponent, deps: [{ token: TenantPropertiesService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: LocalSortTableComponent, isStandalone: true, selector: "app-local-sort-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, translationPrefix: { classPropertyName: "translationPrefix", publicName: "translationPrefix", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, noValuesMessage: { classPropertyName: "noValuesMessage", publicName: "noValuesMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: "<table>\r\n  <thead>\r\n  <tr>\r\n    @for (column of columns(); track column.name) {\r\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\r\n        <div class=\"flex flex-row items-center gap-x-2\">\r\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\r\n          @if (column.shouldSort) {\r\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\r\n          }\r\n        </div>\r\n      </th>\r\n    }\r\n  </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n        <mat-spinner diameter=\"30\"></mat-spinner>\r\n      </div>\r\n    } @else {\r\n      @if (displayData(); as displayData){\r\n        @if (!noValuesMessage()) {\r\n          @if (!sorting()) {\r\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\r\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\r\n                @for (column of columns(); track column.name) {\r\n                  <td class=\"cursor-pointer truncate\">\r\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\r\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\r\n              </span>\r\n                }\r\n              </tr>\r\n            </cdk-virtual-scroll-viewport>\r\n          }\r\n        } @else {\r\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\r\n            <span>{{ noValuesMessage() | translate }}</span>\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n", styles: [":host{display:block;overflow:hidden;height:100%;width:100%}table{height:100%;width:100%;display:block}table thead{height:56px}table tbody{display:block;height:calc(100% - 56px);width:100%;overflow:hidden}table tbody tr:hover{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}table th,table td{padding-left:1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--mat-sys-outline-variant)}tr{height:56px;display:table;table-layout:fixed;width:100%}.viewport{display:block;width:100%;height:100%;overflow:auto}.sort-field mat-icon{font-size:18px;line-height:18px;height:18px;width:18px;opacity:0;transition:all ease-in .2s}.sort-field:hover mat-icon{opacity:1}\n"], dependencies: [{ kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LocalSortTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocalSortTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-local-sort-table', imports: [
                         CdkFixedSizeVirtualScroll,
@@ -5229,10 +5246,10 @@ class MasterDetailsViewComponent {
                 throw Error('Too deep!');
         }
     }, ...(ngDevMode ? [{ debugName: "width" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: MasterDetailsViewComponent, isStandalone: true, selector: "app-master-details-view", inputs: { displayRatio: { classPropertyName: "displayRatio", publicName: "displayRatio", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\r\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\r\n    <ng-content select=\"[app-master]\"/>\r\n  </div>\r\n  <mat-divider [vertical]=\"true\"/>\r\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\r\n    <ng-content select=\"[app-details]\"/>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MasterDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: MasterDetailsViewComponent, isStandalone: true, selector: "app-master-details-view", inputs: { displayRatio: { classPropertyName: "displayRatio", publicName: "displayRatio", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\r\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\r\n    <ng-content select=\"[app-master]\"/>\r\n  </div>\r\n  <mat-divider [vertical]=\"true\"/>\r\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\r\n    <ng-content select=\"[app-details]\"/>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-master-details-view', imports: [shared], template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\r\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\r\n    <ng-content select=\"[app-master]\"/>\r\n  </div>\r\n  <mat-divider [vertical]=\"true\"/>\r\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\r\n    <ng-content select=\"[app-details]\"/>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"] }]
         }], propDecorators: { displayRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayRatio", required: false }] }] } });
@@ -5431,10 +5448,10 @@ class NestedListViewComponent {
     isSvgIcon(item) {
         return !!item.icon && typeof item.icon !== 'string' && Object.hasOwn(item.icon, 'id') ? item.icon : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }, { token: i14.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultBreadcrumbTemplate\"\r\n                                [ngTemplateOutletContext]=\"{$implicit: item, isSelected: selectedItem()?.id === item.id, isBreadcrumb: true, isDisabled: !!shouldDisableBreadcrumbClick(item), select: selectBreadcrumb.bind(this, item), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                  </ng-container>\r\n\r\n                  <!-- DEFAULT BREADCRUMB TEMPLATE -->\r\n                  <ng-template #defaultBreadcrumbTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                              [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                              [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                        <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                          @if (item.icon) {\r\n                            <div class=\"shrink-0 h-6\">\r\n                              @if (isAsyncIcon(item); as loadedIcon) {\r\n                                <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                              }\r\n                              @if (isSvgIcon(item); as svgIcon) {\r\n                                <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                              }\r\n                              @if (typeof item.icon === 'string') {\r\n                                <mat-icon>{{ item.icon }}</mat-icon>\r\n                              }\r\n                            </div>\r\n                          }\r\n                          <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                        </div>\r\n                        @if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                          <mat-icon>drag_indicator</mat-icon>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultChildTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: item, isSelected: selectedItem()?.id === item.id, isBreadcrumb: false, isDisabled: false, select: selectChild.bind(this, item), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                      </ng-container>\r\n\r\n                      <!-- DEFAULT CHILD TEMPLATE -->\r\n                      <ng-template #defaultChildTemplate>\r\n                        <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                  [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                          <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                            <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                              @if (item.icon) {\r\n                                <div class=\"shrink-0 h-6\">\r\n                                  @if (isAsyncIcon(item); as loadedIcon) {\r\n                                    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                                  }\r\n                                  @if (isSvgIcon(item); as svgIcon) {\r\n                                    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                                  }\r\n                                  @if (typeof item.icon === 'string') {\r\n                                    <mat-icon>{{ item.icon }}</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                              <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                            </div>\r\n                            @if (enableDrag()) {\r\n                              <mat-icon>drag_indicator</mat-icon>\r\n                            }\r\n                          </div>\r\n                        </mat-card>\r\n                      </ng-template>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }, { token: i14.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: NestedListViewComponent, isStandalone: true, selector: "app-nested-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, searchActions: { classPropertyName: "searchActions", publicName: "searchActions", isSignal: true, isRequired: false, transformFunction: null }, selectionConfirmationAction: { classPropertyName: "selectionConfirmationAction", publicName: "selectionConfirmationAction", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, rootButtonText: { classPropertyName: "rootButtonText", publicName: "rootButtonText", isSignal: true, isRequired: false, transformFunction: null }, enableDrag: { classPropertyName: "enableDrag", publicName: "enableDrag", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragging: "dragging", itemSelected: "itemSelected" }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultBreadcrumbTemplate\"\r\n                                [ngTemplateOutletContext]=\"{$implicit: item, isSelected: selectedItem()?.id === item.id, isBreadcrumb: true, isDisabled: !!shouldDisableBreadcrumbClick(item), select: selectBreadcrumb.bind(this, item), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                  </ng-container>\r\n\r\n                  <!-- DEFAULT BREADCRUMB TEMPLATE -->\r\n                  <ng-template #defaultBreadcrumbTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                              [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                              [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                        <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                          @if (item.icon) {\r\n                            <div class=\"shrink-0 h-6\">\r\n                              @if (isAsyncIcon(item); as loadedIcon) {\r\n                                <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                              }\r\n                              @if (isSvgIcon(item); as svgIcon) {\r\n                                <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                              }\r\n                              @if (typeof item.icon === 'string') {\r\n                                <mat-icon>{{ item.icon }}</mat-icon>\r\n                              }\r\n                            </div>\r\n                          }\r\n                          <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                        </div>\r\n                        @if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                          <mat-icon>drag_indicator</mat-icon>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultChildTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: item, isSelected: selectedItem()?.id === item.id, isBreadcrumb: false, isDisabled: false, select: selectChild.bind(this, item), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                      </ng-container>\r\n\r\n                      <!-- DEFAULT CHILD TEMPLATE -->\r\n                      <ng-template #defaultChildTemplate>\r\n                        <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                  [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                          <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                            <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                              @if (item.icon) {\r\n                                <div class=\"shrink-0 h-6\">\r\n                                  @if (isAsyncIcon(item); as loadedIcon) {\r\n                                    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                                  }\r\n                                  @if (isSvgIcon(item); as svgIcon) {\r\n                                    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                                  }\r\n                                  @if (typeof item.icon === 'string') {\r\n                                    <mat-icon>{{ item.icon }}</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                              <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                            </div>\r\n                            @if (enableDrag()) {\r\n                              <mat-icon>drag_indicator</mat-icon>\r\n                            }\r\n                          </div>\r\n                        </mat-card>\r\n                      </ng-template>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NestedListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nested-list-view', imports: [shared, ScrollIntoViewDirective, LoadedIconComponent, OverflowClassDirective, DndDraggableDirective], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"flex w-full flex-row gap-x-2\">\r\n\r\n        <!-- SEARCH -->\r\n        @if (!hideSearch()) {\r\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\r\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\r\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n              <mat-icon matSuffix>search</mat-icon>\r\n            </mat-form-field>\r\n            @if (defaultSearchAction(); as defaultAction) {\r\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\r\n                <button mat-mini-fab [disabled]=\"defaultAction.disableCondition ? defaultAction.disableCondition({control: nameSearchControl}) : false\" (click)=\"defaultAction.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [matTooltip]=\"defaultAction.name | translate\">\r\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\r\n                </button>\r\n              </div>\r\n            }\r\n            @for (action of otherSearchActions(); track $index) {\r\n              @if (action.condition() | async) {\r\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\r\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\r\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\r\n                  </button>\r\n                </div>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n\r\n        <!-- BREADCRUMBS -->\r\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\r\n          @if (!loadingBreadcrumbs()) {\r\n            @if (breadcrumbs(); as items) {\r\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\r\n                @for (item of items; let i = $index; track i) {\r\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\r\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        <div class=\"shrink-0 h-6\">\r\n                          <mat-icon>arrow_upward</mat-icon>\r\n                        </div>\r\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  }\r\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultBreadcrumbTemplate\"\r\n                                [ngTemplateOutletContext]=\"{$implicit: item, isSelected: selectedItem()?.id === item.id, isBreadcrumb: true, isDisabled: !!shouldDisableBreadcrumbClick(item), select: selectBreadcrumb.bind(this, item), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                  </ng-container>\r\n\r\n                  <!-- DEFAULT BREADCRUMB TEMPLATE -->\r\n                  <ng-template #defaultBreadcrumbTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\r\n                              [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\r\n                              [ngClass]=\"[selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color', shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled' : '']\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                        <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                          @if (item.icon) {\r\n                            <div class=\"shrink-0 h-6\">\r\n                              @if (isAsyncIcon(item); as loadedIcon) {\r\n                                <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                              }\r\n                              @if (isSvgIcon(item); as svgIcon) {\r\n                                <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                              }\r\n                              @if (typeof item.icon === 'string') {\r\n                                <mat-icon>{{ item.icon }}</mat-icon>\r\n                              }\r\n                            </div>\r\n                          }\r\n                          <span [ngClass]=\"[selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                        </div>\r\n                        @if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                          <mat-icon>drag_indicator</mat-icon>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n\r\n        <mat-divider class=\"w-full pb-2\"/>\r\n\r\n        <!-- CHILDREN -->\r\n        @if (selectedItem()) {\r\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\r\n            @if (!loadingChildren()) {\r\n              @if (filteredChildren(); as items) {\r\n                @if (items.length) {\r\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\r\n                    @for (item of items; track $index) {\r\n                      <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultChildTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{$implicit: item, isSelected: selectedItem()?.id === item.id, isBreadcrumb: false, isDisabled: false, select: selectChild.bind(this, item), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                      </ng-container>\r\n\r\n                      <!-- DEFAULT CHILD TEMPLATE -->\r\n                      <ng-template #defaultChildTemplate>\r\n                        <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"selectChild(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\"\r\n                                  [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\r\n                          <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\r\n                            <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\r\n                              @if (item.icon) {\r\n                                <div class=\"shrink-0 h-6\">\r\n                                  @if (isAsyncIcon(item); as loadedIcon) {\r\n                                    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                                  }\r\n                                  @if (isSvgIcon(item); as svgIcon) {\r\n                                    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                                  }\r\n                                  @if (typeof item.icon === 'string') {\r\n                                    <mat-icon>{{ item.icon }}</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              }\r\n                              <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                            </div>\r\n                            @if (enableDrag()) {\r\n                              <mat-icon>drag_indicator</mat-icon>\r\n                            }\r\n                          </div>\r\n                        </mat-card>\r\n                      </ng-template>\r\n                    }\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"flex flex-col grow justify-center items-center\">\r\n                    <ng-content select=\"[app-no-items-message]\"/>\r\n                  </div>\r\n                }\r\n              }\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <mat-spinner diameter=\"30\"></mat-spinner>\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}.regular-item.disabled{color:unset}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i14.MatDialog }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], disableThresholdId: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableThresholdId", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], searchActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchActions", required: false }] }], selectionConfirmationAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionConfirmationAction", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], rootButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootButtonText", required: false }] }], enableDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDrag", required: false }] }], dragging: [{ type: i0.Output, args: ["dragging"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }] } });
@@ -5493,10 +5510,10 @@ class PdfViewerComponent {
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PdfViewerComponent, isStandalone: true, selector: "app-pdf-viewer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (safeSrc()) {\r\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\r\n}", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PdfViewerComponent, isStandalone: true, selector: "app-pdf-viewer", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (safeSrc()) {\r\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\r\n}", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\r\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\r\n}" }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
@@ -5629,10 +5646,10 @@ class StandardListViewComponent {
             this.loadingPage.set(false);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "content", first: true, predicate: NgTemplateContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"content()?.template || defaultTemplate\"\r\n                                [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                  </ng-container>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [ngClass]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon) {\r\n                          <div class=\"shrink-0 h-6\">\r\n                            @if (isAsyncIcon(item); as loadedIcon) {\r\n                              <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                            }\r\n                            @if (isSvgIcon(item); as svgIcon) {\r\n                              <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                            }\r\n                            @if (typeof item.icon === 'string') {\r\n                              <mat-icon>{{ item.icon }}</mat-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: StandardListViewComponent, isStandalone: true, selector: "app-standard-list-view", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, dataControl: { classPropertyName: "dataControl", publicName: "dataControl", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isColoredInput: { classPropertyName: "isColoredInput", publicName: "isColoredInput", isSignal: true, isRequired: false, transformFunction: null }, hideSearch: { classPropertyName: "hideSearch", publicName: "hideSearch", isSignal: true, isRequired: false, transformFunction: null }, hideDetails: { classPropertyName: "hideDetails", publicName: "hideDetails", isSignal: true, isRequired: false, transformFunction: null }, hidePadding: { classPropertyName: "hidePadding", publicName: "hidePadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, queries: [{ propertyName: "content", first: true, predicate: NgTemplateContentDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"content()?.template || defaultTemplate\"\r\n                                [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                  </ng-container>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [ngClass]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon) {\r\n                          <div class=\"shrink-0 h-6\">\r\n                            @if (isAsyncIcon(item); as loadedIcon) {\r\n                              <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                            }\r\n                            @if (isSvgIcon(item); as svgIcon) {\r\n                              <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                            }\r\n                            @if (typeof item.icon === 'string') {\r\n                              <mat-icon>{{ item.icon }}</mat-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "component", type: i18.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "component", type: i21.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i31.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: StandardListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StandardListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-standard-list-view', imports: [shared, OverflowClassDirective, ScrollIntoViewDirective, LoadedIconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\r\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\r\n\r\n    <!-- LISTING -->\r\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\r\n\r\n      <!-- SEARCH -->\r\n      @if (!hideSearch()) {\r\n        <mat-form-field class=\"w-full small-input\" [ngClass]=\"{'colored-input': isColoredInput()}\">\r\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\r\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\r\n          <mat-icon matSuffix>search</mat-icon>\r\n        </mat-form-field>\r\n      }\r\n\r\n      <!-- LIST -->\r\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\r\n        @if (!loadingData()) {\r\n          @if (filteredItems(); as items) {\r\n            @if (items.length) {\r\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\r\n                @for (item of items; track $index) {\r\n                  <ng-container [ngTemplateOutlet]=\"content()?.template || defaultTemplate\"\r\n                                [ngTemplateOutletContext]=\"{$implicit: item, selectedItem: selectedItem(), selectItem: selectItem.bind(this), isSvgIcon: isSvgIcon.bind(this), isAsyncIcon: isAsyncIcon.bind(this)}\">\r\n                  </ng-container>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItem(item)\"\r\n                              [ngClass]=\"selectedItem()?.id === item.id ? 'selected-item' : 'regular-item hover:bg-hover-color'\"\r\n                              [appScrollIntoView]=\"selectedItem()?.id === item.id\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\r\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\r\n                        @if (item.icon) {\r\n                          <div class=\"shrink-0 h-6\">\r\n                            @if (isAsyncIcon(item); as loadedIcon) {\r\n                              <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n                            }\r\n                            @if (isSvgIcon(item); as svgIcon) {\r\n                              <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n                            }\r\n                            @if (typeof item.icon === 'string') {\r\n                              <mat-icon>{{ item.icon }}</mat-icon>\r\n                            }\r\n                          </div>\r\n                        }\r\n                        <span [ngClass]=\"selectedItem()?.id === item.id ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\r\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\r\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\r\n                      @if (loadingPage()) {\r\n                        <mat-spinner diameter=\"30\"></mat-spinner>\r\n                      } @else {\r\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <div class=\"flex flex-col grow justify-center items-center\">\r\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\r\n              </div>\r\n            }\r\n          }\r\n        } @else {\r\n          <div class=\"flex flex-col grow justify-center items-center\">\r\n            <mat-spinner diameter=\"30\"></mat-spinner>\r\n          </div>\r\n        }\r\n\r\n        <!-- ACTIONS (bottom right of the listing) -->\r\n        <div class=\"absolute bottom-0 right-0 z-10\">\r\n          <ng-content select=\"[app-actions]\"/>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  @if (!hideDetails()) {\r\n    <mat-divider [vertical]=\"true\"/>\r\n\r\n    <!-- DETAILS -->\r\n    <div class=\"details flex shrink grow overflow-hidden\">\r\n      <ng-content select=\"[app-details]\"/>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;height:100%;width:100%;overflow:hidden}mat-card,.item-card{height:40px!important}.container{background-color:var(--base-color-50)}.container .master{padding-right:16px}.container .details{padding-left:16px}.selected-item{background:var(--mat-sys-primary);fill:var(--mat-sys-on-primary);color:var(--mat-sys-on-primary)}.regular-item{fill:var(--mat-sys-primary);color:var(--mat-sys-primary)}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], dataControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataControl", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], isColoredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isColoredInput", required: false }] }], hideSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSearch", required: false }] }], hideDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDetails", required: false }] }], hidePadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePadding", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NgTemplateContentDirective), { isSignal: true }] }] } });
@@ -5711,10 +5728,10 @@ class TabulatedChipViewComponent {
             this.router.navigate([route], { relativeTo: this.route, queryParamsHandling: this.queryParamHandling() });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\r\n    @for (tab of tabs(); track $index) {\r\n      @if (!tab.condition || (tab.condition | async)) {\r\n        <div\r\n          mat-tab-link\r\n          [active]=\"isActive(tab.route)\"\r\n          (click)=\"navigate(tab.route)\"\r\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\r\n          class=\"rounded mr-2 navigation-tab\"\r\n          [attr.data-test]=\"tab.name + '_tab'\"\r\n        >\r\n          @if (tab.icon) {\r\n            <mat-icon>{{ tab.icon }}</mat-icon>\r\n          }\r\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\r\n        </div>\r\n      }\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet/>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TabulatedChipViewComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TabulatedChipViewComponent, isStandalone: true, selector: "app-tabulated-chip-view", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, queryParamHandling: { classPropertyName: "queryParamHandling", publicName: "queryParamHandling", isSignal: true, isRequired: false, transformFunction: null }, saveLastActiveTab: { classPropertyName: "saveLastActiveTab", publicName: "saveLastActiveTab", isSignal: true, isRequired: false, transformFunction: null }, navBarLayoutClasses: { classPropertyName: "navBarLayoutClasses", publicName: "navBarLayoutClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\r\n    @for (tab of tabs(); track $index) {\r\n      @if (!tab.condition || (tab.condition | async)) {\r\n        <div\r\n          mat-tab-link\r\n          [active]=\"isActive(tab.route)\"\r\n          (click)=\"navigate(tab.route)\"\r\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\r\n          class=\"rounded mr-2 navigation-tab\"\r\n          [attr.data-test]=\"tab.name + '_tab'\"\r\n        >\r\n          @if (tab.icon) {\r\n            <mat-icon>{{ tab.icon }}</mat-icon>\r\n          }\r\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\r\n        </div>\r\n      }\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet/>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedChipViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TabulatedChipViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tabulated-chip-view', imports: [shared], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\r\n    @for (tab of tabs(); track $index) {\r\n      @if (!tab.condition || (tab.condition | async)) {\r\n        <div\r\n          mat-tab-link\r\n          [active]=\"isActive(tab.route)\"\r\n          (click)=\"navigate(tab.route)\"\r\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\r\n          class=\"rounded mr-2 navigation-tab\"\r\n          [attr.data-test]=\"tab.name + '_tab'\"\r\n        >\r\n          @if (tab.icon) {\r\n            <mat-icon>{{ tab.icon }}</mat-icon>\r\n          }\r\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\r\n        </div>\r\n      }\r\n    }\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet/>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box;--mat-tab-active-indicator-color: transparent;--mat-tab-active-focus-indicator-color: transparent;--mat-tab-active-hover-indicator-color: transparent;--mat-tab-active-ripple-color: transparent;--mat-tab-inactive-ripple-color: transparent;--mat-tab-disabled-ripple-color: transparent;--mat-tab-active-indicator-height: 0;--mat-tab-divider-height: 0px;--mat-tab-container-height: 40px}.navigation{max-width:100%}.navigation-tab{border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box}.navigation-tab.active{border:none}.navigation-tab:hover{box-shadow:inset 0 0 0 200px #fff3}.navigation-tab:hover mat-icon,.navigation-tab:hover span{opacity:.8}:host-context(.alt-theme) .navigation-tab:hover{box-shadow:inset 0 0 0 200px #0003}:host-context(.alt-theme) .navigation-tab:hover mat-icon,:host-context(.alt-theme) .navigation-tab:hover span{opacity:.6}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], queryParamHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamHandling", required: false }] }], saveLastActiveTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLastActiveTab", required: false }] }], navBarLayoutClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "navBarLayoutClasses", required: false }] }] } });
@@ -5735,10 +5752,10 @@ class TabulatedViewComponent {
             this.router.navigate([route], { relativeTo: this.route });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\r\n    <div\r\n      *ngFor=\"let tab of tabs\"\r\n      mat-tab-link\r\n      [active]=\"isActive(tab.route)\"\r\n      (click)=\"navigate(tab.route)\"\r\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n      [attr.data-test]=\"tab.name + '_tab'\"\r\n    >\r\n      <mat-icon *ngIf=\"tab.icon\">\r\n        {{ tab.icon }}\r\n      </mat-icon>\r\n      {{ tab.name | translate }}\r\n    </div>\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet></router-outlet>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TabulatedViewComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\r\n    <div\r\n      *ngFor=\"let tab of tabs\"\r\n      mat-tab-link\r\n      [active]=\"isActive(tab.route)\"\r\n      (click)=\"navigate(tab.route)\"\r\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n      [attr.data-test]=\"tab.name + '_tab'\"\r\n    >\r\n      <mat-icon *ngIf=\"tab.icon\">\r\n        {{ tab.icon }}\r\n      </mat-icon>\r\n      {{ tab.name | translate }}\r\n    </div>\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet></router-outlet>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "component", type: i9.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i9.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i9.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TabulatedViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TabulatedViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tabulated-view', imports: [shared], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\r\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\r\n    <div\r\n      *ngFor=\"let tab of tabs\"\r\n      mat-tab-link\r\n      [active]=\"isActive(tab.route)\"\r\n      (click)=\"navigate(tab.route)\"\r\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\r\n      [attr.data-test]=\"tab.name + '_tab'\"\r\n    >\r\n      <mat-icon *ngIf=\"tab.icon\">\r\n        {{ tab.icon }}\r\n      </mat-icon>\r\n      {{ tab.name | translate }}\r\n    </div>\r\n  </nav>\r\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\r\n    <router-outlet></router-outlet>\r\n  </mat-tab-nav-panel>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.navigation{border-bottom:1px solid rgba(0,0,0,.12);max-width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }], propDecorators: { tabs: [{
@@ -5755,10 +5772,10 @@ class TreeNodeComponent {
     selectNode(node) {
         this.nodeSelected.emit(node);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeNodeComponent, isStandalone: true, selector: "app-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"w-full flex flex-col\">\r\n  <!-- ROW -->\r\n  <div class=\"w-full h-10 flex flex-row items-center\">\r\n\r\n    <!-- ARROWS -->\r\n    @if (node().canHaveChildren) {\r\n      @if (node().open) {\r\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_down</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </button>\r\n      }\r\n    } @else {\r\n      <div class=\"w-12 h-12\">&nbsp;</div>\r\n    }\r\n\r\n    <!-- ICON AND TEXT -->\r\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\r\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\r\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Children -->\r\n  @if (node().open) {\r\n    <div class=\"w-full flex flex-col pl-9\">\r\n      @if (node().children | async; as children) {\r\n        @for (child of children; track $index) {\r\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TreeNodeComponent, isStandalone: true, selector: "app-tree-node", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"w-full flex flex-col\">\r\n  <!-- ROW -->\r\n  <div class=\"w-full h-10 flex flex-row items-center\">\r\n\r\n    <!-- ARROWS -->\r\n    @if (node().canHaveChildren) {\r\n      @if (node().open) {\r\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_down</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </button>\r\n      }\r\n    } @else {\r\n      <div class=\"w-12 h-12\">&nbsp;</div>\r\n    }\r\n\r\n    <!-- ICON AND TEXT -->\r\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\r\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\r\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Children -->\r\n  @if (node().open) {\r\n    <div class=\"w-full flex flex-col pl-9\">\r\n      @if (node().children | async; as children) {\r\n        @for (child of children; track $index) {\r\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }, { kind: "ngmodule", type: i2.MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i31.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tree-node', imports: [shared], template: "<div class=\"w-full flex flex-col\">\r\n  <!-- ROW -->\r\n  <div class=\"w-full h-10 flex flex-row items-center\">\r\n\r\n    <!-- ARROWS -->\r\n    @if (node().canHaveChildren) {\r\n      @if (node().open) {\r\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_down</mat-icon>\r\n        </button>\r\n      } @else {\r\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\r\n          <mat-icon>keyboard_arrow_right</mat-icon>\r\n        </button>\r\n      }\r\n    } @else {\r\n      <div class=\"w-12 h-12\">&nbsp;</div>\r\n    }\r\n\r\n    <!-- ICON AND TEXT -->\r\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\r\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\r\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Children -->\r\n  @if (node().open) {\r\n    <div class=\"w-full flex flex-col pl-9\">\r\n      @if (node().children | async; as children) {\r\n        @for (child of children; track $index) {\r\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
@@ -5809,10 +5826,10 @@ class TreeComponent {
         this.selectedNode = node;
         this.selectedNode.selected = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TreeComponent, isStandalone: true, selector: "app-tree", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: true, transformFunction: null }, guidPath: { classPropertyName: "guidPath", publicName: "guidPath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"h-full w-full flex flex-col\">\r\n  @for (node of roots(); track $index) {\r\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TreeComponent, isStandalone: true, selector: "app-tree", inputs: { roots: { classPropertyName: "roots", publicName: "roots", isSignal: true, isRequired: true, transformFunction: null }, guidPath: { classPropertyName: "guidPath", publicName: "guidPath", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { nodeSelected: "nodeSelected" }, ngImport: i0, template: "<div class=\"h-full w-full flex flex-col\">\r\n  @for (node of roots(); track $index) {\r\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TreeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\r\n  @for (node of roots(); track $index) {\r\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\r\n  }\r\n</div>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { roots: [{ type: i0.Input, args: [{ isSignal: true, alias: "roots", required: true }] }], guidPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidPath", required: true }] }], nodeSelected: [{ type: i0.Output, args: ["nodeSelected"] }] } });
@@ -5830,10 +5847,10 @@ class ValueDisplayComponent {
     getVectorValue(vector) {
         return vector.replaceAll(',', ', ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueDisplayComponent, isStandalone: true, selector: "app-value-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\r\n  @switch (type()) {\r\n    @case (DataType.BOOLEAN) {\r\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\r\n    }\r\n    @case (DataType.COLOR) {\r\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\r\n    }\r\n    @case (DataType.DATE) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\r\n    }\r\n    @case (DataType.DURATION) {\r\n      {{ getNumber(value) | duration }}\r\n    }\r\n    @case (DataType.LINK) {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\r\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\r\n      </div>\r\n    }\r\n    @case (DataType.VECTOR) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\r\n    }\r\n    @case (DataType.NUMERIC){\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\r\n    }\r\n    @default {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\r\n    }\r\n  }\r\n} @else {\r\n  -\r\n}\r\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: SimpleDateTimePipe, name: "simpleDateTime" }, { kind: "pipe", type: LocalizedNumberPipe, name: "localizedNumber" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueDisplayComponent, isStandalone: true, selector: "app-value-display", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (value(); as value) {\r\n  @switch (type()) {\r\n    @case (DataType.BOOLEAN) {\r\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\r\n    }\r\n    @case (DataType.COLOR) {\r\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\r\n    }\r\n    @case (DataType.DATE) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\r\n    }\r\n    @case (DataType.DURATION) {\r\n      {{ getNumber(value) | duration }}\r\n    }\r\n    @case (DataType.LINK) {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\r\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\r\n      </div>\r\n    }\r\n    @case (DataType.VECTOR) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\r\n    }\r\n    @case (DataType.NUMERIC){\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\r\n    }\r\n    @default {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\r\n    }\r\n  }\r\n} @else {\r\n  -\r\n}\r\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: DurationPipe, name: "duration" }, { kind: "pipe", type: SimpleDateTimePipe, name: "simpleDateTime" }, { kind: "pipe", type: LocalizedNumberPipe, name: "localizedNumber" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-display', imports: [shared, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\r\n  @switch (type()) {\r\n    @case (DataType.BOOLEAN) {\r\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\r\n    }\r\n    @case (DataType.COLOR) {\r\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\r\n    }\r\n    @case (DataType.DATE) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\r\n    }\r\n    @case (DataType.DURATION) {\r\n      {{ getNumber(value) | duration }}\r\n    }\r\n    @case (DataType.LINK) {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\r\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\r\n      </div>\r\n    }\r\n    @case (DataType.VECTOR) {\r\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\r\n    }\r\n    @case (DataType.NUMERIC){\r\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\r\n    }\r\n    @default {\r\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\r\n    }\r\n  }\r\n} @else {\r\n  -\r\n}\r\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }] } });
@@ -5891,8 +5908,8 @@ class ValueInputBooleanComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputBooleanComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputBooleanComponent, isStandalone: true, selector: "app-value-input-boolean", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputBooleanComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputBooleanComponent, isStandalone: true, selector: "app-value-input-boolean", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputBooleanComponent),
@@ -5905,7 +5922,7 @@ class ValueInputBooleanComponent {
             }
         ], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <div class=\"flex flex-col ml-2\">\r\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\r\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\r\n  </div>\r\n</mat-slide-toggle>\r\n@for (error of getErrors(); track error) {\r\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputBooleanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputBooleanComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-boolean', imports: [shared, MatSlideToggle], providers: [
                         {
@@ -5999,8 +6016,8 @@ class ValueInputColorComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputColorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputColorComponent, isStandalone: true, selector: "app-value-input-color", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputColorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputColorComponent, isStandalone: true, selector: "app-value-input-color", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputColorComponent),
@@ -6013,7 +6030,7 @@ class ValueInputColorComponent {
             }
         ], viewQueries: [{ propertyName: "colorPicker", first: true, predicate: ["colorPicker"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" (click)=\"openColorPicker()\">\r\n  <input type=\"color\" #colorPicker [value]=\"formControl.value\" (input)=\"onColorPickerChange($event)\" class=\"absolute opacity-0 right-55 top-full mt-1 z-10\" [class.hidden]=\"!showPicker\">\r\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\r\n\r\n  @for (error of getErrors(); track error) {\r\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputColorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-color', imports: [shared], providers: [
                         {
@@ -6082,8 +6099,8 @@ class ValueInputDateComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ValueInputDateComponent, isStandalone: true, selector: "app-value-input-date", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: ValueInputDateComponent, isStandalone: true, selector: "app-value-input-date", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputDateComponent),
@@ -6096,7 +6113,7 @@ class ValueInputDateComponent {
             }
         ], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-date', imports: [shared, DateTimeFormFieldComponent], providers: [
                         {
@@ -6172,8 +6189,8 @@ class ValueInputEnumComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputEnumComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputEnumComponent, isStandalone: true, selector: "app-value-input-enum", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputEnumComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputEnumComponent, isStandalone: true, selector: "app-value-input-enum", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputEnumComponent),
@@ -6186,7 +6203,7 @@ class ValueInputEnumComponent {
             }
         ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\r\n    <mat-label>{{ name() }}</mat-label>\r\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\">\r\n      @for (value of options(); track value) {\r\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\r\n      }\r\n    </mat-select>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputEnumComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputEnumComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-enum', imports: [shared], providers: [
                         {
@@ -6265,8 +6282,8 @@ class ValueInputHexadecimalComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputHexadecimalComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputHexadecimalComponent, isStandalone: true, selector: "app-value-input-hexadecimal", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputHexadecimalComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputHexadecimalComponent, isStandalone: true, selector: "app-value-input-hexadecimal", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputHexadecimalComponent),
@@ -6279,7 +6296,7 @@ class ValueInputHexadecimalComponent {
             }
         ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputHexadecimalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputHexadecimalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-hexadecimal', imports: [shared], providers: [
                         {
@@ -6359,8 +6376,8 @@ class ValueInputLinkComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLinkComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputLinkComponent, isStandalone: true, selector: "app-value-input-link", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputLinkComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputLinkComponent, isStandalone: true, selector: "app-value-input-link", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputLinkComponent),
@@ -6373,7 +6390,7 @@ class ValueInputLinkComponent {
             }
         ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-link', imports: [shared], providers: [
                         {
@@ -6469,8 +6486,8 @@ class ValueInputLocationComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLocationComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputLocationComponent, isStandalone: true, selector: "app-value-input-location", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputLocationComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputLocationComponent, isStandalone: true, selector: "app-value-input-location", inputs: { validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputLocationComponent),
@@ -6483,7 +6500,7 @@ class ValueInputLocationComponent {
             }
         ], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <div class=\"flex flex-col gap-y-1\">\r\n    <div class=\"flex gap-4 w-full justify-between items-start\">\r\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\r\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity()\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\r\n\r\n          @for (error of getErrors('latitude'); track error) {\r\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\r\n          }\r\n      </mat-form-field>\r\n\r\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\r\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity()\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\r\n\r\n          @for (error of getErrors('longitude'); track error) {\r\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\r\n          }\r\n      </mat-form-field>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i30.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i30.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputLocationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputLocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-location', imports: [shared], providers: [
                         {
@@ -6566,8 +6583,8 @@ class ValueInputNumericComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputNumericComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputNumericComponent, isStandalone: true, selector: "app-value-input-numeric", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputNumericComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputNumericComponent, isStandalone: true, selector: "app-value-input-numeric", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputNumericComponent),
@@ -6580,7 +6597,7 @@ class ValueInputNumericComponent {
             }
         ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "directive", type: LocalizedNumericInputDirective, selector: "input[wolkaboutLocalizedNumericInput]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputNumericComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputNumericComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-numeric', imports: [shared, LocalizedNumericInputDirective], providers: [
                         {
@@ -6655,8 +6672,8 @@ class ValueInputStringComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputStringComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputStringComponent, isStandalone: true, selector: "app-value-input-string", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputStringComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputStringComponent, isStandalone: true, selector: "app-value-input-string", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputStringComponent),
@@ -6669,7 +6686,7 @@ class ValueInputStringComponent {
             }
         ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" autocomplete=\"off\"/>\r\n  @for (error of getErrors(); track error) {\r\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputStringComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputStringComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-string', imports: [shared], providers: [
                         {
@@ -6764,8 +6781,8 @@ class ValueInputVectorComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputVectorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputVectorComponent, isStandalone: true, selector: "app-value-input-vector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputVectorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputVectorComponent, isStandalone: true, selector: "app-value-input-vector", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputVectorComponent),
@@ -6778,7 +6795,7 @@ class ValueInputVectorComponent {
             }
         ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\r\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\r\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" class=\"w-full\">\r\n\r\n      @for (error of getErrors(); track error) {\r\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n      }\r\n  </mat-form-field>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputVectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputVectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-vector', imports: [shared], providers: [
                         {
@@ -6880,8 +6897,8 @@ class ValueInputDurationComponent {
         })
             .reduce((a, b) => a + b, 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDurationComponent, deps: [{ token: i0.DestroyRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputDurationComponent, isStandalone: true, selector: "app-value-input-duration", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputDurationComponent, deps: [{ token: i0.DestroyRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputDurationComponent, isStandalone: true, selector: "app-value-input-duration", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputDurationComponent),
@@ -6894,7 +6911,7 @@ class ValueInputDurationComponent {
             }
         ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\r\n  <mat-label>{{ name() }}</mat-label>\r\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity()\" autocomplete=\"off\"/>\r\n\r\n    @for (error of getErrors(); track error) {\r\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\r\n    }\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "directive", type: i19.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "directive", type: i31.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputDurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-duration', imports: [shared], providers: [
                         {
@@ -6975,8 +6992,8 @@ class ValueInputComponent {
         this.validators.set(validators);
     }
     DataType = DataType;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ValueInputComponent, isStandalone: true, selector: "app-value-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, validationConditions: { classPropertyName: "validationConditions", publicName: "validationConditions", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ValueInputComponent, isStandalone: true, selector: "app-value-input", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, validationConditions: { classPropertyName: "validationConditions", publicName: "validationConditions", isSignal: true, isRequired: false, transformFunction: null }, showErrorInTooltip: { classPropertyName: "showErrorInTooltip", publicName: "showErrorInTooltip", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputComponent),
@@ -6989,7 +7006,7 @@ class ValueInputComponent {
             }
         ], ngImport: i0, template: "@switch (dataType()) {\r\n  @case (DataType.STRING) {\r\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.NUMERIC) {\r\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.BOOLEAN) {\r\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.HEXADECIMAL) {\r\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.COLOR) {\r\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.LINK) {\r\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.DATE) {\r\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.DURATION) {\r\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.LOCATION) {\r\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\"/>\r\n  }\r\n  @case (DataType.VECTOR) {\r\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\r\n  }\r\n  @case (DataType.ENUM) {\r\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\"/>\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i2.MatButtonModule }, { kind: "ngmodule", type: i3.MatCheckboxModule }, { kind: "ngmodule", type: i4.MatToolbarModule }, { kind: "ngmodule", type: i5.MatMenuModule }, { kind: "ngmodule", type: i6.MatFormFieldModule }, { kind: "ngmodule", type: i7.MatTooltipModule }, { kind: "ngmodule", type: i8.MatSidenavModule }, { kind: "ngmodule", type: i9.MatTabsModule }, { kind: "ngmodule", type: i10.MatTableModule }, { kind: "ngmodule", type: i11.MatIconModule }, { kind: "ngmodule", type: i12.MatCardModule }, { kind: "ngmodule", type: i13.MatSelectModule }, { kind: "ngmodule", type: i14.MatDialogModule }, { kind: "ngmodule", type: i15.MatSortModule }, { kind: "ngmodule", type: i16.MatRadioModule }, { kind: "ngmodule", type: i17.MatRippleModule }, { kind: "ngmodule", type: i18.MatDividerModule }, { kind: "ngmodule", type: i19.MatInputModule }, { kind: "ngmodule", type: i20.MatProgressBarModule }, { kind: "ngmodule", type: i21.MatProgressSpinnerModule }, { kind: "ngmodule", type: i22.MatTreeModule }, { kind: "ngmodule", type: i23.MatExpansionModule }, { kind: "ngmodule", type: i24.MatDatepickerModule }, { kind: "ngmodule", type: i25.MatAutocompleteModule }, { kind: "ngmodule", type: i26.MatChipsModule }, { kind: "ngmodule", type: i27.MatGridListModule }, { kind: "ngmodule", type: i28.MatPaginatorModule }, { kind: "ngmodule", type: i29.MatSliderModule }, { kind: "ngmodule", type: i1$1.TranslateModule }, { kind: "ngmodule", type: i30.ReactiveFormsModule }, { kind: "directive", type: i30.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i30.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: i31.CommonModule }, { kind: "ngmodule", type: i32.DragDropModule }, { kind: "component", type: ValueInputBooleanComponent, selector: "app-value-input-boolean", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputColorComponent, selector: "app-value-input-color", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputDateComponent, selector: "app-value-input-date", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputEnumComponent, selector: "app-value-input-enum", inputs: ["options", "name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputHexadecimalComponent, selector: "app-value-input-hexadecimal", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLinkComponent, selector: "app-value-input-link", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputLocationComponent, selector: "app-value-input-location", inputs: ["validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputNumericComponent, selector: "app-value-input-numeric", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputStringComponent, selector: "app-value-input-string", inputs: ["name", "validators", "showErrorInTooltip"] }, { kind: "component", type: ValueInputVectorComponent, selector: "app-value-input-vector", inputs: ["options", "name", "showErrorInTooltip", "validators"] }, { kind: "component", type: ValueInputDurationComponent, selector: "app-value-input-duration", inputs: ["name", "validators", "showErrorInTooltip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ValueInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input', imports: [shared, ValueInputBooleanComponent, ValueInputColorComponent, ValueInputDateComponent, ValueInputEnumComponent, ValueInputHexadecimalComponent, ValueInputLinkComponent, ValueInputLocationComponent, ValueInputNumericComponent, ValueInputStringComponent, ValueInputVectorComponent, ValueInputDurationComponent], providers: [
                         {