@valtimo/dashboard 12.0.0 → 12.1.0

package/fesm2022/valtimo-dashboard.mjs

@@ -1,30 +1,34 @@
 import * as i0 from '@angular/core';
 import { Component, ViewChild, InjectionToken, Injectable, Inject, ViewContainerRef, ViewChildren, Input, ViewEncapsulation, NgModule, Pipe, EventEmitter, ChangeDetectionStrategy, Output } from '@angular/core';
 import moment from 'moment';
-import { BehaviorSubject, filter, combineLatest, map, Subscription, tap, take as take$1, startWith } from 'rxjs';
-import { take, map as map$1 } from 'rxjs/operators';
+import { BehaviorSubject, filter, map, Subject, Subscription, combineLatest, debounceTime, tap, startWith, distinctUntilChanged } from 'rxjs';
+import { take, map as map$1, delay } from 'rxjs/operators';
 import * as i1 from '@valtimo/task';
 import { TaskModule } from '@valtimo/task';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@valtimo/components';
-import { WidgetModule, ListModule, BpmnJsDiagramModule, AlertModule, SpinnerModule, CarbonListModule, CarbonMultiInputModule } from '@valtimo/components';
-import * as i1$1 from '@ngx-translate/core';
+import * as i1$1 from '@valtimo/components';
+import { WidgetModule, ListModule, BpmnJsDiagramModule, AlertModule, SpinnerModule, CarbonListModule, CarbonMultiInputModule, InputModule as InputModule$1 } from '@valtimo/components';
+import * as i3$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import pack from 'bin-pack-with-constraints';
+import Muuri from 'muuri';
 import * as i1$2 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i2$1 from '@valtimo/config';
 import { ROLE_USER } from '@valtimo/config';
-import * as i4$1 from 'carbon-components-angular';
-import { TabsModule, ThemeModule, LoadingModule, InputModule, DropdownModule, CheckboxModule } from 'carbon-components-angular';
+import * as i5 from 'carbon-components-angular';
+import { TabsModule, ThemeModule, LoadingModule, InputModule, DropdownModule, ButtonModule, TilesModule, LayerModule, IconModule, CheckboxModule } from 'carbon-components-angular';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { AuthGuardService } from '@valtimo/security';
 import * as i1$3 from '@angular/forms';
 import { Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i2$2 from '@valtimo/document';
+import { isEqual } from 'lodash';
+import { Add16, TrashCan16 } from '@carbon/icons';
+import * as i3$2 from '@carbon/charts-angular';
+import { ChartsModule } from '@carbon/charts-angular';
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -91,7 +95,7 @@ class DashboardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.TaskService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DashboardComponent, selector: "valtimo-dashboard", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content container-fluid\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <h4 class=\"title\">\n    {{ 'dashboard.openTasks.title' | translate }}\n    <sup *ngIf=\"obs.loading === false\" class=\"ml-1 badge badge-pill badge-primary\">{{\n      openTasks?.length\n    }}</sup>\n  </h4>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"openTasks\"\n        [fields]=\"openTaskFields\"\n        (rowClicked)=\"rowOpenTaskClick($event)\"\n      ></valtimo-list>\n    </valtimo-widget>\n  </ng-container>\n  <valtimo-task-detail-modal\n    #taskDetail\n    (formSubmit)=\"getOpenTasks()\"\n    (assignmentOfTaskChanged)=\"getOpenTasks()\"\n  ></valtimo-task-detail-modal>\n</div>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i4.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i1.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "component", type: i4.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DashboardComponent, selector: "valtimo-dashboard", viewQueries: [{ propertyName: "taskDetail", first: true, predicate: ["taskDetail"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content container-fluid\" *ngIf=\"{loading: loading$ | async} as obs\">\n  <h4 class=\"title\">\n    {{ 'dashboard.openTasks.title' | translate }}\n    <sup *ngIf=\"obs.loading === false\" class=\"ml-1 badge badge-pill badge-primary\">{{\n      openTasks?.length\n    }}</sup>\n  </h4>\n  <ng-container *ngIf=\"obs.loading === false; else loading\">\n    <valtimo-widget>\n      <valtimo-list\n        [items]=\"openTasks\"\n        [fields]=\"openTaskFields\"\n        (rowClicked)=\"rowOpenTaskClick($event)\"\n      ></valtimo-list>\n    </valtimo-widget>\n  </ng-container>\n  <valtimo-task-detail-modal\n    #taskDetail\n    (formSubmit)=\"getOpenTasks()\"\n    (assignmentOfTaskChanged)=\"getOpenTasks()\"\n  ></valtimo-task-detail-modal>\n</div>\n\n<ng-template #loading>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i1$1.ListComponent, selector: "valtimo-list", inputs: ["items", "fields", "pagination", "viewMode", "isSearchable", "header", "actions", "paginationIdentifier", "initialSortState", "lastColumnTemplate"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged"] }, { kind: "component", type: i1.TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: ["formSubmit", "assignmentOfTaskChanged"] }, { kind: "component", type: i1$1.SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
@@ -119,6 +123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
 const DATA_FEATURES = {
     NUMBER: 'number',
     TOTAL: 'total',
+    NUMBERS: 'numbers',
 };
 
 /*
@@ -173,64 +178,6 @@ const WIDGET_1X_MIN_WIDTH = 275;
  * limitations under the License.
  */
 
-/*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class WidgetService {
-    get supportedDisplayTypes$() {
-        return this._supportedDisplayTypes$.pipe(filter(specifications => !!specifications));
-    }
-    get supportedDataSources$() {
-        return this._supportedDataSources$.pipe(filter(specifications => !!specifications));
-    }
-    get supportedDisplayTypes() {
-        return this._supportedDisplayTypes$.getValue() || [];
-    }
-    get supportedDataSources() {
-        return this._supportedDataSources$.getValue() || [];
-    }
-    constructor(supportedDisplayTypesFromToken, supportedDataSourcesFromToken) {
-        this.supportedDisplayTypesFromToken = supportedDisplayTypesFromToken;
-        this.supportedDataSourcesFromToken = supportedDataSourcesFromToken;
-        this._supportedDisplayTypes$ = new BehaviorSubject(null);
-        this._supportedDataSources$ = new BehaviorSubject(null);
-        this.setSupportedDisplayTypes(supportedDisplayTypesFromToken);
-        this.setSupportedDataSources(supportedDataSourcesFromToken);
-    }
-    setSupportedDisplayTypes(supportedDisplayTypes) {
-        this._supportedDisplayTypes$.next(supportedDisplayTypes.filter(displayType => !!displayType));
-    }
-    setSupportedDataSources(supportedDataSources) {
-        this._supportedDataSources$.next(supportedDataSources.filter(dataSource => !!dataSource));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetService, deps: [{ token: DISPLAY_TYPE_TOKEN }, { token: DATA_SOURCE_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: Array, decorators: [{
-                    type: Inject,
-                    args: [DISPLAY_TYPE_TOKEN]
-                }] }, { type: Array, decorators: [{
-                    type: Inject,
-                    args: [DATA_SOURCE_TOKEN]
-                }] }] });
-
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -247,34 +194,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class WidgetLayoutService {
-    get widgetPackResult$() {
-        return this._widgetPackResult$.asObservable().pipe(filter(result => !!result));
+    get muuri$() {
+        return this._muuriSubject$.pipe(filter(muuri => !!muuri));
+    }
+    get muuriSubject$() {
+        return this._muuriSubject$.asObservable();
     }
     get widgetContainerWidth$() {
         return this._widgetContainerWidth$.asObservable().pipe(filter(width => !!width));
     }
-    get widgetConfigurationBins$() {
-        return combineLatest([
-            this.widgetService.supportedDisplayTypes$,
-            this._widgetConfigurations$,
-        ]).pipe(map(([displayTypes, configurations]) => configurations.map(configuration => {
-            const specification = displayTypes.find(type => type.displayTypeKey === configuration.displayType);
-            return {
-                configurationKey: configuration.key,
-                width: specification.width,
-                height: specification.height,
-            };
-        })));
+    get amountOfColumns$() {
+        return this.widgetContainerWidth$.pipe(map(containerWidth => Math.floor(containerWidth / WIDGET_1X_MIN_WIDTH)));
     }
-    constructor(widgetService) {
-        this.widgetService = widgetService;
+    constructor() {
         this._widgetContainerWidth$ = new BehaviorSubject(null);
         this._widgetConfigurations$ = new BehaviorSubject([]);
-        this._widgetPackResult$ = new BehaviorSubject(null);
-        this.openLayoutSubscription();
-    }
-    ngOnDestroy() {
-        this._layoutSubscription?.unsubscribe();
+        this._muuriSubject$ = new BehaviorSubject(null);
+        this._triggerMuuriLayout$ = new Subject();
+        this._subscriptions = new Subscription();
+        this.openMuuriSubscription();
     }
     setWidgetContainerWidth(width) {
         this._widgetContainerWidth$.next(width);
@@ -282,69 +220,26 @@ class WidgetLayoutService {
     setWidgetConfigurations(configurations) {
         this._widgetConfigurations$.next(configurations);
     }
-    openLayoutSubscription() {
-        this._layoutSubscription = combineLatest([
-            this.widgetContainerWidth$,
-            this.widgetConfigurationBins$,
-        ]).subscribe(([widgetContainerWidth, configurationBins]) => {
-            const amountOfMinWidthColumns = this.getAmountOfMinWidthColumns(widgetContainerWidth);
-            const widget1xWidth = this.getWidget1xWidth(widgetContainerWidth, amountOfMinWidthColumns);
-            const binsToFit = configurationBins.map(configurationBin => ({
-                ...configurationBin,
-                width: configurationBin.width * widget1xWidth,
-                height: configurationBin.height * WIDGET_1X_HEIGHT,
-            }));
-            const heightConstraint = this.getHeightConstraint(configurationBins, amountOfMinWidthColumns);
-            const resultWithoutHeightConstraint = this.getPackResult(binsToFit, widgetContainerWidth);
-            const resultWithHeightConstraint = this.getPackResult(binsToFit, widgetContainerWidth, heightConstraint);
-            const resultWithHeightConstraintExceedsBoundary = this.checkIfPackResultExceedsBoundary(resultWithHeightConstraint, widgetContainerWidth);
-            const resultToUse = resultWithHeightConstraintExceedsBoundary
-                ? resultWithoutHeightConstraint
-                : resultWithHeightConstraint;
-            const resultWithMaxWidth = this.getResultWithMaxWidth(resultToUse, widgetContainerWidth);
-            this._widgetPackResult$.next(resultWithMaxWidth);
-        });
-    }
-    getPackResult(binsToFit, maxWidth, maxHeight) {
-        return pack(binsToFit, {
-            maxWidth,
-            ...(maxHeight && { maxHeight }),
-        });
-    }
-    checkIfPackResultExceedsBoundary(result, maxWidth) {
-        return !!result.items.find(item => item.width + item.x > maxWidth);
-    }
-    getAmountOfMinWidthColumns(containerWidth) {
-        return Math.floor(containerWidth / WIDGET_1X_MIN_WIDTH);
-    }
-    getWidget1xWidth(containerWidth, amountOfMinWidthColumns) {
-        const widget1xWidth = Math.floor(containerWidth / (amountOfMinWidthColumns || 1));
-        return widget1xWidth;
+    setMuuri(muuri) {
+        this._muuriSubject$.next(muuri);
     }
-    getResultWithMaxWidth(result, containerWidth) {
-        return {
-            ...result,
-            items: result.items.map(item => ({
-                ...item,
-                width: item.width > containerWidth ? containerWidth : item.width,
-            })),
-        };
+    triggerMuuriLayout() {
+        this._triggerMuuriLayout$.next(null);
     }
-    getHeightConstraint(binsToFit, amountOfMinWidthColumns) {
-        const amountOfSpacesNeeded = binsToFit.reduce((acc, curr) => acc + curr.height * curr.width, 0);
-        const minAmountOfRowsNeeded = Math.ceil(amountOfSpacesNeeded / amountOfMinWidthColumns);
-        const tallestWidgetHeightSpace = binsToFit.reduce((acc, curr) => (curr.height > acc ? curr.height : acc), 0);
-        const amountOfRowsNeeded = minAmountOfRowsNeeded < tallestWidgetHeightSpace
-            ? tallestWidgetHeightSpace
-            : minAmountOfRowsNeeded;
-        return amountOfRowsNeeded * WIDGET_1X_HEIGHT;
+    openMuuriSubscription() {
+        this._subscriptions.add(combineLatest([this.muuri$, this._triggerMuuriLayout$])
+            .pipe(debounceTime(150))
+            .subscribe(([muuri]) => {
+            muuri.refreshItems();
+            muuri.layout();
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetLayoutService, deps: [{ token: WidgetService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetLayoutService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetLayoutService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: WidgetService }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -380,6 +275,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2$1.ConfigService }] });
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class WidgetService {
+    get supportedDisplayTypes$() {
+        return this._supportedDisplayTypes$.pipe(filter(specifications => !!specifications));
+    }
+    get supportedDataSources$() {
+        return this._supportedDataSources$.pipe(filter(specifications => !!specifications));
+    }
+    get supportedDisplayTypes() {
+        return this._supportedDisplayTypes$.getValue() || [];
+    }
+    get supportedDataSources() {
+        return this._supportedDataSources$.getValue() || [];
+    }
+    constructor(supportedDisplayTypesFromToken, supportedDataSourcesFromToken) {
+        this.supportedDisplayTypesFromToken = supportedDisplayTypesFromToken;
+        this.supportedDataSourcesFromToken = supportedDataSourcesFromToken;
+        this._supportedDisplayTypes$ = new BehaviorSubject(null);
+        this._supportedDataSources$ = new BehaviorSubject(null);
+        this.setSupportedDisplayTypes(supportedDisplayTypesFromToken);
+        this.setSupportedDataSources(supportedDataSourcesFromToken);
+    }
+    setSupportedDisplayTypes(supportedDisplayTypes) {
+        this._supportedDisplayTypes$.next(supportedDisplayTypes.filter(displayType => !!displayType));
+    }
+    setSupportedDataSources(supportedDataSources) {
+        this._supportedDataSources$.next(supportedDataSources.filter(dataSource => !!dataSource));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetService, deps: [{ token: DISPLAY_TYPE_TOKEN }, { token: DATA_SOURCE_TOKEN }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: Array, decorators: [{
+                    type: Inject,
+                    args: [DISPLAY_TYPE_TOKEN]
+                }] }, { type: Array, decorators: [{
+                    type: Inject,
+                    args: [DATA_SOURCE_TOKEN]
+                }] }] });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -425,7 +378,7 @@ class WidgetTranslationService {
         }
         return translation || `${key}.${translateKey}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetTranslationService, deps: [{ token: i1$1.TranslateService }, { token: WidgetService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetTranslationService, deps: [{ token: i3$1.TranslateService }, { token: WidgetService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetTranslationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetTranslationService, decorators: [{
@@ -433,7 +386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }, { type: WidgetService }] });
+        }], ctorParameters: () => [{ type: i3$1.TranslateService }, { type: WidgetService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -468,27 +421,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  */
 class WidgetDashboardContentComponent {
     set widgetData(value) {
-        this.isLoading$.next(value.loading);
+        this._isLoading$.next(value.loading);
         this._widgetData$.next(value.data);
     }
     set dashboard(value) {
         this.setWidgetConfigurations(value);
     }
+    get _muuriInitialized$() {
+        return this._muuri$.pipe(map$1(muuri => !!muuri));
+    }
     constructor(layoutService, widgetService, renderer) {
         this.layoutService = layoutService;
         this.widgetService = widgetService;
         this.renderer = renderer;
-        this.isLoading$ = new BehaviorSubject(true);
+        this._isLoading$ = new BehaviorSubject(true);
         this._widgetData$ = new BehaviorSubject([]);
         this.widgetConfigurations$ = new BehaviorSubject(null);
         this._subscriptions = new Subscription();
+        this._muuri$ = this.layoutService.muuriSubject$;
+        this._creatingMuuri = false;
+        this._noResults$ = new BehaviorSubject(false);
+        this.loaded$ = combineLatest([
+            this._isLoading$,
+            this._muuriInitialized$,
+            this._noResults$,
+        ]).pipe(map$1(([isLoading, muuriInitialized, noResults]) => !isLoading && (muuriInitialized || noResults)), delay(400));
     }
     ngAfterViewInit() {
         this._observer = new ResizeObserver(event => {
             this.observerMutation(event);
         });
         this._observer.observe(this._widgetContainerRef.nativeElement);
-        this.openPackResultSubscription();
+        this.openWidgetSizeSubscription();
         this.renderWidgets();
     }
     ngOnDestroy() {
@@ -508,17 +472,34 @@ class WidgetDashboardContentComponent {
             this.layoutService.setWidgetContainerWidth(widgetContainerWidth);
         }
     }
-    openPackResultSubscription() {
-        this._subscriptions.add(this.layoutService.widgetPackResult$.subscribe(packResult => {
-            this.renderer.setStyle(this._widgetContainerRef.nativeElement, 'height', `${packResult.height}px`);
+    openWidgetSizeSubscription() {
+        this._subscriptions.add(combineLatest([
+            this.layoutService.amountOfColumns$,
+            this.widgetConfigurations$,
+            this.widgetService.supportedDisplayTypes$,
+            this._muuri$,
+        ]).subscribe(([amountOfColumns, widgetConfigurations, supportedDisplayTypes, muuri]) => {
             this._widgetConfigurationRefs.toArray().forEach(widgetConfigurationRef => {
                 const nativeElement = widgetConfigurationRef.nativeElement;
-                const configPackResult = packResult.items.find(result => result.item.configurationKey === nativeElement.id);
-                this.renderer.setStyle(nativeElement, 'height', `${configPackResult?.height}px`);
-                this.renderer.setStyle(nativeElement, 'width', `${configPackResult?.width}px`);
-                this.renderer.setStyle(nativeElement, 'left', `${configPackResult?.x}px`);
-                this.renderer.setStyle(nativeElement, 'top', `${configPackResult?.y}px`);
+                const widgetConfiguration = widgetConfigurations.find(config => config.key === nativeElement.id);
+                const specification = supportedDisplayTypes.find(type => type.displayTypeKey === widgetConfiguration.displayType);
+                const widthPercentage = specification.width > amountOfColumns
+                    ? 100
+                    : (specification.width / amountOfColumns) * 100;
+                this.renderer.setStyle(nativeElement, 'height', `${WIDGET_1X_HEIGHT * specification.height}px`);
+                this.renderer.setStyle(nativeElement, 'width', `${widthPercentage}%`);
             });
+            if (widgetConfigurations.length > 0) {
+                if (!muuri) {
+                    this.initMuuri();
+                }
+                else {
+                    this.layoutService.triggerMuuriLayout();
+                }
+            }
+            else {
+                this._noResults$.next(true);
+            }
         }));
     }
     renderWidgets() {
@@ -542,12 +523,24 @@ class WidgetDashboardContentComponent {
             });
         }));
     }
+    initMuuri() {
+        if (!this._widgetContainerRef || this._creatingMuuri)
+            return;
+        this._creatingMuuri = true;
+        this.layoutService.setMuuri(new Muuri(this._widgetContainerRef.nativeElement, {
+            layout: {
+                fillGaps: true,
+            },
+            layoutOnResize: false,
+        }));
+        this._creatingMuuri = false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetDashboardContentComponent, deps: [{ token: WidgetLayoutService }, { token: WidgetService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: WidgetDashboardContentComponent, selector: "valtimo-widget-dashboard-content", inputs: { widgetData: "widgetData", dashboard: "dashboard" }, providers: [WidgetLayoutService], viewQueries: [{ propertyName: "_widgetContainerRef", first: true, predicate: ["widgetContainer"], descendants: true }, { propertyName: "_widgetConfigurationRefs", predicate: ["widgetConfiguration"], descendants: true }, { propertyName: "_widgetConfigurationContentVcRefs", predicate: ["widgetConfigurationContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div #widgetContainer [class.loading]=\"isLoading$ | async\" class=\"widget-container\">\n  <ng-container *ngIf=\"widgetConfigurations$ | async as widgetConfigurations\">\n    <ng-container *ngFor=\"let config of widgetConfigurations\">\n      <div #widgetConfiguration [id]=\"config.key\" class=\"widget-configuration\">\n        <div class=\"widget-configuration-content\">\n          <ng-container #widgetConfigurationContent></ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!widgetConfigurations.length\"\n      [title]=\"'dashboard.noWidgets' | translate\"\n      [description]=\"'dashboard.noWidgetsDescription' | translate\"\n      illustration=\"valtimo-layout/img/no-widgets.svg\"\n    ></valtimo-no-results>\n  </ng-container>\n</div>\n\n<cds-loading *ngIf=\"isLoading$ | async\" class=\"widget-loader\"></cds-loading>\n", styles: [".widget-container{margin-top:16px;width:calc(100% + 16px);margin-left:-8px;position:relative}.widget-configuration{position:absolute;display:flex;justify-content:center;align-items:center}.widget-configuration-content{width:calc(100% - 16px);height:calc(100% - 16px);background-color:#fff}.widget-loader{display:flex;justify-content:center;padding-top:32px}.loading{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i4.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: WidgetDashboardContentComponent, selector: "valtimo-widget-dashboard-content", inputs: { widgetData: "widgetData", dashboard: "dashboard" }, providers: [WidgetLayoutService], viewQueries: [{ propertyName: "_widgetContainerRef", first: true, predicate: ["widgetContainer"], descendants: true }, { propertyName: "_widgetConfigurationRefs", predicate: ["widgetConfiguration"], descendants: true }, { propertyName: "_widgetConfigurationContentVcRefs", predicate: ["widgetConfigurationContent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{loaded: loaded$ | async} as obs\">\n  <div *ngIf=\"!obs.loaded\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-container>\n\n<div\n  #widgetContainer\n  class=\"widget-container\"\n  [ngClass]=\"{'widget-container__visible': loaded$ | async}\"\n>\n  <ng-container *ngIf=\"widgetConfigurations$ | async as widgetConfigurations\">\n    <ng-container *ngFor=\"let config of widgetConfigurations\">\n      <div #widgetConfiguration [id]=\"config.key\" class=\"widget-configuration\">\n        <div class=\"widget-configuration-content\">\n          <ng-container #widgetConfigurationContent></ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!widgetConfigurations.length\"\n      [title]=\"'dashboard.noWidgets' | translate\"\n      [description]=\"'dashboard.noWidgetsDescription' | translate\"\n      illustration=\"valtimo-layout/img/no-widgets.svg\"\n    ></valtimo-no-results>\n  </ng-container>\n</div>\n", styles: [":host{position:relative}.widget-container{margin-top:16px;width:calc(100% + 16px);margin-left:-8px;position:relative;visibility:hidden}.widget-container__visible{visibility:visible}.widget-configuration{position:absolute;display:flex;justify-content:center;align-items:center}.widget-configuration-content{width:calc(100% - 16px);height:calc(100% - 16px);background-color:#fff}.loading-container{padding-top:32px;position:absolute;top:0;display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetDashboardContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-widget-dashboard-content', providers: [WidgetLayoutService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div #widgetContainer [class.loading]=\"isLoading$ | async\" class=\"widget-container\">\n  <ng-container *ngIf=\"widgetConfigurations$ | async as widgetConfigurations\">\n    <ng-container *ngFor=\"let config of widgetConfigurations\">\n      <div #widgetConfiguration [id]=\"config.key\" class=\"widget-configuration\">\n        <div class=\"widget-configuration-content\">\n          <ng-container #widgetConfigurationContent></ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!widgetConfigurations.length\"\n      [title]=\"'dashboard.noWidgets' | translate\"\n      [description]=\"'dashboard.noWidgetsDescription' | translate\"\n      illustration=\"valtimo-layout/img/no-widgets.svg\"\n    ></valtimo-no-results>\n  </ng-container>\n</div>\n\n<cds-loading *ngIf=\"isLoading$ | async\" class=\"widget-loader\"></cds-loading>\n", styles: [".widget-container{margin-top:16px;width:calc(100% + 16px);margin-left:-8px;position:relative}.widget-configuration{position:absolute;display:flex;justify-content:center;align-items:center}.widget-configuration-content{width:calc(100% - 16px);height:calc(100% - 16px);background-color:#fff}.widget-loader{display:flex;justify-content:center;padding-top:32px}.loading{display:none}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-widget-dashboard-content', providers: [WidgetLayoutService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{loaded: loaded$ | async} as obs\">\n  <div *ngIf=\"!obs.loaded\" class=\"loading-container\">\n    <cds-loading></cds-loading>\n  </div>\n</ng-container>\n\n<div\n  #widgetContainer\n  class=\"widget-container\"\n  [ngClass]=\"{'widget-container__visible': loaded$ | async}\"\n>\n  <ng-container *ngIf=\"widgetConfigurations$ | async as widgetConfigurations\">\n    <ng-container *ngFor=\"let config of widgetConfigurations\">\n      <div #widgetConfiguration [id]=\"config.key\" class=\"widget-configuration\">\n        <div class=\"widget-configuration-content\">\n          <ng-container #widgetConfigurationContent></ng-container>\n        </div>\n      </div>\n    </ng-container>\n\n    <valtimo-no-results\n      *ngIf=\"!widgetConfigurations.length\"\n      [title]=\"'dashboard.noWidgets' | translate\"\n      [description]=\"'dashboard.noWidgetsDescription' | translate\"\n      illustration=\"valtimo-layout/img/no-widgets.svg\"\n    ></valtimo-no-results>\n  </ng-container>\n</div>\n", styles: [":host{position:relative}.widget-container{margin-top:16px;width:calc(100% + 16px);margin-left:-8px;position:relative;visibility:hidden}.widget-container__visible{visibility:visible}.widget-configuration{position:absolute;display:flex;justify-content:center;align-items:center}.widget-configuration-content{width:calc(100% - 16px);height:calc(100% - 16px);background-color:#fff}.loading-container{padding-top:32px;position:absolute;top:0;display:flex;width:100%;justify-content:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: WidgetLayoutService }, { type: WidgetService }, { type: i0.Renderer2 }], propDecorators: { _widgetConfigurationRefs: [{
                 type: ViewChildren,
                 args: ['widgetConfiguration']
@@ -625,24 +618,24 @@ class WidgetDashboardComponent {
             data: [],
             loading: true,
         });
+        this.selectedDashboardKey$ = new BehaviorSubject('');
     }
     onTabSelected(dashboardKey) {
+        this.selectedDashboardKey$.next(dashboardKey);
+        this.activeWidgetData$.next({ data: [], loading: true });
         this.widgetApiService
             .getWidgetData(dashboardKey)
-            .pipe(tap(() => {
-            this.activeWidgetData$.next({ data: [], loading: true });
-        }), take$1(1))
             .subscribe((data) => this.activeWidgetData$.next({ data, loading: false }));
     }
     trackByIndex(index) {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetDashboardComponent, deps: [{ token: DashboardService }, { token: WidgetApiService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: WidgetDashboardComponent, selector: "valtimo-widget-dashboard", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"dashboards$ | async as dashboards\" class=\"dashboards-container\">\n  <valtimo-no-results\n    *ngIf=\"!dashboards.length\"\n    [title]=\"'dashboard.noDashboards' | translate\"\n    [description]=\"'dashboard.noDashboardsDescription' | translate\"\n    illustration=\"valtimo-layout/img/no-dashboards.svg\"\n  ></valtimo-no-results>\n\n  <div *ngIf=\"dashboards.length === 1\">\n    <h4>{{ dashboards[0].title }}</h4>\n\n    <valtimo-widget-dashboard-content\n      [dashboard]=\"dashboards[0]\"\n      [widgetData]=\"activeWidgetData$ | async\"\n    ></valtimo-widget-dashboard-content>\n  </div>\n\n  <div *ngIf=\"dashboards.length > 1\">\n    <cds-tabs>\n      <cds-tab\n        *ngFor=\"let dashboard of dashboards; trackBy: trackByIndex\"\n        [heading]=\"dashboard.title\"\n        (selected)=\"onTabSelected(dashboard.key)\"\n      >\n        <valtimo-widget-dashboard-content\n          [dashboard]=\"dashboard\"\n          [widgetData]=\"activeWidgetData$ | async\"\n        ></valtimo-widget-dashboard-content>\n      </cds-tab>\n    </cds-tabs>\n  </div>\n</div>\n", styles: [".dashboards-container .cds--tab-content{outline:0;padding:0}.dashboards-container .valtimo-no-results,.widget-container .valtimo-no-results{flex-wrap:wrap;align-items:flex-start;align-content:center;flex-direction:column;gap:16px!important}.dashboards-container .valtimo-no-results__content,.widget-container .valtimo-no-results__content{gap:16px!important;max-width:500px;line-height:20px}.dashboards-container .valtimo-no-results img,.widget-container .valtimo-no-results img{padding-left:0!important}.dashboards-container .valtimo-no-results span,.dashboards-container .valtimo-no-results h4,.widget-container .valtimo-no-results span,.widget-container .valtimo-no-results h4{width:100%!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i4$1.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i4.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title"] }, { kind: "component", type: WidgetDashboardContentComponent, selector: "valtimo-widget-dashboard-content", inputs: ["widgetData", "dashboard"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: WidgetDashboardComponent, selector: "valtimo-widget-dashboard", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"dashboards$ | async as dashboards\" class=\"dashboards-container\">\n  <valtimo-no-results\n    *ngIf=\"!dashboards.length\"\n    [title]=\"'dashboard.noDashboards' | translate\"\n    [description]=\"'dashboard.noDashboardsDescription' | translate\"\n    illustration=\"valtimo-layout/img/no-dashboards.svg\"\n  ></valtimo-no-results>\n\n  <div *ngIf=\"dashboards.length === 1\">\n    <h4>{{ dashboards[0].title }}</h4>\n\n    <valtimo-widget-dashboard-content\n      [dashboard]=\"dashboards[0]\"\n      [widgetData]=\"activeWidgetData$ | async\"\n    ></valtimo-widget-dashboard-content>\n  </div>\n\n  <div *ngIf=\"dashboards.length > 1\">\n    <cds-tabs>\n      <cds-tab\n        *ngFor=\"let dashboard of dashboards; trackBy: trackByIndex\"\n        [heading]=\"dashboard.title\"\n        (selected)=\"onTabSelected(dashboard.key)\"\n      >\n        <valtimo-widget-dashboard-content\n          *ngIf=\"(selectedDashboardKey$ | async) === dashboard.key\"\n          [dashboard]=\"dashboard\"\n          [widgetData]=\"activeWidgetData$ | async\"\n        ></valtimo-widget-dashboard-content>\n      </cds-tab>\n    </cds-tabs>\n  </div>\n</div>\n", styles: [".dashboards-container .cds--tab-content{outline:0;padding:0}.dashboards-container .valtimo-no-results,.widget-container .valtimo-no-results{flex-wrap:wrap;align-items:flex-start;align-content:center;flex-direction:column;gap:16px!important}.dashboards-container .valtimo-no-results__content,.widget-container .valtimo-no-results__content{gap:16px!important;max-width:500px;line-height:20px}.dashboards-container .valtimo-no-results img,.widget-container .valtimo-no-results img{padding-left:0!important}.dashboards-container .valtimo-no-results span,.dashboards-container .valtimo-no-results h4,.widget-container .valtimo-no-results span,.widget-container .valtimo-no-results h4{width:100%!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i5.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "component", type: WidgetDashboardContentComponent, selector: "valtimo-widget-dashboard-content", inputs: ["widgetData", "dashboard"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: WidgetDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-widget-dashboard', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"dashboards$ | async as dashboards\" class=\"dashboards-container\">\n  <valtimo-no-results\n    *ngIf=\"!dashboards.length\"\n    [title]=\"'dashboard.noDashboards' | translate\"\n    [description]=\"'dashboard.noDashboardsDescription' | translate\"\n    illustration=\"valtimo-layout/img/no-dashboards.svg\"\n  ></valtimo-no-results>\n\n  <div *ngIf=\"dashboards.length === 1\">\n    <h4>{{ dashboards[0].title }}</h4>\n\n    <valtimo-widget-dashboard-content\n      [dashboard]=\"dashboards[0]\"\n      [widgetData]=\"activeWidgetData$ | async\"\n    ></valtimo-widget-dashboard-content>\n  </div>\n\n  <div *ngIf=\"dashboards.length > 1\">\n    <cds-tabs>\n      <cds-tab\n        *ngFor=\"let dashboard of dashboards; trackBy: trackByIndex\"\n        [heading]=\"dashboard.title\"\n        (selected)=\"onTabSelected(dashboard.key)\"\n      >\n        <valtimo-widget-dashboard-content\n          [dashboard]=\"dashboard\"\n          [widgetData]=\"activeWidgetData$ | async\"\n        ></valtimo-widget-dashboard-content>\n      </cds-tab>\n    </cds-tabs>\n  </div>\n</div>\n", styles: [".dashboards-container .cds--tab-content{outline:0;padding:0}.dashboards-container .valtimo-no-results,.widget-container .valtimo-no-results{flex-wrap:wrap;align-items:flex-start;align-content:center;flex-direction:column;gap:16px!important}.dashboards-container .valtimo-no-results__content,.widget-container .valtimo-no-results__content{gap:16px!important;max-width:500px;line-height:20px}.dashboards-container .valtimo-no-results img,.widget-container .valtimo-no-results img{padding-left:0!important}.dashboards-container .valtimo-no-results span,.dashboards-container .valtimo-no-results h4,.widget-container .valtimo-no-results span,.widget-container .valtimo-no-results h4{width:100%!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-widget-dashboard', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"dashboards$ | async as dashboards\" class=\"dashboards-container\">\n  <valtimo-no-results\n    *ngIf=\"!dashboards.length\"\n    [title]=\"'dashboard.noDashboards' | translate\"\n    [description]=\"'dashboard.noDashboardsDescription' | translate\"\n    illustration=\"valtimo-layout/img/no-dashboards.svg\"\n  ></valtimo-no-results>\n\n  <div *ngIf=\"dashboards.length === 1\">\n    <h4>{{ dashboards[0].title }}</h4>\n\n    <valtimo-widget-dashboard-content\n      [dashboard]=\"dashboards[0]\"\n      [widgetData]=\"activeWidgetData$ | async\"\n    ></valtimo-widget-dashboard-content>\n  </div>\n\n  <div *ngIf=\"dashboards.length > 1\">\n    <cds-tabs>\n      <cds-tab\n        *ngFor=\"let dashboard of dashboards; trackBy: trackByIndex\"\n        [heading]=\"dashboard.title\"\n        (selected)=\"onTabSelected(dashboard.key)\"\n      >\n        <valtimo-widget-dashboard-content\n          *ngIf=\"(selectedDashboardKey$ | async) === dashboard.key\"\n          [dashboard]=\"dashboard\"\n          [widgetData]=\"activeWidgetData$ | async\"\n        ></valtimo-widget-dashboard-content>\n      </cds-tab>\n    </cds-tabs>\n  </div>\n</div>\n", styles: [".dashboards-container .cds--tab-content{outline:0;padding:0}.dashboards-container .valtimo-no-results,.widget-container .valtimo-no-results{flex-wrap:wrap;align-items:flex-start;align-content:center;flex-direction:column;gap:16px!important}.dashboards-container .valtimo-no-results__content,.widget-container .valtimo-no-results__content{gap:16px!important;max-width:500px;line-height:20px}.dashboards-container .valtimo-no-results img,.widget-container .valtimo-no-results img{padding-left:0!important}.dashboards-container .valtimo-no-results span,.dashboards-container .valtimo-no-results h4,.widget-container .valtimo-no-results span,.widget-container .valtimo-no-results h4{width:100%!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
         }], ctorParameters: () => [{ type: DashboardService }, { type: WidgetApiService }] });
 
 /*
@@ -800,7 +793,7 @@ class DashboardModule {
             DashboardRoutingModule,
             WidgetModule,
             ListModule,
-            BpmnJsDiagramModule, i1$1.TranslateModule, AlertModule,
+            BpmnJsDiagramModule, i3$1.TranslateModule, AlertModule,
             TaskModule,
             SpinnerModule,
             TabsModule,
@@ -866,78 +859,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
                 }]
         }] });
 
-/*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class TestConfigurationComponent {
-    set disabled(disabledValue) {
-        if (disabledValue) {
-            this.form.disable();
-        }
-        else {
-            this.form.enable();
-        }
-    }
-    get value() {
-        return this.form.get('value');
-    }
-    get total() {
-        return this.form.get('total');
-    }
-    set prefillConfiguration(configurationValue) {
-        if (configurationValue) {
-            this.value.setValue(configurationValue.value);
-            this.total.setValue(configurationValue.total);
-        }
-    }
-    constructor(fb) {
-        this.fb = fb;
-        this.form = this.fb.group({
-            value: this.fb.control(null, [Validators.required]),
-            total: this.fb.control(null, [Validators.required]),
-        });
-        this.configurationEvent = new EventEmitter();
-        this._subscriptions = new Subscription();
-    }
-    ngOnInit() {
-        this.openFormSubscription();
-    }
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
-    }
-    openFormSubscription() {
-        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
-            this.configurationEvent.emit({ valid: this.form.valid, data: formValue });
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TestConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: TestConfigurationComponent, selector: "ng-component", inputs: { dataSourceKey: "dataSourceKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'valueHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'valueHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"value.dirty && value.invalid\"\n    >\n      {{ 'value' | widgetTranslate: dataSourceKey | async }}\n\n      <input\n        cdsText\n        formControlName=\"value\"\n        [invalid]=\"value.dirty && value.invalid\"\n        type=\"number\"\n      />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'totalHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'totalHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"total.dirty && total.invalid\"\n    >\n      {{ 'total' | widgetTranslate: dataSourceKey | async }}\n\n      <input\n        cdsText\n        formControlName=\"total\"\n        [invalid]=\"total.dirty && total.invalid\"\n        type=\"number\"\n      />\n    </cds-label>\n  </div>\n</form>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TestConfigurationComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'valueHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'valueHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"value.dirty && value.invalid\"\n    >\n      {{ 'value' | widgetTranslate: dataSourceKey | async }}\n\n      <input\n        cdsText\n        formControlName=\"value\"\n        [invalid]=\"value.dirty && value.invalid\"\n        type=\"number\"\n      />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'totalHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'totalHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"total.dirty && total.invalid\"\n    >\n      {{ 'total' | widgetTranslate: dataSourceKey | async }}\n\n      <input\n        cdsText\n        formControlName=\"total\"\n        [invalid]=\"total.dirty && total.invalid\"\n        type=\"number\"\n      />\n    </cds-label>\n  </div>\n</form>\n", styles: ["/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { dataSourceKey: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], prefillConfiguration: [{
-                type: Input
-            }], configurationEvent: [{
-                type: Output
-            }] } });
-
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -985,6 +906,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var Operator;
+(function (Operator) {
+    Operator["NOT_EQUAL_TO"] = "!=";
+    Operator["EQUAL_TO"] = "==";
+    Operator["GREATER_THAN"] = ">";
+    Operator["GREATER_THAN_OR_EQUAL_TO"] = ">=";
+    Operator["LESS_THAN"] = "<";
+    Operator["LESS_THAN_OR_EQUAL_TO"] = "<=";
+})(Operator || (Operator = {}));
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1017,33 +947,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const testDataSourceSpecification = {
-    dataSourceKey: 'test',
-    configurationComponent: TestConfigurationComponent,
-    translations: {
-        de: {
-            title: 'Test-Datenquelle',
-            value: 'Wert (erforderlich)',
-            valueHelperText: 'Der im Widget angezeigte Wert',
-            total: 'Gesamtwert (erforderlich)',
-            totalHelperText: 'Der im Widget angezeigte Gesamtwert',
-        },
-        en: {
-            title: 'Test data source',
-            value: 'Value (required)',
-            valueHelperText: 'The value displayed in the widget',
-            total: 'Total value (required)',
-            totalHelperText: 'The total value displayed in the widget',
-        },
-        nl: {
-            title: 'Testdatabron',
-            value: 'Waarde (vereist)',
-            valueHelperText: 'De waarde die wordt weergegeven in de widget',
-            total: 'Totaalwaarde (vereist)',
-            totalHelperText: 'De totaalwaarde die wordt weergegeven in de widget',
-        },
-    },
-};
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1060,20 +963,6 @@ const testDataSourceSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class TestDataSourceModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TestDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: TestDataSourceModule, declarations: [TestConfigurationComponent], imports: [CommonModule, ReactiveFormsModule, WidgetTranslatePipeModule, InputModule], exports: [TestConfigurationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TestDataSourceModule, providers: [{ provide: DATA_SOURCE_TOKEN, useValue: testDataSourceSpecification, multi: true }], imports: [CommonModule, ReactiveFormsModule, WidgetTranslatePipeModule, InputModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TestDataSourceModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TestConfigurationComponent],
-                    imports: [CommonModule, ReactiveFormsModule, WidgetTranslatePipeModule, InputModule],
-                    exports: [TestConfigurationComponent],
-                    providers: [{ provide: DATA_SOURCE_TOKEN, useValue: testDataSourceSpecification, multi: true }],
-                }]
-        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1090,31 +979,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var Operator;
-(function (Operator) {
-    Operator["NOT_EQUAL_TO"] = "!=";
-    Operator["EQUAL_TO"] = "==";
-    Operator["GREATER_THAN"] = ">";
-    Operator["GREATER_THAN_OR_EQUAL_TO"] = ">=";
-    Operator["LESS_THAN"] = "<";
-    Operator["LESS_THAN_OR_EQUAL_TO"] = "<=";
-})(Operator || (Operator = {}));
+var WidgetSeverity;
+(function (WidgetSeverity) {
+    WidgetSeverity["BLACK"] = "valtimo-severity__black";
+    WidgetSeverity["GREEN"] = "valtimo-severity__green";
+    WidgetSeverity["YELLOW"] = "valtimo-severity__yellow";
+    WidgetSeverity["ORANGE"] = "valtimo-severity__orange";
+    WidgetSeverity["RED"] = "valtimo-severity__red";
+})(WidgetSeverity || (WidgetSeverity = {}));
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1252,13 +1124,13 @@ class CaseCountConfigurationComponent {
             });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountConfigurationComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$2.DocumentService }, { token: i1$1.TranslateService }, { token: WidgetTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: CaseCountConfigurationComponent, selector: "ng-component", inputs: { dataSourceKey: "dataSourceKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-count-configuration-form\"\n  *ngIf=\"{documentItems: documentItems$ | async, operatorItems: operatorItems$} as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'conditionsHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"defaultConditionValues$ | async\"\n      [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n      [dropdownItems]=\"operatorItems$ | async\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyDropdownValue\"\n      (allValuesValidEvent)=\"onAllConditionsValid($event)\"\n      (valueChange)=\"conditionsValueChange($event)\"\n      carbonTheme=\"white\"\n    ></valtimo-carbon-multi-input>\n  </div>\n</form>\n", styles: ["::ng-deep .case-count-configuration-form .conditions-label{margin-bottom:16px}::ng-deep .case-count-configuration-form .conditions-multi-input .cds--form__helper-text{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i4$1.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i4$1.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i4.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountConfigurationComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$2.DocumentService }, { token: i3$1.TranslateService }, { token: WidgetTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: CaseCountConfigurationComponent, selector: "ng-component", inputs: { dataSourceKey: "dataSourceKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-count-configuration-form\"\n  *ngIf=\"{documentItems: documentItems$ | async, operatorItems: operatorItems$} as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'conditionsHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"defaultConditionValues$ | async\"\n      [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n      [dropdownItems]=\"operatorItems$ | async\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyDropdownValue\"\n      (allValuesValidEvent)=\"onAllConditionsValid($event)\"\n      (valueChange)=\"conditionsValueChange($event)\"\n    ></valtimo-carbon-multi-input>\n  </div>\n</form>\n", styles: ["::ng-deep .case-count-configuration-form .conditions-label{margin-bottom:16px}::ng-deep .case-count-configuration-form .conditions-multi-input .cds--form__helper-text{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "component", type: i5.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-count-configuration-form\"\n  *ngIf=\"{documentItems: documentItems$ | async, operatorItems: operatorItems$} as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'conditionsHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"defaultConditionValues$ | async\"\n      [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n      [dropdownItems]=\"operatorItems$ | async\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyDropdownValue\"\n      (allValuesValidEvent)=\"onAllConditionsValid($event)\"\n      (valueChange)=\"conditionsValueChange($event)\"\n      carbonTheme=\"white\"\n    ></valtimo-carbon-multi-input>\n  </div>\n</form>\n", styles: ["::ng-deep .case-count-configuration-form .conditions-label{margin-bottom:16px}::ng-deep .case-count-configuration-form .conditions-multi-input .cds--form__helper-text{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$2.DocumentService }, { type: i1$1.TranslateService }, { type: WidgetTranslationService }], propDecorators: { dataSourceKey: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-count-configuration-form\"\n  *ngIf=\"{documentItems: documentItems$ | async, operatorItems: operatorItems$} as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'conditionsHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"defaultConditionValues$ | async\"\n      [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n      [dropdownItems]=\"operatorItems$ | async\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyDropdownValue\"\n      (allValuesValidEvent)=\"onAllConditionsValid($event)\"\n      (valueChange)=\"conditionsValueChange($event)\"\n    ></valtimo-carbon-multi-input>\n  </div>\n</form>\n", styles: ["::ng-deep .case-count-configuration-form .conditions-label{margin-bottom:16px}::ng-deep .case-count-configuration-form .conditions-multi-input .cds--form__helper-text{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$2.DocumentService }, { type: i3$1.TranslateService }, { type: WidgetTranslationService }], propDecorators: { dataSourceKey: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1300,6 +1172,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -1333,7 +1237,7 @@ const caseCountDataSourceSpecification = {
             operator: 'Operator',
             value: 'Wert',
             conditions: 'Bedingungen',
-            conditionsHelperText: "Geben Sie optionale Bedingungen zum Abrufen der Anzahl der Fälle für den ausgewählten Falltyp an. Zum Beispiel: 'case:createdBy', 'Gleich', 'test@test.com'.",
+            conditionsHelperText: "Geben Sie optionale Bedingungen zum Abrufen der Anzahl der Fälle für den ausgewählten Falltyp an. Zum Beispiel: 'case:createdBy', 'Gleich', 'test@test.com'. Zum Vergleichen mit leeren Werten kann als Wert '${null}' eingegeben werden. Zum Vergleichen mit dem aktuellen Datum kann als Wert '${localDateTimeNow}' eingegeben werden. Damit wird beispielsweise auch folgende Logik unterstützt: '${localDateTimeNow.minusWeeks(2)}'.",
             addCondition: 'Bedingung hinzufügen',
         },
         en: {
@@ -1350,7 +1254,7 @@ const caseCountDataSourceSpecification = {
             operator: 'Operator',
             value: 'Value',
             conditions: 'Conditions',
-            conditionsHelperText: "Specify optional conditions for retrieving the number of cases for the selected case type. For example: 'case:createdBy', 'Equal to', 'test@test.com'.",
+            conditionsHelperText: "Specify optional conditions for retrieving the number of cases for the selected case type. For example: 'case:createdBy', 'Equal to', 'test@test.com'. To compare with empty values, '${null}' can be entered as a value. To compare with the current date, '${localDateTimeNow}' can be entered as a value. This also supports, for example, the following logic: '${localDateTimeNow.minusWeeks(2)}'.",
             addCondition: 'Add condition',
         },
         nl: {
@@ -1367,7 +1271,7 @@ const caseCountDataSourceSpecification = {
             operator: 'Operator',
             value: 'Waarde',
             conditions: 'Condities',
-            conditionsHelperText: "Geef optionele condities op voor het ophalen van het aantal zaken voor het geselecteerde zaaktype. Bijvoorbeeld: 'case:createdBy', 'Gelijk aan', 'test@test.com'.",
+            conditionsHelperText: "Geef optionele condities op voor het ophalen van het aantal zaken voor het geselecteerde zaaktype. Bijvoorbeeld: 'case:createdBy', 'Gelijk aan', 'test@test.com'. Voor het vergelijken met lege waardes kan '${null}' ingevuld worden als waarde. Voor het vergelijken met de huidige datum kan '${localDateTimeNow}' ingevuld worden als waarde. Deze ondersteunt ook bijvoorbeeld de volgende logica: '${localDateTimeNow.minusWeeks(2)}'.",
             addCondition: 'Conditie toevoegen',
         },
     },
@@ -1455,6 +1359,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class CaseCountsConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    get queryItems() {
+        return this.form.get('queryItems');
+    }
+    get queryItemsValue$() {
+        return this.queryItems.valueChanges.pipe(startWith(this.queryItems.value || []));
+    }
+    get queryItemsList$() {
+        return this.queryItemsValue$.pipe(map(queryItemsValue => queryItemsValue.map(() => null)), distinctUntilChanged((previous, current) => isEqual(previous, current)));
+    }
+    get documentDefinition() {
+        return this.form.get('documentDefinition');
+    }
+    get formDisabled() {
+        return this.form.disabled;
+    }
+    set prefillConfiguration(configurationValue) {
+        if (!configurationValue)
+            return;
+        this.documentDefinitionSelected({
+            item: {
+                content: configurationValue.documentDefinition,
+            },
+        });
+        this.documentDefinition.patchValue(configurationValue.documentDefinition);
+        this.queryItems.patchValue(this.queryItemsToMultiInputValues(configurationValue.queryItems));
+    }
+    constructor(fb, documentService, translateService, widgetTranslationService, iconService) {
+        this.fb = fb;
+        this.documentService = documentService;
+        this.translateService = translateService;
+        this.widgetTranslationService = widgetTranslationService;
+        this.iconService = iconService;
+        this._EMPTY_QUERY_ITEM_VALUE = {
+            label: '',
+            queryConditions: [{ key: '', value: '', dropdown: '' }],
+        };
+        this.form = this.fb.group({
+            documentDefinition: this.fb.control(null, [Validators.required]),
+            queryItems: this.fb.control([this._EMPTY_QUERY_ITEM_VALUE, this._EMPTY_QUERY_ITEM_VALUE], [this.queryItemsValidator()]),
+        });
+        this.configurationEvent = new EventEmitter();
+        this._selectedDocumentDefinition$ = new BehaviorSubject('');
+        this.documentItems$ = combineLatest([
+            this.documentService.getAllDefinitions(),
+            this._selectedDocumentDefinition$,
+        ]).pipe(map(([documentDefinitions, selectedDocumentDefintion]) => documentDefinitions.content.map(definition => ({
+            content: definition.id.name,
+            selected: definition.id.name === selectedDocumentDefintion,
+        }))));
+        this._OPERATORS = [
+            Operator.NOT_EQUAL_TO,
+            Operator.EQUAL_TO,
+            Operator.GREATER_THAN,
+            Operator.GREATER_THAN_OR_EQUAL_TO,
+            Operator.LESS_THAN,
+            Operator.LESS_THAN_OR_EQUAL_TO,
+        ];
+        this.operatorItems$ = this.translateService
+            .stream('key')
+            .pipe(map(() => this._OPERATORS.map(operator => ({
+            id: operator,
+            content: this.widgetTranslationService.instant(operator, this.dataSourceKey),
+            selected: false,
+        }))));
+        this._subscriptions = new Subscription();
+        this.iconService.registerAll([Add16, TrashCan16]);
+    }
+    ngOnInit() {
+        this.openFormSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    documentDefinitionSelected(documentDefinitionItem) {
+        if (!documentDefinitionItem) {
+            return;
+        }
+        this._selectedDocumentDefinition$.next(documentDefinitionItem?.item?.content);
+    }
+    conditionsValueChange(index, values) {
+        const currentQueryItemsValues = this.queryItems.value;
+        if (isEqual(currentQueryItemsValues[index].queryConditions, values))
+            return;
+        this.queryItems.patchValue(currentQueryItemsValues.map((item, itemIndex) => itemIndex === index ? { ...item, queryConditions: values } : item));
+    }
+    labelValueChange(index, value) {
+        const currentQueryItemsValues = this.queryItems.value;
+        if (currentQueryItemsValues[index].label === value)
+            return;
+        this.queryItems.patchValue(currentQueryItemsValues.map((item, itemIndex) => itemIndex === index ? { ...item, label: value } : item));
+    }
+    addQueryItem() {
+        const currentQueryItems = this.queryItems.value;
+        this.queryItems.patchValue([...currentQueryItems, this._EMPTY_QUERY_ITEM_VALUE]);
+    }
+    deleteCount(i) {
+        const currentQueryItems = this.queryItems.value;
+        this.queryItems.patchValue(currentQueryItems.filter((_, index) => index !== i));
+    }
+    openFormSubscription() {
+        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
+            this.configurationEvent.emit({
+                valid: this.form.valid,
+                data: {
+                    ...formValue,
+                    queryItems: this.multiInputValuesToQueryItems(formValue.queryItems),
+                },
+            });
+        }));
+    }
+    queryItemsToMultiInputValues(queryItems) {
+        return queryItems.map(queryItem => ({
+            ...queryItem,
+            queryConditions: queryItem.queryConditions.map(condition => ({
+                key: condition.queryPath,
+                dropdown: condition.queryOperator,
+                value: condition.queryValue,
+            })),
+        }));
+    }
+    multiInputValuesToQueryItems(multiInputValues) {
+        return multiInputValues.map(queryItem => ({
+            ...queryItem,
+            queryConditions: queryItem.queryConditions.map(condition => ({
+                queryPath: condition.key,
+                queryOperator: condition.dropdown,
+                queryValue: condition.value,
+            })),
+        }));
+    }
+    queryItemsValidator() {
+        return (control) => {
+            const queryItems = control.value;
+            const validQueryItems = queryItems.filter(item => {
+                const validLabel = !!item.label;
+                const validConditions = item.queryConditions.filter(condition => !!condition.value && !!condition.key && !!condition.dropdown);
+                return (validLabel &&
+                    validConditions.length > 0 &&
+                    item.queryConditions.length === validConditions.length);
+            });
+            return validQueryItems.length > 1 && validQueryItems.length === queryItems.length
+                ? null
+                : {
+                    invalidQueryItems: 'invalid',
+                };
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountsConfigurationComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$2.DocumentService }, { token: i3$1.TranslateService }, { token: WidgetTranslationService }, { token: i5.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: CaseCountsConfigurationComponent, selector: "ng-component", inputs: { dataSourceKey: "dataSourceKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-counts-configuration-form\"\n  *ngIf=\"{\n    documentItems: documentItems$ | async,\n    operatorItems: operatorItems$,\n    queryItemsValue: queryItemsValue$ | async\n  } as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <cds-label class=\"conditions__label\">{{\n    'counts' | widgetTranslate: dataSourceKey | async\n  }}</cds-label>\n\n  <p class=\"conditions__helper-text cds--form__helper-text\">\n    {{ 'countsHelperText' | widgetTranslate: dataSourceKey | async }}\n  </p>\n\n  @for (_ of queryItemsList$ | async; track $index; let i = $index) {\n    <cds-tile class=\"count-tile\" cdsLayer=\"1\">\n      <div class=\"count-tile__input\">\n        <v-input\n          [title]=\"'countTitle' | widgetTranslate: dataSourceKey | async\"\n          [margin]=\"true\"\n          [defaultValue]=\"obs.queryItemsValue[i]?.label\"\n          [disabled]=\"formDisabled\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"labelValueChange(i, $event)\"\n        >\n        </v-input>\n\n        <valtimo-carbon-multi-input\n          [disabled]=\"formDisabled\"\n          [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n          [defaultValues]=\"obs.queryItemsValue[i]?.queryConditions\"\n          [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n          [dropdownItems]=\"operatorItems$ | async\"\n          [fullWidth]=\"true\"\n          [initialAmountOfRows]=\"1\"\n          [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n          [minimumAmountOfRows]=\"1\"\n          [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n          type=\"keyDropdownValue\"\n          (valueChange)=\"conditionsValueChange(i, $event)\"\n        ></valtimo-carbon-multi-input>\n      </div>\n\n      <div class=\"count-tile__delete-button\">\n        <cds-icon-button\n          [disabled]=\"formDisabled || i < 2\"\n          (click)=\"deleteCount(i)\"\n          kind=\"danger\"\n          size=\"sm\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </cds-tile>\n  }\n\n  <button\n    class=\"add-count-button\"\n    cdsButton=\"primary\"\n    [disabled]=\"formDisabled\"\n    (click)=\"addQueryItem()\"\n  >\n    {{ 'Aantal toevoegen' }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: ["::ng-deep .case-counts-configuration-form .conditions__label{display:flex;margin-bottom:8px}::ng-deep .case-counts-configuration-form .conditions__helper-text{font-style:italic;display:flex;margin-bottom:16px}::ng-deep .case-counts-configuration-form .count-tile{display:flex;flex-direction:row;gap:32px;justify-content:space-between;margin-bottom:16px}::ng-deep .case-counts-configuration-form .count-tile__input{width:100%}::ng-deep .case-counts-configuration-form .add-count-button{margin-bottom:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$1.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$", "carbonTheme", "placeholder"], outputs: ["valueChange"] }, { kind: "component", type: i5.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "directive", type: i5.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i5.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "component", type: i5.Tile, selector: "cds-tile, ibm-tile", inputs: ["theme"] }, { kind: "directive", type: i5.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i5.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountsConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-counts-configuration-form\"\n  *ngIf=\"{\n    documentItems: documentItems$ | async,\n    operatorItems: operatorItems$,\n    queryItemsValue: queryItemsValue$ | async\n  } as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <cds-label class=\"conditions__label\">{{\n    'counts' | widgetTranslate: dataSourceKey | async\n  }}</cds-label>\n\n  <p class=\"conditions__helper-text cds--form__helper-text\">\n    {{ 'countsHelperText' | widgetTranslate: dataSourceKey | async }}\n  </p>\n\n  @for (_ of queryItemsList$ | async; track $index; let i = $index) {\n    <cds-tile class=\"count-tile\" cdsLayer=\"1\">\n      <div class=\"count-tile__input\">\n        <v-input\n          [title]=\"'countTitle' | widgetTranslate: dataSourceKey | async\"\n          [margin]=\"true\"\n          [defaultValue]=\"obs.queryItemsValue[i]?.label\"\n          [disabled]=\"formDisabled\"\n          [required]=\"true\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"labelValueChange(i, $event)\"\n        >\n        </v-input>\n\n        <valtimo-carbon-multi-input\n          [disabled]=\"formDisabled\"\n          [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n          [defaultValues]=\"obs.queryItemsValue[i]?.queryConditions\"\n          [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n          [dropdownItems]=\"operatorItems$ | async\"\n          [fullWidth]=\"true\"\n          [initialAmountOfRows]=\"1\"\n          [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n          [minimumAmountOfRows]=\"1\"\n          [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n          type=\"keyDropdownValue\"\n          (valueChange)=\"conditionsValueChange(i, $event)\"\n        ></valtimo-carbon-multi-input>\n      </div>\n\n      <div class=\"count-tile__delete-button\">\n        <cds-icon-button\n          [disabled]=\"formDisabled || i < 2\"\n          (click)=\"deleteCount(i)\"\n          kind=\"danger\"\n          size=\"sm\"\n        >\n          <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </cds-tile>\n  }\n\n  <button\n    class=\"add-count-button\"\n    cdsButton=\"primary\"\n    [disabled]=\"formDisabled\"\n    (click)=\"addQueryItem()\"\n  >\n    {{ 'Aantal toevoegen' }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: ["::ng-deep .case-counts-configuration-form .conditions__label{display:flex;margin-bottom:8px}::ng-deep .case-counts-configuration-form .conditions__helper-text{font-style:italic;display:flex;margin-bottom:16px}::ng-deep .case-counts-configuration-form .count-tile{display:flex;flex-direction:row;gap:32px;justify-content:space-between;margin-bottom:16px}::ng-deep .case-counts-configuration-form .count-tile__input{width:100%}::ng-deep .case-counts-configuration-form .add-count-button{margin-bottom:16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$2.DocumentService }, { type: i3$1.TranslateService }, { type: WidgetTranslationService }, { type: i5.IconService }], propDecorators: { dataSourceKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], prefillConfiguration: [{
+                type: Input
+            }], configurationEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1488,36 +1563,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 
-/*
- * Copyright 2015-2024 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class BarChartDisplayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BarChartDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: BarChartDisplayComponent, selector: "valtimo-bar-chart-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\nbar chart works\n", styles: [":host{display:flex;padding:20px;width:100%;height:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BarChartDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-bar-chart-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\nbar chart works\n", styles: [":host{display:flex;padding:20px;width:100%;height:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { displayTypeKey: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], displayTypeProperties: [{
-                type: Input
-            }] } });
-
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -1565,23 +1610,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const barChartSpecification = {
-    displayTypeKey: 'bar-chart',
-    displayComponent: BarChartDisplayComponent,
-    width: 1,
-    height: 2,
+const caseCountsDataSourceSpecification = {
+    dataSourceKey: 'case-counts',
+    configurationComponent: CaseCountsConfigurationComponent,
     translations: {
-        nl: {
-            title: 'Staafdiagram',
+        de: {
+            title: 'Mehrere Fallanzahllen',
+            documentDefinition: 'Falltyp (erforderlich)',
+            documentDefinitionHelperText: 'Der Falltyp, für den die Anzahllen abgeruft wirden',
+            '!=': 'Nicht gleichzusetzen mit',
+            '==': 'Gleich',
+            '>': 'Größer als',
+            '>=': 'Größer als oder gleich wie',
+            '<': 'Weniger als',
+            '<=': 'Gleich oder kleiner als',
+            path: 'Pfad',
+            operator: 'Operator',
+            value: 'Wert',
+            counts: 'Anzahllen',
+            countsHelperText: "Geben Sie eine oder mehrere Bedingungen für mindestens zwei Anzahllen an. Zum Beispiel: 'case:createdBy', 'Gleich', 'test@test.com'. Zum Vergleichen mit leeren Werten kann als Wert '${null}' eingegeben werden. Zum Vergleichen mit dem aktuellen Datum kann als Wert '${localDateTimeNow}' eingegeben werden. Damit wird beispielsweise auch folgende Logik unterstützt: '${localDateTimeNow.minusWeeks(2)}'.",
+            addCondition: 'Bedingung hinzufügen',
+            countTitle: 'Anzahltitel',
         },
         en: {
-            title: 'Bar chart',
+            title: 'Multiple case counts',
+            documentDefinition: 'Case type (required)',
+            documentDefinitionHelperText: 'The case type for which the counts are retrieved',
+            '!=': 'Not equal to',
+            '==': 'Equal to',
+            '>': 'Greater than',
+            '>=': 'Greater than or equal to',
+            '<': 'Less than',
+            '<=': 'Less than or equal to',
+            path: 'Path (required)',
+            operator: 'Operator',
+            value: 'Value',
+            counts: 'Counts',
+            countsHelperText: "Specify one or more conditions for each count that should be displayed. For example: 'case:createdBy', 'Equal to', 'test@test.com'. Configure at least two counts and at least one condition per count.",
+            addCondition: 'Add condition',
+            countTitle: 'Count title',
         },
-        de: {
-            title: 'Balkendiagramm',
+        nl: {
+            title: 'Meerdere dossieraantallen',
+            documentDefinition: 'Dossiertype (vereist)',
+            documentDefinitionHelperText: 'Het dossiertype waarvoor de aantallen worden opgehaald',
+            '!=': 'Niet gelijk aan',
+            '==': 'Gelijk aan',
+            '>': 'Groter dan',
+            '>=': 'Groter dan of gelijk aan',
+            '<': 'Minder dan',
+            '<=': 'Minder dan of gelijk aan',
+            path: 'Pad',
+            operator: 'Operator',
+            value: 'Waarde',
+            counts: 'Aantallen',
+            countsHelperText: "Geef een of meer condities op voor een minimum van twee aantallen. Bijvoorbeeld: 'case:createdBy', 'Gelijk aan', 'test@test.com'. Voor het vergelijken met lege waardes kan '${null}' ingevuld worden als waarde. Voor het vergelijken met de huidige datum kan '${localDateTimeNow}' ingevuld worden als waarde. Deze ondersteunt ook bijvoorbeeld de volgende logica: '${localDateTimeNow.minusWeeks(2)}'.",
+            addCondition: 'Conditie toevoegen',
+            countTitle: 'Aantaltitel',
         },
     },
-    requiredDataFeatures: [],
 };
 
 /*
@@ -1599,18 +1686,54 @@ const barChartSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class BarChartModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BarChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: BarChartModule, declarations: [BarChartDisplayComponent], imports: [CommonModule], exports: [BarChartDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BarChartModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: barChartSpecification, multi: true }], imports: [CommonModule] }); }
+class CaseCountsDataSourceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountsDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: CaseCountsDataSourceModule, declarations: [CaseCountsConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule$1,
+            DropdownModule,
+            CarbonMultiInputModule,
+            InputModule$1,
+            ButtonModule,
+            TilesModule,
+            LayerModule,
+            IconModule], exports: [CaseCountsConfigurationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountsDataSourceModule, providers: [
+            { provide: DATA_SOURCE_TOKEN, useValue: caseCountsDataSourceSpecification, multi: true },
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule$1,
+            DropdownModule,
+            CarbonMultiInputModule,
+            InputModule$1,
+            ButtonModule,
+            TilesModule,
+            LayerModule,
+            IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BarChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseCountsDataSourceModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [BarChartDisplayComponent],
-                    imports: [CommonModule],
-                    exports: [BarChartDisplayComponent],
-                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: barChartSpecification, multi: true }],
+                    declarations: [CaseCountsConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule$1,
+                        DropdownModule,
+                        CarbonMultiInputModule,
+                        InputModule$1,
+                        ButtonModule,
+                        TilesModule,
+                        LayerModule,
+                        IconModule,
+                    ],
+                    exports: [CaseCountsConfigurationComponent],
+                    providers: [
+                        { provide: DATA_SOURCE_TOKEN, useValue: caseCountsDataSourceSpecification, multi: true },
+                    ],
                 }]
         }] });
 
@@ -1645,7 +1768,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class BigNumberConfigurationComponent {
+class CaseGroupByConfigurationComponent {
+    get documentDefinition() {
+        return this.form.get('documentDefinition');
+    }
+    get path() {
+        return this.form.get('path');
+    }
+    get queryConditions() {
+        return this.form.get('queryConditions');
+    }
+    get enum() {
+        return this.form.get('enum');
+    }
+    get formDisabled() {
+        return this.form.disabled;
+    }
+    get formValue$() {
+        return this.form.valueChanges.pipe(startWith(this.form.value));
+    }
     set disabled(disabledValue) {
         if (disabledValue) {
             this.form.disable();
@@ -1654,35 +1795,444 @@ class BigNumberConfigurationComponent {
             this.form.enable();
         }
     }
-    get title() {
-        return this.form.get('title');
-    }
-    get subtitle() {
-        return this.form.get('subtitle');
-    }
-    get label() {
-        return this.form.get('label');
-    }
-    get useKPI() {
-        return this.form.get('useKPI');
-    }
-    get lowSeverityThreshold() {
-        return this.form.get('lowSeverityThreshold');
-    }
-    get mediumSeverityThreshold() {
-        return this.form.get('mediumSeverityThreshold');
-    }
-    get highSeverityThreshold() {
-        return this.form.get('highSeverityThreshold');
-    }
     set prefillConfiguration(configurationValue) {
-        if (configurationValue) {
-            this.title.setValue(configurationValue.title || '');
-            this.subtitle.setValue(configurationValue.subtitle || '');
-            this.label.setValue(configurationValue.label || '');
-            this.useKPI.setValue(configurationValue.useKPI || false);
-            this.lowSeverityThreshold.setValue(configurationValue.lowSeverityThreshold || null);
-            this.mediumSeverityThreshold.setValue(configurationValue.mediumSeverityThreshold || null);
+        if (!configurationValue)
+            return;
+        this.documentDefinitionSelected({
+            item: {
+                content: configurationValue.documentDefinition,
+            },
+        });
+        this.queryConditions.patchValue(this.queryConditionsToMultiInputValues(configurationValue.queryConditions));
+        this.enum.patchValue(this.enumToMultiInputValues(configurationValue.enum));
+        this.path.patchValue(configurationValue.path);
+    }
+    constructor(fb, documentService, translateService, widgetTranslationService) {
+        this.fb = fb;
+        this.documentService = documentService;
+        this.translateService = translateService;
+        this.widgetTranslationService = widgetTranslationService;
+        this.form = this.fb.group({
+            documentDefinition: this.fb.control(null, [Validators.required]),
+            path: this.fb.control(null, [Validators.required]),
+            queryConditions: this.fb.control([], [this.queryConditionsValidator()]),
+            enum: this.fb.control([], [this.enumValidator()]),
+        });
+        this._selectedDocumentDefinition$ = new BehaviorSubject('');
+        this.documentItems$ = combineLatest([
+            this.documentService.getAllDefinitions(),
+            this._selectedDocumentDefinition$,
+        ]).pipe(map(([documentDefinitions, selectedDocumentDefintion]) => documentDefinitions.content.map(definition => ({
+            content: definition.id.name,
+            selected: definition.id.name === selectedDocumentDefintion,
+        }))));
+        this._OPERATORS = [
+            Operator.NOT_EQUAL_TO,
+            Operator.EQUAL_TO,
+            Operator.GREATER_THAN,
+            Operator.GREATER_THAN_OR_EQUAL_TO,
+            Operator.LESS_THAN,
+            Operator.LESS_THAN_OR_EQUAL_TO,
+        ];
+        this.operatorItems$ = this.translateService
+            .stream('key')
+            .pipe(map(() => this._OPERATORS.map(operator => ({
+            id: operator,
+            content: this.widgetTranslationService.instant(operator, this.dataSourceKey),
+            selected: false,
+        }))));
+        this.configurationEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.openFormSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    documentDefinitionSelected(documentDefinitionItem) {
+        if (!documentDefinitionItem) {
+            return;
+        }
+        this._selectedDocumentDefinition$.next(documentDefinitionItem?.item?.content);
+        this.documentDefinition.setValue(documentDefinitionItem?.item?.content);
+    }
+    conditionsValueChange(values) {
+        if (!values)
+            return;
+        const currentValue = this.queryConditions.value;
+        if (isEqual(values, currentValue))
+            return;
+        this.queryConditions.patchValue(values);
+    }
+    enumValueChange(values) {
+        if (!values)
+            return;
+        const currentValue = this.enum.value;
+        if (isEqual(values, currentValue))
+            return;
+        this.enum.patchValue(values);
+    }
+    openFormSubscription() {
+        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
+            this.configurationEvent.emit({
+                valid: this.form.valid,
+                data: {
+                    ...formValue,
+                    queryConditions: this.multiInputValuesToQueryConditions(formValue.queryConditions),
+                    enum: this.multiInputValuesToEnum(formValue.enum),
+                },
+            });
+        }));
+    }
+    queryConditionsValidator() {
+        return (control) => {
+            const queryConditions = control.value;
+            const validConditions = queryConditions.filter(condition => !!condition.value && !!condition.key && !!condition.dropdown);
+            return validConditions.length === queryConditions.length
+                ? null
+                : {
+                    invalidQueryItems: 'invalid',
+                };
+        };
+    }
+    enumValidator() {
+        return (control) => {
+            const enumeration = control.value || [];
+            const enumLength = enumeration.length;
+            const validEnumKeysLength = enumeration.filter(entry => !!entry.key).length;
+            const validEnumValuesLength = enumeration.filter(entry => !!entry.value).length;
+            return enumLength === validEnumKeysLength && enumLength === validEnumValuesLength
+                ? null
+                : {
+                    invalidEnum: 'invalid',
+                };
+        };
+    }
+    enumToMultiInputValues(enumeration) {
+        return Object.keys(enumeration || {}).reduce((acc, key) => [...acc, { key, value: enumeration[key] }], []);
+    }
+    multiInputValuesToEnum(values) {
+        return (values || []).reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {});
+    }
+    queryConditionsToMultiInputValues(queryConditions) {
+        return (queryConditions || []).map(condition => ({
+            key: condition.queryPath,
+            dropdown: condition.queryOperator,
+            value: condition.queryValue,
+        }));
+    }
+    multiInputValuesToQueryConditions(values) {
+        return (values || []).map(condition => ({
+            queryPath: condition.key,
+            queryOperator: condition.dropdown,
+            queryValue: condition.value,
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseGroupByConfigurationComponent, deps: [{ token: i1$3.FormBuilder }, { token: i2$2.DocumentService }, { token: i3$1.TranslateService }, { token: WidgetTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: CaseGroupByConfigurationComponent, selector: "ng-component", inputs: { dataSourceKey: "dataSourceKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-count-configuration-form\"\n  *ngIf=\"{\n    documentItems: documentItems$ | async,\n    operatorItems: operatorItems$,\n    formValue: formValue$ | async\n  } as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'pathHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'pathHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"path.dirty && path.invalid\"\n    >\n      {{ 'path' | widgetTranslate: dataSourceKey | async }}\n\n      <input cdsText formControlName=\"path\" [invalid]=\"path.dirty && path.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'conditionsHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"obs.formValue?.queryConditions\"\n      [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n      [dropdownItems]=\"operatorItems$ | async\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyDropdownValue\"\n      (valueChange)=\"conditionsValueChange($event)\"\n    ></valtimo-carbon-multi-input>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'enumHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'enum' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addDisplay' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"obs.formValue?.enum\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'displayValue' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyValue\"\n      (valueChange)=\"enumValueChange($event)\"\n    ></valtimo-carbon-multi-input>\n  </div>\n</form>\n", styles: ["::ng-deep .case-count-configuration-form .conditions-label{margin-bottom:16px}::ng-deep .case-count-configuration-form .conditions-multi-input .cds--form__helper-text{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i5.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i5.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: i1$1.CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: ["name", "title", "titleTranslationKey", "type", "arbitraryValueAmount", "arbitraryAmountTitles", "initialAmountOfRows", "minimumAmountOfRows", "maxRows", "addRowText", "addRowTranslationKey", "deleteRowText", "deleteRowTranslationKey", "disabled", "defaultValues", "margin", "tooltip", "required", "keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "hideDeleteButton", "hideAddButton", "dropdownItems", "dropdownWidth", "fullWidth", "carbonTheme"], outputs: ["valueChange", "allValuesValidEvent"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseGroupByConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form\n  class=\"case-count-configuration-form\"\n  *ngIf=\"{\n    documentItems: documentItems$ | async,\n    operatorItems: operatorItems$,\n    formValue: formValue$ | async\n  } as obs\"\n  [formGroup]=\"form\"\n>\n  <div class=\"form__element\">\n    <cds-dropdown\n      [appendInline]=\"true\"\n      formControlName=\"documentDefinition\"\n      [helperText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'documentDefinitionHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"documentDefinition.dirty && documentDefinition.invalid\"\n      [label]=\"'documentDefinition' | widgetTranslate: dataSourceKey | async\"\n      (selected)=\"documentDefinitionSelected($event)\"\n    >\n      <cds-dropdown-list [items]=\"obs?.documentItems || []\" type=\"multi\"></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'pathHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalidText]=\"'pathHelperText' | widgetTranslate: dataSourceKey | async\"\n      [invalid]=\"path.dirty && path.invalid\"\n    >\n      {{ 'path' | widgetTranslate: dataSourceKey | async }}\n\n      <input cdsText formControlName=\"path\" [invalid]=\"path.dirty && path.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'conditionsHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'conditions' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addCondition' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"obs.formValue?.queryConditions\"\n      [dropdownColumnTitle]=\"'operator' | widgetTranslate: dataSourceKey | async\"\n      [dropdownItems]=\"operatorItems$ | async\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'path' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyDropdownValue\"\n      (valueChange)=\"conditionsValueChange($event)\"\n    ></valtimo-carbon-multi-input>\n  </div>\n\n  <div class=\"form__element conditions-multi-input\">\n    <cds-label\n      [helperText]=\"'enumHelperText' | widgetTranslate: dataSourceKey | async\"\n      class=\"conditions-label\"\n      >{{ 'enum' | widgetTranslate: dataSourceKey | async }}</cds-label\n    >\n    <valtimo-carbon-multi-input\n      [addRowText]=\"'addDisplay' | widgetTranslate: dataSourceKey | async\"\n      [defaultValues]=\"obs.formValue?.enum\"\n      [fullWidth]=\"true\"\n      [initialAmountOfRows]=\"0\"\n      [keyColumnTitle]=\"'value' | widgetTranslate: dataSourceKey | async\"\n      [minimumAmountOfRows]=\"0\"\n      [valueColumnTitle]=\"'displayValue' | widgetTranslate: dataSourceKey | async\"\n      type=\"keyValue\"\n      (valueChange)=\"enumValueChange($event)\"\n    ></valtimo-carbon-multi-input>\n  </div>\n</form>\n", styles: ["::ng-deep .case-count-configuration-form .conditions-label{margin-bottom:16px}::ng-deep .case-count-configuration-form .conditions-multi-input .cds--form__helper-text{font-style:italic}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$2.DocumentService }, { type: i3$1.TranslateService }, { type: WidgetTranslationService }], propDecorators: { dataSourceKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], prefillConfiguration: [{
+                type: Input
+            }], configurationEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const caseGroupByDataSourceSpecification = {
+    dataSourceKey: 'case-group-by',
+    configurationComponent: CaseGroupByConfigurationComponent,
+    translations: {
+        de: {
+            title: 'Gruppe',
+            documentDefinition: 'Falltyp (erforderlich)',
+            documentDefinitionHelperText: 'Der Falltyp, für den die Anzahl abgerufen wird',
+            '!=': 'Nicht gleichzusetzen mit',
+            '==': 'Gleich',
+            '>': 'Größer als',
+            '>=': 'Größer als oder gleich wie',
+            '<': 'Weniger als',
+            '<=': 'Gleich oder kleiner als',
+            path: 'Pfad',
+            pathHelperText: 'Der Pfad innerhalb der Fall, deren Werte gruppiert werden sollen',
+            operator: 'Operator',
+            value: 'Wert',
+            conditions: 'Bedingungen',
+            conditionsHelperText: "Geben Sie optionale Bedingungen zum Abrufen der Gruppierung für den ausgewählten Falltyp an. Zum Beispiel: 'case:createdBy', 'Nicht gleichzusetzen mit', 'test@test.com'.",
+            addCondition: 'Bedingung hinzufügen',
+            enum: 'Anzeige der Werte',
+            enumHelperText: "Einige Werte aus der Datenbank sind für den Endbenutzer nicht lesbar. Geben Sie hier an, wie die Werte angezeigt werden sollen. Beispiel: Wert: 'anfrage-gesendet', Anzeige: 'Anfrage gesendet'.",
+            displayValue: 'Anzeige',
+            addDisplay: 'Ansicht hinzufügen',
+        },
+        en: {
+            title: 'Group by',
+            documentDefinition: 'Case type (required)',
+            documentDefinitionHelperText: 'The case type for which the count is retrieved',
+            '!=': 'Not equal to',
+            '==': 'Equal to',
+            '>': 'Greater than',
+            '>=': 'Greater than or equal to',
+            '<': 'Less than',
+            '<=': 'Less than or equal to',
+            path: 'Path (required)',
+            pathHelperText: 'The path within the case of which the values should be grouped',
+            operator: 'Operator',
+            value: 'Value',
+            conditions: 'Conditions',
+            conditionsHelperText: "Specify optional conditions for retrieving the grouping for the selected case type. For example: 'case:createdBy', 'Not equal to', 'test@test.com'. To compare with empty values, '${null}' can be entered as a value. To compare with the current date, '${localDateTimeNow}' can be entered as a value. This also supports, for example, the following logic: '${localDateTimeNow.minusWeeks(2)}'.",
+            addCondition: 'Add condition',
+            enum: 'Display of values',
+            enumHelperText: "Some values from the database will not be readable by the end user. Specify here how the values should be displayed. For example: Value: 'request-sent', Display: 'Request sent'.",
+            displayValue: 'Display',
+            addDisplay: 'Add display',
+        },
+        nl: {
+            title: 'Groepering',
+            documentDefinition: 'Dossiertype (vereist)',
+            documentDefinitionHelperText: 'Het dossiertype waarvoor de telling wordt opgehaald',
+            '!=': 'Niet gelijk aan',
+            '==': 'Gelijk aan',
+            '>': 'Groter dan',
+            '>=': 'Groter dan of gelijk aan',
+            '<': 'Minder dan',
+            '<=': 'Minder dan of gelijk aan',
+            path: 'Pad',
+            pathHelperText: 'Het pad binnen het dossier waarvan de waardes gegroepeerd moeten worden',
+            operator: 'Operator',
+            value: 'Waarde',
+            conditions: 'Condities',
+            conditionsHelperText: "Geef optionele condities op voor het ophalen van de groepering voor het geselecteerde dossiertype. Bijvoorbeeld: 'case:createdBy', 'Niet gelijk aan', 'test@test.com'. Voor het vergelijken met lege waardes kan '${null}' ingevuld worden als waarde. Voor het vergelijken met de huidige datum kan '${localDateTimeNow}' ingevuld worden als waarde. Deze ondersteunt ook bijvoorbeeld de volgende logica: '${localDateTimeNow.minusWeeks(2)}'.",
+            addCondition: 'Conditie toevoegen',
+            enum: 'Weergave van waardes',
+            enumHelperText: "Sommige waardes uit de database zullen niet leesbaar zijn voor de eindgebruiker. Geef hier op hoe de waardes weergegeven moeten worden. Bijvoorbeeld: Waarde: 'aanvraag-verzonden', Weergave: 'Aanvraag verzonden'.",
+            displayValue: 'Weergave',
+            addDisplay: 'Weergave toevoegen',
+        },
+    },
+};
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class CaseGroupByDataSourceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseGroupByDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: CaseGroupByDataSourceModule, declarations: [CaseGroupByConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            DropdownModule,
+            CarbonMultiInputModule], exports: [CaseGroupByConfigurationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseGroupByDataSourceModule, providers: [
+            { provide: DATA_SOURCE_TOKEN, useValue: caseGroupByDataSourceSpecification, multi: true },
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            DropdownModule,
+            CarbonMultiInputModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: CaseGroupByDataSourceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CaseGroupByConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule,
+                        DropdownModule,
+                        CarbonMultiInputModule,
+                    ],
+                    exports: [CaseGroupByConfigurationComponent],
+                    providers: [
+                        { provide: DATA_SOURCE_TOKEN, useValue: caseGroupByDataSourceSpecification, multi: true },
+                    ],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class BigNumberConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    get title() {
+        return this.form.get('title');
+    }
+    get subtitle() {
+        return this.form.get('subtitle');
+    }
+    get label() {
+        return this.form.get('label');
+    }
+    get useKPI() {
+        return this.form.get('useKPI');
+    }
+    get lowSeverityThreshold() {
+        return this.form.get('lowSeverityThreshold');
+    }
+    get mediumSeverityThreshold() {
+        return this.form.get('mediumSeverityThreshold');
+    }
+    get highSeverityThreshold() {
+        return this.form.get('highSeverityThreshold');
+    }
+    set prefillConfiguration(configurationValue) {
+        if (configurationValue) {
+            this.title.setValue(configurationValue.title || '');
+            this.subtitle.setValue(configurationValue.subtitle || '');
+            this.label.setValue(configurationValue.label || '');
+            this.useKPI.setValue(configurationValue.useKPI || false);
+            this.lowSeverityThreshold.setValue(configurationValue.lowSeverityThreshold || null);
+            this.mediumSeverityThreshold.setValue(configurationValue.mediumSeverityThreshold || null);
             this.highSeverityThreshold.setValue(configurationValue.highSeverityThreshold || null);
         }
     }
@@ -1693,49 +2243,387 @@ class BigNumberConfigurationComponent {
             subtitle: this.fb.control(''),
             label: this.fb.control(''),
             useKPI: this.fb.control(false, [Validators.required]),
-            lowSeverityThreshold: this.fb.control(null),
-            mediumSeverityThreshold: this.fb.control(null),
-            highSeverityThreshold: this.fb.control(null),
+            lowSeverityThreshold: this.fb.control(null),
+            mediumSeverityThreshold: this.fb.control(null),
+            highSeverityThreshold: this.fb.control(null),
+        });
+        this.configurationEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.openFormSubscription();
+        this.openKPISubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openFormSubscription() {
+        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
+            this.configurationEvent.emit({ valid: this.form.valid, data: formValue });
+        }));
+    }
+    openKPISubscription() {
+        this._subscriptions.add(this.useKPI.valueChanges.pipe(startWith(this.useKPI.value)).subscribe(useKpi => {
+            const validators = [Validators.required];
+            if (useKpi) {
+                this.lowSeverityThreshold.setValidators(validators);
+                this.mediumSeverityThreshold.setValidators(validators);
+                this.highSeverityThreshold.setValidators(validators);
+            }
+            else {
+                this.lowSeverityThreshold.clearValidators();
+                this.mediumSeverityThreshold.clearValidators();
+                this.highSeverityThreshold.clearValidators();
+            }
+            this.lowSeverityThreshold.updateValueAndValidity();
+            this.mediumSeverityThreshold.updateValueAndValidity();
+            this.highSeverityThreshold.updateValueAndValidity();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: BigNumberConfigurationComponent, selector: "ng-component", inputs: { displayTypeKey: "displayTypeKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-checkbox formControlName=\"useKPI\">\n      {{ 'useKPI' | widgetTranslate: displayTypeKey | async }}\n    </cds-checkbox>\n  </div>\n\n  <div class=\"form__row\" *ngIf=\"useKPI.value\">\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\">\n        {{ 'lowSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\"\n          formControlName=\"lowSeverityThreshold\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\">\n        {{ 'mediumSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"mediumSeverityThreshold\"\n          [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\">\n        {{ 'highSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"highSeverityThreshold\"\n          [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i5.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-checkbox formControlName=\"useKPI\">\n      {{ 'useKPI' | widgetTranslate: displayTypeKey | async }}\n    </cds-checkbox>\n  </div>\n\n  <div class=\"form__row\" *ngIf=\"useKPI.value\">\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\">\n        {{ 'lowSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\"\n          formControlName=\"lowSeverityThreshold\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\">\n        {{ 'mediumSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"mediumSeverityThreshold\"\n          [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\">\n        {{ 'highSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"highSeverityThreshold\"\n          [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], prefillConfiguration: [{
+                type: Input
+            }], configurationEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class BigNumberDisplayComponent {
+    get severityClass() {
+        if (!this.displayTypeProperties.useKPI) {
+            return WidgetSeverity.BLACK;
+        }
+        const value = this.data?.value;
+        if (value < this.displayTypeProperties.lowSeverityThreshold) {
+            return WidgetSeverity.GREEN;
+        }
+        else if (value < this.displayTypeProperties.mediumSeverityThreshold) {
+            return WidgetSeverity.YELLOW;
+        }
+        else if (value < this.displayTypeProperties.highSeverityThreshold) {
+            return WidgetSeverity.ORANGE;
+        }
+        return WidgetSeverity.RED;
+    }
+    get numberFontSize() {
+        if (!this.data) {
+            return 122;
+        }
+        return Math.floor(122 / this.data.value.toString().length) + 20;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: BigNumberDisplayComponent, selector: "valtimo-big-number-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-big-number-widget__header\">\n  <h3 class=\"valtimo-big-number-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-big-number-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-big-number-widget__content\">\n  <span\n    [class]=\"['valtimo-big-number-widget__number', severityClass]\"\n    [style.fontSize.px]=\"numberFontSize\"\n    >{{ data?.value }}</span\n  >\n\n  <span *ngIf=\"displayTypeProperties.label\" class=\"valtimo-big-number-widget__label\">\n    {{ displayTypeProperties.label }}\n  </span>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-big-number-widget__title,.valtimo-big-number-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-big-number-widget__title{font-size:20px;margin-bottom:12px}.valtimo-big-number-widget__subtitle{font-size:14px}.valtimo-big-number-widget__number{font-weight:lighter;font-size:122px;line-height:.75em}.valtimo-big-number-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-big-number-widget__content{display:flex;align-items:flex-end}.valtimo-severity__black{color:#000}.valtimo-severity__green{color:#42be65}.valtimo-severity__yellow{color:#f1c21b}.valtimo-severity__orange{color:#ff832b}.valtimo-severity__red{color:#da1e28}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-big-number-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-big-number-widget__header\">\n  <h3 class=\"valtimo-big-number-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-big-number-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-big-number-widget__content\">\n  <span\n    [class]=\"['valtimo-big-number-widget__number', severityClass]\"\n    [style.fontSize.px]=\"numberFontSize\"\n    >{{ data?.value }}</span\n  >\n\n  <span *ngIf=\"displayTypeProperties.label\" class=\"valtimo-big-number-widget__label\">\n    {{ displayTypeProperties.label }}\n  </span>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-big-number-widget__title,.valtimo-big-number-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-big-number-widget__title{font-size:20px;margin-bottom:12px}.valtimo-big-number-widget__subtitle{font-size:14px}.valtimo-big-number-widget__number{font-weight:lighter;font-size:122px;line-height:.75em}.valtimo-big-number-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-big-number-widget__content{display:flex;align-items:flex-end}.valtimo-severity__black{color:#000}.valtimo-severity__green{color:#42be65}.valtimo-severity__yellow{color:#f1c21b}.valtimo-severity__orange{color:#ff832b}.valtimo-severity__red{color:#da1e28}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { displayTypeKey: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], displayTypeProperties: [{
+                type: Input
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const bigNumberSpecification = {
+    displayTypeKey: 'number',
+    displayComponent: BigNumberDisplayComponent,
+    configurationComponent: BigNumberConfigurationComponent,
+    width: 1,
+    height: 1,
+    translations: {
+        nl: {
+            title: 'Groot getal',
+            formTitle: 'Titel (vereist)',
+            formTitleHelperText: 'De titel die wordt weergegeven in de widget',
+            subtitle: 'Ondertitel',
+            subtitleHelperText: 'De ondertitel weergegeven in de widget',
+            label: 'Label',
+            labelHelperText: 'Het label dat wordt weergegeven in de widget',
+            useKPI: 'KPI gebruiken',
+            lowSeverityThreshold: 'Lage ernstdrempel (vereist)',
+            mediumSeverityThreshold: 'Middelmatige ernstdrempel (vereist)',
+            highSeverityThreshold: 'Hoge ernstdrempel (vereist)',
+        },
+        en: {
+            title: 'Big number',
+            formTitle: 'Title (required)',
+            formTitleHelperText: 'The title displayed in the widget',
+            subtitle: 'Subtitle',
+            subtitleHelperText: 'The subtitle displayed in the widget',
+            label: 'Label',
+            labelHelperText: 'The label displayed in the widget',
+            useKPI: 'Use KPI',
+            lowSeverityThreshold: 'Low severity threshold (required)',
+            mediumSeverityThreshold: 'Medium severity threshold (required)',
+            highSeverityThreshold: 'High severity threshold (required)',
+        },
+        de: {
+            title: 'Große Nummer',
+            formTitle: 'Titel (erforderlich)',
+            formTitleHelperText: 'Der im Widget angezeigte Titel',
+            subtitle: 'Untertitel',
+            subtitleHelperText: 'Der im Widget angezeigte Untertitel',
+            label: 'Beschriftung',
+            labelHelperText: 'Die im Widget angezeigte Beschriftung',
+            useKPI: 'Verwenden Sie KPI',
+            lowSeverityThreshold: 'Niedriger Schweregradschwellenwert (erforderlich)',
+            mediumSeverityThreshold: 'Mittlerer Schweregradschwellenwert (erforderlich)',
+            highSeverityThreshold: 'Hoher Schweregradschwellenwert (erforderlich)',
+        },
+    },
+    requiredDataFeatures: [DATA_FEATURES.NUMBER],
+};
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class BigNumberModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule], exports: [BigNumberDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: bigNumberSpecification, multi: true }], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule,
+                        CheckboxModule,
+                    ],
+                    exports: [BigNumberDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: bigNumberSpecification, multi: true }],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DonutConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    get title() {
+        return this.form.get('title');
+    }
+    get subtitle() {
+        return this.form.get('subtitle');
+    }
+    get label() {
+        return this.form.get('label');
+    }
+    set prefillConfiguration(configurationValue) {
+        if (configurationValue) {
+            this.title.setValue(configurationValue.title || '');
+            this.subtitle.setValue(configurationValue.subtitle || '');
+            this.label.setValue(configurationValue.label || '');
+        }
+    }
+    constructor(fb) {
+        this.fb = fb;
+        this.form = this.fb.group({
+            title: this.fb.control('', [Validators.required]),
+            subtitle: this.fb.control(''),
+            label: this.fb.control(''),
+            useKPI: this.fb.control(false, [Validators.required]),
         });
         this.configurationEvent = new EventEmitter();
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
         this.openFormSubscription();
-        this.openKPISubscription();
     }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
     openFormSubscription() {
         this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
-            this.configurationEvent.emit({ valid: this.form.valid, data: formValue });
-        }));
-    }
-    openKPISubscription() {
-        this._subscriptions.add(this.useKPI.valueChanges.pipe(startWith(this.useKPI.value)).subscribe(useKpi => {
-            const validators = [Validators.required];
-            if (useKpi) {
-                this.lowSeverityThreshold.setValidators(validators);
-                this.mediumSeverityThreshold.setValidators(validators);
-                this.highSeverityThreshold.setValidators(validators);
-            }
-            else {
-                this.lowSeverityThreshold.clearValidators();
-                this.mediumSeverityThreshold.clearValidators();
-                this.highSeverityThreshold.clearValidators();
-            }
-            this.lowSeverityThreshold.updateValueAndValidity();
-            this.mediumSeverityThreshold.updateValueAndValidity();
-            this.highSeverityThreshold.updateValueAndValidity();
+            this.configurationEvent.emit({
+                valid: this.form.valid,
+                data: formValue,
+            });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: BigNumberConfigurationComponent, selector: "ng-component", inputs: { displayTypeKey: "displayTypeKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-checkbox formControlName=\"useKPI\">\n      {{ 'useKPI' | widgetTranslate: displayTypeKey | async }}\n    </cds-checkbox>\n  </div>\n\n  <div class=\"form__row\" *ngIf=\"useKPI.value\">\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\">\n        {{ 'lowSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\"\n          formControlName=\"lowSeverityThreshold\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\">\n        {{ 'mediumSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"mediumSeverityThreshold\"\n          [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\">\n        {{ 'highSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"highSeverityThreshold\"\n          [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$1.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i4$1.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i4$1.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: DonutConfigurationComponent, selector: "ng-component", inputs: { displayTypeKey: "displayTypeKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutConfigurationComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-checkbox formControlName=\"useKPI\">\n      {{ 'useKPI' | widgetTranslate: displayTypeKey | async }}\n    </cds-checkbox>\n  </div>\n\n  <div class=\"form__row\" *ngIf=\"useKPI.value\">\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\">\n        {{ 'lowSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          [invalid]=\"lowSeverityThreshold.dirty && lowSeverityThreshold.invalid\"\n          formControlName=\"lowSeverityThreshold\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\">\n        {{ 'mediumSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"mediumSeverityThreshold\"\n          [invalid]=\"mediumSeverityThreshold.dirty && mediumSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n\n    <div class=\"form__spacer\"></div>\n\n    <div class=\"form__element\">\n      <cds-label [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\">\n        {{ 'highSeverityThreshold' | widgetTranslate: displayTypeKey | async }}\n\n        <input\n          cdsText\n          formControlName=\"highSeverityThreshold\"\n          [invalid]=\"highSeverityThreshold.dirty && highSeverityThreshold.invalid\"\n          type=\"number\"\n        />\n      </cds-label>\n    </div>\n  </div>\n</form>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
                 type: Input
             }], disabled: [{
@@ -1762,6 +2650,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DonutDisplayComponent {
+    set data(value) {
+        if (!value)
+            return;
+        this._data$.next(value);
+    }
+    constructor(themeService) {
+        this.themeService = themeService;
+        this._data$ = new BehaviorSubject(null);
+        this.donutData$ = this._data$.pipe(filter(data => !!data), map(data => data?.values.map(dataValue => ({
+            group: dataValue.label,
+            value: dataValue.value,
+        })) || []));
+        this.donutChartOptions$ = this.themeService.currentTheme$.pipe(map(currentTheme => ({
+            resizable: true,
+            toolbar: { enabled: false },
+            height: '300px',
+            theme: currentTheme,
+            donut: {
+                alignment: 'center',
+                center: {
+                    label: this.displayTypeProperties.label,
+                },
+            },
+            pie: {
+                labels: {
+                    enabled: false,
+                },
+            },
+            legend: {
+                truncation: {
+                    numCharacter: 28,
+                },
+            },
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutDisplayComponent, deps: [{ token: i1$1.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DonutDisplayComponent, selector: "valtimo-donut-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-donut-widget__header\">\n  <h3 class=\"valtimo-donut-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-donut-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-donut-widget__content\">\n  <ng-container *ngIf=\"donutData$ | async as donutData\">\n    @if (donutData.length > 0) {\n      <ibm-donut-chart\n        type=\"donut\"\n        class=\"n-chart\"\n        [data]=\"donutData\"\n        [options]=\"donutChartOptions$ | async\"\n      ></ibm-donut-chart>\n    } @else {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'dossier.widgets.noData' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </ng-container>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-donut-widget__title,.valtimo-donut-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-donut-widget__title{font-size:20px;margin-bottom:12px}.valtimo-donut-widget__subtitle{font-size:14px}.valtimo-donut-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-donut-widget__content{display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.DonutChartComponent, selector: "ibm-donut-chart" }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-donut-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-donut-widget__header\">\n  <h3 class=\"valtimo-donut-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-donut-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-donut-widget__content\">\n  <ng-container *ngIf=\"donutData$ | async as donutData\">\n    @if (donutData.length > 0) {\n      <ibm-donut-chart\n        type=\"donut\"\n        class=\"n-chart\"\n        [data]=\"donutData\"\n        [options]=\"donutChartOptions$ | async\"\n      ></ibm-donut-chart>\n    } @else {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'dossier.widgets.noData' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </ng-container>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-donut-widget__title,.valtimo-donut-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-donut-widget__title{font-size:20px;margin-bottom:12px}.valtimo-donut-widget__subtitle{font-size:14px}.valtimo-donut-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-donut-widget__content{display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.CdsThemeService }], propDecorators: { displayTypeKey: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], displayTypeProperties: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -1809,6 +2762,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const donutSpecification = {
+    displayTypeKey: 'donut',
+    displayComponent: DonutDisplayComponent,
+    configurationComponent: DonutConfigurationComponent,
+    width: 1,
+    height: 2,
+    translations: {
+        nl: {
+            title: 'Donut-diagram',
+            formTitle: 'Titel (vereist)',
+            formTitleHelperText: 'De titel die wordt weergegeven in de widget',
+            subtitle: 'Ondertitel',
+            subtitleHelperText: 'De ondertitel weergegeven in de widget',
+            label: 'Label',
+            labelHelperText: 'Het label dat wordt weergegeven in de widget',
+        },
+        en: {
+            title: 'Donut chart',
+            formTitle: 'Title (required)',
+            formTitleHelperText: 'The title displayed in the widget',
+            subtitle: 'Subtitle',
+            subtitleHelperText: 'The subtitle displayed in the widget',
+            label: 'Label',
+            labelHelperText: 'The label displayed in the widget',
+        },
+        de: {
+            title: 'Donut-Diagramm',
+            formTitle: 'Titel (erforderlich)',
+            formTitleHelperText: 'Der im Widget angezeigte Titel',
+            subtitle: 'Untertitel',
+            subtitleHelperText: 'Der im Widget angezeigte Untertitel',
+            label: 'Beschriftung',
+            labelHelperText: 'Die im Widget angezeigte Beschriftung',
+        },
+    },
+    requiredDataFeatures: [DATA_FEATURES.NUMBERS],
+};
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1825,6 +2815,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class DonutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: DonutModule, declarations: [DonutDisplayComponent, DonutConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule], exports: [DonutDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: donutSpecification, multi: true }], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DonutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DonutDisplayComponent, DonutConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule,
+                        CheckboxModule,
+                        CommonModule,
+                        ChartsModule,
+                        CarbonListModule,
+                        TranslateModule,
+                    ],
+                    exports: [DonutDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: donutSpecification, multi: true }],
+                }]
+        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1873,14 +2903,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var WidgetSeverity;
-(function (WidgetSeverity) {
-    WidgetSeverity["BLACK"] = "valtimo-severity__black";
-    WidgetSeverity["GREEN"] = "valtimo-severity__green";
-    WidgetSeverity["YELLOW"] = "valtimo-severity__yellow";
-    WidgetSeverity["ORANGE"] = "valtimo-severity__orange";
-    WidgetSeverity["RED"] = "valtimo-severity__red";
-})(WidgetSeverity || (WidgetSeverity = {}));
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class GaugeConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    get title() {
+        return this.form.get('title');
+    }
+    get subtitle() {
+        return this.form.get('subtitle');
+    }
+    get label() {
+        return this.form.get('label');
+    }
+    set prefillConfiguration(configurationValue) {
+        if (configurationValue) {
+            this.title.setValue(configurationValue.title || '');
+            this.subtitle.setValue(configurationValue.subtitle || '');
+            this.label.setValue(configurationValue.label || '');
+        }
+    }
+    constructor(fb) {
+        this.fb = fb;
+        this.form = this.fb.group({
+            title: this.fb.control('', [Validators.required]),
+            subtitle: this.fb.control(''),
+            label: this.fb.control(''),
+            useKPI: this.fb.control(false, [Validators.required]),
+        });
+        this.configurationEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.openFormSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openFormSubscription() {
+        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
+            this.configurationEvent.emit({
+                valid: this.form.valid,
+                data: formValue,
+            });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: GaugeConfigurationComponent, selector: "ng-component", inputs: { displayTypeKey: "displayTypeKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'labelHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"label.dirty && label.invalid\"\n    >\n      {{ 'label' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"label\" [invalid]=\"label.dirty && label.invalid\" />\n    </cds-label>\n  </div>\n\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], prefillConfiguration: [{
+                type: Input
+            }], configurationEvent: [{
+                type: Output
+            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1913,36 +3016,63 @@ var WidgetSeverity;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class BigNumberDisplayComponent {
-    get severityClass() {
-        if (!this.displayTypeProperties.useKPI) {
-            return WidgetSeverity.BLACK;
-        }
-        const value = this.data?.value;
-        if (value < this.displayTypeProperties.lowSeverityThreshold) {
-            return WidgetSeverity.GREEN;
-        }
-        else if (value < this.displayTypeProperties.mediumSeverityThreshold) {
-            return WidgetSeverity.YELLOW;
-        }
-        else if (value < this.displayTypeProperties.highSeverityThreshold) {
-            return WidgetSeverity.ORANGE;
-        }
-        return WidgetSeverity.RED;
+class GaugeDisplayComponent {
+    set data(value) {
+        if (!value)
+            return;
+        this._data$.next(value);
     }
-    get numberFontSize() {
-        if (!this.data) {
-            return 122;
+    constructor(themeService, translateService) {
+        this.themeService = themeService;
+        this.translateService = translateService;
+        this._DELTA = -1.0;
+        this._data$ = new BehaviorSubject(null);
+        this.chartData$ = this._data$.pipe(filter(data => !!data), map(data => [
+            {
+                group: 'value',
+                value: this.calculatePercentage(data?.value || 0, data?.total || 0),
+            },
+            {
+                group: 'delta',
+                value: this._DELTA,
+            },
+        ]));
+        this.gaugeChartOptions$ = combineLatest([
+            this.themeService.currentTheme$,
+            this.translateService.stream('key'),
+        ]).pipe(map(([currentTheme]) => ({
+            resizable: true,
+            toolbar: { enabled: false },
+            height: '110px',
+            theme: currentTheme == 'g10' ? 'white' : 'g100',
+            gauge: {
+                alignment: 'center',
+                numberFormatter: value => this.numberFormatter(this, value),
+                deltaArrow: {
+                    enabled: false,
+                },
+                showPercentageSymbol: false,
+                type: 'semi',
+            },
+        })));
+    }
+    calculatePercentage(value, total) {
+        return (value * 100.0) / (total || 100.0);
+    }
+    numberFormatter(scope, value) {
+        const scopeData = scope._data$.getValue();
+        if (value == scope._DELTA) {
+            return `${this.translateService.instant('dashboard.of')} ${scopeData?.total || 0} ${scope.displayTypeProperties.label} `;
         }
-        return Math.floor(122 / this.data.value.toString().length) + 20;
+        return Math.round(value * (scopeData?.total || 0)) / 100.0 + '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: BigNumberDisplayComponent, selector: "valtimo-big-number-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-big-number-widget__header\">\n  <h3 class=\"valtimo-big-number-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-big-number-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-big-number-widget__content\">\n  <span\n    [class]=\"['valtimo-big-number-widget__number', severityClass]\"\n    [style.fontSize.px]=\"numberFontSize\"\n    >{{ data?.value }}</span\n  >\n\n  <span *ngIf=\"displayTypeProperties.label\" class=\"valtimo-big-number-widget__label\">\n    {{ displayTypeProperties.label }}\n  </span>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-big-number-widget__title{font-size:20px;margin-bottom:12px}.valtimo-big-number-widget__subtitle{font-size:14px}.valtimo-big-number-widget__number{font-weight:lighter;font-size:122px;line-height:.75em}.valtimo-big-number-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-big-number-widget__content{display:flex;align-items:flex-end}.valtimo-severity__black{color:#000}.valtimo-severity__green{color:#42be65}.valtimo-severity__yellow{color:#f1c21b}.valtimo-severity__orange{color:#ff832b}.valtimo-severity__red{color:#da1e28}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeDisplayComponent, deps: [{ token: i1$1.CdsThemeService }, { token: i3$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: GaugeDisplayComponent, selector: "valtimo-gauge-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-gauge-widget__header\">\n  <h3 class=\"valtimo-gauge-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-gauge-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-gauge-widget__content\">\n  <ibm-gauge-chart\n    *ngIf=\"chartData$ | async as chartData\"\n    type=\"gauge\"\n    class=\"n-chart\"\n    [data]=\"chartData\"\n    [options]=\"gaugeChartOptions$ | async\"\n  ></ibm-gauge-chart>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-gauge-widget__title,.valtimo-gauge-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-gauge-widget__title{font-size:20px;margin-bottom:12px}.valtimo-gauge-widget__subtitle{font-size:14px}.valtimo-gauge-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-gauge-widget__content{display:flex;align-items:flex-end;margin-bottom:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.GaugeChartComponent, selector: "ibm-gauge-chart" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-big-number-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-big-number-widget__header\">\n  <h3 class=\"valtimo-big-number-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-big-number-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-big-number-widget__content\">\n  <span\n    [class]=\"['valtimo-big-number-widget__number', severityClass]\"\n    [style.fontSize.px]=\"numberFontSize\"\n    >{{ data?.value }}</span\n  >\n\n  <span *ngIf=\"displayTypeProperties.label\" class=\"valtimo-big-number-widget__label\">\n    {{ displayTypeProperties.label }}\n  </span>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-big-number-widget__title{font-size:20px;margin-bottom:12px}.valtimo-big-number-widget__subtitle{font-size:14px}.valtimo-big-number-widget__number{font-weight:lighter;font-size:122px;line-height:.75em}.valtimo-big-number-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-big-number-widget__content{display:flex;align-items:flex-end}.valtimo-severity__black{color:#000}.valtimo-severity__green{color:#42be65}.valtimo-severity__yellow{color:#f1c21b}.valtimo-severity__orange{color:#ff832b}.valtimo-severity__red{color:#da1e28}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { displayTypeKey: [{
+            args: [{ selector: 'valtimo-gauge-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-gauge-widget__header\">\n  <h3 class=\"valtimo-gauge-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-gauge-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-gauge-widget__content\">\n  <ibm-gauge-chart\n    *ngIf=\"chartData$ | async as chartData\"\n    type=\"gauge\"\n    class=\"n-chart\"\n    [data]=\"chartData\"\n    [options]=\"gaugeChartOptions$ | async\"\n  ></ibm-gauge-chart>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-gauge-widget__title,.valtimo-gauge-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-gauge-widget__title{font-size:20px;margin-bottom:12px}.valtimo-gauge-widget__subtitle{font-size:14px}.valtimo-gauge-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-gauge-widget__content{display:flex;align-items:flex-end;margin-bottom:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.CdsThemeService }, { type: i3$1.TranslateService }], propDecorators: { displayTypeKey: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -1997,54 +3127,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const bigNumberSpecification = {
-    displayTypeKey: 'number',
-    displayComponent: BigNumberDisplayComponent,
-    configurationComponent: BigNumberConfigurationComponent,
+const gaugeSpecification = {
+    displayTypeKey: 'gauge',
+    displayComponent: GaugeDisplayComponent,
+    configurationComponent: GaugeConfigurationComponent,
     width: 1,
     height: 1,
     translations: {
         nl: {
-            title: 'Groot getal',
+            title: 'Graadmeter',
             formTitle: 'Titel (vereist)',
             formTitleHelperText: 'De titel die wordt weergegeven in de widget',
             subtitle: 'Ondertitel',
             subtitleHelperText: 'De ondertitel weergegeven in de widget',
             label: 'Label',
             labelHelperText: 'Het label dat wordt weergegeven in de widget',
-            useKPI: 'KPI gebruiken',
-            lowSeverityThreshold: 'Lage ernstdrempel (vereist)',
-            mediumSeverityThreshold: 'Middelmatige ernstdrempel (vereist)',
-            highSeverityThreshold: 'Hoge ernstdrempel (vereist)',
         },
         en: {
-            title: 'Big number',
+            title: 'Gauge',
             formTitle: 'Title (required)',
             formTitleHelperText: 'The title displayed in the widget',
             subtitle: 'Subtitle',
             subtitleHelperText: 'The subtitle displayed in the widget',
             label: 'Label',
             labelHelperText: 'The label displayed in the widget',
-            useKPI: 'Use KPI',
-            lowSeverityThreshold: 'Low severity threshold (required)',
-            mediumSeverityThreshold: 'Medium severity threshold (required)',
-            highSeverityThreshold: 'High severity threshold (required)',
         },
         de: {
-            title: 'Große Nummer',
+            title: 'Messgerät',
             formTitle: 'Titel (erforderlich)',
             formTitleHelperText: 'Der im Widget angezeigte Titel',
             subtitle: 'Untertitel',
             subtitleHelperText: 'Der im Widget angezeigte Untertitel',
             label: 'Beschriftung',
             labelHelperText: 'Die im Widget angezeigte Beschriftung',
-            useKPI: 'Verwenden Sie KPI',
-            lowSeverityThreshold: 'Niedriger Schweregradschwellenwert (erforderlich)',
-            mediumSeverityThreshold: 'Mittlerer Schweregradschwellenwert (erforderlich)',
-            highSeverityThreshold: 'Hoher Schweregradschwellenwert (erforderlich)',
         },
     },
-    requiredDataFeatures: [DATA_FEATURES.NUMBER],
+    requiredDataFeatures: [DATA_FEATURES.NUMBER, DATA_FEATURES.TOTAL],
 };
 
 /*
@@ -2062,32 +3180,38 @@ const bigNumberSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class BigNumberModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent], imports: [CommonModule,
+class GaugeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: GaugeModule, declarations: [GaugeDisplayComponent, GaugeConfigurationComponent], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
-            CheckboxModule], exports: [BigNumberDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: bigNumberSpecification, multi: true }], imports: [CommonModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule], exports: [GaugeDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: gaugeSpecification, multi: true }], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
-            CheckboxModule] }); }
+            CheckboxModule,
+            CommonModule,
+            ChartsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: BigNumberModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: GaugeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent],
+                    declarations: [GaugeDisplayComponent, GaugeConfigurationComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         WidgetTranslatePipeModule,
                         InputModule,
                         CheckboxModule,
+                        CommonModule,
+                        ChartsModule,
                     ],
-                    exports: [BigNumberDisplayComponent],
-                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: bigNumberSpecification, multi: true }],
+                    exports: [GaugeDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: gaugeSpecification, multi: true }],
                 }]
         }] });
 
@@ -2139,6 +3263,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class MeterConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    get title() {
+        return this.form.get('title');
+    }
+    get subtitle() {
+        return this.form.get('subtitle');
+    }
+    set prefillConfiguration(configurationValue) {
+        if (configurationValue) {
+            this.title.setValue(configurationValue.title || '');
+            this.subtitle.setValue(configurationValue.subtitle || '');
+        }
+    }
+    constructor(fb) {
+        this.fb = fb;
+        this.form = this.fb.group({
+            title: this.fb.control('', [Validators.required]),
+            subtitle: this.fb.control(''),
+        });
+        this.configurationEvent = new EventEmitter();
+        this._subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.openFormSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    openFormSubscription() {
+        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
+            this.configurationEvent.emit({
+                valid: this.form.valid,
+                data: formValue,
+            });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: MeterConfigurationComponent, selector: "ng-component", inputs: { displayTypeKey: "displayTypeKey", disabled: "disabled", prefillConfiguration: "prefillConfiguration" }, outputs: { configurationEvent: "configurationEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i5.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: WidgetTranslatePipe, name: "widgetTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterConfigurationComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<form [formGroup]=\"form\">\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'formTitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"title.dirty && title.invalid\"\n    >\n      {{ 'formTitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"title\" [invalid]=\"title.dirty && title.invalid\" />\n    </cds-label>\n  </div>\n\n  <div class=\"form__element\">\n    <cds-label\n      [helperText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalidText]=\"'subtitleHelperText' | widgetTranslate: displayTypeKey | async\"\n      [invalid]=\"subtitle.dirty && subtitle.invalid\"\n    >\n      {{ 'subtitle' | widgetTranslate: displayTypeKey | async }}\n\n      <input cdsText formControlName=\"subtitle\" [invalid]=\"subtitle.dirty && subtitle.invalid\" />\n    </cds-label>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], prefillConfiguration: [{
+                type: Input
+            }], configurationEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -2155,13 +3370,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * limitations under the License.
  */
 class MeterDisplayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: MeterDisplayComponent, selector: "valtimo-meter-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\nmeter works\n", styles: [":host{display:flex;padding:20px;width:100%;height:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    set data(value) {
+        if (!value)
+            return;
+        this._data$.next(value);
+    }
+    constructor(themeService) {
+        this.themeService = themeService;
+        this._data$ = new BehaviorSubject(null);
+        this.meterData$ = this._data$.pipe(filter(data => !!data), map(data => data?.values.map(dataValue => ({
+            group: dataValue.label,
+            value: dataValue.value,
+        })) || []));
+        this.meterChartOptions$ = combineLatest([
+            this.themeService.currentTheme$,
+            this.meterData$,
+        ]).pipe(map(([currentTheme, meterData]) => ({
+            resizable: true,
+            toolbar: { enabled: false },
+            theme: currentTheme,
+            height: '60px',
+            meter: {
+                height: 60,
+                showLabels: false,
+                title: {
+                    percentageIndicator: {
+                        enabled: false,
+                    },
+                },
+                proportional: {
+                    total: meterData.reduce((acc, curr) => acc + curr.value, 0),
+                },
+            },
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterDisplayComponent, deps: [{ token: i1$1.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: MeterDisplayComponent, selector: "valtimo-meter-display", inputs: { displayTypeKey: "displayTypeKey", data: "data", displayTypeProperties: "displayTypeProperties" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-donut-widget__header\">\n  <h3 class=\"valtimo-donut-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-donut-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-donut-widget__content\">\n  <ng-container *ngIf=\"meterData$ | async as meterData\">\n    @if (meterData.length > 0) {\n      <ibm-meter-chart [data]=\"meterData\" [options]=\"meterChartOptions$ | async\"></ibm-meter-chart>\n    } @else {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'dossier.widgets.noData' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </ng-container>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-donut-widget__title,.valtimo-donut-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-donut-widget__title{font-size:20px;margin-bottom:12px}.valtimo-donut-widget__subtitle{font-size:14px}.valtimo-donut-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-donut-widget__content{display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MeterChartComponent, selector: "ibm-meter-chart" }, { kind: "component", type: i1$1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-meter-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\nmeter works\n", styles: [":host{display:flex;padding:20px;width:100%;height:100%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { displayTypeKey: [{
+            args: [{ selector: 'valtimo-meter-display', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<section class=\"valtimo-donut-widget__header\">\n  <h3 class=\"valtimo-donut-widget__title\">{{ displayTypeProperties.title }}</h3>\n\n  <span *ngIf=\"displayTypeProperties.subtitle\" class=\"valtimo-donut-widget__subtitle\">\n    {{ displayTypeProperties.subtitle }}\n  </span>\n</section>\n\n<section class=\"valtimo-donut-widget__content\">\n  <ng-container *ngIf=\"meterData$ | async as meterData\">\n    @if (meterData.length > 0) {\n      <ibm-meter-chart [data]=\"meterData\" [options]=\"meterChartOptions$ | async\"></ibm-meter-chart>\n    } @else {\n      <valtimo-no-results\n        [collapseVertically]=\"true\"\n        [description]=\"'dossier.widgets.noData' | translate\"\n        [smallPadding]=\"true\"\n      ></valtimo-no-results>\n    }\n  </ng-container>\n</section>\n", styles: [":host{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:20px}.valtimo-donut-widget__title,.valtimo-donut-widget__subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.valtimo-donut-widget__title{font-size:20px;margin-bottom:12px}.valtimo-donut-widget__subtitle{font-size:14px}.valtimo-donut-widget__label{font-size:12px;margin-left:12px;margin-bottom:-1px}.valtimo-donut-widget__content{display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.CdsThemeService }], propDecorators: { displayTypeKey: [{
                 type: Input
             }], data: [{
                 type: Input
@@ -2219,20 +3468,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
 const meterSpecification = {
     displayTypeKey: 'meter',
     displayComponent: MeterDisplayComponent,
+    configurationComponent: MeterConfigurationComponent,
     width: 2,
     height: 1,
     translations: {
         nl: {
             title: 'Meter',
+            formTitle: 'Titel (vereist)',
+            formTitleHelperText: 'De titel die wordt weergegeven in de widget',
+            subtitle: 'Ondertitel',
+            subtitleHelperText: 'De ondertitel weergegeven in de widget',
+            label: 'Label',
+            labelHelperText: 'Het label dat wordt weergegeven in de widget',
         },
         en: {
             title: 'Meter',
+            formTitle: 'Title (required)',
+            formTitleHelperText: 'The title displayed in the widget',
+            subtitle: 'Subtitle',
+            subtitleHelperText: 'The subtitle displayed in the widget',
+            label: 'Label',
+            labelHelperText: 'The label displayed in the widget',
         },
         de: {
             title: 'Meter',
+            formTitle: 'Titel (erforderlich)',
+            formTitleHelperText: 'Der im Widget angezeigte Titel',
+            subtitle: 'Untertitel',
+            subtitleHelperText: 'Der im Widget angezeigte Untertitel',
+            label: 'Beschriftung',
+            labelHelperText: 'Die im Widget angezeigte Beschriftung',
         },
     },
-    requiredDataFeatures: [],
+    requiredDataFeatures: [DATA_FEATURES.NUMBERS],
 };
 
 /*
@@ -2252,14 +3520,40 @@ const meterSpecification = {
  */
 class MeterModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: MeterModule, declarations: [MeterDisplayComponent], imports: [CommonModule], exports: [MeterDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }], imports: [CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: MeterModule, declarations: [MeterDisplayComponent, MeterConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule], exports: [MeterDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: MeterModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MeterDisplayComponent],
-                    imports: [CommonModule],
+                    declarations: [MeterDisplayComponent, MeterConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule,
+                        CheckboxModule,
+                        CommonModule,
+                        ChartsModule,
+                        CarbonListModule,
+                        TranslateModule,
+                    ],
                     exports: [MeterDisplayComponent],
                     providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }],
                 }]
@@ -2352,5 +3646,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BarChartDisplayComponent, BarChartModule, BigNumberConfigurationComponent, BigNumberDisplayComponent, BigNumberModule, CaseCountConfigurationComponent, CaseCountDataSourceModule, DATA_FEATURES, DATA_SOURCE_TOKEN, DISPLAY_TYPE_TOKEN, DashboardComponent, DashboardModule, DashboardService, HttpLoaderFactory, MeterDisplayComponent, MeterModule, Operator, TestConfigurationComponent, TestDataSourceModule, WIDGET_1X_HEIGHT, WIDGET_1X_MIN_WIDTH, WidgetDashboardComponent, WidgetDashboardContentComponent, WidgetService, WidgetSeverity, WidgetTranslatePipe, WidgetTranslatePipeModule, WidgetTranslationService, barChartSpecification, bigNumberSpecification, caseCountDataSourceSpecification, meterSpecification, testDataSourceSpecification };
+export { BigNumberConfigurationComponent, BigNumberDisplayComponent, BigNumberModule, CaseCountConfigurationComponent, CaseCountDataSourceModule, CaseCountsConfigurationComponent, CaseCountsDataSourceModule, CaseGroupByConfigurationComponent, CaseGroupByDataSourceModule, DATA_FEATURES, DATA_SOURCE_TOKEN, DISPLAY_TYPE_TOKEN, DashboardComponent, DashboardModule, DashboardService, DonutConfigurationComponent, DonutDisplayComponent, DonutModule, GaugeConfigurationComponent, GaugeDisplayComponent, GaugeModule, HttpLoaderFactory, MeterConfigurationComponent, MeterDisplayComponent, MeterModule, Operator, WIDGET_1X_HEIGHT, WIDGET_1X_MIN_WIDTH, WidgetDashboardComponent, WidgetDashboardContentComponent, WidgetService, WidgetSeverity, WidgetTranslatePipe, WidgetTranslatePipeModule, WidgetTranslationService, bigNumberSpecification, caseCountDataSourceSpecification, caseCountsDataSourceSpecification, caseGroupByDataSourceSpecification, donutSpecification, gaugeSpecification, meterSpecification };
 //# sourceMappingURL=valtimo-dashboard.mjs.map