@wolkabout/commons 0.3.7 → 0.4.1

package/fesm2022/wolkabout-commons.mjs

@@ -115,8 +115,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.13", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.13", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
             MatCheckboxModule,
             MatToolbarModule,
             MatMenuModule,
@@ -183,7 +183,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.13", ngImport: i0, type: SharedModule, imports: [MatButtonModule,
             MatCheckboxModule,
             MatToolbarModule,
             MatMenuModule,
@@ -245,7 +245,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.13", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: shared,
@@ -413,10 +413,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.13", ngImport: i0, type: AuthenticationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: AuthenticationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -455,10 +455,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.13", ngImport: i0, type: PermissionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: PermissionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -550,10 +550,10 @@ 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.13", ngImport: i0, type: AssetManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: AssetManager, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -566,10 +566,10 @@ class IconRegistryService {
     registerIcon(name, path) {
         this.matIconRegistry.addSvgIcon(name, this.domSanitizer.bypassSecurityTrustResourceUrl(path));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconRegistryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -618,10 +618,10 @@ class FeatureRegistry {
     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.13", ngImport: i0, type: FeatureRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: FeatureRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -666,10 +666,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.13", ngImport: i0, type: MapsLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: MapsLoaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -702,10 +702,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.13", 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.13", 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.13", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.MatSnackBar }, { type: i1$1.TranslateService }] });
@@ -1512,10 +1512,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.13", ngImport: i0, type: TenantPropertiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: TenantPropertiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2465,10 +2465,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.13", ngImport: i0, type: ThemeService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2509,10 +2509,10 @@ class FullscreenService {
         this._fullScreenEnabled$.next(!this._fullScreenEnabled$.value);
         this._fullScreenEnabled$.value ? document.documentElement.requestFullscreen() : document.exitFullscreen();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FullscreenService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FullscreenService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FullscreenService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FullscreenService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FullscreenService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FullscreenService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2550,10 +2550,10 @@ class NavigationPersistenceService {
         this.registeredKeys.forEach(key => localStorage.removeItem(key));
         this.registeredKeys.clear();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavigationPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavigationPersistenceService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NavigationPersistenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NavigationPersistenceService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NavigationPersistenceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NavigationPersistenceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2573,10 +2573,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.13", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appLoadingIndicator]',
@@ -2681,8 +2681,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)", "blur": "onBlur()", "focus": "onFocus()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", type: LocalizedNumericInputDirective, isStandalone: true, selector: "input[wolkaboutLocalizedNumericInput]", host: { listeners: { "input": "input($event.target.value)", "blur": "onBlur()", "focus": "onFocus()" } }, providers: [
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: LocalizedNumericInputDirective },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -2691,7 +2691,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.13", ngImport: i0, type: LocalizedNumericInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[wolkaboutLocalizedNumericInput]',
@@ -2804,10 +2804,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$3.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.13", ngImport: i0, type: MessageTooltipDirective, deps: [{ token: i1$3.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.13", 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.13", ngImport: i0, type: MessageTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appMessageTooltip]',
@@ -2847,10 +2847,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.13", ngImport: i0, type: OverflowClassDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: OverflowClassDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowClass]',
@@ -2883,10 +2883,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.13", 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.13", 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.13", ngImport: i0, type: RequiresAllGlobalOrAssetPermissionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresAllGlobalOrAssetPermissions]'
@@ -2918,10 +2918,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.13", 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.13", 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.13", ngImport: i0, type: RequiresAllPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresAllPermissions]'
@@ -2953,10 +2953,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.13", 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.13", 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.13", ngImport: i0, type: RequiresGlobalOrAsserPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresGlobalOrAssetPermission]'
@@ -2990,10 +2990,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.13", 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.13", 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.13", ngImport: i0, type: RequiresPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appRequiresPermission]'
@@ -3024,10 +3024,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.13", 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.13", 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.13", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appScrollIntoView]',
@@ -3071,10 +3071,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.13", ngImport: i0, type: DurationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: DurationPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'duration',
@@ -3106,10 +3106,10 @@ class LocalizedNumberPipe {
         };
         return new Intl.NumberFormat(defaultedLocale, options).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.13", ngImport: i0, type: LocalizedNumberPipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: LocalizedNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'localizedNumber',
@@ -3136,10 +3136,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.13", ngImport: i0, type: SimpleDateTimePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: SimpleDateTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleDateTime',
@@ -3163,10 +3163,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.13", ngImport: i0, type: SimpleDatePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: SimpleDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleDate',
@@ -3190,10 +3190,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.13", ngImport: i0, type: SimpleTimePipe, deps: [{ token: TenantPropertiesService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: SimpleTimePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'simpleTime',
@@ -3223,10 +3223,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.13", ngImport: i0, type: SortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.13", 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.13", ngImport: i0, type: SortPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sort',
@@ -3473,10 +3473,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.13", ngImport: i0, type: MissingTranslationHelper, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", 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.13", ngImport: i0, type: MissingTranslationHelper, decorators: [{
             type: Injectable
         }] });
 
@@ -4225,7 +4225,7 @@ class AutocompleteComponent {
     autocompleteTrigger;
     Object = Object;
     disabled = false;
-    hasValue = signal(false, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    hasValue = signal(false, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     formControl = new FormControl('', { nonNullable: true });
     data$ = this.formControl.valueChanges.pipe(startWith(''), // Autoload
     filter((value) => typeof value === 'string'), switchMap((value) => this.dataFunction(value)), shareReplay(1));
@@ -4307,12 +4307,12 @@ 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: i5.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", hideRequiredMarker: "hideRequiredMarker" }, queries: [{ propertyName: "dropdownTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<ng-container>\n  <div class=\"w-full\">\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\n      <mat-label>\n        <span>{{ name | translate }}</span>\n      </mat-label>\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\n      @if (!disabled) {\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\n        </button>\n      }\n      @for (error of getErrors(); track error) {\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\n    @if (loading$ | async) {\n      <mat-option>\n        <div>{{ 'Loading...' }}</div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </mat-option>\n    } @else {\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</ng-container>\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: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.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: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { name: "name", dataFunction: "dataFunction", displayFunction: "displayFunction", outlineBackground: "outlineBackground", hideRequiredMarker: "hideRequiredMarker" }, 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\" [hideRequiredMarker]=\"hideRequiredMarker\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\r\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      @if (!disabled) {\r\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\r\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\r\n        </button>\r\n      }\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: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.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: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete', imports: [SharedModule], template: "<ng-container>\n  <div class=\"w-full\">\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\n      <mat-label>\n        <span>{{ name | translate }}</span>\n      </mat-label>\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\n      @if (!disabled) {\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\n        </button>\n      }\n      @for (error of getErrors(); track error) {\n        <mat-error>{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n  <mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" [displayWith]=\"displayFunction\">\n    @if (loading$ | async) {\n      <mat-option>\n        <div>{{ 'Loading...' }}</div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </mat-option>\n    } @else {\n      <mat-option *ngFor=\"let item of data$ | async; let i = index\" [value]=\"item\" class=\"autocomplete-option\" [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n        <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\" [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n        <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</ng-container>\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"] }]
+            args: [{ selector: 'app-autocomplete', imports: [SharedModule], template: "<ng-container>\r\n  <div class=\"w-full\">\r\n    <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\" [hideRequiredMarker]=\"hideRequiredMarker\">\r\n      <mat-label>\r\n        <span>{{ name | translate }}</span>\r\n      </mat-label>\r\n      <input matInput #autoCompleteInput [ngClass]=\"{'cursor-text' : !hasValue(), 'cursor-default' : hasValue()}\" [formControl]=\"formControl\" [readonly]=\"hasValue()\" [placeholder]=\"name | translate\" autocomplete=\"off\"\r\n             [matAutocomplete]=\"auto\" (blur)=\"onTouched($event)\" [attr.data-test]=\"name + 'SearchInput'\"/>\r\n      @if (!disabled) {\r\n        <button matSuffix mat-icon-button *ngIf=\"formControl.value\" (click)=\"clear()\" type='button'>\r\n          <mat-icon class=\"text-mat-sys-on-error-container\">clear</mat-icon>\r\n        </button>\r\n      }\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: i5.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -4423,12 +4423,12 @@ 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: i5.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}\">\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\n    <mat-label>\n      <span>{{ name | translate }}</span>\n    </mat-label>\n    <mat-chip-grid #chipGrid>\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\n                    [removable]=\"!disabled\"\n                    (removed)=\"removeItem(i, items)\">\n        {{ displayFunction(item) }}\n        <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n      </mat-chip-row>\n      <input matInput\n             #autoCompleteInput\n             [placeholder]=\"name | translate\"\n             autocomplete=\"off\"\n             [formControl]=\"formControl\"\n             [matAutocomplete]=\"auto\"\n             [matChipInputFor]=\"chipGrid\"\n             (blur)=\"onTouched($event)\"/>\n    </mat-chip-grid>\n  </mat-form-field>\n\n  @for (error of getErrors(); track error) {\n    @if (!formControl.untouched && !(items$ | async)?.length) {\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n    }\n  }\n</div>\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\n  @if (loading$ | async) {\n    <mat-option>\n      <div>{{ 'Loading...' }}</div>\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </mat-option>\n  } @else {\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\n        <mat-option\n          [value]=\"item\"\n          class=\"autocomplete-option\"\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n        </mat-option>\n      }\n    </ng-container>\n  }\n</mat-autocomplete>\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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.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: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AutocompleteChipsComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 class=\"text-mat-sys-on-error-container\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8.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: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i8$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i8$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: AutocompleteChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-autocomplete-chips', imports: [SharedModule], template: "<div class=\"w-full\" [ngClass]=\"{'required' : !!getErrors().length && !formControl.untouched && !(items$ | async)?.length}\">\n  <mat-form-field [ngClass]=\"{ 'outline-background': outlineBackground }\" class=\"w-full\">\n    <mat-label>\n      <span>{{ name | translate }}</span>\n    </mat-label>\n    <mat-chip-grid #chipGrid>\n      <mat-chip-row *ngFor=\"let item of items$ | async as items; let i = index\"\n                    [removable]=\"!disabled\"\n                    (removed)=\"removeItem(i, items)\">\n        {{ displayFunction(item) }}\n        <mat-icon class=\"text-mat-sys-on-error-container\" matChipRemove *ngIf=\"!disabled\">cancel</mat-icon>\n      </mat-chip-row>\n      <input matInput\n             #autoCompleteInput\n             [placeholder]=\"name | translate\"\n             autocomplete=\"off\"\n             [formControl]=\"formControl\"\n             [matAutocomplete]=\"auto\"\n             [matChipInputFor]=\"chipGrid\"\n             (blur)=\"onTouched($event)\"/>\n    </mat-chip-grid>\n  </mat-form-field>\n\n  @for (error of getErrors(); track error) {\n    @if (!formControl.untouched && !(items$ | async)?.length) {\n      <mat-error class=\"ml-4 mt-[-2px] text-xs\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n    }\n  }\n</div>\n<mat-autocomplete #auto=\"matAutocomplete\" [class]=\"'autocomplete-panel'\" (optionSelected)=\"addItem($event)\">\n  @if (loading$ | async) {\n    <mat-option>\n      <div>{{ 'Loading...' }}</div>\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </mat-option>\n  } @else {\n    <ng-container *ngFor=\"let item of data$ | async; let i = index\">\n      @if (shouldShowOption(item, (items$ | async) ?? [])) {\n        <mat-option\n          [value]=\"item\"\n          class=\"autocomplete-option\"\n          [attr.data-test]=\"name + 'SearchItem' + (i + 1)\">\n          <ng-container [ngTemplateOutlet]=\"dropdownTemplate ? dropdownTemplate : defaultTemplate\"\n                        [ngTemplateOutletContext]=\"{ item }\"></ng-container>\n          <ng-template #defaultTemplate>{{ displayFunction(item) }}</ng-template>\n        </mat-option>\n      }\n    </ng-container>\n  }\n</mat-autocomplete>\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"] }]
+            args: [{ selector: 'app-autocomplete-chips', imports: [SharedModule], 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 class=\"text-mat-sys-on-error-container\" 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: i5.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -4456,9 +4456,9 @@ class BasicTimeSeriesGraphComponent {
     timeFormatter;
     themeService = inject(ThemeService);
     chartTheme = toSignal(this.themeService.chartTheme$);
-    timeSeries = input.required(...(ngDevMode ? [{ debugName: "timeSeries" }] : []));
-    desiredTimeFrame = input(...(ngDevMode ? [undefined, { debugName: "desiredTimeFrame" }] : []));
-    primaryColor = input(...(ngDevMode ? [undefined, { debugName: "primaryColor" }] : []));
+    timeSeries = input.required(...(ngDevMode ? [{ debugName: "timeSeries" }] : /* istanbul ignore next */ []));
+    desiredTimeFrame = input(...(ngDevMode ? [undefined, { debugName: "desiredTimeFrame" }] : /* istanbul ignore next */ []));
+    primaryColor = input(...(ngDevMode ? [undefined, { debugName: "primaryColor" }] : /* istanbul ignore next */ []));
     graphOptions = computed(() => {
         const timeSeries = this.timeSeries();
         const dataZoom = untracked(this.dataZoom);
@@ -4482,14 +4482,14 @@ class BasicTimeSeriesGraphComponent {
                 trigger: 'axis',
                 formatter: (params) => {
                     const [timestamp, data] = params[0].data;
-                    return `
-            <div class="flex flex-col gap-y-2">
-                <div>${this.timeFormatter.transform(timestamp)}</div>
-                <div class="flex flex-row gap-x-2 items-center">
-                    <div class="h-2 w-2 bg-mat-sys-primary rounded-3xl">&nbsp;</div>
-                    <div>${timeSeries.name}:</div>
-                    <div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
-                </div>
+                    return `
+            <div class="flex flex-col gap-y-2">
+                <div>${this.timeFormatter.transform(timestamp)}</div>
+                <div class="flex flex-row gap-x-2 items-center">
+                    <div class="h-2 w-2 bg-mat-sys-primary rounded-3xl">&nbsp;</div>
+                    <div>${timeSeries.name}:</div>
+                    <div><span class="font-bold">${data}</span><span>${timeSeries.unitSymbol ?? ''}</span></div>
+                </div>
             </div>`;
                 },
                 axisPointer: {
@@ -4513,8 +4513,8 @@ class BasicTimeSeriesGraphComponent {
                 }
             ]
         };
-    }, ...(ngDevMode ? [{ debugName: "graphOptions" }] : []));
-    dataZoom = signal(null, ...(ngDevMode ? [{ debugName: "dataZoom" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "graphOptions" }] : /* istanbul ignore next */ []));
+    dataZoom = signal(null, ...(ngDevMode ? [{ debugName: "dataZoom" }] : /* istanbul ignore next */ []));
     constructor(timeFormatter) {
         this.timeFormatter = timeFormatter;
     }
@@ -4524,22 +4524,22 @@ 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>\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.13", ngImport: i0, type: BasicTimeSeriesGraphComponent, deps: [{ token: SimpleDateTimePipe }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.13", 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>\n" }]
+            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 }] }] } });
 
 class CardLabeledValueComponent {
     permissionService = inject(PermissionsService);
-    permissions = input(...(ngDevMode ? [undefined, { debugName: "permissions" }] : []));
-    useAssetPermissions = input(false, ...(ngDevMode ? [{ debugName: "useAssetPermissions" }] : []));
-    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
-    icon = input('edit', ...(ngDevMode ? [{ debugName: "icon" }] : []));
-    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
-    editFunction = input(...(ngDevMode ? [undefined, { debugName: "editFunction" }] : []));
+    permissions = input(...(ngDevMode ? [undefined, { debugName: "permissions" }] : /* istanbul ignore next */ []));
+    useAssetPermissions = input(false, ...(ngDevMode ? [{ debugName: "useAssetPermissions" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input('edit', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    editFunction = input(...(ngDevMode ? [undefined, { debugName: "editFunction" }] : /* istanbul ignore next */ []));
     permissionFunction = computed(() => {
         const requiredPermissions = this.permissions();
         if (!requiredPermissions) {
@@ -4548,14 +4548,14 @@ class CardLabeledValueComponent {
         return this.useAssetPermissions()
             ? this.permissionService.hasAnyGlobalOrAssetPermission(requiredPermissions)
             : this.permissionService.hasAnyPermission(requiredPermissions);
-    }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "permissionFunction" }] : /* istanbul ignore next */ []));
     hasPermission = toSignal(toObservable(this.permissionFunction).pipe(switchMap(obs => obs)), { initialValue: false });
-    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\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n  [matTooltip]=\"tooltip() | translate\"\n  matTooltipPosition=\"above\"\n>\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n      <div class=\"text-mat-sys-primary flex items-center grow\">\n        <ng-content/>\n      </div>\n    </div>\n    @if (editFunction() && hasPermission()) {\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n        <mat-icon>{{ icon() }}</mat-icon>\n      </button>\n    }\n  </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CardLabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.13", ngImport: i0, type: CardLabeledValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-card-labeled-value', imports: [SharedModule], template: "<mat-card\n  [ngClass]=\"{'cursor-pointer hover:bg-hover-color': editFunction() && hasPermission() }\"\n  [matTooltipDisabled]=\"!hasPermission()\" (click)=\"editFunction() && hasPermission() ? editFunction()!() : null\"\n  [matTooltip]=\"tooltip() | translate\"\n  matTooltipPosition=\"above\"\n>\n  <div class=\"flex items-center justify-between p-4 gap-x-4 h-full\">\n    <div class=\"flex flex-col w-full h-full overflow-hidden\">\n      <div class=\"font-semibold shrink-0\">{{ label() | translate }}</div>\n      <div class=\"text-mat-sys-primary flex items-center grow\">\n        <ng-content/>\n      </div>\n    </div>\n    @if (editFunction() && hasPermission()) {\n      <button mat-icon-button [ngClass]=\"icon() === 'delete' ? 'text-mat-sys-on-error-container' : 'text-mat-sys-primary'\" (click)=\"editFunction()!(); $event.stopPropagation()\">\n        <mat-icon>{{ icon() }}</mat-icon>\n      </button>\n    }\n  </div>\n</mat-card>\n", styles: ["mat-card{height:100%;min-height:5.5rem}\n"] }]
+            args: [{ selector: 'app-card-labeled-value', imports: [SharedModule], 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 }] }] } });
 
 class ConfirmationDialogComponent {
@@ -4568,12 +4568,12 @@ 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: i1$5.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\">\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\n  <div class=\"flex flex-col flex-auto gap-y-4\">\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\n    </div>\n  </div>\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n    <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\n    </button>\n  </div>\n</div>\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.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: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", 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]=\"{'destructive-flat-button': 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: SharedModule }, { kind: "component", type: i1$4.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: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.13", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-confirmation-dialog', imports: [SharedModule], template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n  <div class=\"text-lg\">{{ 'COMMON.CONFIRMATION_DIALOG_TITLE' | translate }}</div>\n  <div class=\"flex flex-col flex-auto gap-y-4\">\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n      <div class=\"whitespace-pre-line\">{{ data.message | translate:data.parameters }}</div>\n    </div>\n  </div>\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n    <button [ngClass]=\"{'destructive-flat-button': data.deleteDialog}\" mat-flat-button\n            (click)=\"confirm()\">{{ data.actionButtonLabel ? (data.actionButtonLabel! | translate) : (data.deleteDialog ? ('COMMON.DELETE' | translate) : ('COMMON.CONFIRMATION_DIALOG_CONFIRM' | translate)) }}\n    </button>\n  </div>\n</div>\n", styles: [".content{max-width:var(--medium-dialog-width)}\n"] }]
+            args: [{ selector: 'app-confirmation-dialog', imports: [SharedModule], 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]=\"{'destructive-flat-button': 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: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -4608,12 +4608,12 @@ class PeriodErrorStateMatcher {
 class DateRangeInputComponent {
     destroyRef;
     tenantPropertiesService;
-    availableDateOptions = input([RelativeTimePeriod.TODAY, RelativeTimePeriod.YESTERDAY, RelativeTimePeriod.LAST_7_DAYS, RelativeTimePeriod.LAST_30_DAYS], ...(ngDevMode ? [{ debugName: "availableDateOptions" }] : []));
-    translationPrefix = input(...(ngDevMode ? [undefined, { debugName: "translationPrefix" }] : []));
-    allowCustomTimespan = input(true, ...(ngDevMode ? [{ debugName: "allowCustomTimespan" }] : []));
-    isInForm = input(true, ...(ngDevMode ? [{ debugName: "isInForm" }] : []));
-    datePicker = viewChild('picker', ...(ngDevMode ? [{ debugName: "datePicker" }] : []));
-    validators = input([], ...(ngDevMode ? [{ debugName: "validators" }] : []));
+    availableDateOptions = input([RelativeTimePeriod.TODAY, RelativeTimePeriod.YESTERDAY, RelativeTimePeriod.LAST_7_DAYS, RelativeTimePeriod.LAST_30_DAYS], ...(ngDevMode ? [{ debugName: "availableDateOptions" }] : /* istanbul ignore next */ []));
+    translationPrefix = input(...(ngDevMode ? [undefined, { debugName: "translationPrefix" }] : /* istanbul ignore next */ []));
+    allowCustomTimespan = input(true, ...(ngDevMode ? [{ debugName: "allowCustomTimespan" }] : /* istanbul ignore next */ []));
+    isInForm = input(true, ...(ngDevMode ? [{ debugName: "isInForm" }] : /* istanbul ignore next */ []));
+    datePicker = viewChild('picker', ...(ngDevMode ? [{ debugName: "datePicker" }] : /* istanbul ignore next */ []));
+    validators = input([], ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
     validateForm = (form) => {
         const { periodOption, from, to } = form.value;
         if (periodOption === CUSTOM_PERIOD) {
@@ -4722,8 +4722,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.13", 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.13", 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),
@@ -4734,9 +4734,9 @@ class DateRangeInputComponent {
                 useExisting: forwardRef(() => DateRangeInputComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n  @if (isInForm()) {\n    <mat-form-field class=\"flex\">\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n        <mat-error>\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n        </mat-error>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n      }\n    </mat-form-field>\n  } @else {\n    <div class=\"flex\">\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SimpleDatePipe, name: "simpleDate" }] });
+        ], 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.13", ngImport: i0, type: DateRangeInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-range-input', imports: [SharedModule, SimpleDatePipe], providers: [
                         {
@@ -4749,16 +4749,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => DateRangeInputComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"w-full flex flex-col\" [formGroup]=\"dateRangeForm\">\n  @if (isInForm()) {\n    <mat-form-field class=\"flex\">\n      <mat-label>{{ (translationPrefix() ? translationPrefix() + '_LABEL' : 'COMMON.DATE_RANGE_LABEL') | translate }}</mat-label>\n      <mat-select (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('required')) {\n        <mat-error>\n          {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n        </mat-error>\n      }\n      @if (dateRangeForm.touched && dateRangeForm.hasError('incompletePeriod')) {\n        {{ 'COMMON.ERROR_VALIDATION_REQUIRED' | translate }}\n      }\n    </mat-form-field>\n  } @else {\n    <div class=\"flex\">\n      <mat-select class=\"date-range-flat-picker-select\" (blur)=\"onTouched($event)\" formControlName=\"periodOption\" (selectionChange)=\"onTimeRangeChanged($event)\" [errorStateMatcher]=\"periodErrorStateMatcher\" panelClass=\"date-range-panel\">\n        @for (periodOption of availableDateOptions(); track $index) {\n          <mat-option [value]=\"periodOption\">{{ 'COMMON.RELATIVE_TIME_PERIOD_' + periodOption | translate }}</mat-option>\n        }\n        @if (allowCustomTimespan()) {\n          <mat-option [value]=\"CUSTOM_PERIOD\">\n            <div class=\"flex flex-row gap-x-4\">\n              @if (dateRangeForm.get('from')?.value) {\n                <div class=\"flex flex-row\">\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('from')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                  <span class=\"whitespace-nowrap h-fit\">&nbsp;-&nbsp;</span>\n                  <span class=\"whitespace-nowrap h-fit\">{{ dateRangeForm.get('to')?.value?.toMillis() | simpleDate : undefined: false }}</span>\n                </div>\n              } @else {\n                <div>{{ 'COMMON.RELATIVE_TIME_PERIOD_CUSTOM' | translate }}</div>\n              }\n            </div>\n          </mat-option>\n        }\n      </mat-select>\n      <mat-date-range-input [rangePicker]=\"picker\" style=\"visibility: hidden; width: 0; height: 0;\">\n        <input (blur)=\"onTouched($event)\" matStartDate formControlName=\"from\">\n        <input (blur)=\"onTouched($event)\" matEndDate formControlName=\"to\"/>\n      </mat-date-range-input>\n      <mat-date-range-picker #picker (closed)=\"emitValueChange()\"></mat-date-range-picker>\n      @if (dateRangeForm.get('periodOption')?.value === CUSTOM_PERIOD) {\n        <mat-datepicker-toggle matSuffix [for]=\"picker\" class=\"date-range-flat-picker-toggle\"></mat-datepicker-toggle>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: TenantPropertiesService }], propDecorators: { availableDateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDateOptions", required: false }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], allowCustomTimespan: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomTimespan", required: false }] }], isInForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInForm", required: false }] }], datePicker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }] } });
 
 class DateTimeFormFieldComponent {
     translate;
     dateLabel;
     timeLabel;
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    timezone = input(null, ...(ngDevMode ? [{ debugName: "timezone" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    timezone = input(null, ...(ngDevMode ? [{ debugName: "timezone" }] : /* istanbul ignore next */ []));
     tenantProperties = inject(TenantPropertiesService);
     formGroup = new FormGroup({
         date: new FormControl(null),
@@ -4853,8 +4853,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 }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DateTimeFormFieldComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateTimeFormFieldComponent),
@@ -4865,9 +4865,9 @@ class DateTimeFormFieldComponent {
                 useExisting: forwardRef(() => DateTimeFormFieldComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-4\">\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @for (error of getDateErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n      @for (error of getTimeErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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" }] });
+        ], 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: DateTimeFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-date-time-form-field', imports: [SharedModule, NgxMatTimepickerDirective, NgxMatTimepickerComponent], providers: [
                         {
@@ -4880,7 +4880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => DateTimeFormFieldComponent),
                             multi: true,
                         }
-                    ], template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-4\">\n    <mat-form-field [matTooltip]=\"getDateErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (dateLabel ?? 'COMMON.DATE') | translate }}</mat-label>\n      <input [matDatepicker]=\"picker\" formControlName=\"date\" matInput>\n      <mat-datepicker-toggle [for]=\"picker\" matIconSuffix></mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n      @for (error of getDateErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n    <mat-form-field [matTooltip]=\"getTimeErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n      <mat-label>{{ (timeLabel ?? 'COMMON.TIME') | translate }}</mat-label>\n      <input [format]=\"24\" [ngxMatTimepicker]=\"pickerA\" formControlName=\"time\" matInput (input)=\"onInputChange($event)\"/>\n      <mat-icon (click)=\"pickerA.open()\" matSuffix> watch_later</mat-icon>\n      <ngx-mat-timepicker #pickerA></ngx-mat-timepicker>\n      @for (error of getTimeErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n      }\n    </mat-form-field>\n  </div>\n</ng-container>\n" }]
+                    ], 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { dateLabel: [{
                 type: Input
             }], timeLabel: [{
@@ -4894,8 +4894,8 @@ class DragDropFileUploadComponent {
     accept = '.*';
     multiple = false;
     prompt = 'COMMON.DRAG_DROP_PROMPT';
-    highlight = signal(false, ...(ngDevMode ? [{ debugName: "highlight" }] : []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    highlight = signal(false, ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     files$ = new BehaviorSubject(null);
     TRUNCATE_NAME_LIMIT = 24;
     destroy$ = new Subject();
@@ -5008,12 +5008,12 @@ 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: i5.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() }\">\n  @if (files$ | async; as files) {\n    @if (files.length > 0) {\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\n        @for (file of files; track $index) {\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\n            <mat-icon>description</mat-icon>\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\n            <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\n          </div>\n        }\n      </div>\n    } @else {\n      <span>{{ prompt | translate }}</span>\n    }\n  } @else {\n    <span>{{ prompt | translate }}</span>\n  }\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\n  }\n</div>\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\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: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DragDropFileUploadComponent, deps: [{ token: i5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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-mat-sys-on-error-container\" (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: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: DragDropFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'application-drag-drop-file-upload', imports: [SharedModule], template: "<div #dragDropZone class=\"drag-drop-zone flex flex-col items-center justify-center\" [ngClass]=\"{ highlight: highlight(), disabled: disabled() }\">\n  @if (files$ | async; as files) {\n    @if (files.length > 0) {\n      <div class=\"flex flex-col flex-wrap items-center justify-center\">\n        @for (file of files; track $index) {\n          <div class=\"name-wrapper flex flex-row items-center justify-center gap-2\">\n            <mat-icon>description</mat-icon>\n            <span [matTooltipDisabled]=\"file.name.length < TRUNCATE_NAME_LIMIT\" [matTooltip]=\"file.name\">{{ getFileName(file.name) }}</span>\n            <mat-icon class=\"delete-button text-mat-sys-on-error-container\" (click)=\"deleteFile($event, $index)\">delete</mat-icon>\n          </div>\n        }\n      </div>\n    } @else {\n      <span>{{ prompt | translate }}</span>\n    }\n  } @else {\n    <span>{{ prompt | translate }}</span>\n  }\n  @if (controlDir.control?.errors && controlDir.control?.touched) {\n    <mat-error>{{ getErrorForTranslation(controlDir.control?.errors).key | translate: getErrorForTranslation(controlDir.control?.errors).params }}</mat-error>\n  }\n</div>\n<input #fileInput type=\"file\" [attr.multiple]=\"multiple ? true : null\" [attr.accept]=\"accept === '.*' ? '*' : accept\" (change)=\"onFileAdded($event)\"/>\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"] }]
+            args: [{ selector: 'application-drag-drop-file-upload', imports: [SharedModule], 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-mat-sys-on-error-container\" (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: i5.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -5033,18 +5033,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class ZoomControlsComponent {
-    zoomPercentage = input.required(...(ngDevMode ? [{ debugName: "zoomPercentage" }] : []));
-    canZoomIn = input.required(...(ngDevMode ? [{ debugName: "canZoomIn" }] : []));
-    canZoomOut = input.required(...(ngDevMode ? [{ debugName: "canZoomOut" }] : []));
+    zoomPercentage = input.required(...(ngDevMode ? [{ debugName: "zoomPercentage" }] : /* istanbul ignore next */ []));
+    canZoomIn = input.required(...(ngDevMode ? [{ debugName: "canZoomIn" }] : /* istanbul ignore next */ []));
+    canZoomOut = input.required(...(ngDevMode ? [{ debugName: "canZoomOut" }] : /* istanbul ignore next */ []));
     zoomIn = output();
     zoomOut = output();
     reset = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ZoomControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ZoomControlsComponent, isStandalone: true, selector: "app-zoom-controls", inputs: { zoomPercentage: { classPropertyName: "zoomPercentage", publicName: "zoomPercentage", isSignal: true, isRequired: true, transformFunction: null }, canZoomIn: { classPropertyName: "canZoomIn", publicName: "canZoomIn", isSignal: true, isRequired: true, transformFunction: null }, canZoomOut: { classPropertyName: "canZoomOut", publicName: "canZoomOut", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", reset: "reset" }, ngImport: i0, template: "<div class=\"control-group\">\n  <button class=\"icon-btn\"\n          type=\"button\"\n          (click)=\"zoomOut.emit()\"\n          [disabled]=\"!canZoomOut()\"\n          [class.disabled]=\"!canZoomOut()\"\n          [matTooltip]=\"'COMMON.ZOOM_OUT' | translate\">\n    <mat-icon>zoom_out</mat-icon>\n  </button>\n  <span class=\"zoom-level\"\n        (click)=\"reset.emit()\"\n        [matTooltip]=\"'COMMON.ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\n  <button class=\"icon-btn\"\n          type=\"button\"\n          (click)=\"zoomIn.emit()\"\n          [disabled]=\"!canZoomIn()\"\n          [class.disabled]=\"!canZoomIn()\"\n          [matTooltip]=\"'COMMON.ZOOM_IN' | translate\">\n    <mat-icon>zoom_in</mat-icon>\n  </button>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ZoomControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: ZoomControlsComponent, isStandalone: true, selector: "app-zoom-controls", inputs: { zoomPercentage: { classPropertyName: "zoomPercentage", publicName: "zoomPercentage", isSignal: true, isRequired: true, transformFunction: null }, canZoomIn: { classPropertyName: "canZoomIn", publicName: "canZoomIn", isSignal: true, isRequired: true, transformFunction: null }, canZoomOut: { classPropertyName: "canZoomOut", publicName: "canZoomOut", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { zoomIn: "zoomIn", zoomOut: "zoomOut", reset: "reset" }, ngImport: i0, template: "<div class=\"control-group\">\r\n  <button class=\"icon-btn\"\r\n          type=\"button\"\r\n          (click)=\"zoomOut.emit()\"\r\n          [disabled]=\"!canZoomOut()\"\r\n          [class.disabled]=\"!canZoomOut()\"\r\n          [matTooltip]=\"'COMMON.ZOOM_OUT' | translate\">\r\n    <mat-icon>zoom_out</mat-icon>\r\n  </button>\r\n  <span class=\"zoom-level\"\r\n        (click)=\"reset.emit()\"\r\n        [matTooltip]=\"'COMMON.ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\r\n  <button class=\"icon-btn\"\r\n          type=\"button\"\r\n          (click)=\"zoomIn.emit()\"\r\n          [disabled]=\"!canZoomIn()\"\r\n          [class.disabled]=\"!canZoomIn()\"\r\n          [matTooltip]=\"'COMMON.ZOOM_IN' | translate\">\r\n    <mat-icon>zoom_in</mat-icon>\r\n  </button>\r\n</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ZoomControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ZoomControlsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-zoom-controls', imports: [SharedModule], template: "<div class=\"control-group\">\n  <button class=\"icon-btn\"\n          type=\"button\"\n          (click)=\"zoomOut.emit()\"\n          [disabled]=\"!canZoomOut()\"\n          [class.disabled]=\"!canZoomOut()\"\n          [matTooltip]=\"'COMMON.ZOOM_OUT' | translate\">\n    <mat-icon>zoom_out</mat-icon>\n  </button>\n  <span class=\"zoom-level\"\n        (click)=\"reset.emit()\"\n        [matTooltip]=\"'COMMON.ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\n  <button class=\"icon-btn\"\n          type=\"button\"\n          (click)=\"zoomIn.emit()\"\n          [disabled]=\"!canZoomIn()\"\n          [class.disabled]=\"!canZoomIn()\"\n          [matTooltip]=\"'COMMON.ZOOM_IN' | translate\">\n    <mat-icon>zoom_in</mat-icon>\n  </button>\n</div>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"] }]
+            args: [{ selector: 'app-zoom-controls', imports: [SharedModule], template: "<div class=\"control-group\">\r\n  <button class=\"icon-btn\"\r\n          type=\"button\"\r\n          (click)=\"zoomOut.emit()\"\r\n          [disabled]=\"!canZoomOut()\"\r\n          [class.disabled]=\"!canZoomOut()\"\r\n          [matTooltip]=\"'COMMON.ZOOM_OUT' | translate\">\r\n    <mat-icon>zoom_out</mat-icon>\r\n  </button>\r\n  <span class=\"zoom-level\"\r\n        (click)=\"reset.emit()\"\r\n        [matTooltip]=\"'COMMON.ZOOM_RESET' | translate\">{{ zoomPercentage() }}%</span>\r\n  <button class=\"icon-btn\"\r\n          type=\"button\"\r\n          (click)=\"zoomIn.emit()\"\r\n          [disabled]=\"!canZoomIn()\"\r\n          [class.disabled]=\"!canZoomIn()\"\r\n          [matTooltip]=\"'COMMON.ZOOM_IN' | translate\">\r\n    <mat-icon>zoom_in</mat-icon>\r\n  </button>\r\n</div>\r\n<ng-content></ng-content>\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:12px;background-color:transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%);z-index:1;padding:12px 20px 16px}.control-group{display:flex;align-items:center;gap:4px;background:var(--mat-sys-surface-container);border:1px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000001f}.zoom-level{min-width:44px;text-align:center;color:var(--mat-sys-on-surface);font-size:13px;font-weight:500;cursor:pointer;padding:4px;border-radius:16px;transition:background-color .2s}.zoom-level:hover{background-color:var(--mat-sys-surface-container-high)}.icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;transition:all .2s ease}.icon-btn:hover:not(.disabled){background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface)}.icon-btn.disabled{opacity:.4;cursor:not-allowed}\n"] }]
         }], propDecorators: { zoomPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomPercentage", required: true }] }], canZoomIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "canZoomIn", required: true }] }], canZoomOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "canZoomOut", required: true }] }], zoomIn: [{ type: i0.Output, args: ["zoomIn"] }], zoomOut: [{ type: i0.Output, args: ["zoomOut"] }], reset: [{ type: i0.Output, args: ["reset"] }] } });
 
 class GoogleMapComponent {
@@ -5052,15 +5052,15 @@ class GoogleMapComponent {
     simpleDateTimePipe;
     ZOOM_BASE = 4;
     map = viewChild.required(GoogleMap);
-    googleMapId = input.required(...(ngDevMode ? [{ debugName: "googleMapId" }] : []));
-    darkTheme = input.required(...(ngDevMode ? [{ debugName: "darkTheme" }] : []));
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
-    pinColor = input.required(...(ngDevMode ? [{ debugName: "pinColor" }] : []));
+    googleMapId = input.required(...(ngDevMode ? [{ debugName: "googleMapId" }] : /* istanbul ignore next */ []));
+    darkTheme = input.required(...(ngDevMode ? [{ debugName: "darkTheme" }] : /* istanbul ignore next */ []));
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    pinColor = input.required(...(ngDevMode ? [{ debugName: "pinColor" }] : /* istanbul ignore next */ []));
     markerClicked = output();
-    zoom = signal(4, ...(ngDevMode ? [{ debugName: "zoom" }] : []));
-    canZoomIn = computed(() => this.zoom() < 22, ...(ngDevMode ? [{ debugName: "canZoomIn" }] : []));
-    canZoomOut = computed(() => this.zoom() > 2, ...(ngDevMode ? [{ debugName: "canZoomOut" }] : []));
-    zoomPercentage = computed(() => Math.round(this.zoom() / this.ZOOM_BASE * 100), ...(ngDevMode ? [{ debugName: "zoomPercentage" }] : []));
+    zoom = signal(4, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    canZoomIn = computed(() => this.zoom() < 22, ...(ngDevMode ? [{ debugName: "canZoomIn" }] : /* istanbul ignore next */ []));
+    canZoomOut = computed(() => this.zoom() > 2, ...(ngDevMode ? [{ debugName: "canZoomOut" }] : /* istanbul ignore next */ []));
+    zoomPercentage = computed(() => Math.round(this.zoom() / this.ZOOM_BASE * 100), ...(ngDevMode ? [{ debugName: "zoomPercentage" }] : /* istanbul ignore next */ []));
     mapOptions = computed(() => {
         return {
             mapId: this.googleMapId(),
@@ -5081,7 +5081,7 @@ class GoogleMapComponent {
             },
             disableDefaultUI: true
         };
-    }, ...(ngDevMode ? [{ debugName: "mapOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "mapOptions" }] : /* istanbul ignore next */ []));
     clusterer = computed(() => {
         const renderer = {
             render: ({ count, position }) => {
@@ -5100,11 +5100,11 @@ class GoogleMapComponent {
             }
         };
         return new MarkerClusterer({ markers: [], map: this.map().googleMap, renderer: renderer, algorithmOptions: { maxZoom: 21 } });
-    }, ...(ngDevMode ? [{ debugName: "clusterer" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "clusterer" }] : /* istanbul ignore next */ []));
     markers = computed(() => {
         const itemsWithJitter = this.addJitter(this.items());
         return itemsWithJitter.map((mapItem) => this.createMarker(mapItem));
-    }, ...(ngDevMode ? [{ debugName: "markers" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "markers" }] : /* istanbul ignore next */ []));
     mapBounds = new google.maps.LatLngBounds();
     constructor(translateService, simpleDateTimePipe) {
         this.translateService = translateService;
@@ -5159,13 +5159,13 @@ class GoogleMapComponent {
         const isOffset = mapItem.trueLat !== undefined && mapItem.trueLng !== undefined;
         const lastReading = isOffset ? mapItem.trueLat + ',' + mapItem.trueLng : mapItem.lat + ',' + mapItem.lng;
         const offsetNotification = isOffset ? `<span>${this.translateService.instant('DASHBOARDS.MAP_WIDGET_OFFSET_NOTIFICATION')}</span>` : '';
-        const infoWindowContent = `
-      <div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
-        <span class="font-bold">${mapItem.path}</span>
-        <span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
-        <span class="font-bold mt-4">${lastReading}</span>
-        ${offsetNotification}
-      </div>
+        const infoWindowContent = `
+      <div class="text-black flex flex-col gap-y-2 mt-4 !w-fit !h-fit select-none">
+        <span class="font-bold">${mapItem.path}</span>
+        <span>${lastReadingTime ? this.simpleDateTimePipe.transform(lastReadingTime) : ''}</span>
+        <span class="font-bold mt-4">${lastReading}</span>
+        ${offsetNotification}
+      </div>
     `;
         const infoWindow = new google.maps.InfoWindow({
             content: infoWindowContent,
@@ -5173,10 +5173,10 @@ class GoogleMapComponent {
             pixelOffset: new google.maps.Size(0, -4)
         });
         const pin = document.createElement('div');
-        pin.innerHTML = `
-      <svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
-        <path d="M10.453 14.016zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-.727 3.328t-1.758 3.516-2.039 3.07-1.711 2.273l-.75.797q-.281-.328-.75-.867t-1.688-2.156-2.133-3.141-1.664-3.445-.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"></path>
-      </svg>
+        pin.innerHTML = `
+      <svg width="48" height="48" viewBox="0 0 24 24" fill="${mapItem.color}">
+        <path d="M10.453 14.016zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-.727 3.328t-1.758 3.516-2.039 3.07-1.711 2.273l-.75.797q-.281-.328-.75-.867t-1.688-2.156-2.133-3.141-1.664-3.445-.75-3.375q0-2.906 2.039-4.945t4.945-2.039z"></path>
+      </svg>
     `;
         const marker = new google.maps.marker.AdvancedMarkerElement({
             position: { lat: +mapItem.lat, lng: +mapItem.lng },
@@ -5237,19 +5237,19 @@ 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\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\n  <app-zoom-controls\n    style=\"z-index: 200\"\n    [zoomPercentage]=\"zoomPercentage()\"\n    [canZoomIn]=\"canZoomIn()\"\n    [canZoomOut]=\"canZoomOut()\"\n    (zoomIn)=\"changeZoom(+1)\"\n    (zoomOut)=\"changeZoom(-1)\"\n    (reset)=\"fitToMarkers()\"\n  ></app-zoom-controls>\n</div>\n", styles: [".map-wrapper{position:relative;display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}\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: SharedModule }, { kind: "component", type: ZoomControlsComponent, selector: "app-zoom-controls", inputs: ["zoomPercentage", "canZoomIn", "canZoomOut"], outputs: ["zoomIn", "zoomOut", "reset"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\r\n  <app-zoom-controls\r\n    style=\"z-index: 200\"\r\n    [zoomPercentage]=\"zoomPercentage()\"\r\n    [canZoomIn]=\"canZoomIn()\"\r\n    [canZoomOut]=\"canZoomOut()\"\r\n    (zoomIn)=\"changeZoom(+1)\"\r\n    (zoomOut)=\"changeZoom(-1)\"\r\n    (reset)=\"fitToMarkers()\"\r\n  ></app-zoom-controls>\r\n</div>\r\n", styles: [".map-wrapper{position:relative;display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}\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: SharedModule }, { kind: "component", type: ZoomControlsComponent, selector: "app-zoom-controls", inputs: ["zoomPercentage", "canZoomIn", "canZoomOut"], outputs: ["zoomIn", "zoomOut", "reset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GoogleMapComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GoogleMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule, ZoomControlsComponent], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\n  <app-zoom-controls\n    style=\"z-index: 200\"\n    [zoomPercentage]=\"zoomPercentage()\"\n    [canZoomIn]=\"canZoomIn()\"\n    [canZoomOut]=\"canZoomOut()\"\n    (zoomIn)=\"changeZoom(+1)\"\n    (zoomOut)=\"changeZoom(-1)\"\n    (reset)=\"fitToMarkers()\"\n  ></app-zoom-controls>\n</div>\n", styles: [".map-wrapper{position:relative;display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'app-google-map', imports: [GoogleMap, SharedModule, ZoomControlsComponent], providers: [SimpleDateTimePipe], template: "<div class=\"map-wrapper\">\r\n  <google-map height=\"100%\" width=\"100%\" [options]=\"mapOptions()\" [zoom]=\"zoom()\" (zoomChanged)=\"syncZoom()\" class=\"map-full\"/>\r\n  <app-zoom-controls\r\n    style=\"z-index: 200\"\r\n    [zoomPercentage]=\"zoomPercentage()\"\r\n    [canZoomIn]=\"canZoomIn()\"\r\n    [canZoomOut]=\"canZoomOut()\"\r\n    (zoomIn)=\"changeZoom(+1)\"\r\n    (zoomOut)=\"changeZoom(-1)\"\r\n    (reset)=\"fitToMarkers()\"\r\n  ></app-zoom-controls>\r\n</div>\r\n", styles: [".map-wrapper{position:relative;display:flex;width:100%;height:100%}.map-full{width:100%;height:100%}\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"] }] } });
 
 class ImagePreviewComponent {
     data;
     image;
     svgElement;
-    dimensionStyles = signal({}, ...(ngDevMode ? [{ debugName: "dimensionStyles" }] : []));
+    dimensionStyles = signal({}, ...(ngDevMode ? [{ debugName: "dimensionStyles" }] : /* istanbul ignore next */ []));
     constructor(data) {
         this.data = data;
         afterNextRender(() => {
@@ -5280,12 +5280,12 @@ 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 image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\n  @if (!isHtml(data.image)) {\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\n  } @else {\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\n  }\n</div>\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ImagePreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" 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: [".image-wrapper{min-height:124px;min-width:124px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImagePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ImagePreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-preview', imports: [SharedModule], template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" matDialogClose>close</mat-icon>\n  @if (!isHtml(data.image)) {\n    <img #imageElement [attr.src]=\"data.image\" alt=\"ImagePreview\"/>\n  } @else {\n    <div #svgElement class=\"p-4\" [innerHTML]=\"data.image\"></div>\n  }\n</div>\n", styles: [".image-wrapper{min-height:124px;min-width:124px}\n"] }]
+            args: [{ selector: 'app-image-preview', imports: [SharedModule], template: "<div class=\"relative overflow-hidden image-wrapper flex flex-col items-center justify-center\" [ngStyle]=\"dimensionStyles() ? dimensionStyles() : {'opacity': '0'}\">\r\n  <mat-icon class=\"absolute top-4 right-4 hover:cursor-pointer text-mat-sys-on-error-container\" 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: [".image-wrapper{min-height:124px;min-width:124px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -5300,14 +5300,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ImageDisplayComponent {
     sanitizer = inject(DomSanitizer);
     dialog = inject(MatDialog);
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     imageUrl = computed(() => {
         const value = this.value();
         if (!value) {
             return of(null);
         }
         return this.sanitizer.bypassSecurityTrustUrl(value);
-    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
     isHtml(image) {
         // Constructor name is different when built for production, have to check property
         return image !== null && (image['changingThisBreaksApplicationSecurity']?.startsWith('<?xml') || image['changingThisBreaksApplicationSecurity']?.startsWith('<svg'));
@@ -5319,29 +5319,29 @@ 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) {\n  @if (isHtml(image)) {\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\n  } @else {\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=\"\"/>\n  }\n}\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ImageDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.13", ngImport: i0, type: ImageDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-display', imports: [], template: "@if (imageUrl(); as image) {\n  @if (isHtml(image)) {\n    <div (click)=\"openImage(image)\" [innerHTML]=\"image\" class=\"max-h-full h-full w-full object-contain block mt-1 hover:cursor-pointer\"></div>\n  } @else {\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=\"\"/>\n  }\n}\n" }]
+            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\">\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\n  <div class=\"flex flex-row items-center gap-x-2\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LabeledValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.13", 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\">\n  <div class=\"font-bold\">{{ name() | translate }}:</div>\n  <div class=\"flex flex-row items-center gap-x-2\">\n    <ng-content/>\n  </div>\n</div>\n" }]
+            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 }] }] } });
 
 class LoadedIconComponent {
     sanitizer;
-    iconRequest = input.required(...(ngDevMode ? [{ debugName: "iconRequest" }] : []));
-    defaultIcon = input.required(...(ngDevMode ? [{ debugName: "defaultIcon" }] : []));
-    size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
+    iconRequest = input.required(...(ngDevMode ? [{ debugName: "iconRequest" }] : /* istanbul ignore next */ []));
+    defaultIcon = input.required(...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
+    size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     icon = computed(() => {
         return this.iconRequest().pipe(switchMap(response => {
             if (!response) {
@@ -5359,7 +5359,7 @@ class LoadedIconComponent {
         }), catchError(() => {
             return of(null);
         }));
-    }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     isSvgIcon() {
         const defaultIcon = this.defaultIcon();
         return typeof defaultIcon !== 'string' && Object.hasOwn(defaultIcon, 'id') ? defaultIcon : null;
@@ -5367,16 +5367,16 @@ 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$6.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()\">\n  @if (icon() | async; as icon) {\n    <div [innerHTML]=\"icon\"></div>\n  } @else {\n    @if (isSvgIcon(); as icon) {\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\n    } @else {\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LoadedIconComponent, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: LoadedIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loaded-icon', imports: [SharedModule], template: "<div [style.height.px]=\"size()\" [style.width.px]=\"size()\">\n  @if (icon() | async; as icon) {\n    <div [innerHTML]=\"icon\"></div>\n  } @else {\n    @if (isSvgIcon(); as icon) {\n      <mat-icon [svgIcon]=\"icon.id\"></mat-icon>\n    } @else {\n      <mat-icon>{{ defaultIcon() }}</mat-icon>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'app-loaded-icon', imports: [SharedModule], 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$6.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 }] }] } });
 
 class IconComponent {
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     isAsyncIcon() {
         const icon = this.icon();
         return !!icon && typeof icon === 'object' && !Object.hasOwn(icon, 'id') ? icon : null;
@@ -5385,29 +5385,29 @@ class IconComponent {
         const icon = this.icon();
         return !!icon && typeof icon === 'object' && Object.hasOwn(icon, 'id') ? icon : null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"shrink-0 h-6\">\n  @if (isAsyncIcon(); as loadedIcon) {\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\n  }\n  @if (isSvgIcon(); as svgIcon) {\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\n  }\n  @if (typeof icon() === 'string') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  @if (typeof icon() === 'number') {\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: IconComponent, isStandalone: true, selector: "app-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"shrink-0 h-6\">\r\n  @if (isAsyncIcon(); as loadedIcon) {\r\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n  }\r\n  @if (isSvgIcon(); as svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n  }\r\n  @if (typeof icon() === 'string') {\r\n    <mat-icon>{{ icon() }}</mat-icon>\r\n  }\r\n  @if (typeof icon() === 'number') {\r\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\r\n  }\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadedIconComponent, selector: "app-loaded-icon", inputs: ["iconRequest", "defaultIcon", "size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-icon', imports: [
                         SharedModule, LoadedIconComponent, MatIcon
-                    ], template: "<div class=\"shrink-0 h-6\">\n  @if (isAsyncIcon(); as loadedIcon) {\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\n  }\n  @if (isSvgIcon(); as svgIcon) {\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\n  }\n  @if (typeof icon() === 'string') {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  @if (typeof icon() === 'number') {\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"shrink-0 h-6\">\r\n  @if (isAsyncIcon(); as loadedIcon) {\r\n    <app-loaded-icon [iconRequest]=\"loadedIcon.data\" [defaultIcon]=\"loadedIcon.defaultIcon\" [size]=\"24\"/>\r\n  }\r\n  @if (isSvgIcon(); as svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon.id\"></mat-icon>\r\n  }\r\n  @if (typeof icon() === 'string') {\r\n    <mat-icon>{{ icon() }}</mat-icon>\r\n  }\r\n  @if (typeof icon() === 'number') {\r\n    <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] bg-mat-sys-primary text-mat-sys-on-primary\">{{ icon() }}</span>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
 
 class LocalSortTableComponent {
     tenantPropertiesService;
     translateService;
-    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
-    translationPrefix = input('COMMON.', ...(ngDevMode ? [{ debugName: "translationPrefix" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    noValuesMessage = input('', ...(ngDevMode ? [{ debugName: "noValuesMessage" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    translationPrefix = input('COMMON.', ...(ngDevMode ? [{ debugName: "translationPrefix" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    noValuesMessage = input('', ...(ngDevMode ? [{ debugName: "noValuesMessage" }] : /* istanbul ignore next */ []));
     itemSelected = output();
     sortDirection = 'asc';
     sortField;
-    displayData = signal(null, ...(ngDevMode ? [{ debugName: "displayData" }] : []));
-    sorting = signal(false, ...(ngDevMode ? [{ debugName: "sorting" }] : []));
+    displayData = signal(null, ...(ngDevMode ? [{ debugName: "displayData" }] : /* istanbul ignore next */ []));
+    sorting = signal(false, ...(ngDevMode ? [{ debugName: "sorting" }] : /* istanbul ignore next */ []));
     constructor(tenantPropertiesService, translateService) {
         this.tenantPropertiesService = tenantPropertiesService;
         this.translateService = translateService;
@@ -5451,10 +5451,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>\n  <thead>\n  <tr>\n    @for (column of columns(); track column.name) {\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n        <div class=\"flex flex-row items-center gap-x-2\">\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n          @if (column.shouldSort) {\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n          }\n        </div>\n      </th>\n    }\n  </tr>\n  </thead>\n  <tbody>\n    @if (loading()) {\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\n        <mat-spinner diameter=\"30\"></mat-spinner>\n      </div>\n    } @else {\n      @if (displayData(); as displayData){\n        @if (!noValuesMessage()) {\n          @if (!sorting()) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n                @for (column of columns(); track column.name) {\n                  <td class=\"cursor-pointer truncate\">\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n              </span>\n                }\n              </tr>\n            </cdk-virtual-scroll-viewport>\n          }\n        } @else {\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\n            <span>{{ noValuesMessage() | translate }}</span>\n          </div>\n        }\n      }\n    }\n  </tbody>\n</table>\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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.13", ngImport: i0, type: LocalSortTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-local-sort-table', imports: [
                         CdkFixedSizeVirtualScroll,
@@ -5462,11 +5462,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         CdkVirtualScrollViewport,
                         SharedModule,
                         TranslatePipe
-                    ], template: "<table>\n  <thead>\n  <tr>\n    @for (column of columns(); track column.name) {\n      <th class=\"!font-medium truncate\" [ngClass]=\"{'sort-field': column.shouldSort, 'cursor-pointer': column.shouldSort}\" (click)=\"column.shouldSort ? sort(column.name) : undefined\">\n        <div class=\"flex flex-row items-center gap-x-2\">\n          {{ (translationPrefix().toUpperCase() +column.name.toUpperCase()) | translate }}\n          @if (column.shouldSort) {\n            <mat-icon>{{ sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward' }}</mat-icon>\n          }\n        </div>\n      </th>\n    }\n  </tr>\n  </thead>\n  <tbody>\n    @if (loading()) {\n      <div class=\"w-full h-full flex flex-col justify-center items-center\">\n        <mat-spinner diameter=\"30\"></mat-spinner>\n      </div>\n    } @else {\n      @if (displayData(); as displayData){\n        @if (!noValuesMessage()) {\n          @if (!sorting()) {\n            <cdk-virtual-scroll-viewport [itemSize]=\"56\" class=\"viewport\">\n              <tr *cdkVirtualFor=\"let element of displayData\" (click)=\"itemSelected.emit(element)\">\n                @for (column of columns(); track column.name) {\n                  <td class=\"cursor-pointer truncate\">\n              <span [matTooltip]=\"column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name]\">\n                {{ column.shouldTranslateValue ? ((translationPrefix() + element[column.name]) | translate) : element[column.name] }}\n              </span>\n                }\n              </tr>\n            </cdk-virtual-scroll-viewport>\n          }\n        } @else {\n          <div class=\"w-full h-full flex flex-col justify-center items-center\">\n            <span>{{ noValuesMessage() | translate }}</span>\n          </div>\n        }\n      }\n    }\n  </tbody>\n</table>\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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: TenantPropertiesService }, { type: i1$1.TranslateService }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], translationPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translationPrefix", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], noValuesMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noValuesMessage", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
 
 class MasterDetailsViewComponent {
-    displayRatio = input('wide', ...(ngDevMode ? [{ debugName: "displayRatio" }] : []));
+    displayRatio = input('wide', ...(ngDevMode ? [{ debugName: "displayRatio" }] : /* istanbul ignore next */ []));
     width = computed(() => {
         switch (this.displayRatio()) {
             case 'full':
@@ -5482,13 +5482,13 @@ class MasterDetailsViewComponent {
             default:
                 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\">\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\n    <ng-content select=\"[app-master]\"/>\n  </div>\n  <mat-divider [vertical]=\"true\"/>\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\n    <ng-content select=\"[app-details]\"/>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MasterDetailsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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: SharedModule }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MasterDetailsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-master-details-view', imports: [SharedModule], template: "<div class=\"flex h-full w-full min-w-full min-h-full pt-2 overflow-hidden bg-base-color-50\">\n  <div class=\"pr-4 flex shrink-0 grow-0\" [style.width]=\"width()\" [style.max-width]=\"width()\">\n    <ng-content select=\"[app-master]\"/>\n  </div>\n  <mat-divider [vertical]=\"true\"/>\n  <div class=\"pl-4 flex shrink grow overflow-hidden\">\n    <ng-content select=\"[app-details]\"/>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}\n"] }]
+            args: [{ selector: 'app-master-details-view', imports: [SharedModule], 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 }] }] } });
 
 class NestedListViewComponent {
@@ -5519,17 +5519,17 @@ class NestedListViewComponent {
             this.itemsSelected.emit([]);
         }
     }
-    dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-    dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
-    width = input('quarter', ...(ngDevMode ? [{ debugName: "width" }] : []));
-    disableThresholdId = input(null, ...(ngDevMode ? [{ debugName: "disableThresholdId" }] : []));
-    isColoredInput = input(false, ...(ngDevMode ? [{ debugName: "isColoredInput" }] : []));
-    searchActions = input([], ...(ngDevMode ? [{ debugName: "searchActions" }] : []));
-    defaultSearchAction = computed(() => this.searchActions().find((action) => !!action.defaultAction), ...(ngDevMode ? [{ debugName: "defaultSearchAction" }] : []));
-    otherSearchActions = computed(() => this.searchActions().filter((action) => !action.defaultAction), ...(ngDevMode ? [{ debugName: "otherSearchActions" }] : []));
-    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : []));
-    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : []));
-    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : []));
+    dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : /* istanbul ignore next */ []));
+    width = input('quarter', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    disableThresholdId = input(null, ...(ngDevMode ? [{ debugName: "disableThresholdId" }] : /* istanbul ignore next */ []));
+    isColoredInput = input(false, ...(ngDevMode ? [{ debugName: "isColoredInput" }] : /* istanbul ignore next */ []));
+    searchActions = input([], ...(ngDevMode ? [{ debugName: "searchActions" }] : /* istanbul ignore next */ []));
+    defaultSearchAction = computed(() => this.searchActions().find((action) => !!action.defaultAction), ...(ngDevMode ? [{ debugName: "defaultSearchAction" }] : /* istanbul ignore next */ []));
+    otherSearchActions = computed(() => this.searchActions().filter((action) => !action.defaultAction), ...(ngDevMode ? [{ debugName: "otherSearchActions" }] : /* istanbul ignore next */ []));
+    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : /* istanbul ignore next */ []));
+    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : /* istanbul ignore next */ []));
+    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : /* istanbul ignore next */ []));
     widthClass = computed(() => {
         switch (this.width()) {
             case 'full':
@@ -5541,37 +5541,37 @@ class NestedListViewComponent {
             case 'half':
                 return 'w-1/2';
         }
-    }, ...(ngDevMode ? [{ debugName: "widthClass" }] : []));
-    selectionConfirmationAction = input(() => of(true), ...(ngDevMode ? [{ debugName: "selectionConfirmationAction" }] : []));
-    loadingBreadcrumbs = signal(true, ...(ngDevMode ? [{ debugName: "loadingBreadcrumbs" }] : []));
-    loadingChildren = signal(true, ...(ngDevMode ? [{ debugName: "loadingChildren" }] : []));
-    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : []));
-    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-    hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "widthClass" }] : /* istanbul ignore next */ []));
+    selectionConfirmationAction = input(() => of(true), ...(ngDevMode ? [{ debugName: "selectionConfirmationAction" }] : /* istanbul ignore next */ []));
+    loadingBreadcrumbs = signal(true, ...(ngDevMode ? [{ debugName: "loadingBreadcrumbs" }] : /* istanbul ignore next */ []));
+    loadingChildren = signal(true, ...(ngDevMode ? [{ debugName: "loadingChildren" }] : /* istanbul ignore next */ []));
+    selectedItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : /* istanbul ignore next */ []));
     nameSearchControl = new FormControl('');
     searchTerm = toSignal(this.nameSearchControl.valueChanges.pipe(startWith(this.nameSearchControl.getRawValue())));
-    breadcrumbs = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
-    roots = signal([], ...(ngDevMode ? [{ debugName: "roots" }] : []));
-    hasMultipleRoots = signal(false, ...(ngDevMode ? [{ debugName: "hasMultipleRoots" }] : []));
-    rootButtonText = input('COMMON.BACK_TO_ROOTS_BUTTON_TEXT', ...(ngDevMode ? [{ debugName: "rootButtonText" }] : []));
-    enableDrag = input(false, ...(ngDevMode ? [{ debugName: "enableDrag" }] : []));
-    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    breadcrumbs = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
+    roots = signal([], ...(ngDevMode ? [{ debugName: "roots" }] : /* istanbul ignore next */ []));
+    hasMultipleRoots = signal(false, ...(ngDevMode ? [{ debugName: "hasMultipleRoots" }] : /* istanbul ignore next */ []));
+    rootButtonText = input('COMMON.BACK_TO_ROOTS_BUTTON_TEXT', ...(ngDevMode ? [{ debugName: "rootButtonText" }] : /* istanbul ignore next */ []));
+    enableDrag = input(false, ...(ngDevMode ? [{ debugName: "enableDrag" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
     dragging = output();
-    children = signal([], ...(ngDevMode ? [{ debugName: "children" }] : []));
+    children = signal([], ...(ngDevMode ? [{ debugName: "children" }] : /* istanbul ignore next */ []));
     filteredChildren = computed(() => {
         const searchTerm = this.searchTerm();
         if (!searchTerm) {
             return this.children();
         }
         return this.children().filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
-    }, ...(ngDevMode ? [{ debugName: "filteredChildren" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredChildren" }] : /* istanbul ignore next */ []));
     allSelectableItems = computed(() => {
         return this.filteredChildren().filter(item => !item.bulkSelectDisabled);
-    }, ...(ngDevMode ? [{ debugName: "allSelectableItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "allSelectableItems" }] : /* istanbul ignore next */ []));
     itemSelected = output();
     itemsSelected = output();
-    countsMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "countsMap" }] : []));
-    currentScopes = signal(null, ...(ngDevMode ? [{ debugName: "currentScopes" }] : []));
+    countsMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "countsMap" }] : /* istanbul ignore next */ []));
+    currentScopes = signal(null, ...(ngDevMode ? [{ debugName: "currentScopes" }] : /* istanbul ignore next */ []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
         effect(() => {
@@ -5833,12 +5833,12 @@ class NestedListViewComponent {
         this.breadcrumbs.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
         this.children.update(items => items.map(item => item.id === guid ? { ...item, rightNumber } : item));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", 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 }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", 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 } }, outputs: { dragging: "dragging", itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\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\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\"  [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\n                            [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '',  shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      @if (!selectedItems().length) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { 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: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NestedListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, disableThresholdId: { classPropertyName: "disableThresholdId", publicName: "disableThresholdId", 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 }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", 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 } }, outputs: { dragging: "dragging", itemSelected: "itemSelected", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, ngImport: i0, template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" 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.shift)=\"$event.stopPropagation()\" (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\"  [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\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                  <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]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '',  shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\r\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [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; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\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                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : 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; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\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]\"/>\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 (width() !== 'full') {\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      @if (!selectedItems().length) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { 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: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: NestedListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\n  <div [ngClass]=\"widthClass()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\" [ngClass]=\"hideSearch() ? 'pt-2' : 'pt-1'\">\n\n      <!-- HEADER -->\n      <div class=\"flex w-full flex-row gap-x-2\">\n\n        <!-- SEARCH -->\n        @if (!hideSearch()) {\n          <div class=\"flex shrink grow flex-row pt-1 gap-x-2 overflow-hidden\">\n            <mat-form-field class=\"flex grow shrink small-input search-control\" (keydown.shift)=\"$event.stopPropagation()\" (keydown.enter)=\"defaultSearchAction()?.action({parent: this.selectedItem()?.data, control: this.nameSearchControl})\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n              <mat-label>{{ 'COMMON.SEARCH_IMMEDIATE_CHILDREN' | translate }}</mat-label>\n              <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n              <mat-icon matSuffix>search</mat-icon>\n            </mat-form-field>\n            @if (defaultSearchAction(); as defaultAction) {\n              <div [matTooltip]=\"defaultAction.disabledTooltip ? (defaultAction.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"defaultAction.disableCondition ? !defaultAction.disableCondition({control: nameSearchControl}) : true\">\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\">\n                  <mat-icon [svgIcon]=\"defaultAction.icon.id\"/>\n                </button>\n              </div>\n            }\n            @for (action of otherSearchActions(); track $index) {\n              @if (action.condition() | async) {\n                <div [matTooltip]=\"action.disabledTooltip ? (action.disabledTooltip | translate) : ''\" [matTooltipDisabled]=\"action.disableCondition ? !action.disableCondition() : true\">\n                  <button mat-mini-fab [disabled]=\"action.disableCondition ? action.disableCondition() : false\" (click)=\"action.action()\" [matTooltip]=\"action.name | translate\">\n                    <mat-icon [svgIcon]=\"action.icon.id\"/>\n                  </button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n\n        <!-- BREADCRUMBS -->\n        <div class=\"max-h-[50%] overflow-auto shrink-0\" [overflowClass]=\"'pr-4'\">\n          @if (!loadingBreadcrumbs()) {\n            @if (breadcrumbs(); as items) {\n              <div class=\"flex flex-col w-full overflow-x-hidden\">\n                @for (item of items; let i = $index; track i) {\n                  @if (selectedItem() && hasMultipleRoots() && i === 0) {\n                    <mat-card (click)=\"resetNavigation()\" class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\"  [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        <div class=\"shrink-0 h-6\">\n                          <mat-icon>arrow_upward</mat-icon>\n                        </div>\n                        <span class=\"text-mat-sys-on-surface\">{{ rootButtonText() | translate: {default: rootButtonText()} }}</span>\n                      </div>\n                    </mat-card>\n                  }\n                  <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectBreadcrumb(item)\"\n                            [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag() || !!shouldDisableBreadcrumbClick(item)\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\"\n                            [ngClass]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '',  shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [matTooltip]=\"item.name\" matTooltipPosition=\"right\">\n                    <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                      <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\n                      </div>\n                      @if (item.rightNumber && item.rightNumber > 0) {\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\n                        <mat-icon>drag_indicator</mat-icon>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            }\n          }\n        </div>\n\n        <mat-divider class=\"w-full pb-2\"/>\n\n        <!-- CHILDREN -->\n        @if (selectedItem()) {\n          <div class=\"flex-1 overflow-auto min-h-0\" [overflowClass]=\"'pr-4'\">\n            @if (!loadingChildren()) {\n              @if (filteredChildren(); as items) {\n                @if (items.length) {\n                  <div class=\"flex flex-col w-full overflow-y-auto overflow-x-hidden\">\n                    @for (item of items; track $index) {\n                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\"\n                                [dndDraggable]=\"item.data\" [dndDisableDragIf]=\"!enableDrag()\" (dndStart)=\"dragStart($event, item.data)\" (dndEnd)=\"isDragging.set(false)\">\n                        <div class=\"px-3 flex flex-row items-center justify-between gap-x-2 item-card\">\n                          <div class=\"flex flex-row grow items-center gap-x-2 overflow-hidden\">\n                            @if (item.icon; as icon) {\n                              <app-icon [icon]=\"icon\"/>\n                            }\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\n                          </div>\n                          @if (item.rightNumber && item.rightNumber > 0) {\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\n                          } @else if (enableDrag()) {\n                            <mat-icon>drag_indicator</mat-icon>\n                          }\n                        </div>\n                      </mat-card>\n                    }\n                  </div>\n                } @else {\n                  <div class=\"flex flex-col grow justify-center items-center\">\n                    <ng-content select=\"[app-no-items-message]\"/>\n                  </div>\n                }\n              }\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <mat-spinner diameter=\"30\"></mat-spinner>\n              </div>\n            }\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (width() !== 'full') {\n    <mat-divider [vertical]=\"true\" class=\"relative top-2\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden pt-2\">\n      @if (!selectedItems().length) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+            args: [{ selector: 'app-nested-list-view', imports: [SharedModule, ScrollIntoViewDirective, OverflowClassDirective, DndDraggableDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden\">\r\n  <div [ngClass]=\"widthClass()\" 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.shift)=\"$event.stopPropagation()\" (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\"  [ngClass]=\"disableThresholdId() ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : ''\">\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                  <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]=\"[isBreadcrumbSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', selectedItems().length ? 'opacity-50' : '',  shouldDisableBreadcrumbClick(item) ? 'bg-disabled-color opacity-50 hover:cursor-auto pointer-events-none disabled-item' : '']\"\r\n                            [appScrollIntoView]=\"isBreadcrumbSelected(item)\" [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; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"[isBreadcrumbSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface']\" class=\"truncate\">{{ item.name }}</span>\r\n                      </div>\r\n                      @if (item.rightNumber && item.rightNumber > 0) {\r\n                        <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isBreadcrumbSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                      } @else if (enableDrag() && !shouldDisableBreadcrumbClick(item)) {\r\n                        <mat-icon>drag_indicator</mat-icon>\r\n                      }\r\n                    </div>\r\n                  </mat-card>\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                      <mat-card class=\"mb-2 cursor-pointer\" [ngClass]=\"[isChildSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\" (click)=\"selectChild(item)\" [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : 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; as icon) {\r\n                              <app-icon [icon]=\"icon\"/>\r\n                            }\r\n                            <span [ngClass]=\"isChildSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate\">{{ item.name }}</span>\r\n                          </div>\r\n                          @if (item.rightNumber && item.rightNumber > 0) {\r\n                            <span class=\"flex items-center justify-center shrink-0 min-w-5 h-5 px-1.5 rounded-full text-[11px] font-semibold\" [ngClass]=\"isChildSelected(item) ? 'bg-transparent text-mat-sys-surface-container' : 'bg-mat-sys-primary text-mat-sys-on-primary'\">{{ item.rightNumber }}</span>\r\n                          } @else if (enableDrag()) {\r\n                            <mat-icon>drag_indicator</mat-icon>\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]\"/>\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 (width() !== 'full') {\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      @if (!selectedItems().length) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -5941,23 +5941,23 @@ class NestedListDataSource {
 
 class PdfViewerComponent {
     sanitizer;
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     safeSrc = computed(() => {
         const url = this.value();
         if (!url)
             return null;
         const urlWithParams = `${url}#zoom=page-width&view=FitH`;
         return this.sanitizer.bypassSecurityTrustResourceUrl(urlWithParams);
-    }, ...(ngDevMode ? [{ debugName: "safeSrc" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "safeSrc" }] : /* istanbul ignore next */ []));
     constructor(sanitizer) {
         this.sanitizer = sanitizer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$6.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()) {\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.13", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-viewer', imports: [], template: "@if (safeSrc()) {\n    <iframe [src]=\"safeSrc()\" frameborder=\"0\" class=\"w-full h-full\"></iframe>\n}" }]
+            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$6.DomSanitizer }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
 class StandardListViewComponent {
@@ -5988,41 +5988,41 @@ class StandardListViewComponent {
             this.itemSelected.emit(this.selectedItems()[0].data);
         }
     }
-    dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-    dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : []));
-    position = input('outer', ...(ngDevMode ? [{ debugName: "position" }] : []));
-    isColoredInput = input(false, ...(ngDevMode ? [{ debugName: "isColoredInput" }] : []));
-    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : []));
-    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : []));
-    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : []));
-    loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : []));
-    loadingPage = signal(false, ...(ngDevMode ? [{ debugName: "loadingPage" }] : []));
-    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-    hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : []));
-    hideDetails = input(false, ...(ngDevMode ? [{ debugName: "hideDetails" }] : []));
-    hidePadding = input(false, ...(ngDevMode ? [{ debugName: "hidePadding" }] : [])); // TODO Remove, but the component should have innate outer padding :(
+    dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    dataControl = input.required(...(ngDevMode ? [{ debugName: "dataControl" }] : /* istanbul ignore next */ []));
+    position = input('outer', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    isColoredInput = input(false, ...(ngDevMode ? [{ debugName: "isColoredInput" }] : /* istanbul ignore next */ []));
+    enableMultiSelect = input(false, ...(ngDevMode ? [{ debugName: "enableMultiSelect" }] : /* istanbul ignore next */ []));
+    ctrlPressed = signal(false, ...(ngDevMode ? [{ debugName: "ctrlPressed" }] : /* istanbul ignore next */ []));
+    shiftPressed = signal(false, ...(ngDevMode ? [{ debugName: "shiftPressed" }] : /* istanbul ignore next */ []));
+    loadingData = signal(true, ...(ngDevMode ? [{ debugName: "loadingData" }] : /* istanbul ignore next */ []));
+    loadingPage = signal(false, ...(ngDevMode ? [{ debugName: "loadingPage" }] : /* istanbul ignore next */ []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    hideSearch = input(false, ...(ngDevMode ? [{ debugName: "hideSearch" }] : /* istanbul ignore next */ []));
+    hideDetails = input(false, ...(ngDevMode ? [{ debugName: "hideDetails" }] : /* istanbul ignore next */ []));
+    hidePadding = input(false, ...(ngDevMode ? [{ debugName: "hidePadding" }] : /* istanbul ignore next */ [])); // TODO Remove, but the component should have innate outer padding :(
     width = computed(() => {
         if (this.hideDetails()) {
             return 'w-full';
         }
         return this.position() === 'outer' ? 'basis-1/4' : 'basis-1/3';
-    }, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     nameSearchControl = new FormControl('');
     searchTerm = toSignal(this.nameSearchControl.valueChanges.pipe(startWith(this.nameSearchControl.getRawValue())));
-    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     filteredItems = computed(() => {
         const searchTerm = this.searchTerm();
         if (!searchTerm) {
             return this.items();
         }
         return this.items().filter(item => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
-    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     allSelectableItems = computed(() => {
         return this.filteredItems().filter(item => !item.bulkSelectDisabled);
-    }, ...(ngDevMode ? [{ debugName: "allSelectableItems" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "allSelectableItems" }] : /* istanbul ignore next */ []));
     itemSelected = output();
     itemsSelected = output();
-    itemTemplate = contentChild('standardListItemTemplate', ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    itemTemplate = contentChild('standardListItemTemplate', ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
     constructor(destroyRef) {
         afterNextRender(() => {
             const dataSource = this.dataSource();
@@ -6198,12 +6198,12 @@ 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 }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", 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", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], 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'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      @if (selectedItems().length <= 1) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: StandardListViewComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, enableMultiSelect: { classPropertyName: "enableMultiSelect", publicName: "enableMultiSelect", 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", itemsSelected: "itemsSelected" }, host: { listeners: { "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["standardListItemTemplate"], 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\" (keydown.shift)=\"$event.stopPropagation()\" [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]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\r\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : 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; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\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      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OverflowClassDirective, selector: "[overflowClass]", inputs: ["overflowClass"] }, { kind: "directive", type: ScrollIntoViewDirective, selector: "[appScrollIntoView]", inputs: ["appScrollIntoView"] }, { kind: "component", type: IconComponent, selector: "app-icon", inputs: ["icon"] }, { 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.13", ngImport: i0, type: StandardListViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], template: "<div class=\"container flex h-full w-full min-w-full min-h-full relative overflow-hidden {{hidePadding() ? 'pt-0' : 'pt-2'}}\">\n  <div [ngClass]=\"width()\" class=\"master flex shrink-0 grow-0 min-w-0\">\n\n    <!-- LISTING -->\n    <div class=\"w-full h-full flex flex-col gap-y-2 relative\">\n\n      <!-- SEARCH -->\n      @if (!hideSearch()) {\n        <mat-form-field class=\"w-full small-input\" (keydown.shift)=\"$event.stopPropagation()\" [ngClass]=\"{'colored-input': isColoredInput()}\">\n          <mat-label>{{ 'COMMON.SEARCH' | translate }}</mat-label>\n          <input matInput type=\"text\" [formControl]=\"nameSearchControl\">\n          <mat-icon matSuffix>search</mat-icon>\n        </mat-form-field>\n      }\n\n      <!-- LIST -->\n      <div class=\"flex flex-col w-full h-full relative overflow-hidden\">\n        @if (!loadingData()) {\n          @if (filteredItems(); as items) {\n            @if (items.length) {\n              <div class=\"flex flex-col w-full grow shrink overflow-y-auto overflow-x-hidden\" [overflowClass]=\"'pr-4'\">\n                @for (item of items; track $index) {\n                  <ng-container [ngTemplateOutlet]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\n\n                  <!--DEFAULT TEMPLATE-->\n                  <ng-template #defaultTemplate>\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : item.name\" matTooltipPosition=\"right\">\n                      <div class=\"px-3 flex flex-row items-center gap-x-2 item-card\">\n                        @if (item.icon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\n                        @if (item.rightIcon; as icon) {\n                          <app-icon [icon]=\"icon\"/>\n                        }\n                      </div>\n                    </mat-card>\n                  </ng-template>\n                }\n\n                <!--  Load more  -->\n                @if (this.dataSource().isPaged && !this.dataSource().isLastPage) {\n                  <mat-card class=\"mb-2 cursor-pointer regular-item hover:bg-hover-color\" (click)=\"loadMore()\">\n                    <div class=\"px-3 flex flex-row justify-center items-center gap-x-2 item-card\">\n                      @if (loadingPage()) {\n                        <mat-spinner diameter=\"30\"></mat-spinner>\n                      } @else {\n                        <span class=\"text-mat-sys-on-surface\">{{ 'COMMON.LOAD_MORE' | translate }}</span>\n                      }\n                    </div>\n                  </mat-card>\n                }\n              </div>\n            } @else {\n              <div class=\"flex flex-col grow justify-center items-center\">\n                <ng-content select=\"[app-no-items-message]\"></ng-content>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"flex flex-col grow justify-center items-center\">\n            <mat-spinner diameter=\"30\"></mat-spinner>\n          </div>\n        }\n\n        <!-- ACTIONS (bottom right of the listing) -->\n        <div class=\"absolute bottom-0 right-0 z-10\">\n          <ng-content select=\"[app-actions]\"/>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  @if (!hideDetails()) {\n    <mat-divider [vertical]=\"true\"/>\n\n    <!-- DETAILS -->\n    <div class=\"details flex shrink grow overflow-hidden\">\n      @if (selectedItems().length <= 1) {\n        <ng-content select=\"[app-details]\"/>\n      } @else {\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\n          <div class=\"flex flex-col items-center justify-center\">\n            <mat-checkbox class=\"w-full\"\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\n                          (change)=\"toggleSelectAll()\">\n              {{ 'COMMON.SELECT_ALL' | translate }}\n            </mat-checkbox>\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\n          </div>\n          <div class=\"absolute bottom-0 right-0\">\n            <ng-content select=\"[app-bulk-actions]\"/>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
+            args: [{ selector: 'app-standard-list-view', imports: [SharedModule, OverflowClassDirective, ScrollIntoViewDirective, IconComponent], 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\" (keydown.shift)=\"$event.stopPropagation()\" [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]=\"itemTemplate() || defaultTemplate\" [ngTemplateOutletContext]=\"{$implicit: item, selectedItems: selectedItems(), selectItems: selectItems.bind(this) , isSelected: isSelected.bind(this), ctrlPressed: ctrlPressed(), shiftPressed: shiftPressed()}\"/>\r\n\r\n                  <!--DEFAULT TEMPLATE-->\r\n                  <ng-template #defaultTemplate>\r\n                    <mat-card class=\"mb-2 cursor-pointer\" (click)=\"selectItems(item)\"\r\n                              [ngClass]=\"[isSelected(item) ? 'selected-item' : 'regular-item hover:bg-hover-color', shiftPressed() ? 'no-select-item' : '', (ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled ? 'bg-disabled-color opacity-50 hover:cursor-auto disabled-item' : '']\"\r\n                              [appScrollIntoView]=\"selectedItems().length > 1 ? false : isSelected(item)\"\r\n                              [matTooltip]=\"(ctrlPressed() || shiftPressed()) && item.bulkSelectDisabled && item.bulkSelectDisabledTooltip ? (item.bulkSelectDisabledTooltip | translate) : 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; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                        <span [ngClass]=\"isSelected(item) ? 'text-mat-sys-surface-container' : 'text-mat-sys-on-surface'\" class=\"truncate flex-1\">{{ item.name }}</span>\r\n                        @if (item.rightIcon; as icon) {\r\n                          <app-icon [icon]=\"icon\"/>\r\n                        }\r\n                      </div>\r\n                    </mat-card>\r\n                  </ng-template>\r\n                }\r\n\r\n                <!--  Load more  -->\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      @if (selectedItems().length <= 1) {\r\n        <ng-content select=\"[app-details]\"/>\r\n      } @else {\r\n        <div class=\"h-full w-full flex flex-col items-center justify-center relative\">\r\n          <div class=\"flex flex-col items-center justify-center\">\r\n            <mat-checkbox class=\"w-full\"\r\n                          [checked]=\"selectedItems().length === allSelectableItems().length\"\r\n                          (change)=\"toggleSelectAll()\">\r\n              {{ 'COMMON.SELECT_ALL' | translate }}\r\n            </mat-checkbox>\r\n            <mat-divider class=\"w-full !mb-2 !mt-2\"></mat-divider>\r\n            <span>{{ 'COMMON.NUMBER_OF_ITEMS_SELECTED' | translate:  {numberOfItems: selectedItems().length} }} </span>\r\n          </div>\r\n          <div class=\"absolute bottom-0 right-0\">\r\n            <ng-content select=\"[app-bulk-actions]\"/>\r\n          </div>\r\n        </div>\r\n      }\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)}.disabled-item{color:unset}.disabled-item:hover{background-color:var(--neutral-variant-color-60)!important}.disabled-item span{color:unset!important}.no-select-item{user-select:none;-webkit-user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { onKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
@@ -6296,10 +6296,10 @@ class TabulatedChipViewComponent {
     router;
     route;
     navigationPersistenceService;
-    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    queryParamHandling = input('replace', ...(ngDevMode ? [{ debugName: "queryParamHandling" }] : []));
-    saveLastActiveTab = input(false, ...(ngDevMode ? [{ debugName: "saveLastActiveTab" }] : []));
-    navBarLayoutClasses = input('', ...(ngDevMode ? [{ debugName: "navBarLayoutClasses" }] : []));
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    queryParamHandling = input('replace', ...(ngDevMode ? [{ debugName: "queryParamHandling" }] : /* istanbul ignore next */ []));
+    saveLastActiveTab = input(false, ...(ngDevMode ? [{ debugName: "saveLastActiveTab" }] : /* istanbul ignore next */ []));
+    navBarLayoutClasses = input('', ...(ngDevMode ? [{ debugName: "navBarLayoutClasses" }] : /* istanbul ignore next */ []));
     constructor(router, route, navigationPersistenceService) {
         this.router = router;
         this.route = route;
@@ -6316,12 +6316,12 @@ 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$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], 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\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n    @for (tab of tabs(); track $index) {\n      @if (!tab.condition || (tab.condition | async)) {\n        <div\n          mat-tab-link\n          [active]=\"isActive(tab.route)\"\n          (click)=\"navigate(tab.route)\"\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n          class=\"rounded mr-2 navigation-tab\"\n          [attr.data-test]=\"tab.name + '_tab'\"\n        >\n          @if (tab.icon) {\n            <mat-icon>{{ tab.icon }}</mat-icon>\n          }\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n        </div>\n      }\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet/>\n  </mat-tab-nav-panel>\n</div>\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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TabulatedChipViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: TabulatedChipViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden tabulated-view-container\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\" [ngClass]=\"navBarLayoutClasses()\">\n    @for (tab of tabs(); track $index) {\n      @if (!tab.condition || (tab.condition | async)) {\n        <div\n          mat-tab-link\n          [active]=\"isActive(tab.route)\"\n          (click)=\"navigate(tab.route)\"\n          [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n          [ngClass]=\"{ 'bg-mat-sys-primary': isActive(tab.route), 'active': isActive(tab.route) }\"\n          class=\"rounded mr-2 navigation-tab\"\n          [attr.data-test]=\"tab.name + '_tab'\"\n        >\n          @if (tab.icon) {\n            <mat-icon>{{ tab.icon }}</mat-icon>\n          }\n          <span [ngClass]=\"isActive(tab.route) ?'text-mat-sys-surface-container' : 'text-mat-sys-primary'\">{{ tab.name | translate }}</span>\n        </div>\n      }\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet/>\n  </mat-tab-nav-panel>\n</div>\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"] }]
+            args: [{ selector: 'app-tabulated-chip-view', imports: [SharedModule], 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$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], 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 }] }] } });
 
 class TabulatedViewComponent {
@@ -6347,12 +6347,12 @@ class TabulatedViewComponent {
             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: TabulatedViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], 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", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, ngImport: i0, template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n    <div\n      *ngFor=\"let tab of tabs\"\n      mat-tab-link\n      [active]=\"isActive(tab.route)\"\n      (click)=\"navigate(tab.route)\"\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n      [attr.data-test]=\"tab.name + '_tab'\"\n    >\n      <mat-icon *ngIf=\"tab.icon\">\n        {{ tab.icon }}\n      </mat-icon>\n      {{ tab.name | translate }}\n    </div>\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n</div>\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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TabulatedViewComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: NavigationPersistenceService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: TabulatedViewComponent, isStandalone: true, selector: "app-tabulated-view", inputs: { tabs: "tabs", queryParamHandling: "queryParamHandling", saveLastActiveTab: "saveLastActiveTab" }, 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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$5.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$5.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$5.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { 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.13", ngImport: i0, type: TabulatedViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tabulated-view', imports: [SharedModule], template: "<div class=\"flex flex-auto flex-col overflow-hidden\">\n  <nav mat-tab-nav-bar [mat-stretch-tabs]=\"false\" [tabPanel]=\"tabPanel\" class=\"navigation\">\n    <div\n      *ngFor=\"let tab of tabs\"\n      mat-tab-link\n      [active]=\"isActive(tab.route)\"\n      (click)=\"navigate(tab.route)\"\n      [matTooltip]=\"tab.tooltip ? (tab.tooltip | translate) : null\"\n      [attr.data-test]=\"tab.name + '_tab'\"\n    >\n      <mat-icon *ngIf=\"tab.icon\">\n        {{ tab.icon }}\n      </mat-icon>\n      {{ tab.name | translate }}\n    </div>\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex flex-auto flex-col overflow-hidden\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n</div>\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"] }]
+            args: [{ selector: 'app-tabulated-view', imports: [SharedModule], 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$2.Router }, { type: i1$2.ActivatedRoute }, { type: NavigationPersistenceService }], propDecorators: { tabs: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6363,7 +6363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }] } });
 
 class TreeNodeComponent {
-    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
     nodeSelected = output();
     toggle(node) {
         node.open = !node.open;
@@ -6371,17 +6371,17 @@ 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\">\n  <!-- ROW -->\n  <div class=\"w-full h-10 flex flex-row items-center\">\n\n    <!-- ARROWS -->\n    @if (node().canHaveChildren) {\n      @if (node().open) {\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      } @else {\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_right</mat-icon>\n        </button>\n      }\n    } @else {\n      <div class=\"w-12 h-12\">&nbsp;</div>\n    }\n\n    <!-- ICON AND TEXT -->\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\n    </div>\n  </div>\n\n  <!-- Children -->\n  @if (node().open) {\n    <div class=\"w-full flex flex-col pl-9\">\n      @if (node().children | async; as children) {\n        @for (child of children; track $index) {\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TreeNodeComponent, selector: "app-tree-node", inputs: ["node"], outputs: ["nodeSelected"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TreeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: SharedModule }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i6.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.13", ngImport: i0, type: TreeNodeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tree-node', imports: [SharedModule], template: "<div class=\"w-full flex flex-col\">\n  <!-- ROW -->\n  <div class=\"w-full h-10 flex flex-row items-center\">\n\n    <!-- ARROWS -->\n    @if (node().canHaveChildren) {\n      @if (node().open) {\n        <button mat-icon-button class=\"scale-80\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      } @else {\n        <button mat-icon-button class=\"scale-80\" [disabled]=\"!node().hasChildren\" (click)=\"toggle(node())\">\n          <mat-icon>keyboard_arrow_right</mat-icon>\n        </button>\n      }\n    } @else {\n      <div class=\"w-12 h-12\">&nbsp;</div>\n    }\n\n    <!-- ICON AND TEXT -->\n    <div class=\"flex flex-row items-center cursor-pointer\" (click)=\"selectNode(node())\">\n      <mat-icon [ngClass]=\"node().selected ? 'text-mat-sys-tertiary' : 'text-mat-sys-primary'\">{{ node().icon }}</mat-icon>\n      <div class=\"pl-2\" [ngClass]=\"{ 'text-mat-sys-tertiary' : node().selected }\">{{ node().name }}</div>\n    </div>\n  </div>\n\n  <!-- Children -->\n  @if (node().open) {\n    <div class=\"w-full flex flex-col pl-9\">\n      @if (node().children | async; as children) {\n        @for (child of children; track $index) {\n          <app-tree-node [node]=\"child\" (nodeSelected)=\"selectNode($event)\"/>\n        }\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'app-tree-node', imports: [SharedModule], 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"] }] } });
 
 class TreeComponent {
-    roots = input.required(...(ngDevMode ? [{ debugName: "roots" }] : []));
-    guidPath = input.required(...(ngDevMode ? [{ debugName: "guidPath" }] : []));
+    roots = input.required(...(ngDevMode ? [{ debugName: "roots" }] : /* istanbul ignore next */ []));
+    guidPath = input.required(...(ngDevMode ? [{ debugName: "guidPath" }] : /* istanbul ignore next */ []));
     nodeSelected = output();
     selectedNode = null;
     constructor() {
@@ -6425,19 +6425,19 @@ 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\">\n  @for (node of roots(); track $index) {\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\n  }\n</div>\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.13", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.13", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-tree', imports: [TreeNodeComponent], template: "<div class=\"h-full w-full flex flex-col\">\n  @for (node of roots(); track $index) {\n    <app-tree-node [node]=\"node\" (nodeSelected)=\"selectNode($event)\"/>\n  }\n</div>\n" }]
+            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"] }] } });
 
 class ValueDisplayComponent {
     DataType = DataType;
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : []));
-    unit = input(...(ngDevMode ? [undefined, { debugName: "unit" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    type = input.required(...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    unit = input(...(ngDevMode ? [undefined, { debugName: "unit" }] : /* istanbul ignore next */ []));
     constructor() {
     }
     getNumber(epochTime) {
@@ -6446,22 +6446,22 @@ 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) {\n  @switch (type()) {\n    @case (DataType.BOOLEAN) {\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\n    }\n    @case (DataType.COLOR) {\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\n    }\n    @case (DataType.DATE) {\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\n    }\n    @case (DataType.DURATION) {\n      {{ getNumber(value) | duration }}\n    }\n    @case (DataType.LINK) {\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\n      </div>\n    }\n    @case (DataType.VECTOR) {\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\n    }\n    @case (DataType.NUMERIC){\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\n    }\n    @default {\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\n    }\n  }\n} @else {\n  -\n}\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.13", ngImport: i0, type: ValueDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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: SharedModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.13", ngImport: i0, type: ValueDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-value-display', imports: [SharedModule, DurationPipe, SimpleDateTimePipe, LocalizedNumberPipe], template: "@if (value(); as value) {\n  @switch (type()) {\n    @case (DataType.BOOLEAN) {\n      <mat-icon>{{ value === 'true' ? 'check' : 'close' }}</mat-icon>\n    }\n    @case (DataType.COLOR) {\n      <div class=\"color-circle\" [style.background-color]=\"value\"></div>\n    }\n    @case (DataType.DATE) {\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) | simpleDateTime }}\">{{ getNumber(value) | simpleDateTime }}</div>\n    }\n    @case (DataType.DURATION) {\n      {{ getNumber(value) | duration }}\n    }\n    @case (DataType.LINK) {\n      <div class=\"truncate\" matTooltip=\"{{ value }}\">\n        <a href=\"{{value}}\" target=\"_blank\" class=\"underline\">{{ value }}</a>\n      </div>\n    }\n    @case (DataType.VECTOR) {\n      <div class=\"truncate\" matTooltip=\"{{ getVectorValue(value) }}\">{{ getVectorValue(value) }}</div>\n    }\n    @case (DataType.NUMERIC){\n      <div class=\"truncate\" matTooltip=\"{{ getNumber(value) }} {{ unit() }}\">{{getNumber(value) | localizedNumber}} {{ unit() }}</div>\n    }\n    @default {\n      <div class=\"truncate\" matTooltip=\"{{ value }} {{ unit() }}\">{{ value }} {{ unit() }}</div>\n    }\n  }\n} @else {\n  -\n}\n", styles: [".color-circle{width:1.5rem;height:1.5rem;margin-top:.25rem;border-radius:9999px}\n"] }]
+            args: [{ selector: 'app-value-display', imports: [SharedModule, 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 }] }] } });
 
 class ValueInputBooleanComponent {
     translate;
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     formControl = new FormControl(false);
     destroy$ = new Subject();
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     constructor(translate) {
         this.translate = translate;
         effect(() => {
@@ -6508,8 +6508,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputBooleanComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputBooleanComponent),
@@ -6520,9 +6520,9 @@ class ValueInputBooleanComponent {
                 useExisting: forwardRef(() => ValueInputBooleanComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <div class=\"flex flex-col ml-2\">\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\n  </div>\n</mat-slide-toggle>\n@for (error of getErrors(); track error) {\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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" }] });
+        ], ngImport: i0, template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [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: SharedModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputBooleanComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-boolean', imports: [SharedModule, MatSlideToggle], providers: [
                         {
@@ -6535,19 +6535,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputBooleanComponent),
                             multi: true,
                         }
-                    ], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <div class=\"flex flex-col ml-2\">\n    <span class=\"text-xs font-light\"> {{ name() }} </span>\n    <span>{{ formControl.value ? ('DATA_BROWSER.ATTRIBUTE_VALUE_ENABLED' | translate) : ('DATA_BROWSER.ATTRIBUTE_VALUE_DISABLED' | translate) }}</span>\n  </div>\n</mat-slide-toggle>\n@for (error of getErrors(); track error) {\n  <mat-error *ngIf=\"!showErrorInTooltip()\" class=\"ml-4 mt-[-8px] text-[12px]\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate }}</mat-error>\n}\n" }]
+                    ], template: "<mat-slide-toggle [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" [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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputColorComponent {
     translate;
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     colorPicker = viewChild.required('colorPicker');
     showPicker = false;
     formControl = new FormControl('');
     destroy$ = new Subject();
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -6617,8 +6617,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputColorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputColorComponent),
@@ -6629,9 +6629,9 @@ class ValueInputColorComponent {
                 useExisting: forwardRef(() => ValueInputColorComponent),
                 multi: true,
             }
-        ], 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()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\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\">\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\n\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" (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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputColorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-color', imports: [SharedModule], providers: [
                         {
@@ -6644,15 +6644,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputColorComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full relative\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" (click)=\"openColorPicker()\">\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\">\n  <div class=\"w-5 h-5 rounded-full mr-4 cursor-pointer\" [style.background-color]=\"formControl.getRawValue()\" matSuffix (click)=\"openColorPicker()\">&nbsp;</div>\n\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: ["mat-form-field input[type=color]{width:auto;height:auto}:host{--color-picker-width: 250px}\n"] }]
+                    ], 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({ emitEvent: false })\" (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"] }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], colorPicker: [{ type: i0.ViewChild, args: ['colorPicker', { isSignal: true }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputDateComponent {
     formControl = new FormControl(null);
     destroy$ = new Subject();
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -6701,8 +6701,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputDateComponent),
@@ -6713,9 +6713,9 @@ class ValueInputDateComponent {
                 useExisting: forwardRef(() => ValueInputDateComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip", "timezone"] }] });
+        ], 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: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DateTimeFormFieldComponent, selector: "app-date-time-form-field", inputs: ["dateLabel", "timeLabel", "validators", "showErrorInTooltip", "timezone"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-date', imports: [SharedModule, DateTimeFormFieldComponent], providers: [
                         {
@@ -6728,7 +6728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputDateComponent),
                             multi: true,
                         }
-                    ], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\n" }]
+                    ], template: "<app-date-time-form-field [formControl]=\"formControl\" [validators]=\"validators()\" [showErrorInTooltip]=\"showErrorInTooltip()\" class=\"w-full\"></app-date-time-form-field>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputEnumComponent {
@@ -6738,11 +6738,11 @@ class ValueInputEnumComponent {
     };
     onValidatorChange;
     destroy$ = new Subject();
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     constructor(translate) {
         this.translate = translate;
         effect(() => {
@@ -6792,8 +6792,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputEnumComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputEnumComponent),
@@ -6804,9 +6804,9 @@ class ValueInputEnumComponent {
                 useExisting: forwardRef(() => ValueInputEnumComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\n    <mat-label>{{ name() }}</mat-label>\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\n      @for (value of options(); track value) {\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\n      }\n    </mat-select>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\">\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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputEnumComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-enum', imports: [SharedModule], providers: [
                         {
@@ -6819,16 +6819,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputEnumComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"w-full flex flex-col gap-y-2\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-form-field appearance=\"outline\" class=\"w-full\">\n    <mat-label>{{ name() }}</mat-label>\n    <mat-select [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\">\n      @for (value of options(); track value) {\n        <mat-option [value]=\"value\">{{ value }}</mat-option>\n      }\n    </mat-select>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n  </mat-form-field>\n</div>\n" }]
+                    ], 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({ emitEvent: false })\">\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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputHexadecimalComponent {
     translate;
     formControl = new FormControl('');
     destroy$ = new Subject();
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     constructor(translate) {
         this.translate = translate;
         effect(() => {
@@ -6886,8 +6886,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputHexadecimalComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputHexadecimalComponent),
@@ -6898,9 +6898,9 @@ class ValueInputHexadecimalComponent {
                 useExisting: forwardRef(() => ValueInputHexadecimalComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputHexadecimalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-hexadecimal', imports: [SharedModule], providers: [
                         {
@@ -6913,16 +6913,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputHexadecimalComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n" }]
+                    ], 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputLinkComponent {
     translate;
     formControl = new FormControl('');
     destroy$ = new Subject();
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -6981,8 +6981,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputLinkComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputLinkComponent),
@@ -6993,9 +6993,9 @@ class ValueInputLinkComponent {
                 useExisting: forwardRef(() => ValueInputLinkComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-link', imports: [SharedModule], providers: [
                         {
@@ -7008,7 +7008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputLinkComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_VALUE' | translate }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n" }]
+                    ], 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputLocationComponent {
@@ -7018,9 +7018,9 @@ class ValueInputLocationComponent {
         latitude: new FormControl(null),
         longitude: new FormControl(null)
     });
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -7092,8 +7092,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputLocationComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputLocationComponent),
@@ -7104,9 +7104,9 @@ class ValueInputLocationComponent {
                 useExisting: forwardRef(() => ValueInputLocationComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-1\">\n    <div class=\"flex gap-4 w-full justify-between items-start\">\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('latitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\n          }\n      </mat-form-field>\n\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('longitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\n          }\n      </mat-form-field>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputLocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-location', imports: [SharedModule], providers: [
                         {
@@ -7119,17 +7119,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputLocationComponent),
                             multi: true,
                         }
-                    ], template: "<form [formGroup]=\"formGroup\">\n  <div class=\"flex flex-col gap-y-1\">\n    <div class=\"flex gap-4 w-full justify-between items-start\">\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('latitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LATITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'latitude')\" (blur)=\"this.formGroup.get('latitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"latitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('latitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 90, min: -90} }}</mat-error>\n          }\n      </mat-form-field>\n\n      <mat-form-field class=\"flex-1\" [matTooltip]=\"getErrorTooltip('longitude')\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n        <mat-label>{{ 'DATA_BROWSER.ATTRIBUTE_LONGITUDE' | translate }}</mat-label>\n        <input matInput (paste)=\"handleLocationPaste($event, 'longitude')\" (blur)=\"this.formGroup.get('longitude')?.updateValueAndValidity({ emitEvent: false })\" formControlName=\"longitude\" type=\"number\" autocomplete=\"off\">\n\n          @for (error of getErrors('longitude'); track error) {\n            <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate: {max: 180, min: -180} }}</mat-error>\n          }\n      </mat-form-field>\n    </div>\n  </div>\n</form>\n" }]
+                    ], 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({ emitEvent: false })\" 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputNumericComponent {
     translate;
     formControl = new FormControl(null);
     destroy$ = new Subject();
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -7190,8 +7190,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputNumericComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputNumericComponent),
@@ -7202,9 +7202,9 @@ class ValueInputNumericComponent {
                 useExisting: forwardRef(() => ValueInputNumericComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LocalizedNumericInputDirective, selector: "input[wolkaboutLocalizedNumericInput]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputNumericComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-numeric', imports: [SharedModule, LocalizedNumericInputDirective], providers: [
                         {
@@ -7217,17 +7217,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputNumericComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput type=\"text\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\" wolkaboutLocalizedNumericInput/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n" }]
+                    ], 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputStringComponent {
     translate;
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     formControl = new FormControl('');
     destroy$ = new Subject();
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -7280,8 +7280,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputStringComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputStringComponent),
@@ -7292,9 +7292,9 @@ class ValueInputStringComponent {
                 useExisting: forwardRef(() => ValueInputStringComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputStringComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-string', imports: [SharedModule], providers: [
                         {
@@ -7307,18 +7307,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputStringComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n  @for (error of getErrors(); track error) {\n    <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate : {max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n  }\n</mat-form-field>\n" }]
+                    ], 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputVectorComponent {
     translate;
     formControl = new FormControl('');
     destroy$ = new Subject();
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     onTouched = () => {
     };
     onValidatorChange;
@@ -7390,8 +7390,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputVectorComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputVectorComponent),
@@ -7402,9 +7402,9 @@ class ValueInputVectorComponent {
                 useExisting: forwardRef(() => ValueInputVectorComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-y-2\">\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\n\n      @for (error of getErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n      }\n  </mat-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputVectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-vector', imports: [SharedModule], providers: [
                         {
@@ -7417,17 +7417,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputVectorComponent),
                             multi: true,
                         }
-                    ], template: "<div class=\"w-full flex flex-col gap-y-2\">\n  <mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n    <mat-label>{{ name() }} ({{ options()?.join(',') }})</mat-label>\n    <input matInput [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" class=\"w-full\">\n\n      @for (error of getErrors(); track error) {\n        <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n      }\n  </mat-form-field>\n</div>\n" }]
+                    ], 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i1$1.TranslateService }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputDurationComponent {
     destroyRef;
     translate;
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     formControl = new FormControl('');
-    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
+    validators = input(...(ngDevMode ? [undefined, { debugName: "validators" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
     durationValidator = (control) => {
         const value = control.value;
         if (value == null || value.trim() === '') {
@@ -7507,8 +7507,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputDurationComponent),
@@ -7519,9 +7519,9 @@ class ValueInputDurationComponent {
                 useExisting: forwardRef(() => ValueInputDurationComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+        ], 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({ emitEvent: false })\" 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: SharedModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.13", ngImport: i0, type: ValueInputDurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input-duration', imports: [SharedModule], providers: [
                         {
@@ -7534,17 +7534,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputDurationComponent),
                             multi: true,
                         }
-                    ], template: "<mat-form-field class=\"w-full\" [matTooltip]=\"getErrorTooltip()\" [matTooltipDisabled]=\"!showErrorInTooltip()\">\n  <mat-label>{{ name() }}</mat-label>\n  <input matInput [type]=\"'text'\" [formControl]=\"formControl\" (blur)=\"formControl.updateValueAndValidity({ emitEvent: false })\" autocomplete=\"off\"/>\n\n    @for (error of getErrors(); track error) {\n      <mat-error *ngIf=\"!showErrorInTooltip()\">{{ 'COMMON.ERROR_VALIDATION_' + error | translate :{max: formControl.getError('maxlength')?.requiredLength} }}</mat-error>\n    }\n</mat-form-field>\n" }]
+                    ], 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({ emitEvent: false })\" 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" }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i1$1.TranslateService }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class ValueInputComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    dataType = input.required(...(ngDevMode ? [{ debugName: "dataType" }] : []));
-    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
-    validationConditions = input(...(ngDevMode ? [undefined, { debugName: "validationConditions" }] : []));
-    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : []));
-    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : []));
-    validators = signal([], ...(ngDevMode ? [{ debugName: "validators" }] : []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    dataType = input.required(...(ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []));
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    validationConditions = input(...(ngDevMode ? [undefined, { debugName: "validationConditions" }] : /* istanbul ignore next */ []));
+    showErrorInTooltip = input(false, ...(ngDevMode ? [{ debugName: "showErrorInTooltip" }] : /* istanbul ignore next */ []));
+    emitValidityUpdate = input(true, ...(ngDevMode ? [{ debugName: "emitValidityUpdate" }] : /* istanbul ignore next */ []));
+    validators = signal([], ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
     formControl = new FormControl(null);
     onValidatorChange;
     constructor() {
@@ -7604,8 +7604,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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 }, emitValidityUpdate: { classPropertyName: "emitValidityUpdate", publicName: "emitValidityUpdate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ValueInputComponent),
@@ -7616,9 +7616,9 @@ class ValueInputComponent {
                 useExisting: forwardRef(() => ValueInputComponent),
                 multi: true,
             }
-        ], ngImport: i0, template: "@switch (dataType()) {\n  @case (DataType.STRING) {\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.NUMERIC) {\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.BOOLEAN) {\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.HEXADECIMAL) {\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.COLOR) {\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.LINK) {\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.DATE) {\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.DURATION) {\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.LOCATION) {\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.VECTOR) {\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.ENUM) {\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValueInputBooleanComponent, selector: "app-value-input-boolean", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputColorComponent, selector: "app-value-input-color", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputDateComponent, selector: "app-value-input-date", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputEnumComponent, selector: "app-value-input-enum", inputs: ["options", "name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputHexadecimalComponent, selector: "app-value-input-hexadecimal", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputLinkComponent, selector: "app-value-input-link", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputLocationComponent, selector: "app-value-input-location", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputNumericComponent, selector: "app-value-input-numeric", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputStringComponent, selector: "app-value-input-string", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputVectorComponent, selector: "app-value-input-vector", inputs: ["options", "name", "showErrorInTooltip", "validators", "emitValidityUpdate"] }, { kind: "component", type: ValueInputDurationComponent, selector: "app-value-input-duration", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }] });
+        ], ngImport: i0, template: "@switch (dataType()) {\r\n  @case (DataType.STRING) {\r\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.NUMERIC) {\r\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.BOOLEAN) {\r\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.HEXADECIMAL) {\r\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.COLOR) {\r\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.LINK) {\r\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.DATE) {\r\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.DURATION) {\r\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.LOCATION) {\r\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.VECTOR) {\r\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.ENUM) {\r\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ValueInputBooleanComponent, selector: "app-value-input-boolean", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputColorComponent, selector: "app-value-input-color", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputDateComponent, selector: "app-value-input-date", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputEnumComponent, selector: "app-value-input-enum", inputs: ["options", "name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputHexadecimalComponent, selector: "app-value-input-hexadecimal", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputLinkComponent, selector: "app-value-input-link", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputLocationComponent, selector: "app-value-input-location", inputs: ["validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputNumericComponent, selector: "app-value-input-numeric", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputStringComponent, selector: "app-value-input-string", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }, { kind: "component", type: ValueInputVectorComponent, selector: "app-value-input-vector", inputs: ["options", "name", "showErrorInTooltip", "validators", "emitValidityUpdate"] }, { kind: "component", type: ValueInputDurationComponent, selector: "app-value-input-duration", inputs: ["name", "validators", "showErrorInTooltip", "emitValidityUpdate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ValueInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ValueInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-value-input', imports: [SharedModule, ValueInputBooleanComponent, ValueInputColorComponent, ValueInputDateComponent, ValueInputEnumComponent, ValueInputHexadecimalComponent, ValueInputLinkComponent, ValueInputLocationComponent, ValueInputNumericComponent, ValueInputStringComponent, ValueInputVectorComponent, ValueInputDurationComponent], providers: [
                         {
@@ -7631,7 +7631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             useExisting: forwardRef(() => ValueInputComponent),
                             multi: true,
                         }
-                    ], template: "@switch (dataType()) {\n  @case (DataType.STRING) {\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.NUMERIC) {\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.BOOLEAN) {\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.HEXADECIMAL) {\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.COLOR) {\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.LINK) {\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.DATE) {\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.DURATION) {\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.LOCATION) {\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.VECTOR) {\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n  @case (DataType.ENUM) {\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\n  }\n}\n" }]
+                    ], template: "@switch (dataType()) {\r\n  @case (DataType.STRING) {\r\n    <app-value-input-string [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.NUMERIC) {\r\n    <app-value-input-numeric [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.BOOLEAN) {\r\n    <app-value-input-boolean [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.HEXADECIMAL) {\r\n    <app-value-input-hexadecimal [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.COLOR) {\r\n    <app-value-input-color [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.LINK) {\r\n    <app-value-input-link [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.DATE) {\r\n    <app-value-input-date [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.DURATION) {\r\n    <app-value-input-duration [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.LOCATION) {\r\n    <app-value-input-location [showErrorInTooltip]=\"showErrorInTooltip()\" [validators]=\"validators()\" [formControl]=\"formControl\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.VECTOR) {\r\n    <app-value-input-vector [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n  @case (DataType.ENUM) {\r\n    <app-value-input-enum [showErrorInTooltip]=\"showErrorInTooltip()\" [name]=\"name()\" [validators]=\"validators()\" [formControl]=\"formControl\" [options]=\"options()\" [emitValidityUpdate]=\"emitValidityUpdate()\"/>\r\n  }\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], validationConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationConditions", required: false }] }], showErrorInTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showErrorInTooltip", required: false }] }], emitValidityUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitValidityUpdate", required: false }] }] } });
 
 class DoubleDrawerLayoutComponent {
@@ -7657,17 +7657,17 @@ class DoubleDrawerLayoutComponent {
         }
     }
     timeout;
-    hoverActive = signal(false, ...(ngDevMode ? [{ debugName: "hoverActive" }] : []));
-    leftDrawerConfig = input.required(...(ngDevMode ? [{ debugName: "leftDrawerConfig" }] : []));
-    rightDrawerConfig = input(...(ngDevMode ? [undefined, { debugName: "rightDrawerConfig" }] : []));
-    backdropConfig = input.required(...(ngDevMode ? [{ debugName: "backdropConfig" }] : []));
-    dialogConfig = input(...(ngDevMode ? [undefined, { debugName: "dialogConfig" }] : []));
-    fullScreenConfig = input(...(ngDevMode ? [undefined, { debugName: "fullScreenConfig" }] : []));
+    hoverActive = signal(false, ...(ngDevMode ? [{ debugName: "hoverActive" }] : /* istanbul ignore next */ []));
+    leftDrawerConfig = input.required(...(ngDevMode ? [{ debugName: "leftDrawerConfig" }] : /* istanbul ignore next */ []));
+    rightDrawerConfig = input(...(ngDevMode ? [undefined, { debugName: "rightDrawerConfig" }] : /* istanbul ignore next */ []));
+    backdropConfig = input.required(...(ngDevMode ? [{ debugName: "backdropConfig" }] : /* istanbul ignore next */ []));
+    dialogConfig = input(...(ngDevMode ? [undefined, { debugName: "dialogConfig" }] : /* istanbul ignore next */ []));
+    fullScreenConfig = input(...(ngDevMode ? [undefined, { debugName: "fullScreenConfig" }] : /* istanbul ignore next */ []));
     leftDrawerToggled = output();
     rightDrawerToggled = output();
-    isLeftDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isLeftDrawerOpen" }] : []));
-    isRightDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isRightDrawerOpen" }] : []));
-    showFullscreenButton = signal(false, ...(ngDevMode ? [{ debugName: "showFullscreenButton" }] : []));
+    isLeftDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isLeftDrawerOpen" }] : /* istanbul ignore next */ []));
+    isRightDrawerOpen = signal(false, ...(ngDevMode ? [{ debugName: "isRightDrawerOpen" }] : /* istanbul ignore next */ []));
+    showFullscreenButton = signal(false, ...(ngDevMode ? [{ debugName: "showFullscreenButton" }] : /* istanbul ignore next */ []));
     fullScreenEnabled = toSignal(this.fullscreenService.fullScreenEnabled$);
     constructor() {
         effect(() => {
@@ -7723,14 +7723,14 @@ class DoubleDrawerLayoutComponent {
             onClose();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\n            [ngClass]=\"{\n               'destructive-flat-button': isLeftDrawerOpen(),\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\n               }\"\n            [matTooltip]=\"isLeftDrawerOpen() ?\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\n              leftDrawerConfig().title ?\n                leftDrawerConfig().title :\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\n        <span>{{ leftDrawerConfig().title }}</span>\n      } @else {\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\n      }\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\n      <ng-content select=\"[left-drawer]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\n      <span>{{ backdropConfig().message | translate }}</span>\n    </div>\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\n    </div>\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\n      @if (showFullscreenButton()) {\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\n          @if (fullScreenEnabled()) {\n            <mat-icon>fullscreen_exit</mat-icon>\n          } @else {\n            <mat-icon>fullscreen</mat-icon>\n          }\n        </button>\n      }\n      <ng-content select=\"[details]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"toggleRightDrawer()\"\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\n      <ng-content select=\"[right-drawer]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DoubleDrawerLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DoubleDrawerLayoutComponent, isStandalone: true, selector: "app-double-drawer-layout", inputs: { leftDrawerConfig: { classPropertyName: "leftDrawerConfig", publicName: "leftDrawerConfig", isSignal: true, isRequired: true, transformFunction: null }, rightDrawerConfig: { classPropertyName: "rightDrawerConfig", publicName: "rightDrawerConfig", isSignal: true, isRequired: false, transformFunction: null }, backdropConfig: { classPropertyName: "backdropConfig", publicName: "backdropConfig", isSignal: true, isRequired: true, transformFunction: null }, dialogConfig: { classPropertyName: "dialogConfig", publicName: "dialogConfig", isSignal: true, isRequired: false, transformFunction: null }, fullScreenConfig: { classPropertyName: "fullScreenConfig", publicName: "fullScreenConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftDrawerToggled: "leftDrawerToggled", rightDrawerToggled: "rightDrawerToggled" }, host: { listeners: { "window:mousemove": "onMouseMove()", "window:keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DoubleDrawerLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-double-drawer-layout', imports: [
                         SharedModule
-                    ], template: "<div class=\"w-full h-full relative\">\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\n            [ngClass]=\"{\n               'destructive-flat-button': isLeftDrawerOpen(),\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\n               }\"\n            [matTooltip]=\"isLeftDrawerOpen() ?\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\n              leftDrawerConfig().title ?\n                leftDrawerConfig().title :\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\n        <span>{{ leftDrawerConfig().title }}</span>\n      } @else {\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\n      }\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\n      <ng-content select=\"[left-drawer]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\n      <span>{{ backdropConfig().message | translate }}</span>\n    </div>\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\n    </div>\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\n      @if (showFullscreenButton()) {\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\n          @if (fullScreenEnabled()) {\n            <mat-icon>fullscreen_exit</mat-icon>\n          } @else {\n            <mat-icon>fullscreen</mat-icon>\n          }\n        </button>\n      }\n      <ng-content select=\"[details]\"></ng-content>\n    </div>\n  </div>\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\n    <button mat-flat-button class=\"drawer-toggle\"\n            (click)=\"toggleRightDrawer()\"\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\n            matTooltipPosition=\"right\">\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\n    </button>\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\n      <ng-content select=\"[right-drawer]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
+                    ], template: "<div class=\"w-full h-full relative\">\r\n  <div class=\"absolute h-full drawer\" [ngClass]=\"{open : isLeftDrawerOpen()}\" [ngStyle]=\"{'width': isLeftDrawerOpen() ? leftDrawerConfig().width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"isLeftDrawerOpen.set(!isLeftDrawerOpen())\"\r\n            [ngClass]=\"{\r\n               'destructive-flat-button': isLeftDrawerOpen(),\r\n               'drawer-toggle-name': leftDrawerConfig().title && !isLeftDrawerOpen()\r\n               }\"\r\n            [matTooltip]=\"isLeftDrawerOpen() ?\r\n              ('COMMON.COLLAPSE_NAVIGATION' | translate) :\r\n              leftDrawerConfig().title ?\r\n                leftDrawerConfig().title :\r\n                ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      @if (leftDrawerConfig().title && !isLeftDrawerOpen()) {\r\n        <span>{{ leftDrawerConfig().title }}</span>\r\n      } @else {\r\n        <span class=\"block\"><mat-icon [ngClass]=\"{'toggle-icon-small': !isLeftDrawerOpen()}\" [svgIcon]=\"isLeftDrawerOpen() ? 'close' : 'arrow_right'\"></mat-icon></span>\r\n      }\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isLeftDrawerOpen()}\">\r\n      <ng-content select=\"[left-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"h-full w-full content-wrapper\" [ngClass]=\"{'open': (isLeftDrawerOpen() || isRightDrawerOpen()) && backdropConfig().show}\">\r\n    <div class=\"message-wrapper\" [ngClass]=\"{'show': backdropConfig().showMessage}\">\r\n      <span>{{ backdropConfig().message | translate }}</span>\r\n    </div>\r\n    <div class=\"content-backdrop\" [ngClass]=\"{'transparent': backdropConfig().showTransparentBackdrop}\" (click)=\"backdropClick()\">\r\n    </div>\r\n    <div class=\"flex flex-col flex-auto gap-4 h-full w-full overflow-hidden relative\">\r\n      @if (showFullscreenButton()) {\r\n        <button mat-icon-button type=\"button\" class=\"absolute top-2 right-3 !z-10\" [ngClass]=\"!isLeftDrawerOpen() && !isRightDrawerOpen() ? '!block' : '!hidden' \" (mouseover)=\"mouseOver()\" (mouseout)=\"hoverActive.set(false)\"\r\n                [matTooltip]=\"fullScreenEnabled() ? ('COMMON.EXIT_FULLSCREEN' | translate) : ('COMMON.ENTER_FULLSCREEN' | translate)\" (click)=\"fullscreenService.toggleFullScreen(); hoverActive.set(false)\" matTooltipPosition=\"left\">\r\n          @if (fullScreenEnabled()) {\r\n            <mat-icon>fullscreen_exit</mat-icon>\r\n          } @else {\r\n            <mat-icon>fullscreen</mat-icon>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-content select=\"[details]\"></ng-content>\r\n    </div>\r\n  </div>\r\n  <div class=\"absolute h-full drawer right\" [ngClass]=\"{open : isRightDrawerOpen()}\" [ngStyle]=\"{'width': isRightDrawerOpen() ? rightDrawerConfig()?.width : '0px'}\">\r\n    <button mat-flat-button class=\"drawer-toggle\"\r\n            (click)=\"toggleRightDrawer()\"\r\n            [ngClass]=\"{'destructive-flat-button': isRightDrawerOpen()}\"\r\n            [matTooltip]=\"isRightDrawerOpen() ? ('COMMON.COLLAPSE_NAVIGATION' | translate) : ('COMMON.EXPAND_NAVIGATION' | translate)\"\r\n            matTooltipPosition=\"right\">\r\n      <span class=\"block\"><mat-icon [svgIcon]=\"isRightDrawerOpen() ? 'close' : 'arrow_left'\"></mat-icon></span>\r\n    </button>\r\n    <div class=\"h-full w-full\" [ngClass]=\"{'overflow-hidden': !isRightDrawerOpen()}\">\r\n      <ng-content select=\"[right-drawer]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%;max-height:100%;max-width:100%;box-sizing:border-box}.drawer{z-index:10;width:0;max-width:calc(100% - 40px);transition:all .3s cubic-bezier(.4,0,.2,1) 0s;position:relative;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer:after{content:\"\";display:block;width:100%;height:100%;opacity:.6;position:absolute;inset:0;background-color:var(--mat-sys-surface-container);z-index:-1}.drawer .drawer-toggle{position:absolute;bottom:16px;right:0;word-break:keep-all;white-space:nowrap;min-width:fit-content!important;width:fit-content!important;transform:translate(100%);border-radius:0 5px 5px 0!important;padding:0 10px}.drawer .drawer-toggle.drawer-toggle-name{max-width:300px!important;min-width:unset!important;overflow:hidden}.drawer .drawer-toggle.drawer-toggle-name span{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis}.drawer .drawer-toggle .toggle-icon-small{margin:0 6px;height:10px;width:10px}.drawer.right{right:0;top:0}.drawer.right .drawer-toggle{display:none;position:absolute;bottom:16px;left:0;transform:translate(-100%);border-radius:5px 0 0 5px!important}.drawer.right .drawer-toggle span{line-height:12px}.drawer.right .drawer-toggle span mat-icon{height:24px;width:24px}.drawer.open{border-right:1px solid var(--mat-sys-outline-variant)}.drawer.open.right .drawer-toggle{display:block}.drawer.open.right{border-right:unset;border-left:1px solid var(--mat-sys-outline-variant)}.drawer.open .drawer-toggle span{line-height:12px}.drawer.open .drawer-toggle span mat-icon{height:24px;width:24px}:host-context(.alt-theme) .drawer.after{background-color:var(--mat-sys-surface-container-lowest)}.content-wrapper{position:relative}.content-wrapper .content-backdrop{transition:all .3s cubic-bezier(.4,0,.2,1) 0s;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;z-index:-1;background-color:transparent}.content-wrapper .message-wrapper{transition:all .5s cubic-bezier(.4,0,.2,1) 0s;position:absolute;right:32px;top:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:10px;padding:0 1rem;height:2.5rem;box-sizing:border-box;background-color:var(--mat-sys-primary);color:var(--mat-sys-surface-container);opacity:0;z-index:-1}.content-wrapper .message-wrapper.show{opacity:1;z-index:4}.content-wrapper.open .content-backdrop{background-color:#000;opacity:.5;z-index:3}.content-wrapper.open .content-backdrop.transparent{background-color:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onMouseMove: [{
                 type: HostListener,
                 args: ['window:mousemove']
@@ -7742,9 +7742,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class BulkConfirmationDialogComponent {
     data;
     dialog;
-    isDeleteMode = signal(true, ...(ngDevMode ? [{ debugName: "isDeleteMode" }] : []));
-    action = signal('COMMON.DELETE_SELECTED', ...(ngDevMode ? [{ debugName: "action" }] : []));
-    title = signal('COMMON.DELETE_SELECTED_TITLE', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    isDeleteMode = signal(true, ...(ngDevMode ? [{ debugName: "isDeleteMode" }] : /* istanbul ignore next */ []));
+    action = signal('COMMON.DELETE_SELECTED', ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    title = signal('COMMON.DELETE_SELECTED_TITLE', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     constructor(data, dialog) {
         this.data = data;
         this.dialog = dialog;
@@ -7761,12 +7761,12 @@ class BulkConfirmationDialogComponent {
     confirm() {
         this.dialog.close(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BulkConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BulkConfirmationDialogComponent, isStandalone: true, selector: "app-delete-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n  <div class=\"text-lg\">{{ title() | translate: {entity: data.entity} }}</div>\n  <div class=\"flex flex-col flex-auto gap-y-4\">\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n      <div class=\"flex flex-col flex-auto gap-y-2\">\n        <div>{{ 'COMMON.SELECTED_ITEMS' | translate: {entity: data.entity} }}</div>\n        <mat-divider></mat-divider>\n      </div>\n      <div class=\"flex flex-col flex-auto gap-y-2 overflow-auto\">\n        @for (item of data.items; track $index) {\n          <div>{{ item }}</div>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n    <button [ngClass]=\" isDeleteMode() ? 'destructive-flat-button' : ''\" mat-flat-button\n            (click)=\"confirm()\">{{ this.action() | translate: {count: data.items.length, entity: data.entity} }}\n    </button>\n  </div>\n</div>\n", styles: [".content{width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.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: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BulkConfirmationDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: BulkConfirmationDialogComponent, isStandalone: true, selector: "app-delete-confirmation-dialog", ngImport: i0, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ title() | translate: {entity: data.entity} }}</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=\"flex flex-col flex-auto gap-y-2\">\r\n        <div>{{ 'COMMON.SELECTED_ITEMS' | translate: {entity: data.entity} }}</div>\r\n        <mat-divider></mat-divider>\r\n      </div>\r\n      <div class=\"flex flex-col flex-auto gap-y-2 overflow-auto\">\r\n        @for (item of data.items; track $index) {\r\n          <div>{{ item }}</div>\r\n        }\r\n      </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]=\" isDeleteMode() ? 'destructive-flat-button' : ''\" mat-flat-button\r\n            (click)=\"confirm()\">{{ this.action() | translate: {count: data.items.length, entity: data.entity} }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{width:var(--medium-dialog-width)}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1$4.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: "directive", type: i1$5.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i1$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BulkConfirmationDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BulkConfirmationDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-delete-confirmation-dialog', imports: [SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\n  <div class=\"text-lg\">{{ title() | translate: {entity: data.entity} }}</div>\n  <div class=\"flex flex-col flex-auto gap-y-4\">\n    <div class=\"flex flex-col flex-auto gap-y-4 max-h-96 overflow-hidden\">\n      <div class=\"flex flex-col flex-auto gap-y-2\">\n        <div>{{ 'COMMON.SELECTED_ITEMS' | translate: {entity: data.entity} }}</div>\n        <mat-divider></mat-divider>\n      </div>\n      <div class=\"flex flex-col flex-auto gap-y-2 overflow-auto\">\n        @for (item of data.items; track $index) {\n          <div>{{ item }}</div>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-row flex-auto gap-x-2 justify-end\">\n    <button mat-button mat-dialog-close>{{ 'COMMON.CANCEL' | translate }}</button>\n    <button [ngClass]=\" isDeleteMode() ? 'destructive-flat-button' : ''\" mat-flat-button\n            (click)=\"confirm()\">{{ this.action() | translate: {count: data.items.length, entity: data.entity} }}\n    </button>\n  </div>\n</div>\n", styles: [".content{width:var(--medium-dialog-width)}\n"] }]
+            args: [{ selector: 'app-delete-confirmation-dialog', imports: [SharedModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col flex-auto gap-y-8 p-4 content\">\r\n  <div class=\"text-lg\">{{ title() | translate: {entity: data.entity} }}</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=\"flex flex-col flex-auto gap-y-2\">\r\n        <div>{{ 'COMMON.SELECTED_ITEMS' | translate: {entity: data.entity} }}</div>\r\n        <mat-divider></mat-divider>\r\n      </div>\r\n      <div class=\"flex flex-col flex-auto gap-y-2 overflow-auto\">\r\n        @for (item of data.items; track $index) {\r\n          <div>{{ item }}</div>\r\n        }\r\n      </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]=\" isDeleteMode() ? 'destructive-flat-button' : ''\" mat-flat-button\r\n            (click)=\"confirm()\">{{ this.action() | translate: {count: data.items.length, entity: data.entity} }}\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".content{width:var(--medium-dialog-width)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]