ngx-edu-sharing-metaqs2 0.9.33 → 0.9.35

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

@@ -1,21 +1,20 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Pipe, Component, Input, Output, inject, LOCALE_ID, ViewChild, ChangeDetectionStrategy, signal, EventEmitter, effect, computed } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Pipe, Component, Input, Output, inject, Renderer2, Injector, ChangeDetectionStrategy, HostBinding, LOCALE_ID, ViewChild, ElementRef, Directive, signal, computed, viewChild, viewChildren, HostListener, EventEmitter, effect, enableProdMode, importProvidersFrom } from '@angular/core';
 import * as i3$1 from '@angular/material/card';
-import { MatCard, MatCardContent, MatCardHeader, MatCardTitle, MatCardModule } from '@angular/material/card';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardModule } from '@angular/material/card';
 import { MatTreeModule } from '@angular/material/tree';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
 import * as i1$4 from '@angular/material/icon';
-import { MatIconModule, MatIcon } from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
 import * as i5 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i6 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i6$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
+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 { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i4 from '@angular/material/table';
-import { MatTableModule, MatTable, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef } 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';
@@ -25,30 +24,41 @@ import * as i1$2 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormsModule, FormGroup, FormRecord } from '@angular/forms';
 import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i10 from '@angular/material/tooltip';
-import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpContext, HttpParams, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { HttpHeaders, HttpContext, HttpParams, provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
 import { pipe, of, BehaviorSubject, forkJoin, Subject, zip } from 'rxjs';
 import { map, catchError, startWith, take, filter, tap, finalize, takeUntil, shareReplay, distinctUntilChanged, switchMap, skipWhile } from 'rxjs/operators';
 import * as i2$4 from '@angular/platform-browser';
-import { BrowserModule } 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$2 from '@angular/common';
-import { NgForOf, AsyncPipe, NgClass, NgIf, DOCUMENT } from '@angular/common';
+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 } from '@angular/material/core';
 import * as i2$3 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DateTime } from 'luxon';
+import * as i1$3 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 { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$3 from '@angular/cdk/overlay';
 import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { createCustomElement } from '@angular/elements';
+
+const BASE_PATH = new InjectionToken('basePath');
+const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+};
 
 /**
  * Custom HttpParameterCodec
@@ -69,14 +79,6 @@ class CustomHttpParameterCodec {
     }
 }
 
-const BASE_PATH = new InjectionToken('basePath');
-const COLLECTION_FORMATS = {
-    'csv': ',',
-    'tsv': '   ',
-    'ssv': ' ',
-    'pipes': '|'
-};
-
 class Configuration {
     constructor(configurationParameters = {}) {
         this.apiKeys = configurationParameters.apiKeys;
@@ -157,6 +159,14 @@ class Configuration {
         const value = this.credentials[key];
         return typeof value === 'function' ? value() : value;
     }
+    addCredentialToHeaders(credentialKey, headerName, headers, prefix) {
+        const value = this.lookupCredential(credentialKey);
+        return value ? headers.set(headerName, (prefix ?? '') + value) : headers;
+    }
+    addCredentialToQuery(credentialKey, paramName, query) {
+        const value = this.lookupCredential(credentialKey);
+        return value ? query.set(paramName, value) : query;
+    }
     defaultEncodeParam(param) {
         // This implementation exists as fallback for missing configuration
         // and for backwards compatibility to older typescript-angular generator versions.
@@ -172,25 +182,11 @@ class Configuration {
     }
 }
 
-/**
- * OpenAPI definition
- *
- *
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-/* tslint:disable:no-unused-variable member-ordering */
-class AuthProxyControllerService {
-    constructor(httpClient, basePath, configuration) {
-        this.httpClient = httpClient;
-        this.basePath = 'https://repository.staging.openeduhub.net/edu-sharing/services/metaqs-2';
+class BaseService {
+    constructor(basePath, configuration) {
+        this.basePath = '';
         this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
-        }
+        this.configuration = configuration || new Configuration();
         if (typeof this.configuration.basePath !== 'string') {
             const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
             if (firstBasePath != undefined) {
@@ -203,63 +199,75 @@ class AuthProxyControllerService {
         }
         this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
     }
-    // @ts-ignore
+    canConsumeForm(consumes) {
+        return consumes.indexOf('multipart/form-data') !== -1;
+    }
     addToHttpParams(httpParams, value, key) {
-        if (typeof value === 'object' && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
+        // If the value is an object (but not a Date), recursively add its keys.
+        if (typeof value === 'object' && !(value instanceof Date)) {
+            return this.addToHttpParamsRecursive(httpParams, value, key);
         }
-        return httpParams;
+        return this.addToHttpParamsRecursive(httpParams, value, key);
     }
     addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
+        if (value === null || value === undefined) {
             return httpParams;
         }
         if (typeof value === 'object') {
+            // If JSON format is preferred, key must be provided.
+            if (key != null) {
+                return httpParams.append(key, JSON.stringify(value));
+            }
+            // Otherwise, if it's an array, add each element.
             if (Array.isArray(value)) {
                 value.forEach((elem) => (httpParams = this.addToHttpParamsRecursive(httpParams, elem, key)));
             }
             else if (value instanceof Date) {
                 if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
+                    httpParams = httpParams.append(key, value.toISOString());
                 }
                 else {
                     throw Error('key may not be null if value is Date');
                 }
             }
             else {
-                Object.keys(value).forEach((k) => (httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k)));
+                Object.keys(value).forEach((k) => {
+                    const paramKey = key ? `${key}.${k}` : k;
+                    httpParams = this.addToHttpParamsRecursive(httpParams, value[k], paramKey);
+                });
             }
+            return httpParams;
         }
         else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error('key may not be null if value is not object or array');
+            return httpParams.append(key, value);
         }
-        return httpParams;
+        throw Error('key may not be null if value is not object or array');
+    }
+}
+
+/**
+ * OpenAPI definition
+ *
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/* tslint:disable:no-unused-variable member-ordering */
+class AuthProxyControllerService extends BaseService {
+    constructor(httpClient, basePath, configuration) {
+        super(basePath, configuration);
+        this.httpClient = httpClient;
     }
     destroySession(jSESSIONID, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = [];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([]);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -288,29 +296,14 @@ class AuthProxyControllerService {
         if (authorization !== undefined && authorization !== null) {
             localVarHeaders = localVarHeaders.set('Authorization', String(authorization));
         }
-        let localVarCredential;
         // authentication (basicAuth) required
-        localVarCredential = this.configuration.lookupCredential('basicAuth');
-        if (localVarCredential) {
-            localVarHeaders = localVarHeaders.set('Authorization', 'Basic ' + localVarCredential);
-        }
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        localVarHeaders = this.configuration.addCredentialToHeaders('basicAuth', 'Authorization', localVarHeaders, 'Basic ');
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -361,90 +354,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Do not edit the class manually.
  */
 /* tslint:disable:no-unused-variable member-ordering */
-class CollectionAPIService {
+class CollectionAPIService extends BaseService {
     constructor(httpClient, basePath, configuration) {
+        super(basePath, configuration);
         this.httpClient = httpClient;
-        this.basePath = 'https://repository.staging.openeduhub.net/edu-sharing/services/metaqs-2';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
-        }
-        if (typeof this.configuration.basePath !== 'string') {
-            const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
-            if (firstBasePath != undefined) {
-                basePath = firstBasePath;
-            }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
-            }
-            this.configuration.basePath = basePath;
-        }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
-    }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === 'object' && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
-        }
-        return httpParams;
-    }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === 'object') {
-            if (Array.isArray(value)) {
-                value.forEach((elem) => (httpParams = this.addToHttpParamsRecursive(httpParams, elem, key)));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
-                }
-                else {
-                    throw Error('key may not be null if value is Date');
-                }
-            }
-            else {
-                Object.keys(value).forEach((k) => (httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k)));
-            }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error('key may not be null if value is not object or array');
-        }
-        return httpParams;
     }
-    getCollectionsWithMissingAttribute(collectionId, missingAttr, observe = 'body', reportProgress = false, options) {
+    getCollectionsWithMissingAttribute(collectionId, missingAttr, from, size, observe = 'body', reportProgress = false, options) {
         if (collectionId === null || collectionId === undefined) {
             throw new Error('Required parameter collectionId was null or undefined when calling getCollectionsWithMissingAttribute.');
         }
         if (missingAttr === null || missingAttr === undefined) {
             throw new Error('Required parameter missingAttr was null or undefined when calling getCollectionsWithMissingAttribute.');
         }
+        let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, from, 'from');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, size, 'size');
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -476,6 +407,7 @@ class CollectionAPIService {
         })}`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
+            params: localVarQueryParameters,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -489,23 +421,12 @@ class CollectionAPIService {
             throw new Error('Required parameter collectionId was null or undefined when calling getCompleteness.');
         }
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -542,33 +463,16 @@ class CollectionAPIService {
             throw new Error('Required parameter term was null or undefined when calling getCountBySearchTerm.');
         }
         let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
-        if (term !== undefined && term !== null) {
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, term, 'term');
-        }
-        if (oerOnly !== undefined && oerOnly !== null) {
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, oerOnly, 'oerOnly');
-        }
-        if (type !== undefined && type !== null) {
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, type, 'type');
-        }
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, term, 'term');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, oerOnly, 'oerOnly');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, type, 'type');
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -598,30 +502,15 @@ class CollectionAPIService {
             throw new Error('Required parameter term was null or undefined when calling getCountBySearchTermAggregatedByType.');
         }
         let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
-        if (term !== undefined && term !== null) {
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, term, 'term');
-        }
-        if (oerOnly !== undefined && oerOnly !== null) {
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, oerOnly, 'oerOnly');
-        }
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, term, 'term');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, oerOnly, 'oerOnly');
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -646,32 +535,68 @@ class CollectionAPIService {
             reportProgress: reportProgress,
         });
     }
+    getMaterialCountMatrixByLicenseGroup1(collectionId, filter, observe = 'body', reportProgress = false, options) {
+        if (collectionId === null || collectionId === undefined) {
+            throw new Error('Required parameter collectionId was null or undefined when calling getMaterialCountMatrixByLicenseGroup1.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
+        // to determine the Content-Type header
+        const consumes = ['application/json'];
+        const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
+        }
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            }
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
+            }
+        }
+        let localVarPath = `/collections/${this.configuration.encodeParam({
+            name: 'collectionId',
+            value: collectionId,
+            in: 'path',
+            style: 'simple',
+            explode: false,
+            dataType: 'string',
+            dataFormat: undefined,
+        })}/licenses/materialCount`;
+        return this.httpClient.request('post', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            body: filter,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress,
+        });
+    }
     getMaterialCountMatrixPerCollection(collectionId, oerOnly, observe = 'body', reportProgress = false, options) {
         if (collectionId === null || collectionId === undefined) {
             throw new Error('Required parameter collectionId was null or undefined when calling getMaterialCountMatrixPerCollection.');
         }
         let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
-        if (oerOnly !== undefined && oerOnly !== null) {
-            localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, oerOnly, 'oerOnly');
-        }
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, oerOnly, 'oerOnly');
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -704,31 +629,23 @@ class CollectionAPIService {
             reportProgress: reportProgress,
         });
     }
-    getMaterialsWithMissingAttribute(nodeId, missingAttr, observe = 'body', reportProgress = false, options) {
+    getMaterialsWithMissingAttribute(nodeId, missingAttr, from, size, observe = 'body', reportProgress = false, options) {
         if (nodeId === null || nodeId === undefined) {
             throw new Error('Required parameter nodeId was null or undefined when calling getMaterialsWithMissingAttribute.');
         }
         if (missingAttr === null || missingAttr === undefined) {
             throw new Error('Required parameter missingAttr was null or undefined when calling getMaterialsWithMissingAttribute.');
         }
+        let localVarQueryParameters = new HttpParams({ encoder: this.encoder });
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, from, 'from');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters, size, 'size');
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -760,6 +677,7 @@ class CollectionAPIService {
         })}`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
+            params: localVarQueryParameters,
             responseType: responseType_,
             withCredentials: this.configuration.withCredentials,
             headers: localVarHeaders,
@@ -770,23 +688,12 @@ class CollectionAPIService {
     }
     getTopLevelCollection(observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -837,84 +744,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Do not edit the class manually.
  */
 /* tslint:disable:no-unused-variable member-ordering */
-class EditorsAPIService {
+class EditorsAPIService extends BaseService {
     constructor(httpClient, basePath, configuration) {
+        super(basePath, configuration);
         this.httpClient = httpClient;
-        this.basePath = 'https://repository.staging.openeduhub.net/edu-sharing/services/metaqs-2';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
-        }
-        if (typeof this.configuration.basePath !== 'string') {
-            const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
-            if (firstBasePath != undefined) {
-                basePath = firstBasePath;
-            }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
-            }
-            this.configuration.basePath = basePath;
-        }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
-    }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === 'object' && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
-        }
-        return httpParams;
-    }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === 'object') {
-            if (Array.isArray(value)) {
-                value.forEach((elem) => (httpParams = this.addToHttpParamsRecursive(httpParams, elem, key)));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
-                }
-                else {
-                    throw Error('key may not be null if value is Date');
-                }
-            }
-            else {
-                Object.keys(value).forEach((k) => (httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k)));
-            }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error('key may not be null if value is not object or array');
-        }
-        return httpParams;
     }
     getCompletenessForDisciplinaryPortals(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -950,23 +792,12 @@ class EditorsAPIService {
             throw new Error('Required parameter materialCountFilter was null or undefined when calling getMaterialCount.');
         }
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -999,23 +830,12 @@ class EditorsAPIService {
     }
     getMaterialCountMatrixByLicenseGroup(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -1073,84 +893,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Do not edit the class manually.
  */
 /* tslint:disable:no-unused-variable member-ordering */
-class FilterAPIService {
+class FilterAPIService extends BaseService {
     constructor(httpClient, basePath, configuration) {
+        super(basePath, configuration);
         this.httpClient = httpClient;
-        this.basePath = 'https://repository.staging.openeduhub.net/edu-sharing/services/metaqs-2';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
+    }
+    getCollectionIssueFieldNames(observe = 'body', reportProgress = false, options) {
+        let localVarHeaders = this.defaultHeaders;
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        if (typeof this.configuration.basePath !== 'string') {
-            const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
-            if (firstBasePath != undefined) {
-                basePath = firstBasePath;
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
+        let responseType_ = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
             }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
+            else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            }
+            else {
+                responseType_ = 'blob';
             }
-            this.configuration.basePath = basePath;
-        }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
-    }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === 'object' && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
         }
-        return httpParams;
-    }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === 'object') {
-            if (Array.isArray(value)) {
-                value.forEach((elem) => (httpParams = this.addToHttpParamsRecursive(httpParams, elem, key)));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
-                }
-                else {
-                    throw Error('key may not be null if value is Date');
-                }
-            }
-            else {
-                Object.keys(value).forEach((k) => (httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k)));
-            }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error('key may not be null if value is not object or array');
-        }
-        return httpParams;
+        let localVarPath = `/filters/collection/issues`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
+            context: localVarHttpContext,
+            responseType: responseType_,
+            withCredentials: this.configuration.withCredentials,
+            headers: localVarHeaders,
+            observe: observe,
+            transferCache: localVarTransferCache,
+            reportProgress: reportProgress,
+        });
     }
-    getCollectionIssueFieldNames(observe = 'body', reportProgress = false, options) {
+    getHistoricalTimerange(observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -1163,7 +949,7 @@ class FilterAPIService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/filters/collection/issues`;
+        let localVarPath = `/filters/timerange`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
             responseType: responseType_,
@@ -1174,25 +960,14 @@ class FilterAPIService {
             reportProgress: reportProgress,
         });
     }
-    getHistoricalTimerange(observe = 'body', reportProgress = false, options) {
+    getMaterialIssueFieldNames(observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -1205,7 +980,7 @@ class FilterAPIService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/filters/timerange`;
+        let localVarPath = `/filters/material/issues`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
             responseType: responseType_,
@@ -1216,25 +991,14 @@ class FilterAPIService {
             reportProgress: reportProgress,
         });
     }
-    getMaterialIssueFieldNames(observe = 'body', reportProgress = false, options) {
+    getMaterialTypesMapping(observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -1247,7 +1011,7 @@ class FilterAPIService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/filters/material/issues`;
+        let localVarPath = `/filters/material/types`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
             responseType: responseType_,
@@ -1258,25 +1022,14 @@ class FilterAPIService {
             reportProgress: reportProgress,
         });
     }
-    getMaterialTypesMapping(observe = 'body', reportProgress = false, options) {
+    getPublicEndpoints(observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -1289,7 +1042,7 @@ class FilterAPIService {
                 responseType_ = 'blob';
             }
         }
-        let localVarPath = `/filters/material/types`;
+        let localVarPath = `/filters/public_endpoints`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`, {
             context: localVarHttpContext,
             responseType: responseType_,
@@ -1302,23 +1055,12 @@ class FilterAPIService {
     }
     getQualitxMatrixFilters(observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         let responseType_ = 'json';
         if (localVarHttpHeaderAcceptSelected) {
             if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
@@ -1369,84 +1111,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Do not edit the class manually.
  */
 /* tslint:disable:no-unused-variable member-ordering */
-class ReplicationSourceAPIService {
+class ReplicationSourceAPIService extends BaseService {
     constructor(httpClient, basePath, configuration) {
+        super(basePath, configuration);
         this.httpClient = httpClient;
-        this.basePath = 'https://repository.staging.openeduhub.net/edu-sharing/services/metaqs-2';
-        this.defaultHeaders = new HttpHeaders();
-        this.configuration = new Configuration();
-        if (configuration) {
-            this.configuration = configuration;
-        }
-        if (typeof this.configuration.basePath !== 'string') {
-            const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
-            if (firstBasePath != undefined) {
-                basePath = firstBasePath;
-            }
-            if (typeof basePath !== 'string') {
-                basePath = this.basePath;
-            }
-            this.configuration.basePath = basePath;
-        }
-        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
-    }
-    // @ts-ignore
-    addToHttpParams(httpParams, value, key) {
-        if (typeof value === 'object' && value instanceof Date === false) {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value);
-        }
-        else {
-            httpParams = this.addToHttpParamsRecursive(httpParams, value, key);
-        }
-        return httpParams;
-    }
-    addToHttpParamsRecursive(httpParams, value, key) {
-        if (value == null) {
-            return httpParams;
-        }
-        if (typeof value === 'object') {
-            if (Array.isArray(value)) {
-                value.forEach((elem) => (httpParams = this.addToHttpParamsRecursive(httpParams, elem, key)));
-            }
-            else if (value instanceof Date) {
-                if (key != null) {
-                    httpParams = httpParams.append(key, value.toISOString().substring(0, 10));
-                }
-                else {
-                    throw Error('key may not be null if value is Date');
-                }
-            }
-            else {
-                Object.keys(value).forEach((k) => (httpParams = this.addToHttpParamsRecursive(httpParams, value[k], key != null ? `${key}.${k}` : k)));
-            }
-        }
-        else if (key != null) {
-            httpParams = httpParams.append(key, value);
-        }
-        else {
-            throw Error('key may not be null if value is not object or array');
-        }
-        return httpParams;
     }
     getCompletenessForReplicationSources(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -1479,23 +1156,12 @@ class ReplicationSourceAPIService {
     }
     getMaterialCountMatrixByReplicationSourceAndLicense(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -1528,23 +1194,12 @@ class ReplicationSourceAPIService {
     }
     getMaterialCountMatrixByReplicationSourceAndType(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -1577,23 +1232,12 @@ class ReplicationSourceAPIService {
     }
     getQualityMatrixTimestampsV2(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -1626,23 +1270,12 @@ class ReplicationSourceAPIService {
     }
     getQualityMatrixV2(filter, observe = 'body', reportProgress = false, options) {
         let localVarHeaders = this.defaultHeaders;
-        let localVarHttpHeaderAcceptSelected = options && options.httpHeaderAccept;
-        if (localVarHttpHeaderAcceptSelected === undefined) {
-            // to determine the Accept header
-            const httpHeaderAccepts = ['application/json'];
-            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
-        }
+        const localVarHttpHeaderAcceptSelected = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept(['application/json']);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
         }
-        let localVarHttpContext = options && options.context;
-        if (localVarHttpContext === undefined) {
-            localVarHttpContext = new HttpContext();
-        }
-        let localVarTransferCache = options && options.transferCache;
-        if (localVarTransferCache === undefined) {
-            localVarTransferCache = true;
-        }
+        const localVarHttpContext = options?.context ?? new HttpContext();
+        const localVarTransferCache = options?.transferCache ?? true;
         // to determine the Content-Type header
         const consumes = ['application/json'];
         const httpContentTypeSelected = this.configuration.selectHeaderContentType(consumes);
@@ -1827,6 +1460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class NgMetaWidgetsLibConfiguration {
 }
+const NG_META_WIDGETS_LIB_CONFIGURATION = new InjectionToken('NG_META_WIDGETS_LIB_CONFIGURATION');
 /**
  * helper class to provide configuration values
  */
@@ -1844,14 +1478,14 @@ 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: 'config' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfigHelperService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: NgMetaWidgetsLibConfiguration, decorators: [{
                     type: Inject,
-                    args: ['config']
+                    args: [NG_META_WIDGETS_LIB_CONFIGURATION]
                 }] }] });
 
 /**
@@ -1891,235 +1525,349 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+const TOOLTIP_DATA = new InjectionToken('TOOLTIP_DATA');
+const TOOLTIP_REF = new InjectionToken('TOOLTIP_REF');
+const noop = Object.freeze(() => { });
 /**
- * This class is a thin wrapper around the API services.
+ * @internal
  */
-class MetaApiService {
-    constructor(collectionsAPI, replicationsAPI, filterAPI, editorsAPI) {
-        this.collectionsAPI = collectionsAPI;
-        this.replicationsAPI = replicationsAPI;
-        this.filterAPI = filterAPI;
-        this.editorsAPI = editorsAPI;
-    }
-    /**
-     * Get the filters for the quality matrix.
-     * It pipes the observable to take only one value.
-     */
-    getSearchFilters() {
-        return this.filterAPI.getQualitxMatrixFilters().pipe(take(1));
-    }
-    getCategoryFilters() {
-        return this.getSearchFilters().pipe(map((filters) => filters.filter((filter) => filter.field !== 'timerange')));
-    }
-    getCollectionsFilter() {
-        return this.collectionsAPI.getTopLevelCollection();
-    }
-    /**
-     * Get the timerange filter for the quality matrix.
-     * Returns the first filter of the historical timerange filters.
-     */
-    getTimerangeFilter() {
-        return this.filterAPI.getHistoricalTimerange().pipe(take(1), map((filters) => filters[0]));
-    }
-    getMaterialCountMatrixPerCollection(nodeRef, oerOnly) {
-        return this.collectionsAPI.getMaterialCountMatrixPerCollection(nodeRef, oerOnly);
-    }
-    getCollectionCompleteness(colId) {
-        return this.collectionsAPI.getCompleteness(colId);
-    }
-    getQualityMatrixWithFiltersV2(body) {
-        return this.replicationsAPI.getQualityMatrixV2(body);
+class TooltipRefImpl {
+    constructor(renderer, overlay, openTimeout = 0, closeTimeout = 0, onOpen = noop, onClose = noop) {
+        this.renderer = renderer;
+        this.overlay = overlay;
+        this.openTimeout = openTimeout;
+        this.closeTimeout = closeTimeout;
+        this.onOpen = onOpen;
+        this.onClose = onClose;
+    }
+    cancelCloseAction() {
+        clearTimeout(this.closeTimeoutRef);
+        this.closeTimeoutRef = undefined;
+    }
+    open() {
+        this.openTimeoutRef = setTimeout(this.openTooltip.bind(this), this.openTimeout); // typescript bug (typescript mistakenly uses NodeJS.Timeout instead of number as return type of setTimeout)
+    }
+    openTooltip() {
+        this.openTimeoutRef = undefined;
+        this.component = this.overlay.attach(this.portal);
+        this.unlistenMouseEnter = this.renderer.listen(this.overlay.overlayElement, 'mouseenter', this.cancelCloseAction.bind(this));
+        this.unlistenMouseLeave = this.renderer.listen(this.overlay.overlayElement, 'mouseleave', this.markForClose.bind(this));
+        this.onOpen();
+    }
+    markForClose() {
+        if (this.openTimeoutRef) {
+            // not yet opened, cancel open action
+            clearTimeout(this.openTimeoutRef);
+            this.openTimeoutRef = undefined;
+            return;
+        }
+        if (this.closeTimeoutRef) {
+            // already marked for close
+            return;
+        }
+        this.closeTimeoutRef = setTimeout(this.closeTooltip.bind(this), this.closeTimeout); // typescript bug (typescript mistakenly uses NodeJS.Timeout instead of number as return type of setTimeout)
     }
-    getEditorialMaterialCounts(body) {
-        return this.editorsAPI.getMaterialCount(body);
+    closeTooltip() {
+        this.overlay.detach();
+        this.onClose();
+        this.closeTimeoutRef = undefined;
+        this.unlistenMouseEnter?.();
+        this.unlistenMouseLeave?.();
     }
-    getMaterialTypeCountsByReplicationSource(body) {
-        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndType(body);
+}
+const centerPositionStrategy = [
+    {
+        originX: 'center',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'center',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'bottom',
+    },
+    {
+        originX: 'center',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    {
+        originX: 'center',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'bottom',
+    },
+];
+const borderPositionStrategy = [
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+    },
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+    },
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+    },
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+    },
+];
+class TooltipService {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.renderer = inject(Renderer2);
     }
-    getLicenseCountsByReplicationSource(body) {
-        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndLicense(body);
+    create(component, config) {
+        const overlayRef = this.overlay.create(config.overlayConfig ?? {
+            hasBackdrop: false,
+            disposeOnNavigation: true,
+        });
+        const tooltipRef = new TooltipRefImpl(this.renderer, overlayRef, config.openTimeout ?? 0, config.closeTimeout ?? 0, config.onOpen ?? noop, config.onClose ?? noop);
+        tooltipRef.portal = new ComponentPortal(component, null, Injector.create({
+            providers: [
+                {
+                    provide: OverlayRef,
+                    useValue: overlayRef,
+                },
+                {
+                    provide: TOOLTIP_DATA,
+                    useValue: config.data,
+                },
+                {
+                    provide: TOOLTIP_REF,
+                    useValue: tooltipRef,
+                },
+            ],
+            parent: config.injector,
+        }));
+        return tooltipRef;
     }
-    getMaterialCountMatrixByLicenseGroup(body) {
-        return this.editorsAPI.getMaterialCountMatrixByLicenseGroup(body);
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DonutChartPipe {
+    transform(donutSlices, radius, svgSize, borderSize) {
+        let previousPercent = 0;
+        return donutSlices.map((slice) => {
+            // this is a hack to that the circle is rendered when the percent is 100
+            slice.percent = slice.percent === 100 ? 99.999 : slice.percent;
+            const sliceWithCommands = {
+                ...slice,
+                commands: `${this.getSliceCommands(slice, radius, svgSize, borderSize)} z`,
+                offset: previousPercent * 3.6 * -1,
+            };
+            previousPercent += slice.percent;
+            return sliceWithCommands;
+        });
     }
-    getCompletenessForDisciplinaryPortals(body) {
-        return this.editorsAPI.getCompletenessForDisciplinaryPortals(body);
+    getSliceCommands(donutSlice, radius, svgSize, borderSize) {
+        const degrees = this.percentToDegrees(donutSlice.percent);
+        const longPathFlag = degrees > 180 ? 1 : 0;
+        const innerRadius = radius - borderSize;
+        const commands = [];
+        commands.push(`M ${svgSize / 2 + radius} ${svgSize / 2}`);
+        commands.push(`A ${radius} ${radius} 0 ${longPathFlag} 0 ${this.getCoordFromDegrees(degrees, radius, svgSize)}`);
+        commands.push(`L ${this.getCoordFromDegrees(degrees, innerRadius, svgSize)}`);
+        commands.push(`A ${innerRadius} ${innerRadius} 0 ${longPathFlag} 1 ${svgSize / 2 + innerRadius} ${svgSize / 2}`);
+        return commands.join(' ');
     }
-    getCompletenessForReplicationSources(body) {
-        return this.replicationsAPI.getCompletenessForReplicationSources(body);
+    getCoordFromDegrees(angle, radius, svgSize) {
+        const x = Math.cos((angle * Math.PI) / 180);
+        const y = Math.sin((angle * Math.PI) / 180);
+        const coordX = x * radius + svgSize / 2;
+        const coordY = y * -radius + svgSize / 2;
+        return `${coordX} ${coordY}`;
     }
-    getMaterialTypesMapping() {
-        return this.filterAPI.getMaterialTypesMapping();
+    percentToDegrees(percent) {
+        return percent * 3.6;
     }
-    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: "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" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetaApiService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    providedIn: 'root',
+                    name: 'slicesWithCommandsAndOffset',
+                    pure: true,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: CollectionAPIService }, { type: ReplicationSourceAPIService }, { type: FilterAPIService }, { type: EditorsAPIService }] });
+        }] });
 
 /**
- * This service provides methods to create links to the editorial desk with specific filters.
+ * A donut chart component that displays a list of slices.
+ * The chart is divided into slices, each slice has a color and a label.
+ * Each slice is represented by a percentage of the total chart.
+ * borrowed from https://medium.com/@theAngularGuy/how-to-create-an-interactive-donut-chart-using-svg-107cbf0b5b6
  */
-/*  This map makes it easier for me to keep track which issues are mapped to which filters */
-const FilterNames2Issues = {
-    //Lizenzen
-    'virtual:editorial_license': ['oer', 'other_cc', 'copyright', 'without_license'],
-    //Materialtypen werden im Constructor gesetzt
-    'virtual:oeh_lrt': [],
-    'virtual:editorial_exclusion': [
-        'outdated',
-        'without_preview',
-        'without_title',
-        'without_description',
-        'without_url',
-        'without_type',
-        'without_taxonomy_id',
-        'without_education_level',
-        'without_target_group',
-        'without_license',
-        'without_publisher',
-    ],
-};
-// Here we map back the issues to the filter names in the editorial desk, so we can look up the filter name for a given issue
-const Issues2FilterNames = Object.entries(FilterNames2Issues).reduce((map, [key, value]) => {
-    value.forEach((issue) => map.set(issue, key));
-    return map;
-}, new Map());
-// maps our values to the values of the filter in the editorial desk
-const MapValuesForFilter = {
-    'virtual:editorial_exclusion': {
-        outdated: null,
-        without_preview: null,
-        without_title: ['missing_title'],
-        without_description: ['missing_description'],
-        without_url: ['links'],
-        without_type: ['missing_oeh_lrt'],
-        without_taxonomy_id: ['without_taxonomy_id'],
-        without_education_level: ['missing_educationalcontext'],
-        without_target_group: ['missing_educationalintendedenduserrole'],
-        without_license: ['missing_license'],
-        without_publisher: ['missing_replicationsource'],
-    },
-    'virtual:editorial_license': {
-        oer: ['oer'],
-        copyright: ['none_oer'],
-        without_license: ['none'],
-    },
-    'virtual:oeh_lrt': {},
-};
-/*
-This is a map from properties of a document to filter names
- */
-const PROPERTIES2FILTERS = new Map([
-    ['metadata.educationalContexts', 'ccm:educationalcontext'],
-    ['metadata.disciplines', 'virtual:taxonid'],
-    //["responsibility", "virtual:collection_id_primary"] // das zeigt auf "sammlungszugehörigkeit" und ist falsch
-]);
-class EditorialLinkService {
+class DonutChartComponent {
     constructor() {
-        this.env = inject(ConfigHelperService);
-        this.api = inject(MetaApiService);
-        this.typesLoaded$ = new BehaviorSubject(false);
-        this.api
-            .getMaterialTypesMapping()
-            .pipe(take(1))
-            .subscribe((types) => {
-            for (const [key, value] of Object.entries(types)) {
-                Issues2FilterNames.set(key, 'virtual:oeh_lrt');
-                MapValuesForFilter['virtual:oeh_lrt'][key] = value;
-            }
-            this.typesLoaded$.next(true);
-        });
+        this.radius = 50;
+        this.viewBox = 100;
+        this.borderSize = 20;
+        this.strokeWidth = 5;
+        this.data = [];
     }
-    openByReplicationsourceAndIssueTypeWithFilters(source, issue, selectedFilters) {
-        const filters = {};
-        filters['virtual:audit_filter'] = ['all'];
-        filters['ccm:oeh_publisher_combined'] = [source];
-        filters['virtual:editorial_exclusion'] = MapValuesForFilter['virtual:editorial_exclusion'][issue];
-        for (const [field, values] of Object.entries(selectedFilters)) {
-            if (values && values.length) {
-                const editorialFiltername = PROPERTIES2FILTERS.get(field);
-                filters[editorialFiltername] = values;
-            }
+    ngOnInit() {
+        const sum = this.data?.reduce((accu, slice) => accu + slice.percent, 0);
+        if (sum !== 100) {
+            throw new Error(`The sum of all slices of the donut chart must equal to 100%. Found: ${sum}.`);
         }
-        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
-        const params = new URLSearchParams();
-        params.set('mode', 'audit');
-        params.set('filters', JSON.stringify(filters));
-        window.open(`${theUrl}?${params}`, 'editor_frontend');
-    }
-    openByCollectionAndIssueType(collectionId, issueType, pageTitle) {
-        const filters = {};
-        filters['virtual:audit_filter'] = ['all'];
-        filters['virtual:editorial_exclusion'] = MapValuesForFilter['virtual:editorial_exclusion'][issueType];
-        filters['virtual:collection_id_primary'] = [collectionId];
-        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
-        const params = new URLSearchParams();
-        params.set('title', pageTitle);
-        params.set('mode', 'audit');
-        params.set('filters', JSON.stringify(filters));
-        window.open(`${theUrl}?${params}`, 'editor_frontend');
     }
-    openByCollectionId(collectionId) {
-        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
-        const params = new URLSearchParams();
-        params.set('ids', collectionId);
-        params.set('mode', 'render');
-        window.open(`${theUrl}?${params}`, 'editor_frontend');
-    }
-    /**
-     * This method creates a link to the editorial desk with specific filters.
-     * It returns the URL to the editorial desk with the filters applied or null if the issueId is not mapped to a filter.
-     * With this we can render a link with an href attribute to the editorial desk in the frontend.
-     * @see the counts-with-history.component.scss how we style links only if their hrefs are not null
-     *
-     * @param sourceType The type of the source, e.g. "replicationSource" or "collection"
-     * @param sourceId The id of the source. This is the first column in the table.
-     * @param issueId The id of the issue. These are the other columns in the table.
-     */
-    createLinkForCountsWithHistory(sourceType, sourceId, issueId) {
-        const filters = {};
-        filters['virtual:audit_filter'] = ['all'];
-        // determine the "main" filter
-        if (sourceType === 'replicationSource') {
-            filters['ccm:oeh_publisher_combined'] = [sourceId];
-        }
-        else if (sourceType === 'collection') {
-            filters['virtual:collection_id_primary'] = [sourceId];
-        }
-        if (!Issues2FilterNames.has(issueId)) {
-            return null;
-        }
-        const filterName = Issues2FilterNames.get(issueId);
-        if (!filterName) {
-            // console.debug("No filter name found for issue id: " + issueId);
-            return null;
-        }
-        const filterValue = MapValuesForFilter[filterName][issueId];
-        if (!filterValue) {
-            // console.debug("No filter value found for issue id: " + issueId);
-            return null;
-        }
-        filters[filterName] = filterValue;
-        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
-        const params = new URLSearchParams();
-        params.set('mode', 'audit');
-        params.set('filters', JSON.stringify(filters));
-        return `${theUrl}?${params}`;
+    trackByFn(index, slice) {
+        return slice.id;
     }
-    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: "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: `
+    <svg [attr.viewBox]="'0 0 ' + viewBox + ' ' + viewBox" *ngIf="data">
+      <path
+        *ngFor="
+          let slice of data | slicesWithCommandsAndOffset : radius : viewBox : borderSize;
+          trackBy: trackByFn;
+          let index = index
+        "
+        [attr.fill]="slice.color"
+        stroke="white"
+        paint-order="stroke"
+        stroke-opacity="1"
+        [attr.stroke-width]="strokeWidth"
+        [attr.d]="slice.commands"
+        [attr.transform]="'rotate(' + slice.offset + ')'"
+        (click)="slice.onClickCb?.()"
+      >
+        <title>{{ slice.label }}</title>
+      </path>
+    </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: EditorialLinkService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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">
+      <path
+        *ngFor="
+          let slice of data | slicesWithCommandsAndOffset : radius : viewBox : borderSize;
+          trackBy: trackByFn;
+          let index = index
+        "
+        [attr.fill]="slice.color"
+        stroke="white"
+        paint-order="stroke"
+        stroke-opacity="1"
+        [attr.stroke-width]="strokeWidth"
+        [attr.d]="slice.commands"
+        [attr.transform]="'rotate(' + slice.offset + ')'"
+        (click)="slice.onClickCb?.()"
+      >
+        <title>{{ slice.label }}</title>
+      </path>
+    </svg>
+  `, imports: [DonutChartPipe, NgForOf, NgIf], standalone: 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"] }]
+        }], propDecorators: { radius: [{
+                type: Input
+            }], viewBox: [{
+                type: Input
+            }], borderSize: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+function transformDonutChartData(data) {
+    return data.map((slice) => [
+        // inverted order is necessary for the donut chart to go clockwise
+        {
+            percent: 100 - slice.percent,
+            color: 'transparent',
+            id: 999999,
+        },
+        slice,
+    ]);
+}
+class DonutChartTooltipComponent {
+    constructor() {
+        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: [
+            trigger('fadeInOut', [
+                transition(':enter', [
+                    style({
+                        opacity: 0,
+                        scale: 0.5,
+                    }),
+                    animate('100ms ease-in', style({
+                        opacity: 1,
+                        scale: 1,
+                    })),
+                ]),
+                transition(':leave', [
+                    style({
+                        opacity: 1,
+                        scale: 1,
+                    }),
+                    animate('100ms ease-out', style({
+                        opacity: 0,
+                        scale: 0.5,
+                    })),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'metaqs2-donut-chart-tooltip', animations: [
+                        trigger('fadeInOut', [
+                            transition(':enter', [
+                                style({
+                                    opacity: 0,
+                                    scale: 0.5,
+                                }),
+                                animate('100ms ease-in', style({
+                                    opacity: 1,
+                                    scale: 1,
+                                })),
+                            ]),
+                            transition(':leave', [
+                                style({
+                                    opacity: 1,
+                                    scale: 1,
+                                }),
+                                animate('100ms ease-out', style({
+                                    opacity: 0,
+                                    scale: 0.5,
+                                })),
+                            ]),
+                        ]),
+                    ], 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']
+            }] } });
 
 const datePickerFormats$1 = {
     parse: {
@@ -2152,16 +1900,12 @@ 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 } },
-        ], ngImport: i0, template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title> Zeitlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    <!-- start date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\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  </mat-card-content>\n</mat-card>\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: 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: "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"] }] }); }
+        ], ngImport: i0, template: "<div [formGroup]=\"inputGroup\">\n  <!-- start date -->\n  <mat-form-field>\n    <mat-label>Zeitpunkt 1</mat-label>\n    <input matInput\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'metaqs2-datepicker', standalone: true, imports: [
                         FormsModule,
-                        MatCard,
-                        MatCardContent,
-                        MatCardHeader,
-                        MatCardTitle,
                         MatDatepicker,
                         MatDatepickerInput,
                         MatDatepickerToggle,
@@ -2181,7 +1925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         { provide: LOCALE_ID, useValue: 'de-DE' },
                         { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
                         { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true, firstDayOfWeek: 1 } },
-                    ], template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title> Zeitlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    <!-- start date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\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  </mat-card-content>\n</mat-card>\n" }]
+                    ], template: "<div [formGroup]=\"inputGroup\">\n  <!-- start date -->\n  <mat-form-field>\n    <mat-label>Zeitpunkt 1</mat-label>\n    <input matInput\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" }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: Input
             }], inputGroup: [{
@@ -2264,7 +2008,7 @@ class ProgressSpinnerComponent {
             : 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$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
             type: Component,
@@ -2286,143 +2030,279 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['progressSpinnerRef', { static: true }]
             }] } });
 
-class DonutChartPipe {
-    transform(donutSlices, radius, svgSize, borderSize) {
-        let previousPercent = 0;
-        return donutSlices.map(slice => {
-            // this is a hack to that the circle is rendered when the percent is 100
-            slice.percent = slice.percent === 100 ? 99.999 : slice.percent;
-            const sliceWithCommands = {
-                ...slice,
-                commands: `${this.getSliceCommands(slice, radius, svgSize, borderSize)} z`,
-                offset: previousPercent * 3.6 * -1,
-            };
-            previousPercent += slice.percent;
-            return sliceWithCommands;
-        });
+class ScrollMarkerDirective {
+    constructor() {
+        this.element = inject(ElementRef);
     }
-    getSliceCommands(donutSlice, radius, svgSize, borderSize) {
-        const degrees = this.percentToDegrees(donutSlice.percent);
-        const longPathFlag = degrees > 180 ? 1 : 0;
-        const innerRadius = radius - borderSize;
-        const commands = [];
-        commands.push(`M ${svgSize / 2 + radius} ${svgSize / 2}`);
-        commands.push(`A ${radius} ${radius} 0 ${longPathFlag} 0 ${this.getCoordFromDegrees(degrees, radius, svgSize)}`);
-        commands.push(`L ${this.getCoordFromDegrees(degrees, innerRadius, svgSize)}`);
-        commands.push(`A ${innerRadius} ${innerRadius} 0 ${longPathFlag} 1 ${svgSize / 2 + innerRadius} ${svgSize / 2}`);
-        return commands.join(' ');
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollMarkerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[metaqs2ScrollMarker]',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * This class is a thin wrapper around the API services.
+ */
+class MetaApiService {
+    constructor(collectionsAPI, replicationsAPI, filterAPI, editorsAPI) {
+        this.collectionsAPI = collectionsAPI;
+        this.replicationsAPI = replicationsAPI;
+        this.filterAPI = filterAPI;
+        this.editorsAPI = editorsAPI;
     }
-    getCoordFromDegrees(angle, radius, svgSize) {
-        const x = Math.cos(angle * Math.PI / 180);
-        const y = Math.sin(angle * Math.PI / 180);
-        const coordX = x * radius + svgSize / 2;
-        const coordY = y * -radius + svgSize / 2;
-        return `${coordX} ${coordY}`;
+    /**
+     * Get the filters for the quality matrix.
+     * It pipes the observable to take only one value.
+     */
+    getSearchFilters() {
+        return this.filterAPI.getQualitxMatrixFilters().pipe(take(1));
     }
-    percentToDegrees(percent) {
-        return percent * 3.6;
+    getCategoryFilters() {
+        return this.getSearchFilters().pipe(map((filters) => filters.filter((filter) => filter.field !== 'timerange')));
     }
-    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, name: "slicesWithCommandsAndOffset" }); }
+    getCollectionsFilter() {
+        return this.collectionsAPI.getTopLevelCollection();
+    }
+    /**
+     * Get the timerange filter for the quality matrix.
+     * Returns the first filter of the historical timerange filters.
+     */
+    getTimerangeFilter() {
+        return this.filterAPI.getHistoricalTimerange().pipe(take(1), map((filters) => filters[0]));
+    }
+    getMaterialCountMatrixPerCollection(nodeRef, oerOnly) {
+        return this.collectionsAPI.getMaterialCountMatrixPerCollection(nodeRef, oerOnly);
+    }
+    getCollectionCompleteness(colId) {
+        return this.collectionsAPI.getCompleteness(colId);
+    }
+    getQualityMatrixWithFiltersV2(body) {
+        return this.replicationsAPI.getQualityMatrixV2(body);
+    }
+    getEditorialMaterialCounts(body) {
+        return this.editorsAPI.getMaterialCount(body);
+    }
+    getMaterialTypeCountsByReplicationSource(body) {
+        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndType(body);
+    }
+    getLicenseCountsByReplicationSource(body) {
+        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndLicense(body);
+    }
+    getMaterialCountMatrixByLicenseGroup(body) {
+        return this.editorsAPI.getMaterialCountMatrixByLicenseGroup(body);
+    }
+    getCompletenessForDisciplinaryPortals(body) {
+        return this.editorsAPI.getCompletenessForDisciplinaryPortals(body);
+    }
+    getCompletenessForReplicationSources(body) {
+        return this.replicationsAPI.getCompletenessForReplicationSources(body);
+    }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DonutChartPipe, decorators: [{
-            type: Pipe,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetaApiService, decorators: [{
+            type: Injectable,
             args: [{
-                    name: 'slicesWithCommandsAndOffset',
-                    pure: true,
+                    providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: CollectionAPIService }, { type: ReplicationSourceAPIService }, { type: FilterAPIService }, { type: EditorsAPIService }] });
 
 /**
- * A donut chart component that displays a list of slices.
- * The chart is divided into slices, each slice has a color and a label.
- * Each slice is represented by a percentage of the total chart.
- * borrowed from https://medium.com/@theAngularGuy/how-to-create-an-interactive-donut-chart-using-svg-107cbf0b5b6
+ * This service provides methods to create links to the editorial desk with specific filters.
+ */
+/*  This map makes it easier for me to keep track which issues are mapped to which filters */
+const FilterNames2Issues = {
+    //Lizenzen
+    'virtual:editorial_license': ['oer', 'other_cc', 'copyright', 'without_license'],
+    //Materialtypen werden im Constructor gesetzt
+    'virtual:oeh_lrt': [],
+    'virtual:editorial_exclusion': [
+        'outdated',
+        'without_preview',
+        'without_title',
+        'without_description',
+        'without_url',
+        'without_type',
+        'without_taxonomy_id',
+        'without_education_level',
+        'without_target_group',
+        'without_license',
+        'without_publisher',
+    ],
+};
+// Here we map back the issues to the filter names in the editorial desk, so we can look up the filter name for a given issue
+const Issues2FilterNames = Object.entries(FilterNames2Issues).reduce((map, [key, value]) => {
+    value.forEach((issue) => map.set(issue, key));
+    return map;
+}, new Map());
+// maps our values to the values of the filter in the editorial desk
+const MapValuesForFilter = {
+    'virtual:editorial_exclusion': {
+        outdated: null,
+        without_preview: null,
+        without_title: ['missing_title'],
+        without_description: ['missing_description'],
+        without_url: ['links'],
+        without_type: ['missing_oeh_lrt'],
+        without_taxonomy_id: ['without_taxonomy_id'],
+        without_education_level: ['missing_educationalcontext'],
+        without_target_group: ['missing_educationalintendedenduserrole'],
+        without_license: ['missing_license'],
+        without_publisher: ['missing_replicationsource'],
+    },
+    'virtual:editorial_license': {
+        oer: ['oer'],
+        copyright: ['none_oer'],
+        without_license: ['none'],
+    },
+    'virtual:oeh_lrt': {},
+};
+/*
+This is a map from properties of a document to filter names
  */
-class DonutChartComponent {
+const PROPERTIES2FILTERS = new Map([
+    ['metadata.educationalContexts', 'ccm:educationalcontext'],
+    ['metadata.disciplines', 'virtual:taxonid'],
+    //["responsibility", "virtual:collection_id_primary"] // das zeigt auf "sammlungszugehörigkeit" und ist falsch
+]);
+class EditorialLinkService {
     constructor() {
-        this.radius = 50;
-        this.viewBox = 100;
-        this.borderSize = 20;
-        this.strokeWidth = 5;
-        this.data = [];
+        this.env = inject(ConfigHelperService);
+        this.api = inject(MetaApiService);
+        this.typesLoaded$ = new BehaviorSubject(false);
+        this.api
+            .getMaterialTypesMapping()
+            .pipe(take(1))
+            .subscribe((types) => {
+            for (const [key, value] of Object.entries(types)) {
+                Issues2FilterNames.set(key, 'virtual:oeh_lrt');
+                MapValuesForFilter['virtual:oeh_lrt'][key] = value;
+            }
+            this.typesLoaded$.next(true);
+        });
     }
-    ngOnInit() {
-        const sum = this.data?.reduce((accu, slice) => accu + slice.percent, 0);
-        if (sum !== 100) {
-            throw new Error(`The sum of all slices of the donut chart must equal to 100%. Found: ${sum}.`);
+    openByReplicationsourceAndIssueTypeWithFilters(source, issue, selectedFilters) {
+        const filters = {};
+        filters['virtual:audit_filter'] = ['all'];
+        filters['ccm:oeh_publisher_combined'] = [source];
+        filters['virtual:editorial_exclusion'] = MapValuesForFilter['virtual:editorial_exclusion'][issue];
+        for (const [field, values] of Object.entries(selectedFilters)) {
+            if (values && values.length) {
+                const editorialFiltername = PROPERTIES2FILTERS.get(field);
+                filters[editorialFiltername] = values;
+            }
         }
+        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
+        const params = new URLSearchParams();
+        params.set('mode', 'audit');
+        params.set('filters', JSON.stringify(filters));
+        window.open(`${theUrl}?${params}`, 'editor_frontend');
     }
-    trackByFn(index, slice) {
-        return slice.id;
+    openByCollectionAndIssueType(collectionId, issueType, pageTitle) {
+        const filters = {};
+        filters['virtual:audit_filter'] = ['all'];
+        filters['virtual:editorial_exclusion'] = MapValuesForFilter['virtual:editorial_exclusion'][issueType];
+        filters['virtual:collection_id_primary'] = [collectionId];
+        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
+        const params = new URLSearchParams();
+        params.set('title', pageTitle);
+        params.set('mode', 'audit');
+        params.set('filters', JSON.stringify(filters));
+        window.open(`${theUrl}?${params}`, 'editor_frontend');
     }
-    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, 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="
-          let slice of data | slicesWithCommandsAndOffset : radius : viewBox : borderSize;
-          trackBy: trackByFn;
-          let index = index
-        "
-        [attr.fill]="slice.color"
-        stroke="white"
-        paint-order="stroke"
-        stroke-opacity="1"
-        [attr.stroke-width]="strokeWidth"
-        [attr.d]="slice.commands"
-        [attr.transform]="'rotate(' + slice.offset + ')'"
-        (click)="slice.onClickCb?.()"
-      >
-        <title>{{ slice.label }}</title>
-      </path>
-    </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: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: DonutChartPipe, name: "slicesWithCommandsAndOffset" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    openByCollectionId(collectionId) {
+        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
+        const params = new URLSearchParams();
+        params.set('ids', collectionId);
+        params.set('mode', 'render');
+        window.open(`${theUrl}?${params}`, 'editor_frontend');
+    }
+    /**
+     * This method creates a link to the editorial desk with specific filters.
+     * It returns the URL to the editorial desk with the filters applied or null if the issueId is not mapped to a filter.
+     * With this we can render a link with an href attribute to the editorial desk in the frontend.
+     * @see the counts-with-history.component.scss how we style links only if their hrefs are not null
+     *
+     * @param sourceType The type of the source, e.g. "replicationSource" or "collection"
+     * @param sourceId The id of the source. This is the first column in the table.
+     * @param issueId The id of the issue. These are the other columns in the table.
+     */
+    createLinkForCountsWithHistory(sourceType, sourceId, issueId) {
+        const filters = {};
+        filters['virtual:audit_filter'] = ['all'];
+        // determine the "main" filter
+        if (sourceType === 'replicationSource') {
+            filters['ccm:oeh_publisher_combined'] = [sourceId];
+        }
+        else if (sourceType === 'collection') {
+            filters['virtual:collection_id_primary'] = [sourceId];
+        }
+        if (!Issues2FilterNames.has(issueId)) {
+            return null;
+        }
+        const filterName = Issues2FilterNames.get(issueId);
+        if (!filterName) {
+            // console.debug("No filter name found for issue id: " + issueId);
+            return null;
+        }
+        const filterValue = MapValuesForFilter[filterName][issueId];
+        if (!filterValue) {
+            // console.debug("No filter value found for issue id: " + issueId);
+            return null;
+        }
+        filters[filterName] = filterValue;
+        const theUrl = this.env.eduSharingPath + '/components/editorial-desk';
+        const params = new URLSearchParams();
+        params.set('mode', 'audit');
+        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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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">
-      <path
-        *ngFor="
-          let slice of data | slicesWithCommandsAndOffset : radius : viewBox : borderSize;
-          trackBy: trackByFn;
-          let index = index
-        "
-        [attr.fill]="slice.color"
-        stroke="white"
-        paint-order="stroke"
-        stroke-opacity="1"
-        [attr.stroke-width]="strokeWidth"
-        [attr.d]="slice.commands"
-        [attr.transform]="'rotate(' + slice.offset + ')'"
-        (click)="slice.onClickCb?.()"
-      >
-        <title>{{ slice.label }}</title>
-      </path>
-    </svg>
-  `, 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"] }]
-        }], propDecorators: { radius: [{
-                type: Input
-            }], viewBox: [{
-                type: Input
-            }], borderSize: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorialLinkService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
+const openCloseTimeout = 150;
 class QualityMatrixComponent {
-    constructor(metaApi, linkService) {
+    constructor(metaApi, linkService, overlay, tooltipService) {
         this.metaApi = metaApi;
         this.linkService = linkService;
+        this.overlay = overlay;
+        this.tooltipService = tooltipService;
+        this.ref = inject(ElementRef);
+        this.scrollLeft = signal(0);
+        this.scrollWidth = signal(0);
+        this.isLeftScrollable = computed(() => this.scrollLeft() > 0);
+        this.isRightScrollable = computed(() => {
+            const viewport = globalThis.visualViewport;
+            if (!viewport) {
+                return;
+            }
+            const viewportWidth = viewport.width;
+            return this.scrollWidth() > viewportWidth && this.scrollLeft() + viewportWidth < this.scrollWidth();
+        });
+        this.issueTypeHeader = viewChild('issueType', {
+            read: ElementRef,
+        });
         this.filteredColumns = [];
         this.datatableColumns = [];
         this.showHistoricalData = new FormControl({ value: false, disabled: true });
         this.onlySourcesWithMaterial = new FormControl({ value: true, disabled: true });
         this.isLoading = signal(true);
+        this.scrollMarkers = viewChildren(ScrollMarkerDirective);
         this.categoryFilterValues = new Map();
         this.recentQualityMatrix$ = new BehaviorSubject({ columns: [], rows: [] });
         this.pastQualityMatrix$ = new BehaviorSubject({ columns: [], rows: [] });
@@ -2430,8 +2310,9 @@ class QualityMatrixComponent {
             start: new FormControl(),
             end: new FormControl(),
         });
-        this.pageTitle = 'Quality Matrix';
+        this.tooltips = new Map();
         this.DateTime = DateTime;
+        this.pageTitle = 'Quality Matrix';
         // a FormRecord has to be initialized with one source to determine its type :-(
         this.categoryControls = new FormRecord({ dummy: new FormControl([], { nonNullable: true }) });
         this.categoryControls.removeControl('dummy', { emitEvent: false });
@@ -2444,6 +2325,9 @@ class QualityMatrixComponent {
         this.onLoadedDataChanges();
         //this.loadDataWithCurrentlySelectedFilters();
     }
+    ngAfterViewChecked() {
+        this.onScroll();
+    }
     filterIdent(_index, item) {
         return item.key;
     }
@@ -2597,47 +2481,177 @@ class QualityMatrixComponent {
         }
     }
     getDonutSlices(row, column) {
-        let sufficientfillRate = 0;
-        let insufficientfillRate = 0;
-        //Der Wert berechnet sich aus dem total_count - without_description_count.
-        if (column.total !== 0) {
-            sufficientfillRate = Math.round((100 * row.counts[column.id].sufficient) / column.total);
-            insufficientfillRate = Math.round((100 * row.counts[column.id].insufficient) / column.total);
-        }
         const sufficientTotal = row.counts[column.id].sufficient;
         const insufficientTotal = row.counts[column.id].insufficient;
         const missingTotal = column.total - sufficientTotal - insufficientTotal;
-        const rest = 100 - (sufficientfillRate + insufficientfillRate); // a.k.a. "missing"
-        const slices = [
+        let sufficientFillRate = 0;
+        let insufficientFillRate = 0;
+        //Der Wert berechnet sich aus dem total_count - without_description_count.
+        if (column.total !== 0) {
+            sufficientFillRate = Math.round((100 * sufficientTotal) / column.total);
+            insufficientFillRate = Math.round((100 * insufficientTotal) / column.total);
+        }
+        const rest = 100 - (sufficientFillRate + insufficientFillRate); // a.k.a. "missing"
+        return [
             {
                 id: 3,
                 percent: rest,
                 color: '#D8EDFC',
                 label: `${rest} % (${missingTotal})`,
+                verboseLabel: `${missingTotal} Metadatens\u00e4tze fehlen`,
             },
             {
                 id: 1,
-                percent: insufficientfillRate,
+                percent: insufficientFillRate,
                 color: '#C20808',
-                label: `${insufficientfillRate} % (${insufficientTotal})`,
+                label: `${insufficientFillRate} % (${insufficientTotal})`,
+                verboseLabel: `${insufficientTotal} Metadatens\u00e4tze sind unzureichend ausgef\u00fcllt`,
             },
             {
                 id: 2,
-                percent: sufficientfillRate,
+                percent: sufficientFillRate,
                 color: '#4ABEFF',
-                label: `${sufficientfillRate} % (${sufficientTotal})`,
+                label: `${sufficientFillRate} % (${sufficientTotal})`,
+                verboseLabel: `${sufficientTotal} Metadatens\u00e4tze sind gut ausgef\u00fcllt`,
             },
         ];
-        return slices;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, deps: [{ token: MetaApiService }, { token: EditorialLinkService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QualityMatrixComponent, selector: "metaqs2-quality-matrix-v2", inputs: { pageTitle: "pageTitle" }, ngImport: i0, template: "<mat-card appearance=\"raised\">\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-content>\n      <metaqs2-qm-filter\n        *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\"></metaqs2-qm-filter>\n  </mat-card-content>\n  <mat-card-actions align=\"end\">\n    <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"onlySourcesWithMaterial\" id=\"onlySourcesWithMaterial\" >\n      show only sources with material\n    </mat-slide-toggle>\n    <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"showHistoricalData\" 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  </mat-card-actions>\n</mat-card>\n<metaqs2-datepicker *ngIf=\"showHistoricalData.value\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" ></metaqs2-datepicker>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"recentQualityMatrix$.value.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>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]=\"showHistoricalData.value?2:1\" 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\">\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=\"showHistoricalData.value\">\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;\"></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}.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}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.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: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: QualityMatrixFilterComponent, selector: "metaqs2-qm-filter", inputs: ["options", "inputFormControl", "label", "multiple"], outputs: ["changedFilters"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }, { kind: "pipe", type: i2$2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }] }); }
+    showTooltip(row, column, cell) {
+        if (row.counts[column.id].sufficient + row.counts[column.id].insufficient === 0) {
+            return;
+        }
+        if (this.tooltips.has(cell)) {
+            this.tooltips.get(cell).cancelCloseAction();
+            return;
+        }
+        const tooltipRef = this.tooltipService.create(DonutChartTooltipComponent, {
+            closeTimeout: openCloseTimeout,
+            openTimeout: openCloseTimeout,
+            data: {
+                label: column.label,
+                data: transformDonutChartData(this.getDonutSlices(row, column)),
+            },
+            overlayConfig: {
+                hasBackdrop: false,
+                positionStrategy: this.overlay.position().flexibleConnectedTo(cell).withPositions(centerPositionStrategy),
+                disposeOnNavigation: true,
+                panelClass: 'donut-chart-tooltip',
+            },
+            onClose: () => {
+                this.tooltips.delete(cell);
+            },
+        });
+        tooltipRef.open();
+        this.tooltips.set(cell, tooltipRef);
+    }
+    hideTooltip(cell) {
+        this.tooltips.get(cell)?.markForClose();
+    }
+    findHorizontalScrollContainer(element) {
+        if (element.scrollWidth > element.clientWidth && ['auto', 'scroll'].includes(getComputedStyle(element).overflowX)) {
+            // find the nearest horizontally scrollable element
+            return element;
+        }
+        else {
+            if (!element.parentElement) {
+                return document.scrollingElement;
+            }
+            return this.findHorizontalScrollContainer(element.parentElement);
+        }
+    }
+    scrollToRight() {
+        const scrollingElement = this.findHorizontalScrollContainer(this.ref.nativeElement);
+        if (!scrollingElement) {
+            return;
+        }
+        const viewport = globalThis.visualViewport;
+        if (!viewport) {
+            return;
+        }
+        const viewportWidth = viewport.width;
+        const lastVisible = this.scrollMarkers().findLast((marker) => marker.element.nativeElement.getBoundingClientRect().left < viewportWidth);
+        if (!lastVisible) {
+            return;
+        }
+        const leftColumnWidth = this.issueTypeHeader()?.nativeElement.getBoundingClientRect().width ?? 0;
+        scrollingElement.scrollBy({
+            left: lastVisible.element.nativeElement.getBoundingClientRect().left - leftColumnWidth,
+            behavior: 'smooth',
+        });
+    }
+    scrollToLeft() {
+        const scrollingElement = this.findHorizontalScrollContainer(this.ref.nativeElement);
+        if (!scrollingElement) {
+            return;
+        }
+        const viewport = globalThis.visualViewport;
+        if (!viewport) {
+            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);
+        if (!firstVisible) {
+            return;
+        }
+        scrollingElement.scrollBy({
+            left: firstVisible.element.nativeElement.getBoundingClientRect().right - viewportWidth,
+            behavior: 'smooth',
+        });
+    }
+    onScroll() {
+        const scrollingElement = this.findHorizontalScrollContainer(this.ref.nativeElement);
+        if (!scrollingElement) {
+            return;
+        }
+        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: [{ token: MetaApiService }, { token: EditorialLinkService }, { token: i1$3.Overlay }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.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, isSignal: true }, { propertyName: "scrollMarkers", predicate: ScrollMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card appearance=\"raised\">\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-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      <metaqs2-datepicker *ngIf=\"showHistoricalData.value\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"onlySourcesWithMaterial\" id=\"onlySourcesWithMaterial\" >\n        show only sources with material\n      </mat-slide-toggle>\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"showHistoricalData\" 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 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 style=\"flex: 1 0 {{scroller.getBoundingClientRect().width}}px\"></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$.value.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]=\"showHistoricalData.value?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=\"showHistoricalData.value\">\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;\"></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{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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'metaqs2-quality-matrix-v2', template: "<mat-card appearance=\"raised\">\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-content>\n      <metaqs2-qm-filter\n        *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\"></metaqs2-qm-filter>\n  </mat-card-content>\n  <mat-card-actions align=\"end\">\n    <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"onlySourcesWithMaterial\" id=\"onlySourcesWithMaterial\" >\n      show only sources with material\n    </mat-slide-toggle>\n    <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"showHistoricalData\" 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  </mat-card-actions>\n</mat-card>\n<metaqs2-datepicker *ngIf=\"showHistoricalData.value\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" ></metaqs2-datepicker>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"recentQualityMatrix$.value.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>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]=\"showHistoricalData.value?2:1\" 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\">\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=\"showHistoricalData.value\">\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;\"></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}.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}\n"] }]
-        }], ctorParameters: () => [{ type: MetaApiService }, { type: EditorialLinkService }], propDecorators: { pageTitle: [{
+            args: [{ selector: 'metaqs2-quality-matrix-v2', providers: [TooltipService], standalone: true, imports: [
+                        MatCard,
+                        MatCardHeader,
+                        MatCardTitle,
+                        MatCardContent,
+                        QualityMatrixFilterComponent,
+                        TranslateModule,
+                        KeyValuePipe,
+                        MatIcon,
+                        DatepickerComponent,
+                        MatSlideToggle,
+                        ReactiveFormsModule,
+                        ProgressSpinnerComponent,
+                        MatTable,
+                        MatTooltip,
+                        MatCell,
+                        MatColumnDef,
+                        MatHeaderCell,
+                        NgClass,
+                        MatHeaderRow,
+                        MatRow,
+                        MatHeaderRowDef,
+                        MatRowDef,
+                        MatHeaderCellDef,
+                        NgForOf,
+                        NgIf,
+                        MatCellDef,
+                        MatButton,
+                        MatIconButton,
+                        DonutChartComponent,
+                        ScrollMarkerDirective,
+                    ], template: "<mat-card appearance=\"raised\">\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-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      <metaqs2-datepicker *ngIf=\"showHistoricalData.value\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"onlySourcesWithMaterial\" id=\"onlySourcesWithMaterial\" >\n        show only sources with material\n      </mat-slide-toggle>\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"showHistoricalData\" 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 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 style=\"flex: 1 0 {{scroller.getBoundingClientRect().width}}px\"></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$.value.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]=\"showHistoricalData.value?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=\"showHistoricalData.value\">\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;\"></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{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"] }]
+        }], ctorParameters: () => [{ type: MetaApiService }, { type: EditorialLinkService }, { type: i1$3.Overlay }, { type: TooltipService }], propDecorators: { pageTitle: [{
                 type: Input
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 class NodeImageUrlPipe {
@@ -2683,7 +2697,7 @@ class NodeEntryComponent {
         // 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$2.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$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: NodeImageUrlPipe, name: "nodeImageUrl" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeEntryComponent, decorators: [{
             type: Component,
@@ -2703,9 +2717,13 @@ class NodeListComponent {
          */
         this.countChanged = new EventEmitter();
         /**
-         * default max count of nodes that should be shown
+         * default max count of nodes that should be shown in view
          */
         this.DEFAULT_LIMIT = 25;
+        /**
+         * default count to fetch from api
+         */
+        this.FETCH_LIMIT = 200;
         this.data = new BehaviorSubject(undefined);
         // rawData: (MaterialWithMissingAttributes | CollectionWithMissingAttributes)[] | undefined;
         this.count = 0;
@@ -2714,9 +2732,9 @@ class NodeListComponent {
          * should all nodes be shown?
          */
         this.showAll = false;
-        this.data.pipe(takeUntil(this.destroyed$)).subscribe((d) => this.countChanged.next(d?.length || 0));
+        this.data.pipe(takeUntil(this.destroyed$)).subscribe((d) => this.countChanged.next(d?.total || 0));
     }
-    async ngOnChanges(changes) {
+    async ngOnChanges(_changes) {
         if (this.collectionId) {
             await this.refresh();
         }
@@ -2728,10 +2746,10 @@ class NodeListComponent {
     async refresh() {
         let getByMissingAttribute = () => {
             if (this.type === 'material') {
-                return this.collectionAPIService.getMaterialsWithMissingAttribute(this.collectionId, this.mode);
+                return this.collectionAPIService.getMaterialsWithMissingAttribute(this.collectionId, this.mode, 0, this.FETCH_LIMIT);
             }
             else {
-                return this.collectionAPIService.getCollectionsWithMissingAttribute(this.collectionId, this.mode);
+                return this.collectionAPIService.getCollectionsWithMissingAttribute(this.collectionId, this.mode, 0, this.FETCH_LIMIT);
             }
         };
         // reset all data before switching
@@ -2760,7 +2778,7 @@ class NodeListComponent {
             action = 'OPTIONS.EDIT';
         }
         const id = node.node_id;
-        const win = window.open(this.env.eduSharingPath +
+        window.open(this.env.eduSharingPath +
             '/components/editorial-desk?mode=audit&viewType=single&ids=' +
             encodeURIComponent(id) +
             '&action=' +
@@ -2771,11 +2789,11 @@ class NodeListComponent {
         // 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.length || 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.length && !showAll ? d.slice(0, DEFAULT_LIMIT) : d\"\n            [node]=\"node\"\n            (edit)=\"editNode(node)\"\n          ></metaqs2-node-entry>\n          <div *ngIf=\"!d.length\">\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.length && !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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.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$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.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$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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.length || 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.length && !showAll ? d.slice(0, DEFAULT_LIMIT) : d\"\n            [node]=\"node\"\n            (edit)=\"editNode(node)\"\n          ></metaqs2-node-entry>\n          <div *ngIf=\"!d.length\">\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.length && !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', 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: [{
@@ -2797,7 +2815,7 @@ class MaterialIssuesComponent {
         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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeListComponent, selector: "metaqs2-node-list", inputs: ["mode", "type", "collectionId"], outputs: ["countChanged"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MaterialIssuesComponent, decorators: [{
             type: Component,
@@ -2815,7 +2833,7 @@ class CollectionIssuesComponent {
         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$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeListComponent, selector: "metaqs2-node-list", inputs: ["mode", "type", "collectionId"], outputs: ["countChanged"] }] }); }
+    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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionIssuesComponent, decorators: [{
             type: Component,
@@ -2869,7 +2887,7 @@ class NgMetaWidgetsLibModule {
             ngModule: NgMetaWidgetsLibModule,
             providers: [
                 ConfigHelperService,
-                { provide: 'config', useValue: params },
+                { provide: NG_META_WIDGETS_LIB_CONFIGURATION, useValue: params },
                 {
                     provide: Configuration,
                     useFactory: () => {
@@ -2884,18 +2902,19 @@ 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,
-            QualityMatrixComponent,
-            DonutChartComponent,
-            DonutChartPipe,
             CollectionIssuesComponent,
             MaterialIssuesComponent,
             NodeEntryComponent,
             NodeListComponent,
-            NodeImageUrlPipe], imports: [BrowserModule, ApiModule, MatCardModule,
+            NodeImageUrlPipe,
+            DonutChartTooltipComponent], imports: [BrowserModule, ApiModule, MatCardModule,
             MatTreeModule,
+            DonutChartComponent,
+            DonutChartPipe,
             BrowserAnimationsModule,
             MatIconModule,
             MatSliderModule,
+            QualityMatrixComponent,
             MatSlideToggleModule,
             MatButtonModule,
             MatProgressSpinnerModule,
@@ -2921,7 +2940,8 @@ class NgMetaWidgetsLibModule {
             MatDatepickerInput,
             MatDatepicker,
             DatepickerComponent,
-            ProgressSpinnerComponent], exports: [CollectionIssuesComponent, MaterialIssuesComponent, NodeListComponent, QualityMatrixComponent] }); }
+            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,
             ApiModule.forRoot(() => new Configuration()),
             MatCardModule,
@@ -2929,6 +2949,7 @@ class NgMetaWidgetsLibModule {
             BrowserAnimationsModule,
             MatIconModule,
             MatSliderModule,
+            QualityMatrixComponent,
             MatSlideToggleModule,
             MatButtonModule,
             MatProgressSpinnerModule,
@@ -2959,14 +2980,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{
                     declarations: [
                         WrapObservablePipe,
-                        QualityMatrixComponent,
-                        DonutChartComponent,
-                        DonutChartPipe,
                         CollectionIssuesComponent,
                         MaterialIssuesComponent,
                         NodeEntryComponent,
                         NodeListComponent,
                         NodeImageUrlPipe,
+                        DonutChartTooltipComponent,
                     ],
                     exports: [CollectionIssuesComponent, MaterialIssuesComponent, NodeListComponent, QualityMatrixComponent],
                     imports: [
@@ -2974,9 +2993,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ApiModule.forRoot(() => new Configuration()),
                         MatCardModule,
                         MatTreeModule,
+                        DonutChartComponent,
+                        DonutChartPipe,
                         BrowserAnimationsModule,
                         MatIconModule,
                         MatSliderModule,
+                        QualityMatrixComponent,
                         MatSlideToggleModule,
                         MatButtonModule,
                         MatProgressSpinnerModule,
@@ -3003,6 +3025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatDatepicker,
                         DatepickerComponent,
                         ProgressSpinnerComponent,
+                        ScrollMarkerDirective,
                     ],
                     providers: [provideHttpClient(withInterceptorsFromDi()), provideCharts(withDefaultRegisterables())],
                 }]
@@ -3057,7 +3080,7 @@ class TreeCollectionDetailsComponent {
         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        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"row.meta.level === 1 ? 'tree' : 'child'\"></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 matTooltip=\"{{column.altLabel}}\" >{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\" matTooltip=\"{{'cell tooltip' //getCellTooltip(row, column.id)}}\">\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: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}.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:20}\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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.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.ɵ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]=\"row.meta.level === 1 ? 'tree' : 'child'\"></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: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.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: [{
             type: Component,
@@ -3066,14 +3089,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AsyncPipe,
                         NgClass,
                         MatCardModule,
-                        MatTooltip,
                         MatIcon,
                         NgIf,
                         NgForOf,
                         MatTableModule,
-                        MatProgressSpinner,
                         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        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"row.meta.level === 1 ? 'tree' : 'child'\"></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 matTooltip=\"{{column.altLabel}}\" >{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\" matTooltip=\"{{'cell tooltip' //getCellTooltip(row, column.id)}}\">\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: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}.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:20}\n"] }]
+                    ], 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]=\"row.meta.level === 1 ? 'tree' : 'child'\"></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: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3300,7 +3321,7 @@ class TreeSearchCountsComponent {
             encodeURIComponent(JSON.stringify(filters)) +
             '&' +
             'panel=contents&tab=4&';
-        const ref = window.open(url);
+        window.open(url);
     }
     showCollectionItems(collectionId, collectionName, materialType) {
         const id = this.extractCollectionIdFromVocabUrl(collectionId);
@@ -3347,7 +3368,7 @@ class TreeSearchCountsComponent {
         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 *ngIf=\"pageTitle\" appearance=\"raised\">\n<mat-card-header >\n  <mat-card-title>\n    Material in Sammlungen{{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=\"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\n      <div >\n        <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\" >\n          zeige nur OER\n        </mat-slide-toggle>\n      </div>\n        <div>\n        <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\" >\n          zeige alle Typen\n        </mat-slide-toggle>\n        </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        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"row.meta.level<=1?'layers':'child'\" />\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}}\"' matTooltip=\"{{col.label}}\" >{{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 matTooltip=\"{{column.label}}\" >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>", 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}\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: "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: "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: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.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.ɵ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]=\"row.meta.level<=1?'layers':'child'\" />\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: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeSearchCountsComponent, decorators: [{
             type: Component,
@@ -3356,7 +3377,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AsyncPipe,
                         NgClass,
                         MatCardModule,
-                        MatTooltip,
                         MatIcon,
                         NgIf,
                         NgForOf,
@@ -3364,7 +3384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         ReactiveFormsModule,
                         ProgressSpinnerComponent,
-                    ], template: "<mat-card *ngIf=\"pageTitle\" appearance=\"raised\">\n<mat-card-header >\n  <mat-card-title>\n    Material in Sammlungen{{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=\"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\n      <div >\n        <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\" >\n          zeige nur OER\n        </mat-slide-toggle>\n      </div>\n        <div>\n        <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\" >\n          zeige alle Typen\n        </mat-slide-toggle>\n        </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        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"row.meta.level<=1?'layers':'child'\" />\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}}\"' matTooltip=\"{{col.label}}\" >{{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 matTooltip=\"{{column.label}}\" >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>", 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}\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]=\"row.meta.level<=1?'layers':'child'\" />\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"] }]
         }], ctorParameters: () => [{ type: MetaApiService }, { type: ConfigHelperService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3545,7 +3565,7 @@ class CollectionCountHistoryComponent {
         }), 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      <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n        <label>Zeige historische Daten</label>\n      </mat-slide-toggle>\n      <metaqs2-monthpicker [disabled]=\"!isHistoryEnabled()\"\n        [inputGroup]=\"range\"></metaqs2-monthpicker>\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.ɵ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      <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n        <label>Zeige historische Daten</label>\n      </mat-slide-toggle>\n      <metaqs2-monthpicker *ngIf=\"isHistoryEnabled()\"\n        [inputGroup]=\"range\"></metaqs2-monthpicker>\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollectionCountHistoryComponent, decorators: [{
             type: Component,
@@ -3562,7 +3582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         FormsModule,
                         ProgressSpinnerComponent,
-                    ], 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      <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n        <label>Zeige historische Daten</label>\n      </mat-slide-toggle>\n      <metaqs2-monthpicker [disabled]=\"!isHistoryEnabled()\"\n        [inputGroup]=\"range\"></metaqs2-monthpicker>\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"] }]
+                    ], 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      <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\">\n        <label>Zeige historische Daten</label>\n      </mat-slide-toggle>\n      <metaqs2-monthpicker *ngIf=\"isHistoryEnabled()\"\n        [inputGroup]=\"range\"></metaqs2-monthpicker>\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"] }]
         }], ctorParameters: () => [{ type: MetaApiService }, { type: i0.DestroyRef }], propDecorators: { chart: [{
                 type: ViewChild,
                 args: [BaseChartDirective]
@@ -3591,7 +3611,7 @@ class CountsWithHistoryComponent {
             start: new FormControl(),
             end: new FormControl(DateTime.utc().startOf('day'), { nonNullable: true }),
         });
-        this.isHistoryEnabled = signal(true);
+        this.isHistoryEnabled = signal(false);
         this.allColumns = computed(() => {
             if (!this.isHistoryEnabled()) {
                 return this.recentColumns();
@@ -3694,7 +3714,7 @@ class CountsWithHistoryComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountsWithHistoryComponent, deps: [{ token: MetaApiService }, { token: i0.DestroyRef }, { token: EditorialLinkService }], 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", inputs: { apiMethod: "apiMethod", columnTranslationkey: "columnTranslationkey", pageTitle: "pageTitle", sourceType: "sourceType" }, 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>\n    <metaqs2-datepicker [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded()\"></metaqs2-datepicker>\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        <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\" *ngIf=\"timeFilterLoaded()\">\n          <label>Zeige historische Daten</label>\n        </mat-slide-toggle>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col\"\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}\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: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountsWithHistoryComponent, isStandalone: true, selector: "metaqs2-counts-with-history", inputs: { apiMethod: "apiMethod", columnTranslationkey: "columnTranslationkey", pageTitle: "pageTitle", sourceType: "sourceType" }, 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 [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()\" *ngIf=\"timeFilterLoaded()\">\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\"\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}.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: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountsWithHistoryComponent, decorators: [{
             type: Component,
@@ -3720,7 +3740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSlideToggle,
                         AsyncPipe,
                         ProgressSpinnerComponent,
-                    ], 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>\n    <metaqs2-datepicker [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded()\"></metaqs2-datepicker>\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        <mat-slide-toggle [(ngModel)]=\"isHistoryEnabled\" [disabled]=\"isLoading()\" *ngIf=\"timeFilterLoaded()\">\n          <label>Zeige historische Daten</label>\n        </mat-slide-toggle>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col\"\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}\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 [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()\" *ngIf=\"timeFilterLoaded()\">\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\"\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}.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: MetaApiService }, { type: i0.DestroyRef }, { type: EditorialLinkService }], propDecorators: { apiMethod: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3733,6 +3753,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [{ required: true }]
             }] } });
 
+async function createRegister(environment) {
+    if (environment.production) {
+        enableProdMode();
+    }
+    const app = await createApplication({
+        providers: [
+            importProvidersFrom(NgMetaWidgetsLibModule.forRoot({
+                eduSharingPath: environment.eduSharingPath,
+                apiPath: environment.apiPath,
+            }), TranslateModule.forRoot({
+                defaultLanguage: 'de',
+                loader: {
+                    provide: TranslateLoader,
+                    useFactory: (httpClient) => new TranslateHttpLoader(httpClient),
+                    deps: [HttpClient],
+                },
+            })),
+            provideHttpClient(),
+            provideAnimations(),
+        ],
+    });
+    const injector = app.injector;
+    return (tag, component) => {
+        const customElement = createCustomElement(component, { injector });
+        customElements.define(tag, customElement);
+    };
+}
+
 /*
  * Public API Surface of ng-meta-widgets-lib
  */
@@ -3741,5 +3789,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CollectionCountHistoryComponent, CollectionIssuesComponent, ConfigHelperService, CountsWithHistoryComponent, MaterialIssuesComponent, NgMetaWidgetsLibConfiguration, NgMetaWidgetsLibModule, NodeListComponent, QualityMatrixComponent, TreeCollectionDetailsComponent, TreeSearchCountsComponent };
+export { CollectionCountHistoryComponent, CollectionIssuesComponent, ConfigHelperService, CountsWithHistoryComponent, DonutChartTooltipComponent, MaterialIssuesComponent, NG_META_WIDGETS_LIB_CONFIGURATION, NgMetaWidgetsLibConfiguration, NgMetaWidgetsLibModule, NodeListComponent, QualityMatrixComponent, TOOLTIP_DATA, TOOLTIP_REF, TooltipRefImpl, TooltipService, TreeCollectionDetailsComponent, TreeSearchCountsComponent, borderPositionStrategy, centerPositionStrategy, createRegister, transformDonutChartData };
 //# sourceMappingURL=ngx-edu-sharing-metaqs2.mjs.map