ngx-edu-sharing-metaqs2 0.9.53 → 0.9.54

package/fesm2022/ngx-edu-sharing-metaqs2.mjs

@@ -1,53 +1,49 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Pipe, Component, Input, Output, inject, Renderer2, Injector, ChangeDetectionStrategy, HostBinding, LOCALE_ID, ElementRef, ViewChild, Directive, DestroyRef, signal, computed, ViewChildren, HostListener, EventEmitter, effect, enableProdMode, importProvidersFrom } from '@angular/core';
-import * as i3$1 from '@angular/material/card';
+import { InjectionToken, Optional, Inject, Injectable, SkipSelf, NgModule, input, Input, Component, inject, Renderer2, Injector, Pipe, ChangeDetectionStrategy, HostBinding, ElementRef, LOCALE_ID, ViewChild, Directive, DestroyRef, signal, computed, viewChild, viewChildren, HostListener, EventEmitter, Output, effect, enableProdMode, importProvidersFrom } from '@angular/core';
+import * as i3 from '@angular/material/card';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardModule } from '@angular/material/card';
 import { MatTreeModule } from '@angular/material/tree';
 import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
-import * as i1$4 from '@angular/material/icon';
+import * as i1$3 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/slider';
+import * as i7 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i6 from '@angular/material/button';
 import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
-import * as i2$2 from '@angular/material/progress-spinner';
+import * as i2$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i5$1 from '@angular/material/table';
+import * as i5 from '@angular/material/table';
 import { MatTable, MatCell, MatColumnDef, MatHeaderCell, MatHeaderRow, MatRow, MatHeaderRowDef, MatRowDef, MatHeaderCellDef, MatCellDef, MatTableModule } from '@angular/material/table';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i1$1 from '@angular/material/form-field';
-import { MatFormFieldModule, MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatFormField, MatLabel, MatSuffix, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i1$2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule, FormRecord, FormGroup } from '@angular/forms';
-import * as i2 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
+import { MatSelect, MatOption, MatSelectModule } from '@angular/material/select';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpParams, provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
-import { pipe, of, BehaviorSubject, Subject, combineLatest, forkJoin } from 'rxjs';
-import { map, catchError, startWith, take, tap, switchMap, finalize, filter, throttleTime, takeUntil, shareReplay, distinctUntilChanged, skipWhile } from 'rxjs/operators';
-import * as i2$4 from '@angular/platform-browser';
+import * as i2$3 from '@angular/platform-browser';
 import { BrowserModule, createApplication } from '@angular/platform-browser';
 import { MatListModule } from '@angular/material/list';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatCheckbox } from '@angular/material/checkbox';
-import * as i2$1 from '@angular/common';
-import { NgForOf, NgIf, KeyValuePipe, NgClass, AsyncPipe, DOCUMENT } from '@angular/common';
-import * as i3 from '@angular/material/core';
-import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatRipple } from '@angular/material/core';
-import * as i2$3 from '@ngx-translate/core';
+import { outputFromObservable, toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import * as i2$2 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Subject, of, combineLatest, pipe, forkJoin } from 'rxjs';
+import { take, map, tap, switchMap, finalize, filter, throttleTime, catchError, startWith, takeUntil, shareReplay, distinctUntilChanged, skipWhile } from 'rxjs/operators';
 import { DateTime } from 'luxon';
-import * as i1$3 from '@angular/cdk/overlay';
+import * as i2 from '@angular/common';
+import { NgForOf, NgIf, CommonModule, KeyValuePipe, NgClass, NgFor, AsyncPipe, DOCUMENT } from '@angular/common';
+import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle, MatDateRangeInput, MatDatepickerModule, MatDateRangePicker } from '@angular/material/datepicker';
-import { LuxonDateAdapter, MAT_LUXON_DATE_ADAPTER_OPTIONS } from '@angular/material-luxon-adapter';
+import { MAT_LUXON_DATE_ADAPTER_OPTIONS, LuxonDateAdapter } from '@angular/material-luxon-adapter';
+import { MatRipple, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { createCustomElement } from '@angular/elements';
@@ -327,10 +323,10 @@ class AuthProxyControllerService extends BaseService {
             reportProgress: reportProgress,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthProxyControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthProxyControllerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthProxyControllerService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthProxyControllerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthProxyControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AuthProxyControllerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -728,10 +724,10 @@ class CollectionAPIService extends BaseService {
             reportProgress: reportProgress,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionAPIService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionAPIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionAPIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -877,10 +873,10 @@ class EditorsAPIService extends BaseService {
             reportProgress: reportProgress,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorsAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorsAPIService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditorsAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditorsAPIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorsAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditorsAPIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1106,10 +1102,10 @@ class FilterAPIService extends BaseService {
             reportProgress: reportProgress,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAPIService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterAPIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterAPIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1328,10 +1324,10 @@ class ReplicationSourceAPIService extends BaseService {
             reportProgress: reportProgress,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplicationSourceAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplicationSourceAPIService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReplicationSourceAPIService, deps: [{ token: i1.HttpClient }, { token: BASE_PATH, optional: true }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReplicationSourceAPIService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReplicationSourceAPIService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ReplicationSourceAPIService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1443,11 +1439,11 @@ class ApiModule {
                 'See also https://github.com/angular/angular/issues/20575');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ApiModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApiModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApiModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -1463,23 +1459,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     type: Optional
                 }] }] });
 
-function wrapResponse() {
-    return pipe(map((data) => ({ state: 'success', data })), catchError((error) => of({ state: 'error', error })), startWith({ state: 'loading' }));
-}
-class WrapObservablePipe {
-    transform(value) {
-        return value.pipe(wrapResponse());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WrapObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: WrapObservablePipe, name: "wrapObservable" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WrapObservablePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'wrapObservable',
-                }]
-        }] });
-
 class NgMetaWidgetsLibConfiguration {
 }
 const NG_META_WIDGETS_LIB_CONFIGURATION = new InjectionToken('NG_META_WIDGETS_LIB_CONFIGURATION');
@@ -1500,10 +1479,10 @@ class ConfigHelperService {
     get eduSharingPath() {
         return this.config.eduSharingPath;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfigHelperService, deps: [{ token: NG_META_WIDGETS_LIB_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfigHelperService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfigHelperService, deps: [{ token: NG_META_WIDGETS_LIB_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfigHelperService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfigHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConfigHelperService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: NgMetaWidgetsLibConfiguration, decorators: [{
                     type: Inject,
@@ -1521,30 +1500,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class QualityMatrixFilterComponent {
     constructor() {
         this.inputFormControl = new FormControl();
-        this.multiple = true;
-        this.changedFilters = this.inputFormControl.valueChanges;
+        this.label = input();
+        this.multiple = input(true);
+        this.changedFilters = outputFromObservable(this.inputFormControl.valueChanges);
     }
-    optionIdent(_index, option) {
-        return option.id;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QualityMatrixFilterComponent, isStandalone: true, selector: "metaqs2-qm-filter", inputs: { options: "options", inputFormControl: "inputFormControl", label: "label", multiple: "multiple" }, outputs: { changedFilters: "changedFilters" }, ngImport: i0, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>Filter by {{ label }}</mat-label>\n  <mat-select\n    [multiple]=\"multiple\"\n    [formControl]=\"inputFormControl\"\n  >\n      <mat-option *ngFor=\"let option of options; trackBy: optionIdent \"  [value]=\"option.id\"> {{ option.label }} </mat-option>\n\n  </mat-select>\n</mat-form-field>\n", styles: [":host ::ng-deep>mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QualityMatrixFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: QualityMatrixFilterComponent, isStandalone: true, selector: "metaqs2-qm-filter", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, inputFormControl: { classPropertyName: "inputFormControl", publicName: "inputFormControl", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changedFilters: "changedFilters" }, ngImport: i0, template: "<mat-form-field appearance=\"outline\">\n  <mat-label>Filter by {{ label() }}</mat-label>\n  <mat-select\n    [multiple]=\"multiple()\"\n    [formControl]=\"inputFormControl\"\n  >\n  @for( option of options ; track option.id ) {\n    <mat-option [value]=\"option.id\"> {{ option.label }} </mat-option>\n  }\n  </mat-select>\n</mat-form-field>\n", styles: [":host ::ng-deep>mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QualityMatrixFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'metaqs2-qm-filter', standalone: true, imports: [MatFormFieldModule, MatSelectModule, ReactiveFormsModule, NgForOf], template: "<mat-form-field appearance=\"outline\">\n  <mat-label>Filter by {{ label }}</mat-label>\n  <mat-select\n    [multiple]=\"multiple\"\n    [formControl]=\"inputFormControl\"\n  >\n      <mat-option *ngFor=\"let option of options; trackBy: optionIdent \"  [value]=\"option.id\"> {{ option.label }} </mat-option>\n\n  </mat-select>\n</mat-form-field>\n", styles: [":host ::ng-deep>mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
+            args: [{ selector: 'metaqs2-qm-filter', standalone: true, imports: [MatFormField, MatSelect, ReactiveFormsModule, MatOption, MatLabel], template: "<mat-form-field appearance=\"outline\">\n  <mat-label>Filter by {{ label() }}</mat-label>\n  <mat-select\n    [multiple]=\"multiple()\"\n    [formControl]=\"inputFormControl\"\n  >\n  @for( option of options ; track option.id ) {\n    <mat-option [value]=\"option.id\"> {{ option.label }} </mat-option>\n  }\n  </mat-select>\n</mat-form-field>\n", styles: [":host ::ng-deep>mat-form-field>.mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], 
         //must not be named "formControl" otherwise we would have to implement ControlValueAccessor
         inputFormControl: [{
                 type: Input
-            }], label: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], changedFilters: [{
-                type: Output
             }] } });
 
 /**
@@ -1610,10 +1581,10 @@ class MetaApiService {
     getMaterialTypesMapping() {
         return this.filterAPI.getMaterialTypesMapping();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetaApiService, deps: [{ token: CollectionAPIService }, { token: ReplicationSourceAPIService }, { token: FilterAPIService }, { token: EditorsAPIService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetaApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaApiService, deps: [{ token: CollectionAPIService }, { token: ReplicationSourceAPIService }, { token: FilterAPIService }, { token: EditorsAPIService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetaApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MetaApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1772,10 +1743,10 @@ class EditorialLinkService {
         params.set('filters', JSON.stringify(filters));
         return `${theUrl}?${params}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorialLinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorialLinkService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditorialLinkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditorialLinkService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorialLinkService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditorialLinkService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1914,10 +1885,10 @@ class TooltipService {
         }));
         return tooltipRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TooltipService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1960,10 +1931,10 @@ class DonutChartPipe {
     percentToDegrees(percent) {
         return percent * 3.6;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DonutChartPipe, isStandalone: true, name: "slicesWithCommandsAndOffset" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DonutChartPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: DonutChartPipe, isStandalone: true, name: "slicesWithCommandsAndOffset" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DonutChartPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'slicesWithCommandsAndOffset',
@@ -1995,8 +1966,8 @@ class DonutChartComponent {
     trackByFn(index, slice) {
         return slice.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DonutChartComponent, isStandalone: true, selector: "metaqs2-donut-chart", inputs: { radius: "radius", viewBox: "viewBox", borderSize: "borderSize", strokeWidth: "strokeWidth", data: "data" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DonutChartComponent, isStandalone: true, selector: "metaqs2-donut-chart", inputs: { radius: "radius", viewBox: "viewBox", borderSize: "borderSize", strokeWidth: "strokeWidth", data: "data" }, ngImport: i0, template: `
     <svg [attr.viewBox]="'0 0 ' + viewBox + ' ' + viewBox" *ngIf="data">
       <path
         *ngFor="
@@ -2018,7 +1989,7 @@ class DonutChartComponent {
     </svg>
   `, isInline: true, styles: [":host{display:block}svg{overflow:visible;transform-origin:center;width:3.5rem;aspect-ratio:1/1;rotate:-90deg}path{transform-origin:center;fill-opacity:.7;cursor:pointer}path:hover{fill-opacity:1}\n"], dependencies: [{ kind: "pipe", type: DonutChartPipe, name: "slicesWithCommandsAndOffset" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DonutChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-donut-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <svg [attr.viewBox]="'0 0 ' + viewBox + ' ' + viewBox" *ngIf="data">
@@ -2069,8 +2040,8 @@ class DonutChartTooltipComponent {
         this.animationState = true;
         this.data = inject(TOOLTIP_DATA);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DonutChartTooltipComponent, selector: "metaqs2-donut-chart-tooltip", host: { properties: { "@fadeInOut": "this.animationState" } }, ngImport: i0, template: "<h4>{{ data.label }}</h4>\n<p>Status</p>\n<ng-container *ngFor=\"let slicePair of data.data\">\n  <ng-container *ngIf=\"slicePair[1].percent > 0\">\n    <div style=\"display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem\">\n      <metaqs2-donut-chart [data]=\"slicePair\" [borderSize]=\"25\"></metaqs2-donut-chart>\n      <p>{{ slicePair[1].verboseLabel }}</p>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:1rem}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DonutChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DonutChartTooltipComponent, isStandalone: true, selector: "metaqs2-donut-chart-tooltip", host: { properties: { "@fadeInOut": "this.animationState" } }, ngImport: i0, template: "<h4>{{ data.label }}</h4>\n<p>Status</p>\n<ng-container *ngFor=\"let slicePair of data.data\">\n  <ng-container *ngIf=\"slicePair[1].percent > 0\">\n    <div style=\"display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem\">\n      <metaqs2-donut-chart [data]=\"slicePair\" [borderSize]=\"25\"></metaqs2-donut-chart>\n      <p>{{ slicePair[1].verboseLabel }}</p>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }], animations: [
             trigger('fadeInOut', [
                 transition(':enter', [
                     style({
@@ -2095,7 +2066,7 @@ class DonutChartTooltipComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DonutChartTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-donut-chart-tooltip', animations: [
                         trigger('fadeInOut', [
@@ -2120,7 +2091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                                 })),
                             ]),
                         ]),
-                    ], template: "<h4>{{ data.label }}</h4>\n<p>Status</p>\n<ng-container *ngFor=\"let slicePair of data.data\">\n  <ng-container *ngIf=\"slicePair[1].percent > 0\">\n    <div style=\"display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem\">\n      <metaqs2-donut-chart [data]=\"slicePair\" [borderSize]=\"25\"></metaqs2-donut-chart>\n      <p>{{ slicePair[1].verboseLabel }}</p>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:1rem}\n"] }]
+                    ], imports: [CommonModule, DonutChartComponent], template: "<h4>{{ data.label }}</h4>\n<p>Status</p>\n<ng-container *ngFor=\"let slicePair of data.data\">\n  <ng-container *ngIf=\"slicePair[1].percent > 0\">\n    <div style=\"display: flex; justify-content: flex-start; align-items: center; gap: 0.25rem\">\n      <metaqs2-donut-chart [data]=\"slicePair\" [borderSize]=\"25\"></metaqs2-donut-chart>\n      <p>{{ slicePair[1].verboseLabel }}</p>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;margin:1rem}\n"] }]
         }], propDecorators: { animationState: [{
                 type: HostBinding,
                 args: ['@fadeInOut']
@@ -2158,8 +2129,8 @@ class DatepickerComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatepickerComponent, isStandalone: true, selector: "metaqs2-datepicker", inputs: { disabled: "disabled", inputGroup: "inputGroup" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatepickerComponent, isStandalone: true, selector: "metaqs2-datepicker", inputs: { disabled: "disabled", inputGroup: "inputGroup" }, providers: [
             {
                 provide: DateAdapter,
                 useClass: LuxonDateAdapter,
@@ -2170,9 +2141,9 @@ class DatepickerComponent {
             { provide: LOCALE_ID, useValue: 'de-DE' },
             { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
             { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true, firstDayOfWeek: 1 } },
-        ], viewQueries: [{ propertyName: "start", first: true, predicate: ["start"], descendants: true, read: ElementRef, static: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: MatRipple, static: true }], ngImport: i0, template: "<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n  <!-- start date -->\n  <mat-form-field>\n    <mat-label>Zeitpunkt 1</mat-label>\n    <input matInput\n           #start\n           [disabled]=\"disabled\"\n           [min]=\"inputGroup.controls.start.defaultValue\"\n           [max]=\"inputGroup.controls.end.defaultValue\"\n           [matDatepicker]=\"picker1\" formControlName=\"start\"\n           placeholder=\"Starts date\"\n    >\n    <!--\n          <mat-hint>d.M.yyyy</mat-hint>\n    -->\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n    <mat-datepicker [disabled]=\"disabled\" #picker1 [startAt]=\"inputGroup.controls.start.defaultValue\">\n    </mat-datepicker>\n  </mat-form-field>\n  <!-- /start date -->\n  <!-- end date -->\n  <mat-form-field>\n    <mat-label>Zeitpunkt2</mat-label>\n    <input matInput\n           [disabled]=\"disabled\"\n           [min]=\"inputGroup.controls.start.defaultValue\"\n           [max]=\"inputGroup.controls.end.defaultValue\"\n           [matDatepicker]=\"picker2\"\n           formControlName=\"end\"\n           placeholder=\"End date\"\n    >\n    <!--\n    <mat-hint>d.M.yyyy</mat-hint>\n    -->\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n    <mat-datepicker [disabled]=\"disabled\" #picker2 [startAt]=\"inputGroup.controls.end.value\">\n    </mat-datepicker>\n  </mat-form-field>\n  <!-- /end date -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+        ], viewQueries: [{ propertyName: "start", first: true, predicate: ["start"], descendants: true, read: ElementRef, static: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: MatRipple, static: true }], ngImport: i0, template: "<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n  <!-- start date -->\n  <mat-form-field>\n    <mat-label>Zeitpunkt 1</mat-label>\n    <input matInput\n           #start\n           [disabled]=\"disabled\"\n           [min]=\"inputGroup.controls.start.defaultValue\"\n           [max]=\"inputGroup.controls.end.defaultValue\"\n           [matDatepicker]=\"picker1\" formControlName=\"start\"\n           placeholder=\"Starts date\"\n    >\n    <!--\n          <mat-hint>d.M.yyyy</mat-hint>\n    -->\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n    <mat-datepicker [disabled]=\"disabled\" #picker1 [startAt]=\"inputGroup.controls.start.defaultValue\">\n    </mat-datepicker>\n  </mat-form-field>\n  <!-- /start date -->\n  <!-- end date -->\n  <mat-form-field>\n    <mat-label>Zeitpunkt2</mat-label>\n    <input matInput\n           [disabled]=\"disabled\"\n           [min]=\"inputGroup.controls.start.defaultValue\"\n           [max]=\"inputGroup.controls.end.defaultValue\"\n           [matDatepicker]=\"picker2\"\n           formControlName=\"end\"\n           placeholder=\"End date\"\n    >\n    <!--\n    <mat-hint>d.M.yyyy</mat-hint>\n    -->\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n    <mat-datepicker [disabled]=\"disabled\" #picker2 [startAt]=\"inputGroup.controls.end.value\">\n    </mat-datepicker>\n  </mat-form-field>\n  <!-- /end date -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-datepicker', standalone: true, imports: [
                         FormsModule,
@@ -2245,13 +2216,13 @@ class OverlayService {
         ])
             .withLockedPosition();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayService, deps: [{ token: i1$3.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OverlayService, deps: [{ token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.Overlay }] });
+        }], ctorParameters: () => [{ type: i1$2.Overlay }] });
 
 class ProgressSpinnerComponent {
     constructor(vcRef, overlayService, el) {
@@ -2290,10 +2261,10 @@ class ProgressSpinnerComponent {
             ? this.overlayService.attachTemplatePortal(this.overlayRef, this.progressSpinnerRef, this.vcRef)
             : this.overlayRef.detach();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, deps: [{ token: i0.ViewContainerRef }, { token: OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProgressSpinnerComponent, isStandalone: true, selector: "metaqs2-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", backdropEnabled: "backdropEnabled", positionGloballyCenter: "positionGloballyCenter", displayProgressSpinner: "displayProgressSpinner" }, viewQueries: [{ propertyName: "progressSpinnerRef", first: true, predicate: ["progressSpinnerRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressSpinnerComponent, deps: [{ token: i0.ViewContainerRef }, { token: OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ProgressSpinnerComponent, isStandalone: true, selector: "metaqs2-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", backdropEnabled: "backdropEnabled", positionGloballyCenter: "positionGloballyCenter", displayProgressSpinner: "displayProgressSpinner" }, viewQueries: [{ propertyName: "progressSpinnerRef", first: true, predicate: ["progressSpinnerRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-progress-spinner', standalone: true, imports: [MatProgressSpinnerModule], template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: OverlayService }, { type: i0.ElementRef }], propDecorators: { color: [{
@@ -2317,10 +2288,10 @@ class ScrollMarkerDirective {
     constructor() {
         this.element = inject(ElementRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ScrollMarkerDirective, isStandalone: true, selector: "[metaqs2ScrollMarker]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ScrollMarkerDirective, isStandalone: true, selector: "[metaqs2ScrollMarker]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ScrollMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[metaqs2ScrollMarker]',
@@ -2370,6 +2341,17 @@ class QualityMatrixComponent {
         this.categoryControls = new FormRecord({});
         this.loadingCount = signal(0);
         this.isLoading = computed(() => this.loadingCount() > 0);
+        // @ViewChildren(ScrollMarkerDirective)
+        // private readonly scrollMarkers!: ReadonlyArray<ScrollMarkerDirective>;
+        // @ViewChild('issueType', {
+        //   read: ElementRef,
+        //   static: true,
+        // })
+        // private readonly issueTypeHeader!: ElementRef<HTMLTableCellElement>;
+        this.issueTypeHeader = viewChild('issueType', {
+            read: ElementRef,
+        });
+        this.scrollMarkers = viewChildren(ScrollMarkerDirective);
         this.categoryFilterValues = new Map();
         this.refresh$ = new Subject();
         this.recentQualityMatrix$ = new BehaviorSubject({ columns: [], rows: [] });
@@ -2400,9 +2382,6 @@ class QualityMatrixComponent {
     ngAfterViewChecked() {
         this.onScroll();
     }
-    filterIdent(_index, item) {
-        return item.key;
-    }
     loadData(categories, date) {
         return of(undefined).pipe(tap(() => this.loadingCount.update((it) => it + 1)), switchMap(() => this.metaApi
             .getQualityMatrixWithFiltersV2([
@@ -2620,11 +2599,11 @@ class QualityMatrixComponent {
             return;
         }
         const viewportWidth = viewport.width;
-        const lastVisible = this.scrollMarkers.findLast((marker) => marker.element.nativeElement.getBoundingClientRect().left < viewportWidth);
+        const lastVisible = this.scrollMarkers().findLast((marker) => marker.element.nativeElement.getBoundingClientRect().left < viewportWidth);
         if (!lastVisible) {
             return;
         }
-        const leftColumnWidth = this.issueTypeHeader?.nativeElement.getBoundingClientRect().width ?? 0;
+        const leftColumnWidth = this.issueTypeHeader()?.nativeElement.getBoundingClientRect().width ?? 0;
         scrollingElement.scrollBy({
             left: lastVisible.element.nativeElement.getBoundingClientRect().left - leftColumnWidth,
             behavior: 'smooth',
@@ -2640,8 +2619,8 @@ class QualityMatrixComponent {
             return;
         }
         const viewportWidth = viewport.width;
-        const leftColumnWidth = this.issueTypeHeader?.nativeElement.getBoundingClientRect().width ?? 0;
-        const firstVisible = this.scrollMarkers.find((marker) => marker.element.nativeElement.getBoundingClientRect().right > leftColumnWidth);
+        const leftColumnWidth = this.issueTypeHeader()?.nativeElement.getBoundingClientRect().width ?? 0;
+        const firstVisible = this.scrollMarkers().find((marker) => marker.element.nativeElement.getBoundingClientRect().right > leftColumnWidth);
         if (!firstVisible) {
             return;
         }
@@ -2658,10 +2637,10 @@ class QualityMatrixComponent {
         this.scrollLeft.set(scrollingElement.scrollLeft);
         this.scrollWidth.set(scrollingElement.scrollWidth);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QualityMatrixComponent, isStandalone: true, selector: "metaqs2-quality-matrix-v2", inputs: { pageTitle: "pageTitle" }, host: { listeners: { "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, providers: [TooltipService], viewQueries: [{ propertyName: "issueTypeHeader", first: true, predicate: ["issueType"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollMarkers", predicate: ScrollMarkerDirective, descendants: true }], ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-qm-filter *ngFor=\"let filter of categoryControls.controls | keyvalue; trackBy: filterIdent\"\n                       [options]=\"categoryFilterValues.get(filter.key)\"\n                       [inputFormControl]=\"filter.value\"\n                       [label] = \"'filter.' + filter.key | translate\" />\n    <div class=\"actionbar\">\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isOnlySourcesWithMaterialEnabledFormField\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-datepicker *ngIf=\"isHistoricalDataEnabled()\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isHistoricalDataEnabledFormField\" id=\"showHistoricalData\">\n        show historical data\n      </mat-slide-toggle>\n      <button\n        mat-icon-button\n        color=\"primary\"\n        [disabled]=\"isLoading()\"\n        (click)=\"refresh()\"\n        matTooltip=\"Aktualisiere den IST-Stand\"\n        matTooltipShowDelay=\"500\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n      <div style=\"flex: 0 0 {{scroller.getBoundingClientRect().width}}px\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix().rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef #issueType>Issue Type</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{\"quality_matrix.\" + row.meta.label | translate }}\n      </td>\n    </ng-container>\n    <!-- one column for the source -->\n    <ng-container *ngFor=\"let col of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"col.id + '_source'\">\n      <th [attr.colspan]=\"isHistoricalDataEnabled() ? 2 : 1\" metaqs2ScrollMarker mat-header-cell *matHeaderCellDef matTooltip=\"{{col.altLabel}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- current Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_current'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"{{column.altLabel}}\">{{ range.controls.end.value?.toLocaleString(DateTime.DATE_SHORT) }} <br>({{column.total}})</th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\" #cell (mouseover)=\"showTooltip(row, column, cell)\" (mouseleave)=\"hideTooltip(cell)\">\n          <a *ngIf=\"column.total > 0 else emptyDiv\" class=\"chart-container\" (click)=\"openEditLink( column.label, row.meta.label)\">\n            <div>\n              <metaqs2-donut-chart [data]=\"getDonutSlices(row, column)\" [borderSize]=\"25\"></metaqs2-donut-chart>\n            </div>\n          </a>\n          <ng-template #emptyDiv>\n            <div>-</div>\n          </ng-template>\n      </td>\n    </ng-container>\n    <!-- /current Data Columns -->\n    <!-- past Data Columns -->\n    <ng-container *ngIf=\"isHistoricalDataEnabled()\">\n      <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_past'\">\n        <th class=\"historic-data-cell\" mat-header-cell\n            *matHeaderCellDef>{{ range.controls.start.value?.toLocaleString(DateTime.DATE_SHORT) }}\n          <br>{{ getPastColumn(column.id)?.total }}\n        </th>\n        <td class=\"historic-data-cell\" mat-cell *matCellDef=\"let row\">\n          <ng-container *ngIf=\"getTrend(row, column) as trend\">\n            <span [ngClass]=\"trend.trend\">\n              <mat-icon aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" />\n              {{ trend.delta }}\n            </span>\n          </ng-container>\n\n        </td>\n      </ng-container>\n    </ng-container>\n    <!-- /past Data Columns -->\n\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(sourceColumns()); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"allDataColumns(); sticky: true;\" [hidden]=\"!isHistoricalDataEnabled()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(allDataColumns())\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}mat-card-actions>mat-slide-toggle{margin-left:20px}.row{flex-grow:1;display:flex;align-items:center}table{width:100%;overflow-y:auto}table .scroll{flex-grow:1;overflow-y:auto}table th{vertical-align:top;padding:.375rem}table th:not(:last-child){border-right:1px solid #e4e4e4}table tr:first-child>th:first-child{text-align:left}table td:first-child{text-align:left}.cell{flex:1}.mat-mdc-cell{padding-top:5px}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;text-align:center}.mat-mdc-cell a.chart-container,.mat-mdc-header-cell a.chart-container{display:flex;justify-content:center}.mat-mdc-cell .trending_up,.mat-mdc-header-cell .trending_up{color:#4abeff}.mat-mdc-cell .trending_down,.mat-mdc-header-cell .trending_down{color:#c20808}.recent-data-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-header-cell-label{color:#000;padding-left:30px;padding-right:30px;justify-content:left;border-bottom:1px solid #e4e4e4;font-style:normal;font-weight:500;font-size:110%;background:#ddf0fb;text-align:left}.mat-header-cell-label>div{display:flex;font-weight:700;font-style:normal;justify-content:left}.mat-header-cell-small{padding-left:5px;padding-right:5px;justify-content:left;font-style:normal;font-weight:400;font-size:105%;background:#ddf0fb;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.mat-mdc-cell a{cursor:pointer;display:flex;align-items:center;justify-content:left}.mat-mdc-cell a>mat-icon{padding-right:5px;font-size:22px;height:20px;opacity:.75}.mat-mdc-cell a>mat-icon:hover,.mat-mdc-cell a>mat-icon:focus{text-decoration:none}.mat-mdc-cell .number{display:flex;height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header-sum{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;border-right:5px solid #bdbdbd}.mat-mdc-card{width:100%;box-shadow:none}.mat-mdc-card ::ng-deep mat-card-header{align-items:center}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.mat-mdc-card .source-header{font-style:normal;font-weight:400;font-size:20px;height:30px;width:60%}.mat-mdc-card .source-header .robot-explanation{font-size:15px}.mat-mdc-card .scroll{flex-grow:1;overflow-y:auto}.mat-header-cell-scope{color:#545454}.mat-mdc-header-row{height:70px;max-height:70px;min-height:56px}:host{overflow:auto}:host ::ng-deep thead{border:10px solid #ff0000;position:relative;z-index:1}.mat-cell-level-1{padding-left:20px!important}.mat-cell-level-2{padding-left:40px!important}.mat-cell-level-3{padding-left:60px!important}.mat-cell-level-4{padding-left:80px!important}.mat-cell-level-5{padding-left:100px!important}.mat-cell-level-6{padding-left:120px!important}.mat-cell-level-7{padding-left:140px!important}.mat-cell-level-8{padding-left:160px!important}.actionbar{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: QualityMatrixFilterComponent, selector: "metaqs2-qm-filter", inputs: ["options", "inputFormControl", "label", "multiple"], outputs: ["changedFilters"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }, { kind: "directive", type: ScrollMarkerDirective, selector: "[metaqs2ScrollMarker]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QualityMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: QualityMatrixComponent, isStandalone: true, selector: "metaqs2-quality-matrix-v2", inputs: { pageTitle: "pageTitle" }, host: { listeners: { "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, providers: [TooltipService], viewQueries: [{ propertyName: "issueTypeHeader", first: true, predicate: ["issueType"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "scrollMarkers", predicate: ScrollMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "\n<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    @for( filter of categoryControls.controls | keyvalue ; track filter.key ) {\n      <metaqs2-qm-filter [options]=\"categoryFilterValues.get(filter.key)\" [inputFormControl]=\"filter.value\"\n      [label]=\"'filter.' + filter.key | translate\"></metaqs2-qm-filter>\n    }@empty {\n      <metaqs2-qm-filter aria-disabled=\"true\" [label]=\"'Filter'\"></metaqs2-qm-filter>     \n    }\n    <div class=\"actionbar\">\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isOnlySourcesWithMaterialEnabledFormField\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      @if (isHistoricalDataEnabled()) {\n        <metaqs2-datepicker [disabled]=\"isLoading()\" [inputGroup]=\"range\"></metaqs2-datepicker>     \n      }\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isHistoricalDataEnabledFormField\" id=\"showHistoricalData\">\n        show historical data\n      </mat-slide-toggle>\n      <button\n        mat-icon-button\n        color=\"primary\"\n        [disabled]=\"isLoading()\"\n        (click)=\"refresh()\"\n        matTooltip=\"Aktualisiere den IST-Stand\"\n        matTooltipShowDelay=\"500\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n      <div [style.flex]=\"'0 0 ' + (scroller?.getBoundingClientRect()?.width || 0) + 'px'\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix().rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef #issueType>Issue Type</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{\"quality_matrix.\" + row.meta.label | translate }}\n      </td>\n    </ng-container>\n    <!-- one column for the source -->\n    <ng-container *ngFor=\"let col of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"col.id + '_source'\">\n      <th [attr.colspan]=\"isHistoricalDataEnabled() ? 2 : 1\" metaqs2ScrollMarker mat-header-cell *matHeaderCellDef matTooltip=\"{{col.altLabel}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- current Data Columns -->\n     <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_current'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"{{column.altLabel}}\">{{ range.controls.end.value?.toLocaleString(DateTime.DATE_SHORT) }} <br>({{column.total}})</th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\" #cell (mouseover)=\"showTooltip(row, column, cell)\" (mouseleave)=\"hideTooltip(cell)\">\n          @if ( column.total > 0) {\n            <a class=\"chart-container\" (click)=\"openEditLink( column.label,  row.meta.label)\">\n              <div>\n                <metaqs2-donut-chart [data]=\"getDonutSlices(row, column)\" [borderSize]=\"25\"></metaqs2-donut-chart>\n              </div>\n            </a>\n          \n          } @else {\n            <div>-</div>     \n          }\n      </td>\n    </ng-container>\n    <!-- /current Data Columns -->\n\n    @if (isHistoricalDataEnabled()) {\n    <!-- past Data Columns -->\n      <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_past'\">\n        <th class=\"historic-data-cell\" mat-header-cell\n            *matHeaderCellDef>{{ range.controls.start.value?.toLocaleString(DateTime.DATE_SHORT) }}\n          <br>{{ getPastColumn(column.id)?.total }}\n        </th>\n        <td class=\"historic-data-cell\" mat-cell *matCellDef=\"let row\">\n          <ng-container *ngIf=\"getTrend(row, column) as trend\">\n            <span [ngClass]=\"trend.trend\">\n              <mat-icon aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" />\n              {{ trend.delta }}\n            </span>\n          </ng-container>\n\n        </td>\n      </ng-container>\n    <!-- /past Data Columns -->\n    }\n\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(sourceColumns()); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"allDataColumns(); sticky: true;\" [hidden]=\"!isHistoricalDataEnabled()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(allDataColumns())\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}mat-card-actions>mat-slide-toggle{margin-left:20px}.row{flex-grow:1;display:flex;align-items:center}table{width:100%;overflow-y:auto}table .scroll{flex-grow:1;overflow-y:auto}table th{vertical-align:top;padding:.375rem}table th:not(:last-child){border-right:1px solid #e4e4e4}table tr:first-child>th:first-child{text-align:left}table td:first-child{text-align:left}.cell{flex:1}.mat-mdc-cell{padding-top:5px}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;text-align:center}.mat-mdc-cell a.chart-container,.mat-mdc-header-cell a.chart-container{display:flex;justify-content:center}.mat-mdc-cell .trending_up,.mat-mdc-header-cell .trending_up{color:#4abeff}.mat-mdc-cell .trending_down,.mat-mdc-header-cell .trending_down{color:#c20808}.recent-data-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-header-cell-label{color:#000;padding-left:30px;padding-right:30px;justify-content:left;border-bottom:1px solid #e4e4e4;font-style:normal;font-weight:500;font-size:110%;background:#ddf0fb;text-align:left}.mat-header-cell-label>div{display:flex;font-weight:700;font-style:normal;justify-content:left}.mat-header-cell-small{padding-left:5px;padding-right:5px;justify-content:left;font-style:normal;font-weight:400;font-size:105%;background:#ddf0fb;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.mat-mdc-cell a{cursor:pointer;display:flex;align-items:center;justify-content:left}.mat-mdc-cell a>mat-icon{padding-right:5px;font-size:22px;height:20px;opacity:.75}.mat-mdc-cell a>mat-icon:hover,.mat-mdc-cell a>mat-icon:focus{text-decoration:none}.mat-mdc-cell .number{display:flex;height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header-sum{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;border-right:5px solid #bdbdbd}.mat-mdc-card{width:100%;box-shadow:none}.mat-mdc-card ::ng-deep mat-card-header{align-items:center}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.mat-mdc-card .source-header{font-style:normal;font-weight:400;font-size:20px;height:30px;width:60%}.mat-mdc-card .source-header .robot-explanation{font-size:15px}.mat-mdc-card .scroll{flex-grow:1;overflow-y:auto}.mat-header-cell-scope{color:#545454}.mat-mdc-header-row{height:70px;max-height:70px;min-height:56px}:host{overflow:auto}:host ::ng-deep thead{border:10px solid #ff0000;position:relative;z-index:1}.mat-cell-level-1{padding-left:20px!important}.mat-cell-level-2{padding-left:40px!important}.mat-cell-level-3{padding-left:60px!important}.mat-cell-level-4{padding-left:80px!important}.mat-cell-level-5{padding-left:100px!important}.mat-cell-level-6{padding-left:120px!important}.mat-cell-level-7{padding-left:140px!important}.mat-cell-level-8{padding-left:160px!important}.actionbar{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: QualityMatrixFilterComponent, selector: "metaqs2-qm-filter", inputs: ["options", "inputFormControl", "label", "multiple"], outputs: ["changedFilters"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }, { kind: "directive", type: ScrollMarkerDirective, selector: "[metaqs2ScrollMarker]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QualityMatrixComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-quality-matrix-v2', providers: [TooltipService], standalone: true, imports: [
                         MatCard,
@@ -2687,24 +2666,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatHeaderRowDef,
                         MatRowDef,
                         MatHeaderCellDef,
-                        NgForOf,
                         NgIf,
+                        NgFor,
                         MatCellDef,
                         MatButton,
                         MatIconButton,
                         DonutChartComponent,
+                        DonutChartTooltipComponent,
                         ScrollMarkerDirective,
-                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-qm-filter *ngFor=\"let filter of categoryControls.controls | keyvalue; trackBy: filterIdent\"\n                       [options]=\"categoryFilterValues.get(filter.key)\"\n                       [inputFormControl]=\"filter.value\"\n                       [label] = \"'filter.' + filter.key | translate\" />\n    <div class=\"actionbar\">\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isOnlySourcesWithMaterialEnabledFormField\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-datepicker *ngIf=\"isHistoricalDataEnabled()\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isHistoricalDataEnabledFormField\" id=\"showHistoricalData\">\n        show historical data\n      </mat-slide-toggle>\n      <button\n        mat-icon-button\n        color=\"primary\"\n        [disabled]=\"isLoading()\"\n        (click)=\"refresh()\"\n        matTooltip=\"Aktualisiere den IST-Stand\"\n        matTooltipShowDelay=\"500\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n      <div style=\"flex: 0 0 {{scroller.getBoundingClientRect().width}}px\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix().rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef #issueType>Issue Type</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{\"quality_matrix.\" + row.meta.label | translate }}\n      </td>\n    </ng-container>\n    <!-- one column for the source -->\n    <ng-container *ngFor=\"let col of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"col.id + '_source'\">\n      <th [attr.colspan]=\"isHistoricalDataEnabled() ? 2 : 1\" metaqs2ScrollMarker mat-header-cell *matHeaderCellDef matTooltip=\"{{col.altLabel}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- current Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_current'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"{{column.altLabel}}\">{{ range.controls.end.value?.toLocaleString(DateTime.DATE_SHORT) }} <br>({{column.total}})</th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\" #cell (mouseover)=\"showTooltip(row, column, cell)\" (mouseleave)=\"hideTooltip(cell)\">\n          <a *ngIf=\"column.total > 0 else emptyDiv\" class=\"chart-container\" (click)=\"openEditLink( column.label, row.meta.label)\">\n            <div>\n              <metaqs2-donut-chart [data]=\"getDonutSlices(row, column)\" [borderSize]=\"25\"></metaqs2-donut-chart>\n            </div>\n          </a>\n          <ng-template #emptyDiv>\n            <div>-</div>\n          </ng-template>\n      </td>\n    </ng-container>\n    <!-- /current Data Columns -->\n    <!-- past Data Columns -->\n    <ng-container *ngIf=\"isHistoricalDataEnabled()\">\n      <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_past'\">\n        <th class=\"historic-data-cell\" mat-header-cell\n            *matHeaderCellDef>{{ range.controls.start.value?.toLocaleString(DateTime.DATE_SHORT) }}\n          <br>{{ getPastColumn(column.id)?.total }}\n        </th>\n        <td class=\"historic-data-cell\" mat-cell *matCellDef=\"let row\">\n          <ng-container *ngIf=\"getTrend(row, column) as trend\">\n            <span [ngClass]=\"trend.trend\">\n              <mat-icon aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" />\n              {{ trend.delta }}\n            </span>\n          </ng-container>\n\n        </td>\n      </ng-container>\n    </ng-container>\n    <!-- /past Data Columns -->\n\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(sourceColumns()); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"allDataColumns(); sticky: true;\" [hidden]=\"!isHistoricalDataEnabled()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(allDataColumns())\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}mat-card-actions>mat-slide-toggle{margin-left:20px}.row{flex-grow:1;display:flex;align-items:center}table{width:100%;overflow-y:auto}table .scroll{flex-grow:1;overflow-y:auto}table th{vertical-align:top;padding:.375rem}table th:not(:last-child){border-right:1px solid #e4e4e4}table tr:first-child>th:first-child{text-align:left}table td:first-child{text-align:left}.cell{flex:1}.mat-mdc-cell{padding-top:5px}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;text-align:center}.mat-mdc-cell a.chart-container,.mat-mdc-header-cell a.chart-container{display:flex;justify-content:center}.mat-mdc-cell .trending_up,.mat-mdc-header-cell .trending_up{color:#4abeff}.mat-mdc-cell .trending_down,.mat-mdc-header-cell .trending_down{color:#c20808}.recent-data-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-header-cell-label{color:#000;padding-left:30px;padding-right:30px;justify-content:left;border-bottom:1px solid #e4e4e4;font-style:normal;font-weight:500;font-size:110%;background:#ddf0fb;text-align:left}.mat-header-cell-label>div{display:flex;font-weight:700;font-style:normal;justify-content:left}.mat-header-cell-small{padding-left:5px;padding-right:5px;justify-content:left;font-style:normal;font-weight:400;font-size:105%;background:#ddf0fb;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.mat-mdc-cell a{cursor:pointer;display:flex;align-items:center;justify-content:left}.mat-mdc-cell a>mat-icon{padding-right:5px;font-size:22px;height:20px;opacity:.75}.mat-mdc-cell a>mat-icon:hover,.mat-mdc-cell a>mat-icon:focus{text-decoration:none}.mat-mdc-cell .number{display:flex;height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header-sum{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;border-right:5px solid #bdbdbd}.mat-mdc-card{width:100%;box-shadow:none}.mat-mdc-card ::ng-deep mat-card-header{align-items:center}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.mat-mdc-card .source-header{font-style:normal;font-weight:400;font-size:20px;height:30px;width:60%}.mat-mdc-card .source-header .robot-explanation{font-size:15px}.mat-mdc-card .scroll{flex-grow:1;overflow-y:auto}.mat-header-cell-scope{color:#545454}.mat-mdc-header-row{height:70px;max-height:70px;min-height:56px}:host{overflow:auto}:host ::ng-deep thead{border:10px solid #ff0000;position:relative;z-index:1}.mat-cell-level-1{padding-left:20px!important}.mat-cell-level-2{padding-left:40px!important}.mat-cell-level-3{padding-left:60px!important}.mat-cell-level-4{padding-left:80px!important}.mat-cell-level-5{padding-left:100px!important}.mat-cell-level-6{padding-left:120px!important}.mat-cell-level-7{padding-left:140px!important}.mat-cell-level-8{padding-left:160px!important}.actionbar{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"] }]
-        }], propDecorators: { issueTypeHeader: [{
-                type: ViewChild,
-                args: ['issueType', {
-                        read: ElementRef,
-                        static: true,
-                    }]
-            }], scrollMarkers: [{
-                type: ViewChildren,
-                args: [ScrollMarkerDirective]
-            }], pageTitle: [{
+                    ], template: "\n<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    @for( filter of categoryControls.controls | keyvalue ; track filter.key ) {\n      <metaqs2-qm-filter [options]=\"categoryFilterValues.get(filter.key)\" [inputFormControl]=\"filter.value\"\n      [label]=\"'filter.' + filter.key | translate\"></metaqs2-qm-filter>\n    }@empty {\n      <metaqs2-qm-filter aria-disabled=\"true\" [label]=\"'Filter'\"></metaqs2-qm-filter>     \n    }\n    <div class=\"actionbar\">\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isOnlySourcesWithMaterialEnabledFormField\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      @if (isHistoricalDataEnabled()) {\n        <metaqs2-datepicker [disabled]=\"isLoading()\" [inputGroup]=\"range\"></metaqs2-datepicker>     \n      }\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isHistoricalDataEnabledFormField\" id=\"showHistoricalData\">\n        show historical data\n      </mat-slide-toggle>\n      <button\n        mat-icon-button\n        color=\"primary\"\n        [disabled]=\"isLoading()\"\n        (click)=\"refresh()\"\n        matTooltip=\"Aktualisiere den IST-Stand\"\n        matTooltipShowDelay=\"500\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n      <div [style.flex]=\"'0 0 ' + (scroller?.getBoundingClientRect()?.width || 0) + 'px'\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix().rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef #issueType>Issue Type</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{\"quality_matrix.\" + row.meta.label | translate }}\n      </td>\n    </ng-container>\n    <!-- one column for the source -->\n    <ng-container *ngFor=\"let col of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"col.id + '_source'\">\n      <th [attr.colspan]=\"isHistoricalDataEnabled() ? 2 : 1\" metaqs2ScrollMarker mat-header-cell *matHeaderCellDef matTooltip=\"{{col.altLabel}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- current Data Columns -->\n     <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_current'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"{{column.altLabel}}\">{{ range.controls.end.value?.toLocaleString(DateTime.DATE_SHORT) }} <br>({{column.total}})</th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\" #cell (mouseover)=\"showTooltip(row, column, cell)\" (mouseleave)=\"hideTooltip(cell)\">\n          @if ( column.total > 0) {\n            <a class=\"chart-container\" (click)=\"openEditLink( column.label,  row.meta.label)\">\n              <div>\n                <metaqs2-donut-chart [data]=\"getDonutSlices(row, column)\" [borderSize]=\"25\"></metaqs2-donut-chart>\n              </div>\n            </a>\n          \n          } @else {\n            <div>-</div>     \n          }\n      </td>\n    </ng-container>\n    <!-- /current Data Columns -->\n\n    @if (isHistoricalDataEnabled()) {\n    <!-- past Data Columns -->\n      <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_past'\">\n        <th class=\"historic-data-cell\" mat-header-cell\n            *matHeaderCellDef>{{ range.controls.start.value?.toLocaleString(DateTime.DATE_SHORT) }}\n          <br>{{ getPastColumn(column.id)?.total }}\n        </th>\n        <td class=\"historic-data-cell\" mat-cell *matCellDef=\"let row\">\n          <ng-container *ngIf=\"getTrend(row, column) as trend\">\n            <span [ngClass]=\"trend.trend\">\n              <mat-icon aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" />\n              {{ trend.delta }}\n            </span>\n          </ng-container>\n\n        </td>\n      </ng-container>\n    <!-- /past Data Columns -->\n    }\n\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(sourceColumns()); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"allDataColumns(); sticky: true;\" [hidden]=\"!isHistoricalDataEnabled()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(allDataColumns())\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}mat-card-actions>mat-slide-toggle{margin-left:20px}.row{flex-grow:1;display:flex;align-items:center}table{width:100%;overflow-y:auto}table .scroll{flex-grow:1;overflow-y:auto}table th{vertical-align:top;padding:.375rem}table th:not(:last-child){border-right:1px solid #e4e4e4}table tr:first-child>th:first-child{text-align:left}table td:first-child{text-align:left}.cell{flex:1}.mat-mdc-cell{padding-top:5px}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;text-align:center}.mat-mdc-cell a.chart-container,.mat-mdc-header-cell a.chart-container{display:flex;justify-content:center}.mat-mdc-cell .trending_up,.mat-mdc-header-cell .trending_up{color:#4abeff}.mat-mdc-cell .trending_down,.mat-mdc-header-cell .trending_down{color:#c20808}.recent-data-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-header-cell-label{color:#000;padding-left:30px;padding-right:30px;justify-content:left;border-bottom:1px solid #e4e4e4;font-style:normal;font-weight:500;font-size:110%;background:#ddf0fb;text-align:left}.mat-header-cell-label>div{display:flex;font-weight:700;font-style:normal;justify-content:left}.mat-header-cell-small{padding-left:5px;padding-right:5px;justify-content:left;font-style:normal;font-weight:400;font-size:105%;background:#ddf0fb;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.mat-mdc-cell a{cursor:pointer;display:flex;align-items:center;justify-content:left}.mat-mdc-cell a>mat-icon{padding-right:5px;font-size:22px;height:20px;opacity:.75}.mat-mdc-cell a>mat-icon:hover,.mat-mdc-cell a>mat-icon:focus{text-decoration:none}.mat-mdc-cell .number{display:flex;height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header-sum{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;border-right:5px solid #bdbdbd}.mat-mdc-card{width:100%;box-shadow:none}.mat-mdc-card ::ng-deep mat-card-header{align-items:center}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.mat-mdc-card .source-header{font-style:normal;font-weight:400;font-size:20px;height:30px;width:60%}.mat-mdc-card .source-header .robot-explanation{font-size:15px}.mat-mdc-card .scroll{flex-grow:1;overflow-y:auto}.mat-header-cell-scope{color:#545454}.mat-mdc-header-row{height:70px;max-height:70px;min-height:56px}:host{overflow:auto}:host ::ng-deep thead{border:10px solid #ff0000;position:relative;z-index:1}.mat-cell-level-1{padding-left:20px!important}.mat-cell-level-2{padding-left:40px!important}.mat-cell-level-3{padding-left:60px!important}.mat-cell-level-4{padding-left:80px!important}.mat-cell-level-5{padding-left:100px!important}.mat-cell-level-6{padding-left:120px!important}.mat-cell-level-7{padding-left:140px!important}.mat-cell-level-8{padding-left:160px!important}.actionbar{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"] }]
+        }], propDecorators: { pageTitle: [{
                 type: Input
             }], onScroll: [{
                 type: HostListener,
@@ -2714,6 +2685,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:resize']
             }] } });
 
+function wrapResponse() {
+    return pipe(map((data) => ({ state: 'success', data })), catchError((error) => of({ state: 'error', error })), startWith({ state: 'loading' }));
+}
+class WrapObservablePipe {
+    transform(value) {
+        return value.pipe(wrapResponse());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WrapObservablePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: WrapObservablePipe, isStandalone: true, name: "wrapObservable" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: WrapObservablePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'wrapObservable',
+                }]
+        }] });
+
 class NodeImageUrlPipe {
     constructor() {
         this.env = inject(ConfigHelperService);
@@ -2730,10 +2718,10 @@ class NodeImageUrlPipe {
             '&maxHeight=' +
             encodeURIComponent(args.height));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeImageUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NodeImageUrlPipe, name: "nodeImageUrl" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeImageUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NodeImageUrlPipe, isStandalone: true, name: "nodeImageUrl" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeImageUrlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeImageUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'nodeImageUrl',
@@ -2756,12 +2744,12 @@ class NodeEntryComponent {
         return false;
         // return (this.node as MaterialCounts).materials_count !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NodeEntryComponent, selector: "metaqs2-node-entry", inputs: { node: "node" }, outputs: { edit: "edit" }, ngImport: i0, template: "<div class=\"node\">\n  <img class=\"icon\" [src]=\"node | nodeImageUrl\" loading=\"lazy\" />\n  <div class=\"text\">\n    <span class=\"title\">{{ node.title }}</span>\n    <span class=\"description\" *ngIf=\"!isCollectionCount()\">{{ node.description }}</span>\n    <span class=\"count\" *ngIf=\"isCollectionCount()\">{{ $any(node).materials_count }} Materialien</span>\n  </div>\n  <div class=\"actions\">\n    <button mat-icon-button color=\"primary\" (click)=\"openNode(node)\">\n      <mat-icon>open_in_new</mat-icon>\n    </button>\n    <button *ngIf=\"$any(node).type === 'ccm:io'\" mat-icon-button color=\"primary\" (click)=\"edit.emit(node)\">\n      <mat-icon>edit</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.node{display:flex;align-items:center;padding:5px 0}.node .icon{width:50px;min-width:50px;height:50px;object-fit:cover;padding-right:10px}.node .text{flex-grow:1;display:flex;flex-direction:column}.node .text .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.node .text .description,.node .text .count{font-size:90%;color:#555;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:1;-webkit-box-orient:vertical}.node .actions{display:flex}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: NodeImageUrlPipe, name: "nodeImageUrl" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NodeEntryComponent, isStandalone: true, selector: "metaqs2-node-entry", inputs: { node: "node" }, outputs: { edit: "edit" }, ngImport: i0, template: "<div class=\"node\">\n  <img class=\"icon\" [src]=\"node | nodeImageUrl\" loading=\"lazy\" />\n  <div class=\"text\">\n    <span class=\"title\">{{ node.title }}</span>\n    @if (isCollectionCount()) {\n      <span class=\"count\">{{ $any(node).materials_count }} Materialien</span>\n    } @else {\n      <span class=\"description\">{{ node.description }}</span>\n    }\n  </div>\n  <div class=\"actions\">\n    <button mat-icon-button color=\"primary\" (click)=\"openNode(node)\">\n      <mat-icon>open_in_new</mat-icon>\n    </button>\n    @if ($any(node).type === 'ccm:io') {\n      <button mat-icon-button color=\"primary\" (click)=\"edit.emit(node)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.node{display:flex;align-items:center;padding:5px 0}.node .icon{width:50px;min-width:50px;height:50px;object-fit:cover;padding-right:10px}.node .text{flex-grow:1;display:flex;flex-direction:column}.node .text .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.node .text .description,.node .text .count{font-size:90%;color:#555;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:1;-webkit-box-orient:vertical}.node .actions{display:flex}\n"], dependencies: [{ kind: "pipe", type: NodeImageUrlPipe, name: "nodeImageUrl" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeEntryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeEntryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'metaqs2-node-entry', template: "<div class=\"node\">\n  <img class=\"icon\" [src]=\"node | nodeImageUrl\" loading=\"lazy\" />\n  <div class=\"text\">\n    <span class=\"title\">{{ node.title }}</span>\n    <span class=\"description\" *ngIf=\"!isCollectionCount()\">{{ node.description }}</span>\n    <span class=\"count\" *ngIf=\"isCollectionCount()\">{{ $any(node).materials_count }} Materialien</span>\n  </div>\n  <div class=\"actions\">\n    <button mat-icon-button color=\"primary\" (click)=\"openNode(node)\">\n      <mat-icon>open_in_new</mat-icon>\n    </button>\n    <button *ngIf=\"$any(node).type === 'ccm:io'\" mat-icon-button color=\"primary\" (click)=\"edit.emit(node)\">\n      <mat-icon>edit</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.node{display:flex;align-items:center;padding:5px 0}.node .icon{width:50px;min-width:50px;height:50px;object-fit:cover;padding-right:10px}.node .text{flex-grow:1;display:flex;flex-direction:column}.node .text .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.node .text .description,.node .text .count{font-size:90%;color:#555;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:1;-webkit-box-orient:vertical}.node .actions{display:flex}\n"] }]
+            args: [{ selector: 'metaqs2-node-entry', imports: [NodeImageUrlPipe, MatIconModule], template: "<div class=\"node\">\n  <img class=\"icon\" [src]=\"node | nodeImageUrl\" loading=\"lazy\" />\n  <div class=\"text\">\n    <span class=\"title\">{{ node.title }}</span>\n    @if (isCollectionCount()) {\n      <span class=\"count\">{{ $any(node).materials_count }} Materialien</span>\n    } @else {\n      <span class=\"description\">{{ node.description }}</span>\n    }\n  </div>\n  <div class=\"actions\">\n    <button mat-icon-button color=\"primary\" (click)=\"openNode(node)\">\n      <mat-icon>open_in_new</mat-icon>\n    </button>\n    @if ($any(node).type === 'ccm:io') {\n      <button mat-icon-button color=\"primary\" (click)=\"edit.emit(node)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    }\n  </div>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.node{display:flex;align-items:center;padding:5px 0}.node .icon{width:50px;min-width:50px;height:50px;object-fit:cover;padding-right:10px}.node .text{flex-grow:1;display:flex;flex-direction:column}.node .text .title{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.node .text .description,.node .text .count{font-size:90%;color:#555;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;word-break:break-word;-webkit-line-clamp:1;-webkit-box-orient:vertical}.node .actions{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { node: [{
                 type: Input
             }], edit: [{
@@ -2848,12 +2836,21 @@ class NodeListComponent {
         // @TODO
         // this.data = this.rawData?.filter((d) => (d as MaterialCounts).materials_count <= (this.count ?? 0));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeListComponent, deps: [{ token: CollectionAPIService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NodeListComponent, selector: "metaqs2-node-list", inputs: { mode: "mode", type: "type", collectionId: "collectionId" }, outputs: { countChanged: "countChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper\">\n  <mat-card *ngIf=\"mode\">\n    <mat-card-header>\n      <mat-card-title>\n        {{ 'issues.' + mode  | translate }}\n        <span class=\"count\" *ngIf=\"(data | async) as d\">({{ d.total || 0 }})</span>\n      </mat-card-title>\n      <button mat-icon-button color=\"primary\" [disabled]=\"!(data | async)\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </mat-card-header>\n    <!-- @TODO -->\n    <div *ngIf=\"type === 'collection' && mode === 'TODO_count'\" class=\"count-slider\">\n      <label>Sammlungen mit {{ count }} oder weniger Inhalten</label>\n      <mat-slider\n        [showTickMarks]=\"true\"\n        step=\"1\"\n        [ngModel]=\"count\"\n        (ngModelChange)=\"count = $event; filterCount()\"\n        min=\"0\"\n        max=\"10\"\n      ></mat-slider>\n    </div>\n    <ng-container *ngIf=\"wrappedData$ | async as wrappedData\">\n      <mat-spinner *ngIf=\"wrappedData.state === 'loading'\" diameter=\"40\" color=\"primary\"></mat-spinner>\n      <div class=\"error\" *ngIf=\"wrappedData.state === 'error'\">\n        <p class=\"error-text\">Etwas ist schief gelaufen.</p>\n      </div>\n      <div class=\"scroll\" *ngIf=\"wrappedData.state === 'success'\">\n        <ng-container *ngIf=\"(data | async) as d\">\n          <metaqs2-node-entry\n            *ngFor=\"let node of DEFAULT_LIMIT < (d?.total || 0) && !showAll ? $any(d.materials || d.collections)?.slice(0, DEFAULT_LIMIT) : (d.materials || d.collections)\"\n            [node]=\"node\"\n            (edit)=\"editNode(node)\"\n          ></metaqs2-node-entry>\n          <div *ngIf=\"!d.total\">\n            <div class=\"all-done\">\n              <p class=\"all-done-emoji\">\uD83E\uDD73</p>\n              <p class=\"all-done-text\">Keine Elemente ausstehend</p>\n            </div>\n          </div>\n          <button *ngIf=\"DEFAULT_LIMIT < (d?.total || 0) && !showAll\" (click)=\"showAll = true\" color=\"primary\" mat-button>\n            Alle Elemente anzeigen <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n        </ng-container>\n      </div>\n    </ng-container>\n  </mat-card>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.wrapper{width:100%;height:100%}.wrapper mat-card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;box-shadow:none}.wrapper mat-card ::ng-deep mat-card-header{align-items:center}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.wrapper mat-card .count-slider{display:flex;flex-direction:column;width:100%}.wrapper mat-card .count-slider>label{padding:0 20px;font-size:90%}.wrapper mat-card .count-slider>mat-slider{width:100%}.wrapper mat-card mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20%}.wrapper mat-card .scroll{flex-grow:1;overflow-y:auto}.wrapper mat-card .scroll>button{display:flex;margin:auto}.wrapper mat-card .scroll .all-done{display:flex;flex-direction:column;align-items:center}.wrapper mat-card .scroll .all-done .all-done-emoji{font-size:72px;margin-bottom:20px}.wrapper mat-card .scroll .all-done .all-done-text{text-align:center;font-size:1.3em;color:var(--font-light)}.wrapper mat-card .error{border:#d00 solid 2px;background-color:#d005;display:flex;flex-direction:column;align-items:center}.wrapper mat-card .error .error-text{font-size:1.3em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NodeEntryComponent, selector: "metaqs2-node-entry", inputs: ["node"], outputs: ["edit"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeListComponent, deps: [{ token: CollectionAPIService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NodeListComponent, isStandalone: true, selector: "metaqs2-node-list", inputs: { mode: "mode", type: "type", collectionId: "collectionId" }, outputs: { countChanged: "countChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"wrapper\">\n  <mat-card *ngIf=\"mode\">\n    <mat-card-header>\n      <mat-card-title>\n        {{ 'issues.' + mode  | translate }}\n        <span class=\"count\" *ngIf=\"(data | async) as d\">({{ d.total || 0 }})</span>\n      </mat-card-title>\n      <button mat-icon-button color=\"primary\" [disabled]=\"!(data | async)\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </mat-card-header>\n    <!-- @TODO -->\n    <div *ngIf=\"type === 'collection' && mode === 'TODO_count'\" class=\"count-slider\">\n      <label>Sammlungen mit {{ count }} oder weniger Inhalten</label>\n      <mat-slider\n        [showTickMarks]=\"true\"\n        step=\"1\"\n        [ngModel]=\"count\"\n        (ngModelChange)=\"count = $event; filterCount()\"\n        min=\"0\"\n        max=\"10\"\n      ></mat-slider>\n    </div>\n    <ng-container *ngIf=\"wrappedData$ | async as wrappedData\">\n      <mat-spinner *ngIf=\"wrappedData.state === 'loading'\" diameter=\"40\" color=\"primary\"></mat-spinner>\n      <div class=\"error\" *ngIf=\"wrappedData.state === 'error'\">\n        <p class=\"error-text\">Etwas ist schief gelaufen.</p>\n      </div>\n      <div class=\"scroll\" *ngIf=\"wrappedData.state === 'success'\">\n        <ng-container *ngIf=\"(data | async) as d\">\n          <metaqs2-node-entry\n            *ngFor=\"let node of DEFAULT_LIMIT < (d?.total || 0) && !showAll ? $any(d.materials || d.collections)?.slice(0, DEFAULT_LIMIT) : (d.materials || d.collections)\"\n            [node]=\"node\"\n            (edit)=\"editNode(node)\"\n          ></metaqs2-node-entry>\n          <div *ngIf=\"!d.total\">\n            <div class=\"all-done\">\n              <p class=\"all-done-emoji\">\uD83E\uDD73</p>\n              <p class=\"all-done-text\">Keine Elemente ausstehend</p>\n            </div>\n          </div>\n          <button *ngIf=\"DEFAULT_LIMIT < (d?.total || 0) && !showAll\" (click)=\"showAll = true\" color=\"primary\" mat-button>\n            Alle Elemente anzeigen <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n        </ng-container>\n      </div>\n    </ng-container>\n  </mat-card>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.wrapper{width:100%;height:100%}.wrapper mat-card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;box-shadow:none}.wrapper mat-card ::ng-deep mat-card-header{align-items:center}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.wrapper mat-card .count-slider{display:flex;flex-direction:column;width:100%}.wrapper mat-card .count-slider>label{padding:0 20px;font-size:90%}.wrapper mat-card .count-slider>mat-slider{width:100%}.wrapper mat-card mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20%}.wrapper mat-card .scroll{flex-grow:1;overflow-y:auto}.wrapper mat-card .scroll>button{display:flex;margin:auto}.wrapper mat-card .scroll .all-done{display:flex;flex-direction:column;align-items:center}.wrapper mat-card .scroll .all-done .all-done-emoji{font-size:72px;margin-bottom:20px}.wrapper mat-card .scroll .all-done .all-done-text{text-align:center;font-size:1.3em;color:var(--font-light)}.wrapper mat-card .error{border:#d00 solid 2px;background-color:#d005;display:flex;flex-direction:column;align-items:center}.wrapper mat-card .error .error-text{font-size:1.3em}\n"], dependencies: [{ kind: "component", type: NodeEntryComponent, selector: "metaqs2-node-entry", inputs: ["node"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NodeListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'metaqs2-node-list', template: "<div class=\"wrapper\">\n  <mat-card *ngIf=\"mode\">\n    <mat-card-header>\n      <mat-card-title>\n        {{ 'issues.' + mode  | translate }}\n        <span class=\"count\" *ngIf=\"(data | async) as d\">({{ d.total || 0 }})</span>\n      </mat-card-title>\n      <button mat-icon-button color=\"primary\" [disabled]=\"!(data | async)\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </mat-card-header>\n    <!-- @TODO -->\n    <div *ngIf=\"type === 'collection' && mode === 'TODO_count'\" class=\"count-slider\">\n      <label>Sammlungen mit {{ count }} oder weniger Inhalten</label>\n      <mat-slider\n        [showTickMarks]=\"true\"\n        step=\"1\"\n        [ngModel]=\"count\"\n        (ngModelChange)=\"count = $event; filterCount()\"\n        min=\"0\"\n        max=\"10\"\n      ></mat-slider>\n    </div>\n    <ng-container *ngIf=\"wrappedData$ | async as wrappedData\">\n      <mat-spinner *ngIf=\"wrappedData.state === 'loading'\" diameter=\"40\" color=\"primary\"></mat-spinner>\n      <div class=\"error\" *ngIf=\"wrappedData.state === 'error'\">\n        <p class=\"error-text\">Etwas ist schief gelaufen.</p>\n      </div>\n      <div class=\"scroll\" *ngIf=\"wrappedData.state === 'success'\">\n        <ng-container *ngIf=\"(data | async) as d\">\n          <metaqs2-node-entry\n            *ngFor=\"let node of DEFAULT_LIMIT < (d?.total || 0) && !showAll ? $any(d.materials || d.collections)?.slice(0, DEFAULT_LIMIT) : (d.materials || d.collections)\"\n            [node]=\"node\"\n            (edit)=\"editNode(node)\"\n          ></metaqs2-node-entry>\n          <div *ngIf=\"!d.total\">\n            <div class=\"all-done\">\n              <p class=\"all-done-emoji\">\uD83E\uDD73</p>\n              <p class=\"all-done-text\">Keine Elemente ausstehend</p>\n            </div>\n          </div>\n          <button *ngIf=\"DEFAULT_LIMIT < (d?.total || 0) && !showAll\" (click)=\"showAll = true\" color=\"primary\" mat-button>\n            Alle Elemente anzeigen <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n        </ng-container>\n      </div>\n    </ng-container>\n  </mat-card>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.wrapper{width:100%;height:100%}.wrapper mat-card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;box-shadow:none}.wrapper mat-card ::ng-deep mat-card-header{align-items:center}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.wrapper mat-card .count-slider{display:flex;flex-direction:column;width:100%}.wrapper mat-card .count-slider>label{padding:0 20px;font-size:90%}.wrapper mat-card .count-slider>mat-slider{width:100%}.wrapper mat-card mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20%}.wrapper mat-card .scroll{flex-grow:1;overflow-y:auto}.wrapper mat-card .scroll>button{display:flex;margin:auto}.wrapper mat-card .scroll .all-done{display:flex;flex-direction:column;align-items:center}.wrapper mat-card .scroll .all-done .all-done-emoji{font-size:72px;margin-bottom:20px}.wrapper mat-card .scroll .all-done .all-done-text{text-align:center;font-size:1.3em;color:var(--font-light)}.wrapper mat-card .error{border:#d00 solid 2px;background-color:#d005;display:flex;flex-direction:column;align-items:center}.wrapper mat-card .error .error-text{font-size:1.3em}\n"] }]
+            args: [{ selector: 'metaqs2-node-list', imports: [
+                        NodeEntryComponent,
+                        CommonModule,
+                        TranslateModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        FormsModule,
+                        MatSliderModule,
+                        MatCardModule,
+                    ], template: "<div class=\"wrapper\">\n  <mat-card *ngIf=\"mode\">\n    <mat-card-header>\n      <mat-card-title>\n        {{ 'issues.' + mode  | translate }}\n        <span class=\"count\" *ngIf=\"(data | async) as d\">({{ d.total || 0 }})</span>\n      </mat-card-title>\n      <button mat-icon-button color=\"primary\" [disabled]=\"!(data | async)\" (click)=\"refresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n    </mat-card-header>\n    <!-- @TODO -->\n    <div *ngIf=\"type === 'collection' && mode === 'TODO_count'\" class=\"count-slider\">\n      <label>Sammlungen mit {{ count }} oder weniger Inhalten</label>\n      <mat-slider\n        [showTickMarks]=\"true\"\n        step=\"1\"\n        [ngModel]=\"count\"\n        (ngModelChange)=\"count = $event; filterCount()\"\n        min=\"0\"\n        max=\"10\"\n      ></mat-slider>\n    </div>\n    <ng-container *ngIf=\"wrappedData$ | async as wrappedData\">\n      <mat-spinner *ngIf=\"wrappedData.state === 'loading'\" diameter=\"40\" color=\"primary\"></mat-spinner>\n      <div class=\"error\" *ngIf=\"wrappedData.state === 'error'\">\n        <p class=\"error-text\">Etwas ist schief gelaufen.</p>\n      </div>\n      <div class=\"scroll\" *ngIf=\"wrappedData.state === 'success'\">\n        <ng-container *ngIf=\"(data | async) as d\">\n          <metaqs2-node-entry\n            *ngFor=\"let node of DEFAULT_LIMIT < (d?.total || 0) && !showAll ? $any(d.materials || d.collections)?.slice(0, DEFAULT_LIMIT) : (d.materials || d.collections)\"\n            [node]=\"node\"\n            (edit)=\"editNode(node)\"\n          ></metaqs2-node-entry>\n          <div *ngIf=\"!d.total\">\n            <div class=\"all-done\">\n              <p class=\"all-done-emoji\">\uD83E\uDD73</p>\n              <p class=\"all-done-text\">Keine Elemente ausstehend</p>\n            </div>\n          </div>\n          <button *ngIf=\"DEFAULT_LIMIT < (d?.total || 0) && !showAll\" (click)=\"showAll = true\" color=\"primary\" mat-button>\n            Alle Elemente anzeigen <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n        </ng-container>\n      </div>\n    </ng-container>\n  </mat-card>\n</div>\n", styles: [".while-loading{filter:blur(2px)}.wrapper{width:100%;height:100%}.wrapper mat-card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;box-shadow:none}.wrapper mat-card ::ng-deep mat-card-header{align-items:center}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.wrapper mat-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.wrapper mat-card .count-slider{display:flex;flex-direction:column;width:100%}.wrapper mat-card .count-slider>label{padding:0 20px;font-size:90%}.wrapper mat-card .count-slider>mat-slider{width:100%}.wrapper mat-card mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20%}.wrapper mat-card .scroll{flex-grow:1;overflow-y:auto}.wrapper mat-card .scroll>button{display:flex;margin:auto}.wrapper mat-card .scroll .all-done{display:flex;flex-direction:column;align-items:center}.wrapper mat-card .scroll .all-done .all-done-emoji{font-size:72px;margin-bottom:20px}.wrapper mat-card .scroll .all-done .all-done-text{text-align:center;font-size:1.3em;color:var(--font-light)}.wrapper mat-card .error{border:#d00 solid 2px;background-color:#d005;display:flex;flex-direction:column;align-items:center}.wrapper mat-card .error .error-text{font-size:1.3em}\n"] }]
         }], ctorParameters: () => [{ type: CollectionAPIService }], propDecorators: { mode: [{
                 type: Input
             }], type: [{
@@ -2874,12 +2871,12 @@ class MaterialIssuesComponent {
     async ngOnInit() {
         this.issues = await this.filterAPIService.getMaterialIssueFieldNames().toPromise();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialIssuesComponent, deps: [{ token: FilterAPIService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MaterialIssuesComponent, selector: "metaqs2-material-issues", ngImport: i0, template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"material\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeListComponent, selector: "metaqs2-node-list", inputs: ["mode", "type", "collectionId"], outputs: ["countChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaterialIssuesComponent, deps: [{ token: FilterAPIService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MaterialIssuesComponent, isStandalone: true, selector: "metaqs2-material-issues", ngImport: i0, template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"material\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"], dependencies: [{ kind: "component", type: NodeListComponent, selector: "metaqs2-node-list", inputs: ["mode", "type", "collectionId"], outputs: ["countChanged"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialIssuesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MaterialIssuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'metaqs2-material-issues', template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"material\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"] }]
+            args: [{ selector: 'metaqs2-material-issues', imports: [NodeListComponent, NgFor], template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"material\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"] }]
         }], ctorParameters: () => [{ type: FilterAPIService }] });
 
 class CollectionIssuesComponent {
@@ -2892,12 +2889,12 @@ class CollectionIssuesComponent {
     async ngOnInit() {
         this.issues = await this.filterAPIService.getCollectionIssueFieldNames().toPromise();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionIssuesComponent, deps: [{ token: FilterAPIService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CollectionIssuesComponent, selector: "metaqs2-collection-issues", ngImport: i0, template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"collection\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeListComponent, selector: "metaqs2-node-list", inputs: ["mode", "type", "collectionId"], outputs: ["countChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionIssuesComponent, deps: [{ token: FilterAPIService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CollectionIssuesComponent, isStandalone: true, selector: "metaqs2-collection-issues", ngImport: i0, template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"collection\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"], dependencies: [{ kind: "component", type: NodeListComponent, selector: "metaqs2-node-list", inputs: ["mode", "type", "collectionId"], outputs: ["countChanged"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionIssuesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionIssuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'metaqs2-collection-issues', template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"collection\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"] }]
+            args: [{ selector: 'metaqs2-collection-issues', imports: [NodeListComponent, NgFor], template: "<metaqs2-node-list\n  *ngFor=\"let mode of issues\"\n  [collectionId]=\"collectionId\"\n  [mode]=\"mode\"\n  type=\"collection\"\n></metaqs2-node-list>\n", styles: [".while-loading{filter:blur(2px)}:host{padding:0 30px;display:flex;gap:30px;flex-wrap:wrap}:host>metaqs2-node-list{width:400px}\n"] }]
         }], ctorParameters: () => [{ type: FilterAPIService }] });
 
 const ICONS = {
@@ -2932,13 +2929,13 @@ class SvgIconsService {
         }
         this.initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SvgIconsService, deps: [{ token: i1$4.MatIconRegistry }, { token: i2$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SvgIconsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgIconsService, deps: [{ token: i1$3.MatIconRegistry }, { token: i2$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgIconsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SvgIconsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SvgIconsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$4.MatIconRegistry }, { type: i2$4.DomSanitizer }] });
+        }], ctorParameters: () => [{ type: i1$3.MatIconRegistry }, { type: i2$3.DomSanitizer }] });
 
 class NgMetaWidgetsLibModule {
     constructor(svgIconsService) {
@@ -2963,14 +2960,13 @@ class NgMetaWidgetsLibModule {
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgMetaWidgetsLibModule, deps: [{ token: SvgIconsService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NgMetaWidgetsLibModule, declarations: [WrapObservablePipe,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgMetaWidgetsLibModule, deps: [{ token: SvgIconsService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgMetaWidgetsLibModule, imports: [CommonModule,
+            TranslateModule,
             CollectionIssuesComponent,
             MaterialIssuesComponent,
-            NodeEntryComponent,
             NodeListComponent,
-            NodeImageUrlPipe,
-            DonutChartTooltipComponent], imports: [BrowserModule, ApiModule, MatCardModule,
+            BrowserModule, ApiModule, MatCardModule,
             MatTreeModule,
             DonutChartComponent,
             DonutChartPipe,
@@ -3005,7 +3001,12 @@ class NgMetaWidgetsLibModule {
             DatepickerComponent,
             ProgressSpinnerComponent,
             ScrollMarkerDirective], exports: [CollectionIssuesComponent, MaterialIssuesComponent, NodeListComponent, QualityMatrixComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgMetaWidgetsLibModule, providers: [provideHttpClient(withInterceptorsFromDi()), provideCharts(withDefaultRegisterables())], imports: [BrowserModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgMetaWidgetsLibModule, providers: [provideHttpClient(withInterceptorsFromDi()), provideCharts(withDefaultRegisterables())], imports: [CommonModule,
+            TranslateModule,
+            CollectionIssuesComponent,
+            MaterialIssuesComponent,
+            NodeListComponent,
+            BrowserModule,
             ApiModule.forRoot(() => new Configuration()),
             MatCardModule,
             MatTreeModule,
@@ -3038,20 +3039,17 @@ class NgMetaWidgetsLibModule {
             DatepickerComponent,
             ProgressSpinnerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgMetaWidgetsLibModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgMetaWidgetsLibModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        WrapObservablePipe,
+                    declarations: [],
+                    exports: [CollectionIssuesComponent, MaterialIssuesComponent, NodeListComponent, QualityMatrixComponent],
+                    imports: [
+                        CommonModule,
+                        TranslateModule,
                         CollectionIssuesComponent,
                         MaterialIssuesComponent,
-                        NodeEntryComponent,
                         NodeListComponent,
-                        NodeImageUrlPipe,
-                        DonutChartTooltipComponent,
-                    ],
-                    exports: [CollectionIssuesComponent, MaterialIssuesComponent, NodeListComponent, QualityMatrixComponent],
-                    imports: [
                         BrowserModule,
                         ApiModule.forRoot(() => new Configuration()),
                         MatCardModule,
@@ -3143,10 +3141,10 @@ class TreeCollectionDetailsComponent {
         const title = collectionTitel + ' - ' + translated;
         return this.linkService.openByCollectionAndIssueType(collectionId, issueType, title);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeCollectionDetailsComponent, deps: [{ token: MetaApiService }, { token: i2$3.TranslateService }, { token: EditorialLinkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeCollectionDetailsComponent, isStandalone: true, selector: "metaqs2-tree-collection-details", inputs: { collectionId: "collectionId", pageTitle: "pageTitle" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\n      Qualit\u00E4tsmetrik: {{pageTitle | translate}}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title\n    >\n  </mat-card-header>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"!isLoading()\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"recentQualityMatrix$.value.rows\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n        {{row.meta.label}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Data Columns -->\n    <ng-container *ngFor=\"let column of dataColumns\" [matColumnDef]=\"column.id\">\n      <th mat-header-cell *matHeaderCellDef>{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        <ng-container *ngIf=\" column.id === 'collection_issues' else countsWithLinks\">\n          {{ translateCollectionIssues(row.counts[column.id]) | async }}\n        </ng-container>\n        <ng-template #countsWithLinks>\n          <a *ngIf=\"row.counts[column.id]\" (click)=\"showMaterialWithIssue(row.meta.id, row.meta.label, column.id)\">\n            {{ row.counts[column.id] }}\n          </a>\n        </ng-template>\n\n\n      </td>\n    </ng-container>\n\n    <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(columnIds); sticky:true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(columnIds)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-row-header,tr:nth-child(2n) .mat-mdc-cell{border-right-color:#fff}.mat-mdc-cell,.mat-mdc-header-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-mdc-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-row-header mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:left}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.row-header a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeCollectionDetailsComponent, deps: [{ token: MetaApiService }, { token: i2$2.TranslateService }, { token: EditorialLinkService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TreeCollectionDetailsComponent, isStandalone: true, selector: "metaqs2-tree-collection-details", inputs: { collectionId: "collectionId", pageTitle: "pageTitle" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\n      Qualit\u00E4tsmetrik: {{pageTitle | translate}}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title\n    >\n  </mat-card-header>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"!isLoading()\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"recentQualityMatrix$.value.rows\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n        {{row.meta.label}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Data Columns -->\n    <ng-container *ngFor=\"let column of dataColumns\" [matColumnDef]=\"column.id\">\n      <th mat-header-cell *matHeaderCellDef>{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        @if ( column.id === 'collection_issues' ) {\n          {{ translateCollectionIssues(row.counts[column.id]) | async }}\n        } @else {\n          <a *ngIf=\"row.counts[column.id]\" (click)=\"showMaterialWithIssue(row.meta.id, row.meta.label, column.id)\">\n            {{ row.counts[column.id] }}\n          </a>\n        }\n      </td>\n    </ng-container>\n\n    <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(columnIds); sticky:true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(columnIds)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-row-header,tr:nth-child(2n) .mat-mdc-cell{border-right-color:#fff}.mat-mdc-cell,.mat-mdc-header-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-mdc-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-row-header mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:left}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.row-header a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeCollectionDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeCollectionDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-tree-collection-details', standalone: true, imports: [
                         TranslateModule,
@@ -3158,8 +3156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgForOf,
                         MatTableModule,
                         ProgressSpinnerComponent,
-                    ], template: "<mat-card>\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\n      Qualit\u00E4tsmetrik: {{pageTitle | translate}}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title\n    >\n  </mat-card-header>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"!isLoading()\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"recentQualityMatrix$.value.rows\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n        {{row.meta.label}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Data Columns -->\n    <ng-container *ngFor=\"let column of dataColumns\" [matColumnDef]=\"column.id\">\n      <th mat-header-cell *matHeaderCellDef>{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        <ng-container *ngIf=\" column.id === 'collection_issues' else countsWithLinks\">\n          {{ translateCollectionIssues(row.counts[column.id]) | async }}\n        </ng-container>\n        <ng-template #countsWithLinks>\n          <a *ngIf=\"row.counts[column.id]\" (click)=\"showMaterialWithIssue(row.meta.id, row.meta.label, column.id)\">\n            {{ row.counts[column.id] }}\n          </a>\n        </ng-template>\n\n\n      </td>\n    </ng-container>\n\n    <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(columnIds); sticky:true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(columnIds)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-row-header,tr:nth-child(2n) .mat-mdc-cell{border-right-color:#fff}.mat-mdc-cell,.mat-mdc-header-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-mdc-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-row-header mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:left}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.row-header a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20px}\n"] }]
-        }], ctorParameters: () => [{ type: MetaApiService }, { type: i2$3.TranslateService }, { type: EditorialLinkService }], propDecorators: { collectionId: [{
+                    ], template: "<mat-card>\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\n      Qualit\u00E4tsmetrik: {{pageTitle | translate}}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title\n    >\n  </mat-card-header>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"!isLoading()\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"recentQualityMatrix$.value.rows\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n        {{row.meta.label}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Data Columns -->\n    <ng-container *ngFor=\"let column of dataColumns\" [matColumnDef]=\"column.id\">\n      <th mat-header-cell *matHeaderCellDef>{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        @if ( column.id === 'collection_issues' ) {\n          {{ translateCollectionIssues(row.counts[column.id]) | async }}\n        } @else {\n          <a *ngIf=\"row.counts[column.id]\" (click)=\"showMaterialWithIssue(row.meta.id, row.meta.label, column.id)\">\n            {{ row.counts[column.id] }}\n          </a>\n        }\n      </td>\n    </ng-container>\n\n    <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(columnIds); sticky:true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(columnIds)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-row-header,tr:nth-child(2n) .mat-mdc-cell{border-right-color:#fff}.mat-mdc-cell,.mat-mdc-header-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-mdc-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-row-header mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:left}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.row-header a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20px}\n"] }]
+        }], ctorParameters: () => [{ type: MetaApiService }, { type: i2$2.TranslateService }, { type: EditorialLinkService }], propDecorators: { collectionId: [{
                 type: Input,
                 args: [{ required: true }]
             }], pageTitle: [{
@@ -3431,10 +3429,10 @@ class TreeSearchCountsComponent {
     get alternatingDataColumns() {
         return this.collectionColumns.flatMap((e, i) => [e, this.searchColumns[i]]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeSearchCountsComponent, deps: [{ token: MetaApiService }, { token: ConfigHelperService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeSearchCountsComponent, isStandalone: true, selector: "metaqs2-tree-search-counts", inputs: { pageTitle: "pageTitle", collectionId: "collectionId" }, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Material in Sammlungen{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto;\"></div>\n    <div class=\"actionbar\">\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\">\n        zeige nur OER\n      </mat-slide-toggle>\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\">\n        zeige alle Typen\n      </mat-slide-toggle>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"columns\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"materialCounts.rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Label Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"label-col {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n          {{ row.meta.label }}\n        </a>\n      </td>\n    </ng-container>\n    <!-- one column for the MaterialType spanning the collection and search columns-->\n    <ng-container *ngFor=\"let col of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"2\" mat-header-cell *matHeaderCellDef class=\"mat-cell-level-{{col.level}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- collection Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"column.id + COLLECTION_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>in Sammlung</th>\n      <td [class.noMaterial]=\"!row.counts[column.id]?.sufficient || row.counts[column.id]?.sufficient <= 1\"\n          [class.fewMaterials]=\"1 < row.counts[column.id]?.sufficient && row.counts[column.id]?.sufficient <= 3\"\n          class=\"collection-data-cell\"\n          mat-cell *matCellDef=\"let row\">\n            <a (click)=\"showCollectionItems(row.meta.id, row.meta.label, column.id)\">\n              {{ row.counts[column.id]?.sufficient || '0' }}\n            </a>\n      </td>\n    </ng-container>\n    <!-- /collection Data Columns -->\n    <!-- search Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns let index = index; trackBy:columnIdent\" [matColumnDef]=\"column.id + SEARCH_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>Suche</th>\n      <td class=\"search-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a (click)=\"searchInEditor(column.id, row.meta.label)\">\n          <ng-container *ngIf=\"(( searchCounts | async)?.has(column.id + '_' + row.meta.id) ) else zeroOrLoading\">\n            {{ (searchCounts | async)?.get(column.id + '_' + row.meta.id) }}\n          </ng-container>\n          <ng-template #zeroOrLoading>\n            <ng-container *ngIf=\"rowsLoaded.has(row.meta.id) else loadingBlock\"> 0 </ng-container>\n          </ng-template>\n          <ng-template #loadingBlock>\n            loading\u2026\n          </ng-template>\n        </a>\n      </td>\n    </ng-container>\n    <!-- /search Data Columns -->\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat( typeColumns ); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"alternatingDataColumns; sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(alternatingDataColumns)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-label-col,tr:nth-child(2n) .search-data-cell{border-right-color:#fff}.search-data-cell,.mat-mdc-header-cell,.mat-column-label-col{border-right:1px solid #e4e4e4}.search-data-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-label-col mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:center}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.label-col a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeSearchCountsComponent, deps: [{ token: MetaApiService }, { token: ConfigHelperService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TreeSearchCountsComponent, isStandalone: true, selector: "metaqs2-tree-search-counts", inputs: { pageTitle: "pageTitle", collectionId: "collectionId" }, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Material in Sammlungen{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto;\"></div>\n    <div class=\"actionbar\">\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\">\n        zeige nur OER\n      </mat-slide-toggle>\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\">\n        zeige alle Typen\n      </mat-slide-toggle>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"columns\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"materialCounts.rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Label Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"label-col {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n          {{ row.meta.label }}\n        </a>\n      </td>\n    </ng-container>\n    <!-- one column for the MaterialType spanning the collection and search columns-->\n    <ng-container *ngFor=\"let col of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"2\" mat-header-cell *matHeaderCellDef class=\"mat-cell-level-{{col.level}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- collection Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"column.id + COLLECTION_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>in Sammlung</th>\n      <td [class.noMaterial]=\"!row.counts[column.id]?.sufficient || row.counts[column.id]?.sufficient <= 1\"\n          [class.fewMaterials]=\"1 < row.counts[column.id]?.sufficient && row.counts[column.id]?.sufficient <= 3\"\n          class=\"collection-data-cell\"\n          mat-cell *matCellDef=\"let row\">\n            <a (click)=\"showCollectionItems(row.meta.id, row.meta.label, column.id)\">\n              {{ row.counts[column.id]?.sufficient || '0' }}\n            </a>\n      </td>\n    </ng-container>\n    <!-- /collection Data Columns -->\n    <!-- search Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns let index = index; trackBy:columnIdent\" [matColumnDef]=\"column.id + SEARCH_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>Suche</th>\n      <td class=\"search-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a (click)=\"searchInEditor(column.id, row.meta.label)\">\n          @if ( (searchCounts | async)?.has(column.id + '_' + row.meta.id) ) {\n            {{ (searchCounts | async)?.get(column.id + '_' + row.meta.id) }}\n          } @else if (rowsLoaded.has(row.meta.id)) {\n            0\n          } @else {\n            loading\u2026 \n          }\n        </a>\n      </td>\n    </ng-container>\n    <!-- /search Data Columns -->\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat( typeColumns ); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"alternatingDataColumns; sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(alternatingDataColumns)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-label-col,tr:nth-child(2n) .search-data-cell{border-right-color:#fff}.search-data-cell,.mat-mdc-header-cell,.mat-column-label-col{border-right:1px solid #e4e4e4}.search-data-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-label-col mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:center}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.label-col a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeSearchCountsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeSearchCountsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-tree-search-counts', standalone: true, imports: [
                         TranslateModule,
@@ -3448,7 +3446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         ReactiveFormsModule,
                         ProgressSpinnerComponent,
-                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Material in Sammlungen{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto;\"></div>\n    <div class=\"actionbar\">\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\">\n        zeige nur OER\n      </mat-slide-toggle>\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\">\n        zeige alle Typen\n      </mat-slide-toggle>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"columns\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"materialCounts.rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Label Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"label-col {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n          {{ row.meta.label }}\n        </a>\n      </td>\n    </ng-container>\n    <!-- one column for the MaterialType spanning the collection and search columns-->\n    <ng-container *ngFor=\"let col of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"2\" mat-header-cell *matHeaderCellDef class=\"mat-cell-level-{{col.level}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- collection Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"column.id + COLLECTION_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>in Sammlung</th>\n      <td [class.noMaterial]=\"!row.counts[column.id]?.sufficient || row.counts[column.id]?.sufficient <= 1\"\n          [class.fewMaterials]=\"1 < row.counts[column.id]?.sufficient && row.counts[column.id]?.sufficient <= 3\"\n          class=\"collection-data-cell\"\n          mat-cell *matCellDef=\"let row\">\n            <a (click)=\"showCollectionItems(row.meta.id, row.meta.label, column.id)\">\n              {{ row.counts[column.id]?.sufficient || '0' }}\n            </a>\n      </td>\n    </ng-container>\n    <!-- /collection Data Columns -->\n    <!-- search Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns let index = index; trackBy:columnIdent\" [matColumnDef]=\"column.id + SEARCH_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>Suche</th>\n      <td class=\"search-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a (click)=\"searchInEditor(column.id, row.meta.label)\">\n          <ng-container *ngIf=\"(( searchCounts | async)?.has(column.id + '_' + row.meta.id) ) else zeroOrLoading\">\n            {{ (searchCounts | async)?.get(column.id + '_' + row.meta.id) }}\n          </ng-container>\n          <ng-template #zeroOrLoading>\n            <ng-container *ngIf=\"rowsLoaded.has(row.meta.id) else loadingBlock\"> 0 </ng-container>\n          </ng-template>\n          <ng-template #loadingBlock>\n            loading\u2026\n          </ng-template>\n        </a>\n      </td>\n    </ng-container>\n    <!-- /search Data Columns -->\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat( typeColumns ); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"alternatingDataColumns; sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(alternatingDataColumns)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-label-col,tr:nth-child(2n) .search-data-cell{border-right-color:#fff}.search-data-cell,.mat-mdc-header-cell,.mat-column-label-col{border-right:1px solid #e4e4e4}.search-data-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-label-col mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:center}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.label-col a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"] }]
+                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Material in Sammlungen{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto;\"></div>\n    <div class=\"actionbar\">\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\">\n        zeige nur OER\n      </mat-slide-toggle>\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\">\n        zeige alle Typen\n      </mat-slide-toggle>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"columns\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"materialCounts.rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Label Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"label-col {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n          {{ row.meta.label }}\n        </a>\n      </td>\n    </ng-container>\n    <!-- one column for the MaterialType spanning the collection and search columns-->\n    <ng-container *ngFor=\"let col of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"2\" mat-header-cell *matHeaderCellDef class=\"mat-cell-level-{{col.level}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- collection Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"column.id + COLLECTION_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>in Sammlung</th>\n      <td [class.noMaterial]=\"!row.counts[column.id]?.sufficient || row.counts[column.id]?.sufficient <= 1\"\n          [class.fewMaterials]=\"1 < row.counts[column.id]?.sufficient && row.counts[column.id]?.sufficient <= 3\"\n          class=\"collection-data-cell\"\n          mat-cell *matCellDef=\"let row\">\n            <a (click)=\"showCollectionItems(row.meta.id, row.meta.label, column.id)\">\n              {{ row.counts[column.id]?.sufficient || '0' }}\n            </a>\n      </td>\n    </ng-container>\n    <!-- /collection Data Columns -->\n    <!-- search Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns let index = index; trackBy:columnIdent\" [matColumnDef]=\"column.id + SEARCH_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>Suche</th>\n      <td class=\"search-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a (click)=\"searchInEditor(column.id, row.meta.label)\">\n          @if ( (searchCounts | async)?.has(column.id + '_' + row.meta.id) ) {\n            {{ (searchCounts | async)?.get(column.id + '_' + row.meta.id) }}\n          } @else if (rowsLoaded.has(row.meta.id)) {\n            0\n          } @else {\n            loading\u2026 \n          }\n        </a>\n      </td>\n    </ng-container>\n    <!-- /search Data Columns -->\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat( typeColumns ); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"alternatingDataColumns; sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(alternatingDataColumns)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-label-col,tr:nth-child(2n) .search-data-cell{border-right-color:#fff}.search-data-cell,.mat-mdc-header-cell,.mat-column-label-col{border-right:1px solid #e4e4e4}.search-data-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-label-col mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:center}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.label-col a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: MetaApiService }, { type: ConfigHelperService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3504,8 +3502,8 @@ class MonthpickerComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthpickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonthpickerComponent, isStandalone: true, selector: "metaqs2-monthpicker", inputs: { startView: "startView", inputGroup: "inputGroup", disabled: "disabled" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonthpickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonthpickerComponent, isStandalone: true, selector: "metaqs2-monthpicker", inputs: { startView: "startView", inputGroup: "inputGroup", disabled: "disabled" }, providers: [
             {
                 provide: DateAdapter,
                 useClass: LuxonDateAdapter,
@@ -3516,9 +3514,9 @@ class MonthpickerComponent {
             { provide: LOCALE_ID, useValue: 'de-DE' },
             { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
             { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true, firstDayOfWeek: 1 } },
-        ], viewQueries: [{ propertyName: "start", first: true, predicate: ["start"], descendants: true, read: (ElementRef), static: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: MatRipple, static: true }], ngImport: i0, template: "<!--\n<mat-card>\n  <mat-card-header>\n    <mat-card-title> Monatlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    </!-- start date --/>\n    -->\n<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\n             #start\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker1\" formControlName=\"start\"\n             placeholder=\"Starts date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker1\n        [startAt]=\"inputGroup.controls.start.defaultValue\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setStart($event, picker1)\"\n\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /start date -->\n    <!-- end date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt2</mat-label>\n      <input matInput\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker2\"\n             formControlName=\"end\"\n             placeholder=\"End date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker2\n        [startAt]=\"inputGroup.controls.end.value\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setEnd($event, picker2)\"\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /end date -->\n</div>\n<!--\n  </mat-card-content>\n</mat-card>\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+        ], viewQueries: [{ propertyName: "start", first: true, predicate: ["start"], descendants: true, read: (ElementRef), static: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: MatRipple, static: true }], ngImport: i0, template: "<!--\n<mat-card>\n  <mat-card-header>\n    <mat-card-title> Monatlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    </!-- start date --/>\n    -->\n<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\n             #start\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker1\" formControlName=\"start\"\n             placeholder=\"Starts date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker1\n        [startAt]=\"inputGroup.controls.start.defaultValue\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setStart($event, picker1)\"\n\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /start date -->\n    <!-- end date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt2</mat-label>\n      <input matInput\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker2\"\n             formControlName=\"end\"\n             placeholder=\"End date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker2\n        [startAt]=\"inputGroup.controls.end.value\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setEnd($event, picker2)\"\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /end date -->\n</div>\n<!--\n  </mat-card-content>\n</mat-card>\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthpickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonthpickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-monthpicker', standalone: true, imports: [
                         FormsModule,
@@ -3654,10 +3652,10 @@ class CollectionCountHistoryComponent {
             this.datapoints$.next(datapoints);
         }), finalize(() => this.isLoading.set(false)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionCountHistoryComponent, deps: [{ token: MetaApiService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CollectionCountHistoryComponent, isStandalone: true, selector: "metaqs2-collection-count-history", inputs: { pageTitle: "pageTitle" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], ngImport: i0, template: "<mat-card appearance=\"outlined\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\n      {{ pageTitle }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <div style=\"display: flex; gap: 0.5rem; align-items: center\">\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-monthpicker *ngIf=\"isHistoryEnabled()\" [inputGroup]=\"range\"></metaqs2-monthpicker>\n      <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n        <label>Zeige historische Daten</label>\n      </mat-slide-toggle>\n    </div>\n    <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n\n    <div [class.while-loading]=\"isLoading()\">\n      <canvas\n        baseChart\n        [datasets]=\"(datapoints$ | async) || []\"\n        [options]=\"lineChartOptions\"\n        [type]=\"'line'\"\n      ></canvas>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}\n"], dependencies: [{ kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "component", type: MonthpickerComponent, selector: "metaqs2-monthpicker", inputs: ["startView", "inputGroup", "disabled"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionCountHistoryComponent, deps: [{ token: MetaApiService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CollectionCountHistoryComponent, isStandalone: true, selector: "metaqs2-collection-count-history", inputs: { pageTitle: "pageTitle" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }], ngImport: i0, template: "<mat-card appearance=\"outlined\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\n      {{ pageTitle }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <div style=\"display: flex; gap: 0.5rem; align-items: center\">\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-monthpicker *ngIf=\"isHistoryEnabled()\" [inputGroup]=\"range\"></metaqs2-monthpicker>\n      <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n        <label>Zeige historische Daten</label>\n      </mat-slide-toggle>\n    </div>\n    <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n\n    <div [class.while-loading]=\"isLoading()\">\n      <canvas\n        baseChart\n        [datasets]=\"(datapoints$ | async) || []\"\n        [options]=\"lineChartOptions\"\n        [type]=\"'line'\"\n      ></canvas>\n    </div>\n  </mat-card-content>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}\n"], dependencies: [{ kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "component", type: MonthpickerComponent, selector: "metaqs2-monthpicker", inputs: ["startView", "inputGroup", "disabled"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionCountHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CollectionCountHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-collection-count-history', standalone: true, imports: [
                         BaseChartDirective,
@@ -3762,10 +3760,10 @@ class BaseHistoricDataTableDirective {
             return this.linkService.createLinkForCountsWithHistory(this.sourceType, sourceId, issueId);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseHistoricDataTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BaseHistoricDataTableDirective, inputs: { apiMethod: "apiMethod", columnTranslationkey: "columnTranslationkey", pageTitle: "pageTitle", sourceType: "sourceType" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseHistoricDataTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: BaseHistoricDataTableDirective, isStandalone: true, inputs: { apiMethod: "apiMethod", columnTranslationkey: "columnTranslationkey", pageTitle: "pageTitle", sourceType: "sourceType" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseHistoricDataTableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseHistoricDataTableDirective, decorators: [{
             type: Directive
         }], propDecorators: { apiMethod: [{
                 type: Input
@@ -3829,10 +3827,10 @@ class CountsWithHistoryComponent extends BaseHistoricDataTableDirective {
     compareLoadingDataEqual(a, b) {
         return a.date.equals(b.date);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountsWithHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountsWithHistoryComponent, isStandalone: true, selector: "metaqs2-counts-with-history", usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: AsyncPipe, name: "async" }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CountsWithHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CountsWithHistoryComponent, isStandalone: true, selector: "metaqs2-counts-with-history", usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: AsyncPipe, name: "async" }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountsWithHistoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CountsWithHistoryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-counts-with-history', standalone: true, imports: [
                         MatCardModule,
@@ -3857,7 +3855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AsyncPipe,
                         ProgressSpinnerComponent,
                         MatRipple,
-                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"] }]
+                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"] }]
         }] });
 
 async function createRegister(environment) {
@@ -3964,10 +3962,10 @@ class TreeLicenseComponent extends BaseHistoricDataTableDirective {
     compareLoadingDataEqual(a, b) {
         return a.collectionId === b.collectionId && a.date.equals(b.date);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeLicenseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeLicenseComponent, isStandalone: true, selector: "metaqs2-tree-license", inputs: { collectionId: "collectionId", sourceType: "sourceType" }, usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n", ".while-loading{filter:blur(2px)}tr:nth-child(2n),tr:nth-child(odd){background-color:#fff}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell,tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeLicenseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TreeLicenseComponent, isStandalone: true, selector: "metaqs2-tree-license", inputs: { collectionId: "collectionId", sourceType: "sourceType" }, usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n", ".while-loading{filter:blur(2px)}tr:nth-child(2n),tr:nth-child(odd){background-color:#fff}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell,tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeLicenseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TreeLicenseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-tree-license', standalone: true, imports: [
                         AsyncPipe,
@@ -3995,7 +3993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ProgressSpinnerComponent,
                         TranslateModule,
                         FormsModule,
-                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n", ".while-loading{filter:blur(2px)}tr:nth-child(2n),tr:nth-child(odd){background-color:#fff}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell,tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"] }]
+                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n", ".while-loading{filter:blur(2px)}tr:nth-child(2n),tr:nth-child(odd){background-color:#fff}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell,tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"] }]
         }], propDecorators: { collectionId: [{
                 type: Input,
                 args: [{ required: true }]