ngx-edu-sharing-metaqs2 0.9.37 → 0.9.38

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Pipe, Component, Input, Output, inject, Renderer2, Injector, ChangeDetectionStrategy, HostBinding, LOCALE_ID, ElementRef, ViewChild, Directive, signal, computed, ViewChildren, HostListener, EventEmitter, effect, enableProdMode, importProvidersFrom } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Pipe, Component, Input, Output, inject, Renderer2, Injector, ChangeDetectionStrategy, HostBinding, LOCALE_ID, ElementRef, ViewChild, Directive, DestroyRef, signal, computed, ViewChildren, HostListener, EventEmitter, effect, enableProdMode, importProvidersFrom } from '@angular/core';
 import * as i3$1 from '@angular/material/card';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardModule } from '@angular/material/card';
 import { MatTreeModule } from '@angular/material/tree';
@@ -13,7 +13,7 @@ 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 * as i5$1 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';
@@ -21,14 +21,14 @@ import { MatFormFieldModule, MatFormField, MatLabel, MatSuffix } from '@angular/
 import { MatInput, MatInputModule } from '@angular/material/input';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i1$2 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, FormsModule, FormGroup, FormRecord } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormsModule, FormRecord, FormGroup } from '@angular/forms';
 import * as i2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpParams, provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
-import { pipe, of, BehaviorSubject, forkJoin, Subject, zip } from 'rxjs';
-import { map, catchError, startWith, take, filter, tap, finalize, takeUntil, shareReplay, distinctUntilChanged, switchMap, skipWhile } from 'rxjs/operators';
+import { pipe, of, BehaviorSubject, Subject, combineLatest, forkJoin } from 'rxjs';
+import { map, catchError, startWith, take, tap, switchMap, finalize, filter, throttleTime, takeUntil, shareReplay, distinctUntilChanged, skipWhile } from 'rxjs/operators';
 import * as i2$4 from '@angular/platform-browser';
 import { BrowserModule, createApplication } from '@angular/platform-browser';
 import { MatListModule } from '@angular/material/list';
@@ -40,7 +40,7 @@ import * as i3 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatRipple } from '@angular/material/core';
 import * as i2$3 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { DateTime } from 'luxon';
 import * as i1$3 from '@angular/cdk/overlay';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
@@ -1547,6 +1547,239 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+/**
+ * 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;
+    }
+    /**
+     * 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);
+    }
+    getEditorialMaterialCounts(body) {
+        return this.editorsAPI.getMaterialCount(body);
+    }
+    getMaterialTypeCountsByReplicationSource(body) {
+        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndType(body);
+    }
+    getLicenseCountsByReplicationSource(body) {
+        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndLicense(body);
+    }
+    getLicenseCountsByLicenseGroup(colId, filters) {
+        return this.collectionsAPI.getMaterialCountMatrixByLicenseGroup1(colId, filters);
+    }
+    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: MetaApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: CollectionAPIService }, { type: ReplicationSourceAPIService }, { type: FilterAPIService }, { type: EditorsAPIService }] });
+
+/**
+ * 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
+ */
+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.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);
+        });
+    }
+    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');
+    }
+    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}`;
+    }
+    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: EditorialLinkService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 const TOOLTIP_DATA = new InjectionToken('TOOLTIP_DATA');
 const TOOLTIP_REF = new InjectionToken('TOOLTIP_REF');
 const noop = Object.freeze(() => { });
@@ -2043,297 +2276,65 @@ class ProgressSpinnerComponent {
             see https://stackoverflow.com/questions/63579801/how-do-i-create-a-custom-overlay-container-for-angular-material
             how to create a overlay container.
             With such a directive we can have a spinner that greys-out only e.g. the table like seen here:
-            https://reppners.github.io/ngx-cdk-dynamic-overlay-container/
-            */
-            this.progressSpinnerOverlayConfig['positionStrategy'] = this.overlayService.positionFlexibleConnected(this.el);
-        }
-        // Create Overlay for progress spinner
-        this.overlayRef = this.overlayService.createOverlay(this.progressSpinnerOverlayConfig);
-    }
-    ngOnChanges(changes) {
-        changes.displayProgressSpinner.currentValue
-            ? this.overlayService.attachTemplatePortal(this.overlayRef, this.progressSpinnerRef, this.vcRef)
-            : this.overlayRef.detach();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, deps: [{ token: i0.ViewContainerRef }, { token: OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProgressSpinnerComponent, isStandalone: true, selector: "metaqs2-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", backdropEnabled: "backdropEnabled", positionGloballyCenter: "positionGloballyCenter", displayProgressSpinner: "displayProgressSpinner" }, viewQueries: [{ propertyName: "progressSpinnerRef", first: true, predicate: ["progressSpinnerRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'metaqs2-progress-spinner', standalone: true, imports: [MatProgressSpinnerModule], template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: OverlayService }, { type: i0.ElementRef }], propDecorators: { color: [{
-                type: Input
-            }], diameter: [{
-                type: Input
-            }], strokeWidth: [{
-                type: Input
-            }], backdropEnabled: [{
-                type: Input
-            }], positionGloballyCenter: [{
-                type: Input
-            }], displayProgressSpinner: [{
-                type: Input
-            }], progressSpinnerRef: [{
-                type: ViewChild,
-                args: ['progressSpinnerRef', { static: true }]
-            }] } });
-
-class ScrollMarkerDirective {
-    constructor() {
-        this.element = inject(ElementRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ScrollMarkerDirective, isStandalone: true, selector: "[metaqs2ScrollMarker]", ngImport: i0 }); }
-}
-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;
-    }
-    /**
-     * 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);
-    }
-    getEditorialMaterialCounts(body) {
-        return this.editorsAPI.getMaterialCount(body);
-    }
-    getMaterialTypeCountsByReplicationSource(body) {
-        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndType(body);
-    }
-    getLicenseCountsByReplicationSource(body) {
-        return this.replicationsAPI.getMaterialCountMatrixByReplicationSourceAndLicense(body);
-    }
-    getLicenseCountsByLicenseGroup(colId, filters) {
-        return this.collectionsAPI.getMaterialCountMatrixByLicenseGroup1(colId, filters);
-    }
-    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: MetaApiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: CollectionAPIService }, { type: ReplicationSourceAPIService }, { type: FilterAPIService }, { type: EditorsAPIService }] });
-
-/**
- * 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
- */
-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.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);
-        });
-    }
-    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');
-    }
-    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;
+            https://reppners.github.io/ngx-cdk-dynamic-overlay-container/
+            */
+            this.progressSpinnerOverlayConfig['positionStrategy'] = this.overlayService.positionFlexibleConnected(this.el);
         }
-        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}`;
+        // Create Overlay for progress spinner
+        this.overlayRef = this.overlayService.createOverlay(this.progressSpinnerOverlayConfig);
     }
-    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' }); }
+    ngOnChanges(changes) {
+        changes.displayProgressSpinner.currentValue
+            ? this.overlayService.attachTemplatePortal(this.overlayRef, this.progressSpinnerRef, this.vcRef)
+            : this.overlayRef.detach();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, deps: [{ token: i0.ViewContainerRef }, { token: OverlayService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProgressSpinnerComponent, isStandalone: true, selector: "metaqs2-progress-spinner", inputs: { color: "color", diameter: "diameter", strokeWidth: "strokeWidth", backdropEnabled: "backdropEnabled", positionGloballyCenter: "positionGloballyCenter", displayProgressSpinner: "displayProgressSpinner" }, viewQueries: [{ propertyName: "progressSpinnerRef", first: true, predicate: ["progressSpinnerRef"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorialLinkService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'metaqs2-progress-spinner', standalone: true, imports: [MatProgressSpinnerModule], template: "<ng-template #progressSpinnerRef>\n  <mat-spinner [color]=\"color\" [diameter]=\"diameter\" [strokeWidth]=\"strokeWidth\">\n\t</mat-spinner>\n</ng-template>" }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: OverlayService }, { type: i0.ElementRef }], propDecorators: { color: [{
+                type: Input
+            }], diameter: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], backdropEnabled: [{
+                type: Input
+            }], positionGloballyCenter: [{
+                type: Input
+            }], displayProgressSpinner: [{
+                type: Input
+            }], progressSpinnerRef: [{
+                type: ViewChild,
+                args: ['progressSpinnerRef', { static: true }]
+            }] } });
+
+class ScrollMarkerDirective {
+    constructor() {
+        this.element = inject(ElementRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ScrollMarkerDirective, isStandalone: true, selector: "[metaqs2ScrollMarker]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScrollMarkerDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    selector: '[metaqs2ScrollMarker]',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const openCloseTimeout = 150;
 class QualityMatrixComponent {
-    constructor(metaApi, linkService, overlay, tooltipService) {
-        this.metaApi = metaApi;
-        this.linkService = linkService;
-        this.overlay = overlay;
-        this.tooltipService = tooltipService;
+    constructor() {
         this.ref = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.metaApi = inject(MetaApiService);
+        this.linkService = inject(EditorialLinkService);
+        this.overlay = inject(Overlay);
+        this.tooltipService = inject(TooltipService);
         this.scrollLeft = signal(0);
         this.scrollWidth = signal(0);
         this.isLeftScrollable = computed(() => this.scrollLeft() > 0);
@@ -2345,13 +2346,34 @@ class QualityMatrixComponent {
             const viewportWidth = viewport.width;
             return this.scrollWidth() > viewportWidth && this.scrollLeft() + viewportWidth < this.scrollWidth();
         });
-        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.filteredColumns = computed(() => {
+            const allColumns = this.allColumns();
+            const isOnlySourcesWithMaterialEnabled = this.isOnlySourcesWithMaterialEnabled();
+            if (isOnlySourcesWithMaterialEnabled) {
+                return allColumns.filter((c) => c.total > 0);
+            }
+            else {
+                return allColumns;
+            }
+        });
+        this.datatableColumns = computed(() => {
+            return this.filteredColumns()
+                .filter((c) => c.level !== 0)
+                .map((c) => c.id);
+        });
+        this.isHistoricalDataEnabledFormField = new FormControl({ value: false, disabled: true });
+        this.isHistoricalDataEnabled = toSignal(this.isHistoricalDataEnabledFormField.valueChanges);
+        this.isOnlySourcesWithMaterialEnabledFormField = new FormControl({ value: true, disabled: true });
+        this.isOnlySourcesWithMaterialEnabled = toSignal(this.isOnlySourcesWithMaterialEnabledFormField.valueChanges);
+        this.categoryControls = new FormRecord({});
+        this.loadingCount = signal(0);
+        this.isLoading = computed(() => this.loadingCount() > 0);
         this.categoryFilterValues = new Map();
+        this.refresh$ = new Subject();
         this.recentQualityMatrix$ = new BehaviorSubject({ columns: [], rows: [] });
+        this.recentQualityMatrix = toSignal(this.recentQualityMatrix$, {
+            initialValue: { columns: [], rows: [] },
+        });
         this.pastQualityMatrix$ = new BehaviorSubject({ columns: [], rows: [] });
         this.range = new FormGroup({
             start: new FormControl(),
@@ -2360,17 +2382,18 @@ class QualityMatrixComponent {
         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 });
-        this.registerCategoryFilters();
-        this.registerDateRangeFilter();
-        // TODO: consider a register() functions
-        this.onlySourcesWithMaterial.valueChanges.pipe(takeUntilDestroyed()).subscribe((onlyWithMaterial) => {
-            this.filterTableBySourcesWithMaterial(onlyWithMaterial);
+        this.allColumns = computed(() => this.recentQualityMatrix()?.columns.toSorted((a, b) => a.label.localeCompare(b.label)));
+        this.sourceColumns = computed(() => this.datatableColumns().map((c) => c + '_source'));
+        this.currentColumns = computed(() => this.datatableColumns().map((c) => c + '_current'));
+        this.pastColumns = computed(() => this.datatableColumns().map((c) => c + '_past'));
+        this.allDataColumns = computed(() => {
+            const pastColumns = this.pastColumns();
+            const currentColumns = this.currentColumns();
+            if (this.isHistoricalDataEnabled()) {
+                return currentColumns.flatMap((e, i) => [pastColumns[i], e]);
+            }
+            return currentColumns;
         });
-        this.onLoadedDataChanges();
-        //this.loadDataWithCurrentlySelectedFilters();
     }
     ngAfterViewChecked() {
         this.onScroll();
@@ -2378,54 +2401,57 @@ class QualityMatrixComponent {
     filterIdent(_index, item) {
         return item.key;
     }
-    get qualityMatrix() {
-        return this.recentQualityMatrix$.value;
+    loadData(categories, date) {
+        return of(undefined).pipe(tap(() => this.loadingCount.update((it) => it + 1)), switchMap(() => this.metaApi
+            .getQualityMatrixWithFiltersV2([
+            ...this.transformCategoryFilters(categories),
+            {
+                field: 'asOf',
+                values: [
+                    {
+                        id: date.toISO({
+                            includeOffset: false,
+                        }),
+                        label: '',
+                    },
+                ],
+            },
+        ])
+            .pipe(take(1))), finalize(() => this.loadingCount.update((it) => it - 1)));
+    }
+    transformCategoryFilters(categories) {
+        return Object.entries(categories)
+            .filter((pair) => !!pair[1]?.length)
+            .map(([field, values]) => ({
+            field,
+            values: values.map((value) => ({ id: value, label: '' })),
+        }));
     }
-    get sourceColumns() {
-        return this.datatableColumns.map((c) => c + '_source');
+    loadPastData(categories, date) {
+        return of(undefined).pipe(switchMap(() => this.loadData(categories, date)));
     }
-    get currentColumns() {
-        return this.datatableColumns.map((c) => c + '_current');
+    loadCurrentData(categories, date) {
+        return of(undefined).pipe(switchMap(() => this.loadData(categories, date)));
     }
-    get pastColumns() {
-        return this.datatableColumns.map((c) => c + '_past');
+    openEditLink(source, issue) {
+        return this.linkService.openByReplicationsourceAndIssueTypeWithFilters(source, issue, this.categoryControls.value);
     }
-    get allDataColumns() {
-        if (this.showHistoricalData.value) {
-            return this.pastColumns.flatMap((e, i) => [e, this.currentColumns[i]]);
-        }
-        return this.currentColumns;
+    // see https://github.com/angular/components/issues/8361#issuecomment-345804954
+    columnIdent(_index, col) {
+        return col.id;
     }
-    filterTableBySourcesWithMaterial(onlyWith) {
-        const allColumns = this.recentQualityMatrix$.value.columns.toSorted((a, b) => a.label.localeCompare(b.label));
-        // avoid filtering when not necessary
-        this.filteredColumns = onlyWith ? allColumns.filter((c) => c.total > 0) : allColumns;
-        this.datatableColumns = this.filteredColumns.map((c) => c.id);
+    refresh() {
+        this.refresh$.next();
     }
-    registerDateRangeFilter() {
-        this.range.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.loadDataWithCurrentlySelectedFilters();
-        });
-        this.metaApi.getTimerangeFilter().subscribe((rangeFilter) => {
-            if (rangeFilter) {
-                const startDate = DateTime.fromISO(rangeFilter.values.find((v) => v.id === 'rangeStart')?.label, {
-                    zone: 'utc',
-                });
-                const endDate = DateTime.fromISO(rangeFilter.values.find((v) => v.id === 'rangeEnd')?.label, { zone: 'utc' });
-                //toggle the emitEvent to initially load the data or not
-                this.range.setControl('start', new FormControl(startDate, { nonNullable: true }), {
-                    emitEvent: false,
-                });
-                this.range.setControl('end', new FormControl(endDate, { nonNullable: true }), { emitEvent: true });
-            }
-        });
+    getPastColumn(columnId) {
+        return this.pastQualityMatrix$.value?.columns.find((c) => c.id === columnId);
     }
-    registerCategoryFilters() {
+    ngOnInit() {
         this.metaApi
             .getCategoryFilters()
-            .pipe(take(1))
-            .subscribe((filters) => {
+            .pipe(take(1), tap((filters) => {
             filters.forEach((filter) => {
+                // do not emit the event when setting the control to prevent unnecessary valueChanges events
                 this.categoryControls.addControl(filter.field, new FormControl([], { nonNullable: true }), {
                     emitEvent: false,
                 });
@@ -2433,99 +2459,73 @@ class QualityMatrixComponent {
                     return a.label.localeCompare(b.label);
                 }));
             });
-        });
-        this.categoryControls.valueChanges
-            .pipe(takeUntilDestroyed())
-            .subscribe(() => this.loadDataWithCurrentlySelectedFilters());
-    }
-    onLoadedDataChanges() {
-        this.recentQualityMatrix$
-            .pipe(takeUntilDestroyed(), filter((qm) => qm !== null), tap(() => this.filterTableBySourcesWithMaterial(this.onlySourcesWithMaterial.value)))
+            // emit the current value of the form group once to trigger the valueChanges observable
+            this.categoryControls.setValue(this.categoryControls.value, {
+                emitEvent: true,
+            });
+        }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
-    }
-    loadDataForStart() {
-        if (this.range.controls.start?.value) {
-            const body = this.getCurrentFilterValues();
-            body.push({
-                field: 'asOf',
-                values: [{ id: this.range.controls.start.value.toISO({ includeOffset: false }), label: '' }],
+        this.metaApi
+            .getTimerangeFilter()
+            .pipe(filter((rangeFilter) => !!rangeFilter), tap((rangeFilter) => {
+            const startDate = DateTime.fromISO(rangeFilter.values.find((v) => v.id === 'rangeStart')?.label, {
+                zone: 'utc',
             });
-            return this.metaApi.getQualityMatrixWithFiltersV2(body).pipe(take(1));
-        }
-        return of(null);
-    }
-    loadDataForEnd() {
-        const body = this.getCurrentFilterValues();
-        body.push({
-            field: 'asOf',
-            values: [{ id: this.range.controls.end.value.toISO({ includeOffset: false }), label: '' }],
-        });
-        return this.metaApi.getQualityMatrixWithFiltersV2(body).pipe(take(1));
-    }
-    getCurrentFilterValues() {
-        const body = [];
-        for (const [field, values] of Object.entries(this.categoryControls.value)) {
-            let requestValues = [];
-            if (values && values.length) {
-                requestValues = values.map((value) => ({ id: value, label: '' }));
-                body.push({ field, values: requestValues });
-            }
-        }
-        return body;
-    }
-    loadDataWithCurrentlySelectedFilters() {
-        /*
-        consider using an intermediate Subject with a switchMap pipe
-        to prevent that older ( longer running ) requests overwrite newer ones
-        see https://stackoverflow.com/questions/64427629/how-to-use-rxjs-to-cancel-previous-http-requests-in-an-angular-service/64490155#64490155
-         */
-        this.isLoading.set(true);
-        forkJoin({
-            pastQm: this.loadDataForStart(),
-            currentQm: this.loadDataForEnd(),
-        })
-            .pipe(finalize(() => {
-            this.isLoading.set(false);
-        }), tap(({ pastQm: _, currentQm }) => {
-            this.datatableColumns = currentQm.columns.filter((c) => c.level !== 0).map((c) => c.id);
-        }))
-            .subscribe(({ pastQm, currentQm }) => {
+            const endDate = DateTime.fromISO(rangeFilter.values.find((v) => v.id === 'rangeEnd')?.label, {
+                zone: 'utc',
+            });
+            this.range.setControl('start', new FormControl(startDate, { nonNullable: true }), {
+                emitEvent: false,
+            });
+            this.range.setControl('end', new FormControl(endDate, { nonNullable: true }), {
+                emitEvent: true,
+            });
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        combineLatest([this.categoryControls.valueChanges, this.range.valueChanges, this.refresh$])
+            .pipe(filter((data) => !!data[0] && !!data[1].end?.isValid), throttleTime(500), map(([categories, range]) => [categories, range.end]), switchMap(([categories, end]) => this.loadCurrentData(categories, end)), tap((currentQm) => {
             this.recentQualityMatrix$.next(currentQm);
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        let pastDataSubscription;
+        const pastData$ = combineLatest([this.categoryControls.valueChanges, this.range.valueChanges, this.refresh$]).pipe(filter((data) => !!data[0] && !!data[1].start?.isValid), throttleTime(500), map(([categories, range]) => [categories, range.start]), switchMap(([categories, start]) => this.loadPastData(categories, start)), tap((pastQm) => {
             this.pastQualityMatrix$.next(pastQm);
+        }), takeUntilDestroyed(this.destroyRef));
+        this.isHistoricalDataEnabledFormField.valueChanges
+            .pipe(tap((isEnabled) => {
+            if (isEnabled) {
+                pastDataSubscription = pastData$.subscribe();
+                this.categoryControls.setValue(this.categoryControls.value, {
+                    emitEvent: true,
+                });
+                this.range.setValue(this.range.value, {
+                    emitEvent: true,
+                });
+                this.refresh$.next();
+            }
+            else {
+                pastDataSubscription?.unsubscribe();
+            }
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        this.refresh$.next();
+        this.isOnlySourcesWithMaterialEnabledFormField.setValue(this.isOnlySourcesWithMaterialEnabledFormField.value, {
+            emitEvent: true,
         });
     }
-    openEditLink(source, issue) {
-        return this.linkService.openByReplicationsourceAndIssueTypeWithFilters(source, issue, this.categoryControls.value);
-    }
-    // see https://github.com/angular/components/issues/8361#issuecomment-345804954
-    columnIdent(_index, col) {
-        return col.id;
-    }
-    async refresh() {
-        //or should we reset all Filter?
-        this.loadDataWithCurrentlySelectedFilters();
-    }
-    getPastColumn(columnId) {
-        return this.pastQualityMatrix$.value?.columns.find((c) => c.id === columnId);
-    }
     getTrend(row, column) {
-        if (this.pastQualityMatrix$.value === null) {
+        if (this.pastQualityMatrix$.value === null || this.pastQualityMatrix$.value.columns.length === 0) {
             return {};
         }
-        if (this.pastQualityMatrix$.value.columns.length > 0) {
-            const past_row = this.pastQualityMatrix$?.value.rows.find((pr) => pr.meta.id == row.meta.id);
-            const past_column = this.pastQualityMatrix$.value.columns.find((c) => c.id == column.id);
-            if (!past_row || !past_column) {
-                return {};
-            }
-            const delta = Math.floor((100 * row.counts[column.id].sufficient) / column.total -
-                (100 * past_row.counts[column.id].sufficient) / past_column.total);
-            const trend = delta === 0 ? 'trending_flat' : delta < 0 ? 'trending_down' : 'trending_up';
-            return { delta, trend };
-        }
-        else {
+        const past_row = this.pastQualityMatrix$?.value.rows.find((pr) => pr.meta.id == row.meta.id);
+        const past_column = this.pastQualityMatrix$.value.columns.find((c) => c.id == column.id);
+        if (!past_row || !past_column) {
             return {};
         }
+        const delta = Math.floor((100 * row.counts[column.id].sufficient) / column.total -
+            (100 * past_row.counts[column.id].sufficient) / past_column.total);
+        const trend = delta === 0 ? 'trending_flat' : delta < 0 ? 'trending_down' : 'trending_up';
+        return { delta, trend };
     }
     getDonutSlices(row, column) {
         const sufficientTotal = row.counts[column.id].sufficient;
@@ -2654,8 +2654,8 @@ class QualityMatrixComponent {
         this.scrollLeft.set(scrollingElement.scrollLeft);
         this.scrollWidth.set(scrollingElement.scrollWidth);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, deps: [{ token: MetaApiService }, { token: EditorialLinkService }, { token: i1$3.Overlay }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QualityMatrixComponent, isStandalone: true, selector: "metaqs2-quality-matrix-v2", inputs: { pageTitle: "pageTitle" }, host: { listeners: { "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, providers: [TooltipService], viewQueries: [{ propertyName: "issueTypeHeader", first: true, predicate: ["issueType"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollMarkers", predicate: ScrollMarkerDirective, descendants: true }], ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>\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      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"onlySourcesWithMaterial\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-datepicker *ngIf=\"showHistoricalData.value\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\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 style=\"flex: 0 0 {{scroller.getBoundingClientRect().width}}px\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix$.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{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: QualityMatrixFilterComponent, selector: "metaqs2-qm-filter", inputs: ["options", "inputFormControl", "label", "multiple"], outputs: ["changedFilters"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }, { kind: "directive", type: ScrollMarkerDirective, selector: "[metaqs2ScrollMarker]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QualityMatrixComponent, isStandalone: true, selector: "metaqs2-quality-matrix-v2", inputs: { pageTitle: "pageTitle" }, host: { listeners: { "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, providers: [TooltipService], viewQueries: [{ propertyName: "issueTypeHeader", first: true, predicate: ["issueType"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollMarkers", predicate: ScrollMarkerDirective, descendants: true }], ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-qm-filter *ngFor=\"let filter of categoryControls.controls | keyvalue; trackBy: filterIdent\"\n                       [options]=\"categoryFilterValues.get(filter.key)\"\n                       [inputFormControl]=\"filter.value\"\n                       [label] = \"'filter.' + filter.key | translate\" />\n    <div class=\"actionbar\">\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isOnlySourcesWithMaterialEnabledFormField\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-datepicker *ngIf=\"isHistoricalDataEnabled()\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isHistoricalDataEnabledFormField\" id=\"showHistoricalData\">\n        show historical data\n      </mat-slide-toggle>\n      <button\n        mat-icon-button\n        color=\"primary\"\n        [disabled]=\"isLoading()\"\n        (click)=\"refresh()\"\n        matTooltip=\"Aktualisiere den IST-Stand\"\n        matTooltipShowDelay=\"500\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n      <div style=\"flex: 0 0 {{scroller.getBoundingClientRect().width}}px\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix().rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef #issueType>Issue Type</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{\"quality_matrix.\" + row.meta.label | translate }}\n      </td>\n    </ng-container>\n    <!-- one column for the source -->\n    <ng-container *ngFor=\"let col of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"col.id + '_source'\">\n      <th [attr.colspan]=\"isHistoricalDataEnabled() ? 2 : 1\" metaqs2ScrollMarker mat-header-cell *matHeaderCellDef matTooltip=\"{{col.altLabel}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- current Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_current'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"{{column.altLabel}}\">{{ range.controls.end.value?.toLocaleString(DateTime.DATE_SHORT) }} <br>({{column.total}})</th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\" #cell (mouseover)=\"showTooltip(row, column, cell)\" (mouseleave)=\"hideTooltip(cell)\">\n          <a *ngIf=\"column.total > 0 else emptyDiv\" class=\"chart-container\" (click)=\"openEditLink( column.label, row.meta.label)\">\n            <div>\n              <metaqs2-donut-chart [data]=\"getDonutSlices(row, column)\" [borderSize]=\"25\"></metaqs2-donut-chart>\n            </div>\n          </a>\n          <ng-template #emptyDiv>\n            <div>-</div>\n          </ng-template>\n      </td>\n    </ng-container>\n    <!-- /current Data Columns -->\n    <!-- past Data Columns -->\n    <ng-container *ngIf=\"isHistoricalDataEnabled()\">\n      <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_past'\">\n        <th class=\"historic-data-cell\" mat-header-cell\n            *matHeaderCellDef>{{ range.controls.start.value?.toLocaleString(DateTime.DATE_SHORT) }}\n          <br>{{ getPastColumn(column.id)?.total }}\n        </th>\n        <td class=\"historic-data-cell\" mat-cell *matCellDef=\"let row\">\n          <ng-container *ngIf=\"getTrend(row, column) as trend\">\n            <span [ngClass]=\"trend.trend\">\n              <mat-icon aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" />\n              {{ trend.delta }}\n            </span>\n          </ng-container>\n\n        </td>\n      </ng-container>\n    </ng-container>\n    <!-- /past Data Columns -->\n\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(sourceColumns()); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"allDataColumns(); sticky: true;\" [hidden]=\"!isHistoricalDataEnabled()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(allDataColumns())\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}mat-card-actions>mat-slide-toggle{margin-left:20px}.row{flex-grow:1;display:flex;align-items:center}table{width:100%;overflow-y:auto}table .scroll{flex-grow:1;overflow-y:auto}table th{vertical-align:top;padding:.375rem}table th:not(:last-child){border-right:1px solid #e4e4e4}table tr:first-child>th:first-child{text-align:left}table td:first-child{text-align:left}.cell{flex:1}.mat-mdc-cell{padding-top:5px}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;text-align:center}.mat-mdc-cell a.chart-container,.mat-mdc-header-cell a.chart-container{display:flex;justify-content:center}.mat-mdc-cell .trending_up,.mat-mdc-header-cell .trending_up{color:#4abeff}.mat-mdc-cell .trending_down,.mat-mdc-header-cell .trending_down{color:#c20808}.recent-data-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-header-cell-label{color:#000;padding-left:30px;padding-right:30px;justify-content:left;border-bottom:1px solid #e4e4e4;font-style:normal;font-weight:500;font-size:110%;background:#ddf0fb;text-align:left}.mat-header-cell-label>div{display:flex;font-weight:700;font-style:normal;justify-content:left}.mat-header-cell-small{padding-left:5px;padding-right:5px;justify-content:left;font-style:normal;font-weight:400;font-size:105%;background:#ddf0fb;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.mat-mdc-cell a{cursor:pointer;display:flex;align-items:center;justify-content:left}.mat-mdc-cell a>mat-icon{padding-right:5px;font-size:22px;height:20px;opacity:.75}.mat-mdc-cell a>mat-icon:hover,.mat-mdc-cell a>mat-icon:focus{text-decoration:none}.mat-mdc-cell .number{display:flex;height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header-sum{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;border-right:5px solid #bdbdbd}.mat-mdc-card{width:100%;box-shadow:none}.mat-mdc-card ::ng-deep mat-card-header{align-items:center}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.mat-mdc-card .source-header{font-style:normal;font-weight:400;font-size:20px;height:30px;width:60%}.mat-mdc-card .source-header .robot-explanation{font-size:15px}.mat-mdc-card .scroll{flex-grow:1;overflow-y:auto}.mat-header-cell-scope{color:#545454}.mat-mdc-header-row{height:70px;max-height:70px;min-height:56px}:host{overflow:auto}:host ::ng-deep thead{border:10px solid #ff0000;position:relative;z-index:1}.mat-cell-level-1{padding-left:20px!important}.mat-cell-level-2{padding-left:40px!important}.mat-cell-level-3{padding-left:60px!important}.mat-cell-level-4{padding-left:80px!important}.mat-cell-level-5{padding-left:100px!important}.mat-cell-level-6{padding-left:120px!important}.mat-cell-level-7{padding-left:140px!important}.mat-cell-level-8{padding-left:160px!important}.actionbar{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: QualityMatrixFilterComponent, selector: "metaqs2-qm-filter", inputs: ["options", "inputFormControl", "label", "multiple"], outputs: ["changedFilters"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: DonutChartComponent, selector: "metaqs2-donut-chart", inputs: ["radius", "viewBox", "borderSize", "strokeWidth", "data"] }, { kind: "directive", type: ScrollMarkerDirective, selector: "[metaqs2ScrollMarker]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QualityMatrixComponent, decorators: [{
             type: Component,
@@ -2690,8 +2690,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"onlySourcesWithMaterial\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-datepicker *ngIf=\"showHistoricalData.value\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\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 style=\"flex: 0 0 {{scroller.getBoundingClientRect().width}}px\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix$.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{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: MetaApiService }, { type: EditorialLinkService }, { type: i1$3.Overlay }, { type: TooltipService }], propDecorators: { issueTypeHeader: [{
+                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-qm-filter *ngFor=\"let filter of categoryControls.controls | keyvalue; trackBy: filterIdent\"\n                       [options]=\"categoryFilterValues.get(filter.key)\"\n                       [inputFormControl]=\"filter.value\"\n                       [label] = \"'filter.' + filter.key | translate\" />\n    <div class=\"actionbar\">\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isOnlySourcesWithMaterialEnabledFormField\" id=\"onlySourcesWithMaterial\">\n        show only sources with material\n      </mat-slide-toggle>\n      <div style=\"flex: 1 1 auto\"></div>\n      <metaqs2-datepicker *ngIf=\"isHistoricalDataEnabled()\" [disabled]=\"isLoading()\" [inputGroup]=\"range\" />\n      <mat-slide-toggle [disabled]=\"isLoading()\" labelPosition=\"before\" [formControl]=\"isHistoricalDataEnabledFormField\" id=\"showHistoricalData\">\n        show historical data\n      </mat-slide-toggle>\n      <button\n        mat-icon-button\n        color=\"primary\"\n        [disabled]=\"isLoading()\"\n        (click)=\"refresh()\"\n        matTooltip=\"Aktualisiere den IST-Stand\"\n        matTooltipShowDelay=\"500\"\n      >\n        <mat-icon>refresh</mat-icon>\n      </button>\n      <div style=\"flex: 0 0 {{scroller.getBoundingClientRect().width}}px\"></div>\n      <div class=\"scroll-controller\" #scroller> <!-- put the whole toolbar in a fixed container (MQS- -->\n        <button mat-raised-button (click)=\"scrollToLeft()\" [disabled]=\"!isLeftScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_left</mat-icon>\n        </button>\n        <button mat-raised-button (click)=\"scrollToRight()\" [disabled]=\"!isRightScrollable()\" class=\"scroll-button\">\n          <mat-icon style=\"margin: 0\">chevron_right</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentQualityMatrix().rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"row-header\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef #issueType>Issue Type</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        matTooltip=\"{{row.meta.alt_label}}\"\n        class=\"row-header mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{\"quality_matrix.\" + row.meta.label | translate }}\n      </td>\n    </ng-container>\n    <!-- one column for the source -->\n    <ng-container *ngFor=\"let col of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"col.id + '_source'\">\n      <th [attr.colspan]=\"isHistoricalDataEnabled() ? 2 : 1\" metaqs2ScrollMarker mat-header-cell *matHeaderCellDef matTooltip=\"{{col.altLabel}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- current Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_current'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"{{column.altLabel}}\">{{ range.controls.end.value?.toLocaleString(DateTime.DATE_SHORT) }} <br>({{column.total}})</th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\" #cell (mouseover)=\"showTooltip(row, column, cell)\" (mouseleave)=\"hideTooltip(cell)\">\n          <a *ngIf=\"column.total > 0 else emptyDiv\" class=\"chart-container\" (click)=\"openEditLink( column.label, row.meta.label)\">\n            <div>\n              <metaqs2-donut-chart [data]=\"getDonutSlices(row, column)\" [borderSize]=\"25\"></metaqs2-donut-chart>\n            </div>\n          </a>\n          <ng-template #emptyDiv>\n            <div>-</div>\n          </ng-template>\n      </td>\n    </ng-container>\n    <!-- /current Data Columns -->\n    <!-- past Data Columns -->\n    <ng-container *ngIf=\"isHistoricalDataEnabled()\">\n      <ng-container *ngFor=\"let column of filteredColumns(); trackBy:columnIdent\" [matColumnDef]=\"column.id + '_past'\">\n        <th class=\"historic-data-cell\" mat-header-cell\n            *matHeaderCellDef>{{ range.controls.start.value?.toLocaleString(DateTime.DATE_SHORT) }}\n          <br>{{ getPastColumn(column.id)?.total }}\n        </th>\n        <td class=\"historic-data-cell\" mat-cell *matCellDef=\"let row\">\n          <ng-container *ngIf=\"getTrend(row, column) as trend\">\n            <span [ngClass]=\"trend.trend\">\n              <mat-icon aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" />\n              {{ trend.delta }}\n            </span>\n          </ng-container>\n\n        </td>\n      </ng-container>\n    </ng-container>\n    <!-- /past Data Columns -->\n\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(sourceColumns()); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"allDataColumns(); sticky: true;\" [hidden]=\"!isHistoricalDataEnabled()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(allDataColumns())\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}mat-card-actions>mat-slide-toggle{margin-left:20px}.row{flex-grow:1;display:flex;align-items:center}table{width:100%;overflow-y:auto}table .scroll{flex-grow:1;overflow-y:auto}table th{vertical-align:top;padding:.375rem}table th:not(:last-child){border-right:1px solid #e4e4e4}table tr:first-child>th:first-child{text-align:left}table td:first-child{text-align:left}.cell{flex:1}.mat-mdc-cell{padding-top:5px}.mat-mdc-cell,.mat-mdc-header-cell{padding-left:5px;text-align:center}.mat-mdc-cell a.chart-container,.mat-mdc-header-cell a.chart-container{display:flex;justify-content:center}.mat-mdc-cell .trending_up,.mat-mdc-header-cell .trending_up{color:#4abeff}.mat-mdc-cell .trending_down,.mat-mdc-header-cell .trending_down{color:#c20808}.recent-data-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-header-cell-label{color:#000;padding-left:30px;padding-right:30px;justify-content:left;border-bottom:1px solid #e4e4e4;font-style:normal;font-weight:500;font-size:110%;background:#ddf0fb;text-align:left}.mat-header-cell-label>div{display:flex;font-weight:700;font-style:normal;justify-content:left}.mat-header-cell-small{padding-left:5px;padding-right:5px;justify-content:left;font-style:normal;font-weight:400;font-size:105%;background:#ddf0fb;border-top:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4}.mat-mdc-cell a{cursor:pointer;display:flex;align-items:center;justify-content:left}.mat-mdc-cell a>mat-icon{padding-right:5px;font-size:22px;height:20px;opacity:.75}.mat-mdc-cell a>mat-icon:hover,.mat-mdc-cell a>mat-icon:focus{text-decoration:none}.mat-mdc-cell .number{display:flex;height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;padding-left:15px}.mat-mdc-cell .row-header-sum{display:flex;height:47px;max-height:47px;justify-content:left;align-items:center;border-right:5px solid #bdbdbd}.mat-mdc-card{width:100%;box-shadow:none}.mat-mdc-card ::ng-deep mat-card-header{align-items:center}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text{flex-grow:1;margin:0}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title{padding-top:20px;font-size:120%}.mat-mdc-card ::ng-deep mat-card-header .mat-card-header-text mat-card-title .count{font-size:80%;color:#888}.mat-mdc-card .source-header{font-style:normal;font-weight:400;font-size:20px;height:30px;width:60%}.mat-mdc-card .source-header .robot-explanation{font-size:15px}.mat-mdc-card .scroll{flex-grow:1;overflow-y:auto}.mat-header-cell-scope{color:#545454}.mat-mdc-header-row{height:70px;max-height:70px;min-height:56px}:host{overflow:auto}:host ::ng-deep thead{border:10px solid #ff0000;position:relative;z-index:1}.mat-cell-level-1{padding-left:20px!important}.mat-cell-level-2{padding-left:40px!important}.mat-cell-level-3{padding-left:60px!important}.mat-cell-level-4{padding-left:80px!important}.mat-cell-level-5{padding-left:100px!important}.mat-cell-level-6{padding-left:120px!important}.mat-cell-level-7{padding-left:140px!important}.mat-cell-level-8{padding-left:160px!important}.actionbar{flex:1 1 auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}.scroll-controller{position:fixed;right:.5rem;z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem}.scroll-button{min-width:0;padding-left:.25rem;padding-right:.25rem;text-align:center;height:1.75rem}.toolbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"] }]
+        }], propDecorators: { issueTypeHeader: [{
                 type: ViewChild,
                 args: ['issueType', {
                         read: ElementRef,
@@ -3140,7 +3140,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        class=\"row-header {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n        {{row.meta.label}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Data Columns -->\n    <ng-container *ngFor=\"let column of dataColumns\" [matColumnDef]=\"column.id\">\n      <th mat-header-cell *matHeaderCellDef>{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        <ng-container *ngIf=\" column.id === 'collection_issues' else countsWithLinks\">\n          {{ translateCollectionIssues(row.counts[column.id]) | async }}\n        </ng-container>\n        <ng-template #countsWithLinks>\n          <a *ngIf=\"row.counts[column.id]\" (click)=\"showMaterialWithIssue(row.meta.id, row.meta.label, column.id)\">\n            {{ row.counts[column.id] }}\n          </a>\n        </ng-template>\n\n\n      </td>\n    </ng-container>\n\n    <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(columnIds); sticky:true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(columnIds)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-row-header,tr:nth-child(2n) .mat-mdc-cell{border-right-color:#fff}.mat-mdc-cell,.mat-mdc-header-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-mdc-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-row-header mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:left}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.row-header a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n        {{row.meta.label}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Data Columns -->\n    <ng-container *ngFor=\"let column of dataColumns\" [matColumnDef]=\"column.id\">\n      <th mat-header-cell *matHeaderCellDef>{{ \"quality_matrix.\" + column.label | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        <ng-container *ngIf=\" column.id === 'collection_issues' else countsWithLinks\">\n          {{ translateCollectionIssues(row.counts[column.id]) | async }}\n        </ng-container>\n        <ng-template #countsWithLinks>\n          <a *ngIf=\"row.counts[column.id]\" (click)=\"showMaterialWithIssue(row.meta.id, row.meta.label, column.id)\">\n            {{ row.counts[column.id] }}\n          </a>\n        </ng-template>\n\n\n      </td>\n    </ng-container>\n\n    <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['row-header'].concat(columnIds); sticky:true\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['row-header'].concat(columnIds)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-row-header,tr:nth-child(2n) .mat-mdc-cell{border-right-color:#fff}.mat-mdc-cell,.mat-mdc-header-cell,.mat-column-row-header{border-right:1px solid #e4e4e4}.mat-mdc-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-row-header mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:left}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.row-header a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}mat-spinner{flex-grow:1;display:flex;align-self:center;justify-self:center;margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeCollectionDetailsComponent, decorators: [{
             type: Component,
@@ -3428,7 +3428,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 appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title>Material in Sammlungen{{isLoading() ? \": Lade neue Daten.\" : \"\"}}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto;\"></div>\n    <div class=\"actionbar\">\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showOERonly\">\n        zeige nur OER\n      </mat-slide-toggle>\n      <mat-slide-toggle labelPosition=\"before\" class=\"toggle\" [formControl]=\"showAllColumns\">\n        zeige alle Typen\n      </mat-slide-toggle>\n    </div>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table *ngIf=\"columns\" [ngClass]=\"{'while-loading': isLoading()}\" mat-table [dataSource]=\"materialCounts.rows\" class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Label Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th rowspan=\"2\" mat-header-cell *matHeaderCellDef>Sammlung</th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"label-col {{'mat-cell-level-' + (row.meta.level+1)}}\"\n      >\n        <a (click)=\"openCollection(row.meta.id)\">\n          <mat-icon [svgIcon]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n          {{ row.meta.label }}\n        </a>\n      </td>\n    </ng-container>\n    <!-- one column for the MaterialType spanning the collection and search columns-->\n    <ng-container *ngFor=\"let col of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"2\" mat-header-cell *matHeaderCellDef class=\"mat-cell-level-{{col.level}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- collection Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"column.id + COLLECTION_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>in Sammlung</th>\n      <td [class.noMaterial]=\"!row.counts[column.id]?.sufficient || row.counts[column.id]?.sufficient <= 1\"\n          [class.fewMaterials]=\"1 < row.counts[column.id]?.sufficient && row.counts[column.id]?.sufficient <= 3\"\n          class=\"collection-data-cell\"\n          mat-cell *matCellDef=\"let row\">\n            <a (click)=\"showCollectionItems(row.meta.id, row.meta.label, column.id)\">\n              {{ row.counts[column.id]?.sufficient || '0' }}\n            </a>\n      </td>\n    </ng-container>\n    <!-- /collection Data Columns -->\n    <!-- search Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns let index = index; trackBy:columnIdent\" [matColumnDef]=\"column.id + SEARCH_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>Suche</th>\n      <td class=\"search-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a (click)=\"searchInEditor(column.id, row.meta.label)\">\n          <ng-container *ngIf=\"(( searchCounts | async)?.has(column.id + '_' + row.meta.id) ) else zeroOrLoading\">\n            {{ (searchCounts | async)?.get(column.id + '_' + row.meta.id) }}\n          </ng-container>\n          <ng-template #zeroOrLoading>\n            <ng-container *ngIf=\"rowsLoaded.has(row.meta.id) else loadingBlock\"> 0 </ng-container>\n          </ng-template>\n          <ng-template #loadingBlock>\n            loading\u2026\n          </ng-template>\n        </a>\n      </td>\n    </ng-container>\n    <!-- /search Data Columns -->\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat( typeColumns ); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"alternatingDataColumns; sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(alternatingDataColumns)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-label-col,tr:nth-child(2n) .search-data-cell{border-right-color:#fff}.search-data-cell,.mat-mdc-header-cell,.mat-column-label-col{border-right:1px solid #e4e4e4}.search-data-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-label-col mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:center}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.label-col a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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]=\"'level-' + Math.min(3, row.meta.level+1)\"></mat-icon>\n          {{ row.meta.label }}\n        </a>\n      </td>\n    </ng-container>\n    <!-- one column for the MaterialType spanning the collection and search columns-->\n    <ng-container *ngFor=\"let col of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"2\" mat-header-cell *matHeaderCellDef class=\"mat-cell-level-{{col.level}}\">{{col.label}}</th>\n    </ng-container>\n    <!-- /source -->\n    <!-- collection Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns; trackBy:columnIdent\" [matColumnDef]=\"column.id + COLLECTION_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>in Sammlung</th>\n      <td [class.noMaterial]=\"!row.counts[column.id]?.sufficient || row.counts[column.id]?.sufficient <= 1\"\n          [class.fewMaterials]=\"1 < row.counts[column.id]?.sufficient && row.counts[column.id]?.sufficient <= 3\"\n          class=\"collection-data-cell\"\n          mat-cell *matCellDef=\"let row\">\n            <a (click)=\"showCollectionItems(row.meta.id, row.meta.label, column.id)\">\n              {{ row.counts[column.id]?.sufficient || '0' }}\n            </a>\n      </td>\n    </ng-container>\n    <!-- /collection Data Columns -->\n    <!-- search Data Columns -->\n    <ng-container *ngFor=\"let column of filteredColumns let index = index; trackBy:columnIdent\" [matColumnDef]=\"column.id + SEARCH_POSTFIX\">\n      <th mat-header-cell *matHeaderCellDef>Suche</th>\n      <td class=\"search-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a (click)=\"searchInEditor(column.id, row.meta.label)\">\n          <ng-container *ngIf=\"(( searchCounts | async)?.has(column.id + '_' + row.meta.id) ) else zeroOrLoading\">\n            {{ (searchCounts | async)?.get(column.id + '_' + row.meta.id) }}\n          </ng-container>\n          <ng-template #zeroOrLoading>\n            <ng-container *ngIf=\"rowsLoaded.has(row.meta.id) else loadingBlock\"> 0 </ng-container>\n          </ng-template>\n          <ng-template #loadingBlock>\n            loading\u2026\n          </ng-template>\n        </a>\n      </td>\n    </ng-container>\n    <!-- /search Data Columns -->\n      <!-- Generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat( typeColumns ); sticky: true;\"></tr>\n    <tr mat-header-row *matHeaderRowDef=\"alternatingDataColumns; sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(alternatingDataColumns)\"></tr>\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>.mat-column-label-col,tr:nth-child(2n) .search-data-cell{border-right-color:#fff}.search-data-cell,.mat-mdc-header-cell,.mat-column-label-col{border-right:1px solid #e4e4e4}.search-data-cell mat-icon,.mat-mdc-header-cell mat-icon,.mat-column-label-col mat-icon{color:var(--mat-table-row-item-label-text-color);height:16px;padding-right:5px;font-size:16px}.mat-mdc-header-cell,.mat-mdc-cell{padding-left:5px;text-align:center}.mat-mdc-header-cell a,.mat-mdc-cell a{cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a:hover,.mat-mdc-cell a:hover{text-decoration:underline}.label-col a{text-decoration:none;align-items:center;display:flex}.mat-column-totals_collection.noMaterial{background-color:#fad6da}.mat-column-totals_collection.fewMaterials{background-color:#fff1d6}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-8{padding-left:160px!important;text-align:left}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeSearchCountsComponent, decorators: [{
             type: Component,
@@ -3512,7 +3512,7 @@ class MonthpickerComponent {
             { provide: LOCALE_ID, useValue: 'de-DE' },
             { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
             { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true, firstDayOfWeek: 1 } },
-        ], viewQueries: [{ propertyName: "start", first: true, predicate: ["start"], descendants: true, read: ElementRef, static: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: MatRipple, static: true }], ngImport: i0, template: "<!--\n<mat-card>\n  <mat-card-header>\n    <mat-card-title> Monatlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    </!-- start date --/>\n    -->\n<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\n             #start\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker1\" formControlName=\"start\"\n             placeholder=\"Starts date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker1\n        [startAt]=\"inputGroup.controls.start.defaultValue\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setStart($event, picker1)\"\n\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /start date -->\n    <!-- end date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt2</mat-label>\n      <input matInput\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker2\"\n             formControlName=\"end\"\n             placeholder=\"End date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker2\n        [startAt]=\"inputGroup.controls.end.value\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setEnd($event, picker2)\"\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /end date -->\n</div>\n<!--\n  </mat-card-content>\n</mat-card>\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+        ], viewQueries: [{ propertyName: "start", first: true, predicate: ["start"], descendants: true, read: (ElementRef), static: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: MatRipple, static: true }], ngImport: i0, template: "<!--\n<mat-card>\n  <mat-card-header>\n    <mat-card-title> Monatlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    </!-- start date --/>\n    -->\n<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\n             #start\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker1\" formControlName=\"start\"\n             placeholder=\"Starts date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker1\n        [startAt]=\"inputGroup.controls.start.defaultValue\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setStart($event, picker1)\"\n\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /start date -->\n    <!-- end date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt2</mat-label>\n      <input matInput\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker2\"\n             formControlName=\"end\"\n             placeholder=\"End date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker2\n        [startAt]=\"inputGroup.controls.end.value\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setEnd($event, picker2)\"\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /end date -->\n</div>\n<!--\n  </mat-card-content>\n</mat-card>\n-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonthpickerComponent, decorators: [{
             type: Component,
@@ -3539,7 +3539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
                         { provide: MAT_LUXON_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true, firstDayOfWeek: 1 } },
                     ], template: "<!--\n<mat-card>\n  <mat-card-header>\n    <mat-card-title> Monatlicher Vergleich </mat-card-title>\n  </mat-card-header>\n  <mat-card-content [formGroup]=\"inputGroup\">\n    </!-- start date --/>\n    -->\n<div [formGroup]=\"inputGroup\" matRipple #ripple=\"matRipple\" [matRippleDisabled]=\"true\">\n    <mat-form-field>\n      <mat-label>Zeitpunkt 1</mat-label>\n      <input matInput\n             #start\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker1\" formControlName=\"start\"\n             placeholder=\"Starts date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker1\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker1\n        [startAt]=\"inputGroup.controls.start.defaultValue\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setStart($event, picker1)\"\n\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /start date -->\n    <!-- end date -->\n    <mat-form-field>\n      <mat-label>Zeitpunkt2</mat-label>\n      <input matInput\n             [disabled]=\"disabled\"\n             [min]=\"inputGroup.controls.start.defaultValue\"\n             [max]=\"inputGroup.controls.end.defaultValue\"\n             [matDatepicker]=\"picker2\"\n             formControlName=\"end\"\n             placeholder=\"End date\"\n      >\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker2\"></mat-datepicker-toggle>\n      <mat-datepicker\n        [disabled]=\"disabled\"\n        #picker2\n        [startAt]=\"inputGroup.controls.end.value\"\n        [startView]=\"startView\"\n        (monthSelected)=\"setEnd($event, picker2)\"\n      >\n      </mat-datepicker>\n    </mat-form-field>\n    <!-- /end date -->\n</div>\n<!--\n  </mat-card-content>\n</mat-card>\n-->\n" }]
-        }], ctorParameters: () => [], propDecorators: { startView: [{
+        }], propDecorators: { startView: [{
                 type: Input
             }], inputGroup: [{
                 type: Input,
@@ -3549,7 +3549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], start: [{
                 type: ViewChild,
                 args: ['start', {
-                        read: ElementRef,
+                        read: (ElementRef),
                         static: true,
                     }]
             }], ripple: [{
@@ -3676,20 +3676,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class CountsWithHistoryComponent {
-    constructor(metaApi, destroyRef, linkService) {
-        this.metaApi = metaApi;
-        this.destroyRef = destroyRef;
-        this.linkService = linkService;
+class BaseHistoricDataTableDirective {
+    constructor() {
+        this.metaApi = inject(MetaApiService);
+        this.destroyRef = inject(DestroyRef);
+        this.linkService = inject(EditorialLinkService);
+        this.columnTranslationkey = null;
         this.loadingCount = signal(0);
         this.isLoading = computed(() => this.loadingCount() > 0);
+        this.isHistoryEnabled = signal(false);
+        this.isHistoryEnabled$ = toObservable(this.isHistoryEnabled);
         this.timeFilterLoaded = signal(false);
         this.recentTypeCount$ = new BehaviorSubject({ columns: [], rows: [] });
         this.pastTypeCount$ = new BehaviorSubject({ columns: [], rows: [] });
         this.DateTime = DateTime;
         this.columns = signal([]);
-        this.apiMethod = 'getMaterialTypeCountsByReplicationSource';
-        this.columnTranslationkey = null;
+        this.dataForPastData$ = new Subject();
+        this.dataForRecentData$ = new Subject();
+        this.startValues$ = this.dataForPastData$.pipe(filter((data) => this.validateLoadingData(data)), distinctUntilChanged((a, b) => this.compareLoadingDataEqual(a, b)), throttleTime(500), switchMap((start) => this.getCountByDate(start)), tap((it) => this.pastTypeCount$.next(it)), takeUntilDestroyed(this.destroyRef));
+        this.endValues$ = this.dataForRecentData$.pipe(filter((data) => this.validateLoadingData(data)), distinctUntilChanged((a, b) => this.compareLoadingDataEqual(a, b)), throttleTime(500), switchMap((end) => this.getCountByDate(end)), tap((it) => this.recentTypeCount$.next(it)), tap((it) => this.columns.set(it.columns.slice())), takeUntilDestroyed(this.destroyRef));
         /* In this widget's backend we do have data for today
          * therefore we set the end date to today and use the timerange() endpoint to only set the start date
          */
@@ -3697,7 +3702,11 @@ class CountsWithHistoryComponent {
             start: new FormControl(),
             end: new FormControl(DateTime.utc().startOf('day'), { nonNullable: true }),
         });
-        this.isHistoryEnabled = signal(false);
+        this.timerangeStart$ = of(undefined).pipe(switchMap(() => this.getAvailableDateRange()), take(1), map((rangeFilter) => this.getStartDateOfRange(rangeFilter)), tap((startDate) => {
+            //this is to have a default value for the start date => the min date of the range
+            this.range.setControl('start', new FormControl(startDate, { nonNullable: true }));
+            this.timeFilterLoaded.set(true);
+        }), takeUntilDestroyed(this.destroyRef));
         this.allColumns = computed(() => {
             if (!this.isHistoryEnabled()) {
                 return this.recentColumns();
@@ -3713,39 +3722,9 @@ class CountsWithHistoryComponent {
         this.pastColumns = computed(() => {
             return this.columns().map((c) => c.id + '_past');
         });
-        effect(() => {
-            this.range.controls.end.reset();
-            if (!this.isHistoryEnabled()) {
-                this.range.controls.start.setValue(this.range.controls.end.value.startOf('day'));
-            }
-            else {
-                this.range.controls.start.reset();
-            }
-        });
     }
-    ngOnInit() {
-        this.getAvailableDateRange()
-            .pipe(tap((rangeFilter) => {
-            const startDate = this.getStartDateOfRange(rangeFilter);
-            //this is to have a default value for the start date => the min date of the range
-            this.range.setControl('start', new FormControl(startDate, { nonNullable: true }));
-        }), finalize(() => {
-            this.timeFilterLoaded.set(true);
-            this.range.controls.start.reset();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-        this.getCountByDate(this.range.controls.end.value)
-            .pipe(tap((response) => {
-            this.columns.set(response.columns.slice());
-            this.recentTypeCount$.next(response);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-        this.getValuesInDateRange()
-            .pipe(tap(([past, recent]) => {
-            this.pastTypeCount$.next(past);
-            this.recentTypeCount$.next(recent);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
+    getAvailableDateRange() {
+        return of(undefined).pipe(tap(() => this.loadingCount.update((it) => it + 1)), switchMap(() => this.metaApi.getTimerangeFilter()), filter((filter) => filter != null), tap(() => this.loadingCount.update((it) => it - 1)));
     }
     getStartDateOfRange(rangeFilter) {
         return DateTime.fromISO(rangeFilter.values.find((v) => v.id === 'rangeStart')?.label, {
@@ -3755,26 +3734,6 @@ class CountsWithHistoryComponent {
     columnIdent(_index, col) {
         return col.id;
     }
-    getAvailableDateRange() {
-        this.loadingCount.update((it) => it + 1);
-        return this.metaApi.getTimerangeFilter().pipe(filter((filter) => filter != null), finalize(() => this.loadingCount.update((it) => it - 1)));
-    }
-    getValuesInDateRange() {
-        return this.range.valueChanges.pipe(filter((range) => !!range.start?.isValid && !!range.end?.isValid), switchMap((range) => {
-            return zip(this.getCountByDate(range.start), this.getCountByDate(range.end));
-        }));
-    }
-    getCountByDate(date) {
-        this.loadingCount.update((it) => it + 1);
-        const filter = {
-            field: 'asOf',
-            values: [{ id: date.toISO({ includeOffset: false }), label: '' }],
-        };
-        return this.metaApi[this.apiMethod]([filter]).pipe(finalize(() => this.loadingCount.update((it) => it - 1)), map((response) => ({
-            ...response,
-            rows: response.rows.toSorted((a, b) => a.meta.label.localeCompare(b.meta.label)),
-        })));
-    }
     pastTypeCount(row, columnid) {
         if (!this.pastTypeCount$.value.rows.length) {
             return {};
@@ -3799,8 +3758,75 @@ class CountsWithHistoryComponent {
             return this.linkService.createLinkForCountsWithHistory(this.sourceType, sourceId, issueId);
         }));
     }
-    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 class=\"toolbar\">\n    <div style=\"flex: 1 1 auto\"></div>\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple #datepickerRipple=\"matRipple\" [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\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 mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseHistoricDataTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: BaseHistoricDataTableDirective, inputs: { apiMethod: "apiMethod", columnTranslationkey: "columnTranslationkey", pageTitle: "pageTitle", sourceType: "sourceType" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseHistoricDataTableDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { apiMethod: [{
+                type: Input
+            }], columnTranslationkey: [{
+                type: Input
+            }], pageTitle: [{
+                type: Input
+            }], sourceType: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+class CountsWithHistoryComponent extends BaseHistoricDataTableDirective {
+    ngOnInit() {
+        this.apiMethod ??= 'getMaterialTypeCountsByReplicationSource';
+        this.range.valueChanges
+            .pipe(tap((data) => {
+            this.dataForPastData$.next({ date: data.start });
+            this.dataForRecentData$.next({ date: data.end });
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        this.isHistoryEnabled$
+            .pipe(tap((enabled) => {
+            this.range.controls.end.reset();
+            if (!enabled) {
+                this.startDateSubscription?.unsubscribe();
+                this.startValuesSubscription?.unsubscribe();
+                return;
+            }
+            this.range.controls.start.reset();
+            if (!this.timeFilterLoaded()) {
+                this.startDateSubscription = this.timerangeStart$
+                    .pipe(take(1), tap(() => {
+                    this.startValuesSubscription = this.startValues$.subscribe();
+                    this.range.controls.start.reset();
+                }))
+                    .subscribe();
+            }
+            else {
+                this.startValuesSubscription = this.startValues$.subscribe();
+                this.range.controls.start.reset();
+            }
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        this.endValues$.subscribe();
+    }
+    getCountByDate(data) {
+        const filter = {
+            field: 'asOf',
+            values: [{ id: data.date.toISO({ includeOffset: false }), label: '' }],
+        };
+        return of(undefined).pipe(tap(() => this.loadingCount.update((it) => it + 1)), switchMap(() => {
+            return this.metaApi[this.apiMethod]([filter]).pipe(finalize(() => this.loadingCount.update((it) => it - 1)));
+        }), map((response) => ({
+            ...response,
+            rows: response.rows.toSorted((a, b) => a.meta.label.localeCompare(b.meta.label)),
+        })));
+    }
+    validateLoadingData(data) {
+        return data.date?.isValid ?? false;
+    }
+    compareLoadingDataEqual(a, b) {
+        return a.date.equals(b.date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountsWithHistoryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountsWithHistoryComponent, isStandalone: true, selector: "metaqs2-counts-with-history", usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountsWithHistoryComponent, decorators: [{
             type: Component,
@@ -3827,18 +3853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AsyncPipe,
                         ProgressSpinnerComponent,
                         MatRipple,
-                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto\"></div>\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple #datepickerRipple=\"matRipple\" [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\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 mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"] }]
-        }], ctorParameters: () => [{ type: MetaApiService }, { type: i0.DestroyRef }, { type: EditorialLinkService }], propDecorators: { apiMethod: [{
-                type: Input,
-                args: [{ required: true }]
-            }], columnTranslationkey: [{
-                type: Input
-            }], pageTitle: [{
-                type: Input
-            }], sourceType: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n"] }]
+        }] });
 
 async function createRegister(environment) {
     if (environment.production) {
@@ -3868,32 +3884,29 @@ async function createRegister(environment) {
     };
 }
 
-class TreeLicenseComponent extends CountsWithHistoryComponent {
+class TreeLicenseComponent extends BaseHistoricDataTableDirective {
     constructor() {
         super(...arguments);
         this.colId$ = new BehaviorSubject('defaultCollection');
         this.sourceType = 'collection';
-        this.apiMethod = 'getLicenseCountsByLicenseGroup';
     }
     set collectionId(id) {
         this.colId$.next(id);
     }
-    getCountByDate(date) {
-        this.loadingCount.update((it) => it + 1);
+    getCountByDate(data) {
         const filter = {
             field: 'asOf',
-            values: [{ id: date.toISO({ includeOffset: false }), label: '' }],
+            values: [{ id: data.date.toISO({ includeOffset: false }), label: '' }],
         };
-        return this.metaApi[this.apiMethod](this.colId$.getValue(), [filter]).pipe(finalize(() => this.loadingCount.update((it) => it - 1)), map((response) => {
+        return of(undefined).pipe(tap(() => this.loadingCount.update((it) => it + 1)), switchMap(() => {
+            return this.metaApi[this.apiMethod](this.colId$.getValue(), [filter]).pipe(finalize(() => this.loadingCount.update((it) => it - 1)));
+        }), map((response) => {
             const castedRows = response.rows.map((row) => row);
             return {
                 ...response,
                 // return the sufficient part of the counts, because the api return a QualityMatrix not a MatrixWithCounts
                 rows: castedRows.map((row) => {
-                    const counts = Object.entries(row.counts).reduce((acc, [key, count]) => {
-                        acc[key] = count.sufficient;
-                        return acc;
-                    }, {});
+                    const counts = Object.fromEntries(Object.entries(row.counts).map(([key, value]) => [key, value.sufficient]));
                     return {
                         ...row,
                         counts,
@@ -3903,20 +3916,52 @@ class TreeLicenseComponent extends CountsWithHistoryComponent {
         }));
     }
     ngOnInit() {
-        this.colId$
-            .pipe(filter((colid) => colid !== undefined), filter(() => {
-            return this.range.controls.start.value !== null && this.range.controls.end.value !== null;
-        }), switchMap(() => {
-            return zip(this.getCountByDate(this.range.controls.start.getRawValue()), this.getCountByDate(this.range.controls.end.getRawValue()));
-        }), tap(([past, recent]) => {
-            this.pastTypeCount$.next(past);
-            this.recentTypeCount$.next(recent);
+        this.apiMethod ??= 'getLicenseCountsByLicenseGroup';
+        combineLatest([this.colId$, this.range.valueChanges])
+            .pipe(tap(([collectionId, range]) => {
+            this.dataForPastData$.next({
+                date: range.start,
+                collectionId: collectionId,
+            });
+            this.dataForRecentData$.next({
+                date: range.end,
+                collectionId: collectionId,
+            });
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        this.isHistoryEnabled$
+            .pipe(tap((enabled) => {
+            this.range.controls.end.reset();
+            if (!enabled) {
+                this.startDateSubscription?.unsubscribe();
+                this.startValuesSubscription?.unsubscribe();
+                return;
+            }
+            this.range.controls.start.reset();
+            if (!this.timeFilterLoaded()) {
+                this.startDateSubscription = this.timerangeStart$
+                    .pipe(take(1), tap(() => {
+                    this.startValuesSubscription = this.startValues$.subscribe();
+                    this.range.controls.start.reset();
+                }))
+                    .subscribe();
+            }
+            else {
+                this.startValuesSubscription = this.startValues$.subscribe();
+                this.range.controls.start.reset();
+            }
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
-        super.ngOnInit();
+        this.endValues$.subscribe();
+    }
+    validateLoadingData(data) {
+        return !!data?.collectionId && (data.date?.isValid ?? false);
+    }
+    compareLoadingDataEqual(a, b) {
+        return a.collectionId === b.collectionId && a.date.equals(b.date);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeLicenseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeLicenseComponent, isStandalone: true, selector: "metaqs2-tree-license", inputs: { collectionId: "collectionId", sourceType: "sourceType", apiMethod: "apiMethod" }, usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto\"></div>\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple #datepickerRipple=\"matRipple\" [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\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 mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: 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: "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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TreeLicenseComponent, isStandalone: true, selector: "metaqs2-tree-license", inputs: { collectionId: "collectionId", sourceType: "sourceType" }, usesInheritance: true, ngImport: i0, template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n", ".while-loading{filter:blur(2px)}tr:nth-child(2n),tr:nth-child(odd){background-color:#fff}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell,tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: DatepickerComponent, selector: "metaqs2-datepicker", inputs: ["disabled", "inputGroup"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ProgressSpinnerComponent, selector: "metaqs2-progress-spinner", inputs: ["color", "diameter", "strokeWidth", "backdropEnabled", "positionGloballyCenter", "displayProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TreeLicenseComponent, decorators: [{
             type: Component,
@@ -3946,16 +3991,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ProgressSpinnerComponent,
                         TranslateModule,
                         FormsModule,
-                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <div style=\"flex: 1 1 auto\"></div>\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple #datepickerRipple=\"matRipple\" [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\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 mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"] }]
+                    ], template: "<mat-card appearance=\"raised\">\n  <mat-card-header *ngIf=\"pageTitle\">\n    <mat-card-title data-test-id=\"page-title\">\n      Qualit\u00E4tsmetrik: {{ pageTitle | translate }}{{ isLoading() ? \": Lade neue Daten.\" : \"\" }}\n    </mat-card-title>\n  </mat-card-header>\n  <!-- consider to put the filter in the table header to avoid that it is scrolled out of view-->\n  <!-- show the filter after the values are loaded to avoid loading current data twice -->\n  <mat-card-content class=\"toolbar\">\n    <metaqs2-datepicker style=\"display: inline-block\" matRipple [disabled]=\"isLoading() || !isHistoryEnabled()\" [inputGroup]=\"range\" *ngIf=\"timeFilterLoaded() && isHistoryEnabled()\"></metaqs2-datepicker>\n    <div style=\"flex: 1 1 auto\"></div>\n    <mat-slide-toggle [ngModel]=\"isHistoryEnabled()\" (ngModelChange)=\"isHistoryEnabled.set($event)\" [disabled]=\"isLoading()\">\n      <label>Zeige historische Daten</label>\n    </mat-slide-toggle>\n  </mat-card-content>\n</mat-card>\n<mat-card>\n  <metaqs2-progress-spinner [displayProgressSpinner]=\"isLoading()\"></metaqs2-progress-spinner>\n  <table [class.while-loading]=\"isLoading()\" mat-table [dataSource]=\"recentTypeCount$.value.rows\"\n         class=\"quality-matrix\">\n    <!-- Define columns of table -->\n    <!-- Row Header Column -->\n    <ng-container matColumnDef=\"label-col\" sticky>\n      <th [attr.rowspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef>\n        <div>Quelle</div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        [matTooltip]=\"row.meta.alt_label\"\n        class=\"label-col mat-cell-level-{{row.meta.level + 1}}\"\n      >\n        {{ row.meta.label }}\n      </td>\n    </ng-container>\n    <!-- one column for each type -->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_type'\">\n      <th [attr.colspan]=\"isHistoryEnabled() ? '2' : '1'\" mat-header-cell *matHeaderCellDef [matTooltip]=\"col.label\">\n        {{ columnTranslationkey ? (columnTranslationkey + col.label | translate) : col.label }}\n      </th>\n    </ng-container>\n    <!-- one column for each type for the most current date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_recent'\">\n      <th class=\"recent-data-cell\" mat-header-cell *matHeaderCellDef\n          matTooltip=\"no tooltip\">{{ range.controls.end.value.toLocaleString(DateTime.DATE_SHORT) }}\n      </th>\n      <td class=\"recent-data-cell\" mat-cell *matCellDef=\"let row\">\n        <a [attr.href]=\"openInEditor(row.meta.id, col.id) | async\" target=\"editor_frontend\">{{ row.counts[col.id] ?? '\u2013' }}</a>\n      </td>\n    </ng-container>\n    <!-- one column for each type for the older date-->\n    <ng-container *ngFor=\"let col of (recentTypeCount$ | async)?.columns; trackBy:columnIdent\"\n                  [matColumnDef]=\"col.id + '_past'\">\n      <th class=\"past-data-cell\" mat-header-cell *matHeaderCellDef matTooltip=\"no tooltip\">\n        {{ (pastTypeCount$ | async)?.rows?.length ? range.controls.start.value.toLocaleString(DateTime.DATE_SHORT) : 'no past data' }}\n      </th>\n      <td class=\"past-data-cell\" mat-cell *matCellDef=\"let row;\" >\n        <ng-container *ngIf=\"(pastTypeCount$ | async)?.rows?.length && pastTypeCount(row, col.id) as trend\">\n          <span [class]=\"trend.trend\"> {{ trend.value ?? '\u2013' }}\n            <mat-icon *ngIf=\"trend.value\" aria-hidden=\"false\" [attr.aria-label]=\"trend.trend\" [fontIcon]=\"trend.trend!\" /></span>\n          <span class=\"cdk-visually-hidden\">{{ trend.trend }}</span>\n        </ng-container>\n      </td>\n    </ng-container>\n    <!-- generate actual table -->\n    <tr mat-header-row *matHeaderRowDef=\"['label-col'].concat(typeColumns()); sticky:true;\"></tr>\n    <tr [hidden]=\"!isHistoryEnabled()\" mat-header-row *matHeaderRowDef=\"allColumns(); sticky: true;\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: ['label-col'].concat(allColumns())\"></tr>\n\n  </table>\n</mat-card>\n", styles: [".while-loading{filter:blur(2px)}tr:nth-child(2n){background-color:#e4e4e4}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell{border-right:1px solid white}tr:nth-child(odd){background-color:#fff}tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}td.label-col{text-align:left}.mat-mdc-header-cell,.mat-mdc-cell{text-align:center}.mat-mdc-header-cell a[href],.mat-mdc-cell a[href]{color:var(--mat-table-row-item-label-text-color);cursor:pointer;text-decoration:underline}.mat-mdc-header-cell a[href]:hover,.mat-mdc-cell a[href]:hover{text-decoration:underline}.mat-mdc-header-cell mat-icon,.mat-mdc-cell mat-icon{margin-left:5px;vertical-align:middle}.trending_down{color:#4abeff}.trending_up{color:#c20808}.toolbar,.actionbar{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem}\n", ".while-loading{filter:blur(2px)}tr:nth-child(2n),tr:nth-child(odd){background-color:#fff}tr:nth-child(2n)>td.label-col,tr:nth-child(2n) td.recent-data-cell,tr:nth-child(odd)>td.label-col,tr:nth-child(odd) td.recent-data-cell{border-right:1px solid #e4e4e4}.mat-cell-level-1{padding-left:20px!important;text-align:left}.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2{padding-left:40px!important;text-align:left}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-3{padding-left:60px!important;text-align:left}.mat-cell-level-3:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-4{padding-left:80px!important;text-align:left}.mat-cell-level-4:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-5{padding-left:100px!important;text-align:left}.mat-cell-level-5:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-6{padding-left:120px!important;text-align:left}.mat-cell-level-6:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-7{padding-left:140px!important;text-align:left}.mat-cell-level-7:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-8{padding-left:160px!important;text-align:left}.mat-cell-level-8:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+);padding-right:5px}.mat-cell-level-2:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAuMyA5LjkwMDA1QzIwLjIgOS43MDAwNSAyMC4xIDkuNjAwMDUgMjAgOS40MDAwNUwxMyAzLjMwMDA1QzEyLjUgMi44MDAwNSAxMS41IDIuODAwMDUgMTEgMy4zMDAwNUw0IDkuNDAwMDVDMy41IDkuOTAwMDUgMy41IDEwLjcgNCAxMS4xTDExIDE3LjJDMTEuNSAxNy43IDEyLjUgMTcuNyAxMyAxNy4yTDIwIDExLjFDMjAuMyAxMC44IDIwLjQgMTAuNSAyMC40IDEwLjJDMjAuNCAxMC4xIDIwLjQgMTAgMjAuMyA5LjkwMDA1Wk01IDEwLjNMMTIgNC4yMDAwNUwxOSAxMC4zTDEyIDE2LjRMNSAxMC4zWk0yMCAxMi45TDEyIDE5LjhMNCAxMi45TDMgMTMuOEwxMSAyMC43MDAxQzExLjUgMjEuMjAwMSAxMi41IDIxLjIwMDEgMTMgMjAuNzAwMUwyMSAxMy44TDIwIDEyLjlaIiBmaWxsPSIjMDAzQjdDIi8+PHBhdGggb3BhY2l0eT0iMC4zIiBkPSJNMTkgMTAuM0wxMiAxNi4zTDUgMTAuM0wxMiA0LjE5OTk1TDE5IDEwLjNaIiBmaWxsPSIjMDAzQjdDIi8+PC9zdmc+)}.mat-cell-level-0:before,.mat-cell-level-1:before{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNCAxMi45TDMgMTMuOEwxMSAyMC43QzExLjYgMjEuMiAxMi40IDIxLjIgMTMgMjAuN0wyMSAxMy44TDIwIDEyLjlMMTIgMTkuOEw0IDEyLjlaTTExIDMuNDAwMDJMNCA5LjQwMDAyQzMuNCA5LjkwMDAyIDMuNCAxMC43IDQgMTEuMUwxMSAxNy4yQzExLjYgMTcuNyAxMi40IDE3LjcgMTMgMTcuMkwyMCAxMS4xQzIwLjUgMTAuNiAyMC41IDkuODAwMDIgMjAgOS40MDAwMkwxMyAzLjMwMDAyQzEyLjQgMi45MDAwMiAxMS42IDIuOTAwMDIgMTEgMy40MDAwMloiIGZpbGw9IiMwMDNCN0MiLz48L3N2Zz4=)}.trending_down{color:#4abeff}.trending_up{color:#c20808}\n"] }]
         }], propDecorators: { collectionId: [{
                 type: Input,
                 args: [{ required: true }]
             }], sourceType: [{
                 type: Input,
                 args: [{ required: false }]
-            }], apiMethod: [{
-                type: Input,
-                args: [{ required: false }]
             }] } });
 
 /*
@@ -3966,5 +4008,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CollectionCountHistoryComponent, CollectionIssuesComponent, ConfigHelperService, CountsWithHistoryComponent, DonutChartTooltipComponent, MaterialIssuesComponent, NG_META_WIDGETS_LIB_CONFIGURATION, NgMetaWidgetsLibConfiguration, NgMetaWidgetsLibModule, NodeListComponent, QualityMatrixComponent, TOOLTIP_DATA, TOOLTIP_REF, TooltipRefImpl, TooltipService, TreeCollectionDetailsComponent, TreeLicenseComponent, TreeSearchCountsComponent, borderPositionStrategy, centerPositionStrategy, createRegister, transformDonutChartData };
+export { BaseHistoricDataTableDirective, CollectionCountHistoryComponent, CollectionIssuesComponent, ConfigHelperService, CountsWithHistoryComponent, DonutChartTooltipComponent, MaterialIssuesComponent, NG_META_WIDGETS_LIB_CONFIGURATION, NgMetaWidgetsLibConfiguration, NgMetaWidgetsLibModule, NodeListComponent, QualityMatrixComponent, TOOLTIP_DATA, TOOLTIP_REF, TooltipRefImpl, TooltipService, TreeCollectionDetailsComponent, TreeLicenseComponent, TreeSearchCountsComponent, borderPositionStrategy, centerPositionStrategy, createRegister, transformDonutChartData };
 //# sourceMappingURL=ngx-edu-sharing-metaqs2.mjs.map