@valtimo/dashboard 12.4.0 → 12.5.0

package/fesm2022/valtimo-dashboard.mjs

@@ -1,5 +1,5 @@
 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 { Component, ViewChild, InjectionToken, Injectable, Inject, ViewContainerRef, ViewChildren, Input, ViewEncapsulation, Pipe, EventEmitter, ChangeDetectionStrategy, Output, NgModule } from '@angular/core';
 import moment from 'moment';
 import { BehaviorSubject, filter, map, Subject, Subscription, combineLatest, debounceTime, tap, startWith, distinctUntilChanged } from 'rxjs';
 import { take, map as map$1, delay } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@valtimo/components';
-import { WidgetModule, ListModule, BpmnJsDiagramModule, AlertModule, SpinnerModule, CarbonListModule, CarbonMultiInputModule, InputModule as InputModule$1 } from '@valtimo/components';
+import { CarbonListModule, WidgetModule, ListModule, BpmnJsDiagramModule, AlertModule, SpinnerModule, CarbonMultiInputModule, InputModule as InputModule$1 } from '@valtimo/components';
 import * as i3$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import Muuri from 'muuri';
@@ -19,16 +19,17 @@ import { HttpClient } from '@angular/common/http';
 import * as i2$1 from '@valtimo/config';
 import { ROLE_USER } from '@valtimo/config';
 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 { InputModule, CheckboxModule, TabsModule, ThemeModule, LoadingModule, DropdownModule, ButtonModule, TilesModule, LayerModule, IconModule } from 'carbon-components-angular';
 import * as i1$3 from '@angular/forms';
 import { Validators, ReactiveFormsModule } from '@angular/forms';
+import { ScaleTypes } from '@carbon/charts';
+import * as i3$2 from '@carbon/charts-angular';
+import { ChartsModule } from '@carbon/charts-angular';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { AuthGuardService } from '@valtimo/security';
 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.
@@ -638,43 +639,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             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 }] });
 
-/*
- * 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 routes = [
-    {
-        path: '',
-        component: WidgetDashboardComponent,
-        canActivate: [AuthGuardService],
-        data: { title: 'Dashboard', roles: [ROLE_USER], hidePageTitle: true },
-    },
-];
-class DashboardRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, imports: [CommonModule, i2.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [CommonModule, RouterModule.forChild(routes)],
-                    exports: [RouterModule],
-                }]
-        }] });
-
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -722,19 +686,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class WidgetTranslatePipeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, declarations: [WidgetTranslatePipe], imports: [TranslateModule], exports: [WidgetTranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, imports: [TranslateModule] }); }
+class BarChartConfigurationComponent {
+    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.12", ngImport: i0, type: BarChartConfigurationComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BarChartConfigurationComponent, 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.12", ngImport: i0, type: WidgetTranslatePipeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [TranslateModule],
-                    declarations: [WidgetTranslatePipe],
-                    exports: [WidgetTranslatePipe],
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartConfigurationComponent, 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.
@@ -767,6 +777,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+class BarChartDisplayComponent {
+    set data(value) {
+        if (!value)
+            return;
+        this._data$.next(value);
+    }
+    constructor(themeService) {
+        this.themeService = themeService;
+        this._data$ = new BehaviorSubject(null);
+        this.barChartData$ = this._data$.pipe(filter(data => !!data), map(data => data?.values.map(dataValue => ({
+            group: dataValue.label,
+            value: dataValue.value,
+        })) || []));
+        this.barChartChartOptions$ = this.themeService.currentTheme$.pipe(map(currentTheme => ({
+            title: 'Vertical simple bar (discrete)',
+            theme: currentTheme,
+            height: '400px',
+            axes: {
+                left: {
+                    mapsTo: 'value',
+                },
+                bottom: {
+                    mapsTo: 'group',
+                    scaleType: ScaleTypes.LABELS,
+                },
+            },
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartDisplayComponent, deps: [{ token: i1$1.CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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\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=\"barChartData$ | async as barChartData\">\n    @if (barChartData.length > 0) {\n      <ibm-bar-chart\n        [data]=\"barChartData\"\n        [options]=\"barChartChartOptions$ | async\"\n      ></ibm-bar-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: 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.12", 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\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=\"barChartData$ | async as barChartData\">\n    @if (barChartData.length > 0) {\n      <ibm-bar-chart\n        [data]=\"barChartData\"\n        [options]=\"barChartChartOptions$ | async\"\n      ></ibm-bar-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.
@@ -783,81 +834,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-// AoT requires an exported function for factories
-function HttpLoaderFactory(httpClient) {
-    return new TranslateHttpLoader(httpClient);
-}
-class DashboardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, declarations: [DashboardComponent, WidgetDashboardComponent, WidgetDashboardContentComponent], imports: [CommonModule,
-            DashboardRoutingModule,
-            WidgetModule,
-            ListModule,
-            BpmnJsDiagramModule, i3$1.TranslateModule, AlertModule,
-            TaskModule,
-            SpinnerModule,
-            TabsModule,
-            ThemeModule,
-            WidgetTranslatePipeModule,
-            LoadingModule,
-            CarbonListModule], exports: [DashboardComponent, WidgetDashboardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, providers: [
-            { provide: DISPLAY_TYPE_TOKEN, useValue: null, multi: true },
-            { provide: DATA_SOURCE_TOKEN, useValue: null, multi: true },
-        ], imports: [CommonModule,
-            DashboardRoutingModule,
-            WidgetModule,
-            ListModule,
-            BpmnJsDiagramModule,
-            TranslateModule.forRoot({
-                loader: {
-                    provide: TranslateLoader,
-                    useFactory: HttpLoaderFactory,
-                    deps: [HttpClient],
-                },
-            }),
-            AlertModule,
-            TaskModule,
-            SpinnerModule,
-            TabsModule,
-            ThemeModule,
-            WidgetTranslatePipeModule,
-            LoadingModule,
-            CarbonListModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [DashboardComponent, WidgetDashboardComponent, WidgetDashboardContentComponent],
-                    imports: [
-                        CommonModule,
-                        DashboardRoutingModule,
-                        WidgetModule,
-                        ListModule,
-                        BpmnJsDiagramModule,
-                        TranslateModule.forRoot({
-                            loader: {
-                                provide: TranslateLoader,
-                                useFactory: HttpLoaderFactory,
-                                deps: [HttpClient],
-                            },
-                        }),
-                        AlertModule,
-                        TaskModule,
-                        SpinnerModule,
-                        TabsModule,
-                        ThemeModule,
-                        WidgetTranslatePipeModule,
-                        LoadingModule,
-                        CarbonListModule,
-                    ],
-                    exports: [DashboardComponent, WidgetDashboardComponent],
-                    providers: [
-                        { provide: DISPLAY_TYPE_TOKEN, useValue: null, multi: true },
-                        { provide: DATA_SOURCE_TOKEN, useValue: null, multi: true },
-                    ],
-                }]
-        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -890,6 +866,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const barChartSpecification = {
+    displayTypeKey: 'bar-chart',
+    displayComponent: BarChartDisplayComponent,
+    configurationComponent: BarChartConfigurationComponent,
+    width: 1,
+    height: 2,
+    translations: {
+        nl: {
+            title: 'Staafdiagram',
+            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: 'Bar 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: 'Balkendiagramm',
+            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.
@@ -906,22 +919,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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.
- *
- * 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
+class WidgetTranslatePipeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, declarations: [WidgetTranslatePipe], imports: [TranslateModule], exports: [WidgetTranslatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, imports: [TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: WidgetTranslatePipeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [TranslateModule],
+                    declarations: [WidgetTranslatePipe],
+                    exports: [WidgetTranslatePipe],
+                }]
+        }] });
+
+/*
+ * 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
  *
@@ -963,6 +980,46 @@ var Operator;
  * 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.12", ngImport: i0, type: BarChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BarChartModule, declarations: [BarChartDisplayComponent, BarChartConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule], exports: [BarChartDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: barChartSpecification, multi: true }], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BarChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BarChartDisplayComponent, BarChartConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule,
+                        CheckboxModule,
+                        CommonModule,
+                        ChartsModule,
+                        CarbonListModule,
+                        TranslateModule,
+                    ],
+                    exports: [BarChartDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: barChartSpecification, multi: true }],
+                }]
+        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -979,14 +1036,6 @@ var Operator;
  * 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.
@@ -1019,7 +1068,23 @@ var WidgetSeverity;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class CaseCountConfigurationComponent {
+
+/*
+ * 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();
@@ -1028,109 +1093,89 @@ class CaseCountConfigurationComponent {
             this.form.enable();
         }
     }
-    get documentDefinition() {
-        return this.form.get('documentDefinition');
+    get title() {
+        return this.form.get('title');
     }
-    get queryConditions() {
-        return this.form.get('queryConditions');
+    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.documentDefinitionSelected({
-                item: {
-                    content: configurationValue.documentDefinition,
-                },
-            });
-            this.defaultConditionValues$.next(configurationValue.queryConditions.map(condition => ({
-                key: condition.queryPath,
-                dropdown: condition.queryOperator,
-                value: condition.queryValue,
-            })));
+            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);
         }
     }
-    constructor(fb, documentService, translateService, widgetTranslationService) {
+    constructor(fb) {
         this.fb = fb;
-        this.documentService = documentService;
-        this.translateService = translateService;
-        this.widgetTranslationService = widgetTranslationService;
         this.form = this.fb.group({
-            documentDefinition: this.fb.control(null, [Validators.required]),
-            queryConditions: this.fb.control(null),
+            title: this.fb.control('', [Validators.required]),
+            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),
         });
-        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.defaultConditionValues$ = new BehaviorSubject(null);
-        this.allConditionsValid$ = new BehaviorSubject(true);
         this.configurationEvent = new EventEmitter();
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
         this.openFormSubscription();
+        this.openKPISubscription();
     }
     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.length === 0) {
-            this.queryConditions.setValue(null);
-        }
-        else {
-            this.queryConditions.setValue(values.map(value => ({
-                queryPath: value.key,
-                queryOperator: value.dropdown,
-                queryValue: value.value,
-            })));
-        }
-    }
-    onAllConditionsValid(allConditionsValid) {
-        this.allConditionsValid$.next(allConditionsValid);
-    }
     openFormSubscription() {
-        this._subscriptions.add(combineLatest([
-            this.form.valueChanges.pipe(startWith(this.form.value)),
-            this.allConditionsValid$,
-        ]).subscribe(([formValue, allConditionsValid]) => {
-            this.configurationEvent.emit({
-                valid: this.form.valid && allConditionsValid,
-                data: formValue,
-            });
+        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.12", 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.12", 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", "hideLabel", "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 }); }
+    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.12", 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.12", 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.12", ngImport: i0, type: CaseCountConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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\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: [{
+            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
@@ -1203,6 +1248,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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.
@@ -1219,63 +1273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const caseCountDataSourceSpecification = {
-    dataSourceKey: 'case-count',
-    configurationComponent: CaseCountConfigurationComponent,
-    translations: {
-        de: {
-            title: 'Fallzahl',
-            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',
-            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'. 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: {
-            title: 'Case count',
-            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)',
-            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'. 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: {
-            title: 'Aantal dossiers',
-            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',
-            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'. 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',
-        },
-    },
-};
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1292,41 +1289,6 @@ const caseCountDataSourceSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class CaseCountDataSourceModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, declarations: [CaseCountConfigurationComponent], imports: [CommonModule,
-            ReactiveFormsModule,
-            WidgetTranslatePipeModule,
-            InputModule,
-            DropdownModule,
-            CarbonMultiInputModule], exports: [CaseCountConfigurationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, providers: [
-            { provide: DATA_SOURCE_TOKEN, useValue: caseCountDataSourceSpecification, multi: true },
-        ], imports: [CommonModule,
-            ReactiveFormsModule,
-            WidgetTranslatePipeModule,
-            InputModule,
-            DropdownModule,
-            CarbonMultiInputModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [CaseCountConfigurationComponent],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        WidgetTranslatePipeModule,
-                        InputModule,
-                        DropdownModule,
-                        CarbonMultiInputModule,
-                    ],
-                    exports: [CaseCountConfigurationComponent],
-                    providers: [
-                        { provide: DATA_SOURCE_TOKEN, useValue: caseCountDataSourceSpecification, multi: true },
-                    ],
-                }]
-        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -1359,177 +1321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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: {
-                    documentDefinition: formValue?.documentDefinition?.content,
-                    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.12", 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.12", 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", "dataTestId"], outputs: ["valueChange"] }, { kind: "component", type: i5.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "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.12", 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
-            }] } });
+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.
@@ -1562,21 +1361,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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.12", ngImport: i0, type: BigNumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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.12", 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.
  */
 
 /*
@@ -1610,65 +1445,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const caseCountsDataSourceSpecification = {
-    dataSourceKey: 'case-counts',
-    configurationComponent: CaseCountsConfigurationComponent,
+const bigNumberSpecification = {
+    displayTypeKey: 'number',
+    displayComponent: BigNumberDisplayComponent,
+    configurationComponent: BigNumberConfigurationComponent,
+    width: 1,
+    height: 1,
     translations: {
-        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',
+        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: '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',
+            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)',
         },
-        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',
+        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],
 };
 
 /*
@@ -1686,54 +1510,32 @@ const caseCountsDataSourceSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class CaseCountsDataSourceModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, declarations: [CaseCountsConfigurationComponent], imports: [CommonModule,
+class BigNumberModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BigNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BigNumberModule, declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent], 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.12", ngImport: i0, type: CaseCountsDataSourceModule, providers: [
-            { provide: DATA_SOURCE_TOKEN, useValue: caseCountsDataSourceSpecification, multi: true },
-        ], imports: [CommonModule,
+            InputModule,
+            CheckboxModule], exports: [BigNumberDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BigNumberModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: bigNumberSpecification, multi: true }], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
-            InputModule$1,
-            DropdownModule,
-            CarbonMultiInputModule,
-            InputModule$1,
-            ButtonModule,
-            TilesModule,
-            LayerModule,
-            IconModule] }); }
+            InputModule,
+            CheckboxModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BigNumberModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CaseCountsConfigurationComponent],
+                    declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent],
                     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 },
+                        InputModule,
+                        CheckboxModule,
                     ],
+                    exports: [BigNumberDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: bigNumberSpecification, multi: true }],
                 }]
         }] });
 
@@ -1768,25 +1570,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-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));
-    }
+
+/*
+ * 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();
@@ -1795,52 +1611,30 @@ class CaseGroupByConfigurationComponent {
             this.form.enable();
         }
     }
-    set prefillConfiguration(configurationValue) {
-        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);
+    get title() {
+        return this.form.get('title');
     }
-    constructor(fb, documentService, translateService, widgetTranslationService) {
+    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.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()]),
+            title: this.fb.control('', [Validators.required]),
+            subtitle: this.fb.control(''),
+            label: this.fb.control(''),
+            useKPI: this.fb.control(false, [Validators.required]),
         });
-        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();
     }
@@ -1850,92 +1644,21 @@ class CaseGroupByConfigurationComponent {
     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),
-                },
+                data: formValue,
             });
         }));
     }
-    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.12", 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.12", 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", "hideLabel", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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</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.12", ngImport: i0, type: CaseGroupByConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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\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: [{
+            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</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1976,6 +1699,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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.12", 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.12", 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.12", 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.
@@ -2024,77 +1796,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const caseGroupByDataSourceSpecification = {
-    dataSourceKey: 'case-group-by',
-    configurationComponent: CaseGroupByConfigurationComponent,
+const donutSpecification = {
+    displayTypeKey: 'donut',
+    displayComponent: DonutDisplayComponent,
+    configurationComponent: DonutConfigurationComponent,
+    width: 1,
+    height: 2,
     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',
+        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: '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',
+            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',
         },
-        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',
+        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],
 };
 
 /*
@@ -2112,39 +1849,44 @@ const caseGroupByDataSourceSpecification = {
  * 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.12", ngImport: i0, type: CaseGroupByDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, declarations: [CaseGroupByConfigurationComponent], imports: [CommonModule,
+class DonutModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, declarations: [DonutDisplayComponent, DonutConfigurationComponent], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
-            DropdownModule,
-            CarbonMultiInputModule], exports: [CaseGroupByConfigurationComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, providers: [
-            { provide: DATA_SOURCE_TOKEN, useValue: caseGroupByDataSourceSpecification, multi: true },
-        ], imports: [CommonModule,
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule], exports: [DonutDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: donutSpecification, multi: true }], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
-            DropdownModule,
-            CarbonMultiInputModule] }); }
+            CheckboxModule,
+            CommonModule,
+            ChartsModule,
+            CarbonListModule,
+            TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [CaseGroupByConfigurationComponent],
+                    declarations: [DonutDisplayComponent, DonutConfigurationComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         WidgetTranslatePipeModule,
                         InputModule,
-                        DropdownModule,
-                        CarbonMultiInputModule,
-                    ],
-                    exports: [CaseGroupByConfigurationComponent],
-                    providers: [
-                        { provide: DATA_SOURCE_TOKEN, useValue: caseGroupByDataSourceSpecification, multi: true },
+                        CheckboxModule,
+                        CommonModule,
+                        ChartsModule,
+                        CarbonListModule,
+                        TranslateModule,
                     ],
+                    exports: [DonutDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: donutSpecification, multi: true }],
                 }]
         }] });
 
@@ -2195,7 +1937,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class BigNumberConfigurationComponent {
+
+/*
+ * 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();
@@ -2213,27 +1971,11 @@ class BigNumberConfigurationComponent {
     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);
         }
     }
     constructor(fb) {
@@ -2243,49 +1985,30 @@ 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),
         });
         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.12", 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.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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</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.12", ngImport: i0, type: BigNumberConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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  <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</form>\n" }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
                 type: Input
             }], disabled: [{
@@ -2327,36 +2050,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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.12", ngImport: i0, type: BigNumberDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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.12", ngImport: i0, type: BigNumberDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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,.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: [{
+            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
@@ -2411,54 +2161,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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],
 };
 
 /*
@@ -2476,32 +2214,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.12", ngImport: i0, type: BigNumberModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: BigNumberModule, declarations: [BigNumberDisplayComponent, BigNumberConfigurationComponent], imports: [CommonModule,
+class GaugeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", 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.12", 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.12", 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.12", ngImport: i0, type: BigNumberModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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 }],
                 }]
         }] });
 
@@ -2568,7 +2312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DonutConfigurationComponent {
+class MeterConfigurationComponent {
     set disabled(disabledValue) {
         if (disabledValue) {
             this.form.disable();
@@ -2583,14 +2327,10 @@ class DonutConfigurationComponent {
     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) {
@@ -2598,8 +2338,6 @@ class DonutConfigurationComponent {
         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();
@@ -2618,12 +2356,12 @@ class DonutConfigurationComponent {
             });
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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</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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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.12", ngImport: i0, type: DonutConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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\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</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</form>\n" }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
                 type: Input
             }], disabled: [{
@@ -2665,7 +2403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class DonutDisplayComponent {
+class MeterDisplayComponent {
     set data(value) {
         if (!value)
             return;
@@ -2674,39 +2412,38 @@ class DonutDisplayComponent {
     constructor(themeService) {
         this.themeService = themeService;
         this._data$ = new BehaviorSubject(null);
-        this.donutData$ = this._data$.pipe(filter(data => !!data), map(data => data?.values.map(dataValue => ({
+        this.meterData$ = 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 => ({
+        this.meterChartOptions$ = combineLatest([
+            this.themeService.currentTheme$,
+            this.meterData$,
+        ]).pipe(map(([currentTheme, meterData]) => ({
             resizable: true,
             toolbar: { enabled: false },
-            height: '300px',
             theme: currentTheme,
-            donut: {
-                alignment: 'center',
-                center: {
-                    label: this.displayTypeProperties.label,
-                },
-            },
-            pie: {
-                labels: {
-                    enabled: false,
+            height: '60px',
+            meter: {
+                height: 60,
+                showLabels: false,
+                title: {
+                    percentageIndicator: {
+                        enabled: false,
+                    },
                 },
-            },
-            legend: {
-                truncation: {
-                    numCharacter: 28,
+                proportional: {
+                    total: meterData.reduce((acc, curr) => acc + curr.value, 0),
                 },
             },
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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.12", ngImport: i0, type: DonutDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterDisplayComponent, 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"] }]
+            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: [{
@@ -2762,15 +2499,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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,
+const meterSpecification = {
+    displayTypeKey: 'meter',
+    displayComponent: MeterDisplayComponent,
+    configurationComponent: MeterConfigurationComponent,
+    width: 2,
+    height: 1,
     translations: {
         nl: {
-            title: 'Donut-diagram',
+            title: 'Meter',
             formTitle: 'Titel (vereist)',
             formTitleHelperText: 'De titel die wordt weergegeven in de widget',
             subtitle: 'Ondertitel',
@@ -2779,7 +2516,7 @@ const donutSpecification = {
             labelHelperText: 'Het label dat wordt weergegeven in de widget',
         },
         en: {
-            title: 'Donut chart',
+            title: 'Meter',
             formTitle: 'Title (required)',
             formTitleHelperText: 'The title displayed in the widget',
             subtitle: 'Subtitle',
@@ -2788,7 +2525,7 @@ const donutSpecification = {
             labelHelperText: 'The label displayed in the widget',
         },
         de: {
-            title: 'Donut-Diagramm',
+            title: 'Meter',
             formTitle: 'Titel (erforderlich)',
             formTitleHelperText: 'Der im Widget angezeigte Titel',
             subtitle: 'Untertitel',
@@ -2815,9 +2552,9 @@ const donutSpecification = {
  * 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.12", ngImport: i0, type: DonutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, declarations: [DonutDisplayComponent, DonutConfigurationComponent], imports: [CommonModule,
+class MeterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, declarations: [MeterDisplayComponent, MeterConfigurationComponent], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
@@ -2825,8 +2562,8 @@ class DonutModule {
             CommonModule,
             ChartsModule,
             CarbonListModule,
-            TranslateModule], exports: [DonutDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: donutSpecification, multi: true }], imports: [CommonModule,
+            TranslateModule], exports: [MeterDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
@@ -2836,10 +2573,10 @@ class DonutModule {
             CarbonListModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [DonutDisplayComponent, DonutConfigurationComponent],
+                    declarations: [MeterDisplayComponent, MeterConfigurationComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
@@ -2851,8 +2588,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         CarbonListModule,
                         TranslateModule,
                     ],
-                    exports: [DonutDisplayComponent],
-                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: donutSpecification, multi: true }],
+                    exports: [MeterDisplayComponent],
+                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }],
                 }]
         }] });
 
@@ -2904,86 +2641,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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 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.12", 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.12", 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</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 }); }
+class DisplayWidgetTypesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayWidgetTypesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DisplayWidgetTypesModule, imports: [BarChartModule, BigNumberModule, DonutModule, GaugeModule, MeterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayWidgetTypesModule, imports: [BarChartModule, BigNumberModule, DonutModule, GaugeModule, MeterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.FormBuilder }], propDecorators: { displayTypeKey: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], prefillConfiguration: [{
-                type: Input
-            }], configurationEvent: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DisplayWidgetTypesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [BarChartModule, BigNumberModule, DonutModule, GaugeModule, MeterModule],
+                }]
+        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3000,6 +2668,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const routes = [
+    {
+        path: '',
+        component: WidgetDashboardComponent,
+        canActivate: [AuthGuardService],
+        data: { title: 'Dashboard', roles: [ROLE_USER], hidePageTitle: true },
+    },
+];
+class DashboardRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, imports: [CommonModule, i2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, imports: [CommonModule, RouterModule.forChild(routes), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3016,68 +2705,610 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GaugeDisplayComponent {
-    set data(value) {
-        if (!value)
-            return;
-        this._data$.next(value);
-    }
-    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.round(value * (scopeData?.total || 0)) / 100.0 + '';
+// AoT requires an exported function for factories
+function HttpLoaderFactory(httpClient) {
+    return new TranslateHttpLoader(httpClient);
+}
+class DashboardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, declarations: [DashboardComponent, WidgetDashboardComponent, WidgetDashboardContentComponent], imports: [CommonModule,
+            DashboardRoutingModule,
+            WidgetModule,
+            ListModule,
+            BpmnJsDiagramModule, i3$1.TranslateModule, AlertModule,
+            TaskModule,
+            SpinnerModule,
+            TabsModule,
+            ThemeModule,
+            WidgetTranslatePipeModule,
+            LoadingModule,
+            CarbonListModule,
+            DisplayWidgetTypesModule], exports: [DashboardComponent, WidgetDashboardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, providers: [
+            { provide: DISPLAY_TYPE_TOKEN, useValue: null, multi: true },
+            { provide: DATA_SOURCE_TOKEN, useValue: null, multi: true },
+        ], imports: [CommonModule,
+            DashboardRoutingModule,
+            WidgetModule,
+            ListModule,
+            BpmnJsDiagramModule,
+            TranslateModule.forRoot({
+                loader: {
+                    provide: TranslateLoader,
+                    useFactory: HttpLoaderFactory,
+                    deps: [HttpClient],
+                },
+            }),
+            AlertModule,
+            TaskModule,
+            SpinnerModule,
+            TabsModule,
+            ThemeModule,
+            WidgetTranslatePipeModule,
+            LoadingModule,
+            CarbonListModule,
+            DisplayWidgetTypesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DashboardComponent, WidgetDashboardComponent, WidgetDashboardContentComponent],
+                    imports: [
+                        CommonModule,
+                        DashboardRoutingModule,
+                        WidgetModule,
+                        ListModule,
+                        BpmnJsDiagramModule,
+                        TranslateModule.forRoot({
+                            loader: {
+                                provide: TranslateLoader,
+                                useFactory: HttpLoaderFactory,
+                                deps: [HttpClient],
+                            },
+                        }),
+                        AlertModule,
+                        TaskModule,
+                        SpinnerModule,
+                        TabsModule,
+                        ThemeModule,
+                        WidgetTranslatePipeModule,
+                        LoadingModule,
+                        CarbonListModule,
+                        DisplayWidgetTypesModule,
+                    ],
+                    exports: [DashboardComponent, WidgetDashboardComponent],
+                    providers: [
+                        { provide: DISPLAY_TYPE_TOKEN, useValue: null, multi: true },
+                        { provide: DATA_SOURCE_TOKEN, useValue: null, 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.
+ */
+class CaseCountConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+    }
+    get documentDefinition() {
+        return this.form.get('documentDefinition');
+    }
+    get queryConditions() {
+        return this.form.get('queryConditions');
+    }
+    set prefillConfiguration(configurationValue) {
+        if (configurationValue) {
+            this.documentDefinitionSelected({
+                item: {
+                    content: configurationValue.documentDefinition,
+                },
+            });
+            this.defaultConditionValues$.next(configurationValue.queryConditions.map(condition => ({
+                key: condition.queryPath,
+                dropdown: condition.queryOperator,
+                value: condition.queryValue,
+            })));
+        }
+    }
+    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]),
+            queryConditions: this.fb.control(null),
+        });
+        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.defaultConditionValues$ = new BehaviorSubject(null);
+        this.allConditionsValid$ = new BehaviorSubject(true);
+        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.length === 0) {
+            this.queryConditions.setValue(null);
+        }
+        else {
+            this.queryConditions.setValue(values.map(value => ({
+                queryPath: value.key,
+                queryOperator: value.dropdown,
+                queryValue: value.value,
+            })));
+        }
+    }
+    onAllConditionsValid(allConditionsValid) {
+        this.allConditionsValid$.next(allConditionsValid);
+    }
+    openFormSubscription() {
+        this._subscriptions.add(combineLatest([
+            this.form.valueChanges.pipe(startWith(this.form.value)),
+            this.allConditionsValid$,
+        ]).subscribe(([formValue, allConditionsValid]) => {
+            this.configurationEvent.emit({
+                valid: this.form.valid && allConditionsValid,
+                data: formValue,
+            });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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", "hideLabel", "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.12", 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    ></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 caseCountDataSourceSpecification = {
+    dataSourceKey: 'case-count',
+    configurationComponent: CaseCountConfigurationComponent,
+    translations: {
+        de: {
+            title: 'Fallzahl',
+            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',
+            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'. 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: {
+            title: 'Case count',
+            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)',
+            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'. 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: {
+            title: 'Aantal dossiers',
+            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',
+            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'. 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',
+        },
+    },
+};
+
+/*
+ * 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 CaseCountDataSourceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, declarations: [CaseCountConfigurationComponent], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            DropdownModule,
+            CarbonMultiInputModule], exports: [CaseCountConfigurationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, providers: [
+            { provide: DATA_SOURCE_TOKEN, useValue: caseCountDataSourceSpecification, multi: true },
+        ], imports: [CommonModule,
+            ReactiveFormsModule,
+            WidgetTranslatePipeModule,
+            InputModule,
+            DropdownModule,
+            CarbonMultiInputModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountDataSourceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CaseCountConfigurationComponent],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        WidgetTranslatePipeModule,
+                        InputModule,
+                        DropdownModule,
+                        CarbonMultiInputModule,
+                    ],
+                    exports: [CaseCountConfigurationComponent],
+                    providers: [
+                        { provide: DATA_SOURCE_TOKEN, useValue: caseCountDataSourceSpecification, 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.
+ */
+class CaseCountsConfigurationComponent {
+    set disabled(disabledValue) {
+        if (disabledValue) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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 }); }
+    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: {
+                    documentDefinition: formValue?.documentDefinition?.content,
+                    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.12", 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.12", 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", "dataTestId"], outputs: ["valueChange"] }, { kind: "component", type: i5.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "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.12", ngImport: i0, type: GaugeDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsConfigurationComponent, decorators: [{
             type: Component,
-            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: [{
+            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
-            }], data: [{
+            }], disabled: [{
                 type: Input
-            }], displayTypeProperties: [{
+            }], prefillConfiguration: [{
                 type: Input
+            }], configurationEvent: [{
+                type: Output
             }] } });
 
 /*
@@ -3127,42 +3358,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const gaugeSpecification = {
-    displayTypeKey: 'gauge',
-    displayComponent: GaugeDisplayComponent,
-    configurationComponent: GaugeConfigurationComponent,
-    width: 1,
-    height: 1,
+
+/*
+ * 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 caseCountsDataSourceSpecification = {
+    dataSourceKey: 'case-counts',
+    configurationComponent: CaseCountsConfigurationComponent,
     translations: {
-        nl: {
-            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',
+        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: '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',
+        en: {
+            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: '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',
+        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: [DATA_FEATURES.NUMBER, DATA_FEATURES.TOTAL],
 };
 
 /*
@@ -3180,38 +3466,54 @@ const gaugeSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class GaugeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: GaugeModule, declarations: [GaugeDisplayComponent, GaugeConfigurationComponent], imports: [CommonModule,
+class CaseCountsDataSourceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, declarations: [CaseCountsConfigurationComponent], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
-            InputModule,
-            CheckboxModule,
-            CommonModule,
-            ChartsModule], exports: [GaugeDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GaugeModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: gaugeSpecification, multi: true }], imports: [CommonModule,
+            InputModule$1,
+            DropdownModule,
+            CarbonMultiInputModule,
+            InputModule$1,
+            ButtonModule,
+            TilesModule,
+            LayerModule,
+            IconModule], exports: [CaseCountsConfigurationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, providers: [
+            { provide: DATA_SOURCE_TOKEN, useValue: caseCountsDataSourceSpecification, multi: true },
+        ], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
-            InputModule,
-            CheckboxModule,
-            CommonModule,
-            ChartsModule] }); }
+            InputModule$1,
+            DropdownModule,
+            CarbonMultiInputModule,
+            InputModule$1,
+            ButtonModule,
+            TilesModule,
+            LayerModule,
+            IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: GaugeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseCountsDataSourceModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [GaugeDisplayComponent, GaugeConfigurationComponent],
+                    declarations: [CaseCountsConfigurationComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         WidgetTranslatePipeModule,
-                        InputModule,
-                        CheckboxModule,
-                        CommonModule,
-                        ChartsModule,
+                        InputModule$1,
+                        DropdownModule,
+                        CarbonMultiInputModule,
+                        InputModule$1,
+                        ButtonModule,
+                        TilesModule,
+                        LayerModule,
+                        IconModule,
+                    ],
+                    exports: [CaseCountsConfigurationComponent],
+                    providers: [
+                        { provide: DATA_SOURCE_TOKEN, useValue: caseCountsDataSourceSpecification, multi: true },
                     ],
-                    exports: [GaugeDisplayComponent],
-                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: gaugeSpecification, multi: true }],
                 }]
         }] });
 
@@ -3246,39 +3548,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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 MeterConfigurationComponent {
+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();
@@ -3287,48 +3575,147 @@ class MeterConfigurationComponent {
             this.form.enable();
         }
     }
-    get title() {
-        return this.form.get('title');
+    set prefillConfiguration(configurationValue) {
+        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);
     }
-    get subtitle() {
-        return this.form.get('subtitle');
+    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();
     }
-    set prefillConfiguration(configurationValue) {
-        if (configurationValue) {
-            this.title.setValue(configurationValue.title || '');
-            this.subtitle.setValue(configurationValue.subtitle || '');
+    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',
+                };
+        };
     }
-    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();
+    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',
+                };
+        };
     }
-    ngOnInit() {
-        this.openFormSubscription();
+    enumToMultiInputValues(enumeration) {
+        return Object.keys(enumeration || {}).reduce((acc, key) => [...acc, { key, value: enumeration[key] }], []);
     }
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
+    multiInputValuesToEnum(values) {
+        return (values || []).reduce((acc, curr) => ({ ...acc, [curr.key]: curr.value }), {});
     }
-    openFormSubscription() {
-        this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe(formValue => {
-            this.configurationEvent.emit({
-                valid: this.form.valid,
-                data: formValue,
-            });
+    queryConditionsToMultiInputValues(queryConditions) {
+        return (queryConditions || []).map(condition => ({
+            key: condition.queryPath,
+            dropdown: condition.queryOperator,
+            value: condition.queryValue,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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.12", 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 }); }
+    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.12", 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.12", 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", "hideLabel", "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.12", ngImport: i0, type: MeterConfigurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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 [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: [{
+            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
@@ -3369,54 +3756,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class MeterDisplayComponent {
-    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.12", 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.12", 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.12", 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\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
-            }], displayTypeProperties: [{
-                type: Input
-            }] } });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3465,42 +3804,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const meterSpecification = {
-    displayTypeKey: 'meter',
-    displayComponent: MeterDisplayComponent,
-    configurationComponent: MeterConfigurationComponent,
-    width: 2,
-    height: 1,
+const caseGroupByDataSourceSpecification = {
+    dataSourceKey: 'case-group-by',
+    configurationComponent: CaseGroupByConfigurationComponent,
     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',
+        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: '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',
+            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',
         },
-        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',
+        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',
         },
     },
-    requiredDataFeatures: [DATA_FEATURES.NUMBERS],
 };
 
 /*
@@ -3518,44 +3892,39 @@ const meterSpecification = {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class MeterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, declarations: [MeterDisplayComponent, MeterConfigurationComponent], imports: [CommonModule,
+class CaseGroupByDataSourceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, declarations: [CaseGroupByConfigurationComponent], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
-            CheckboxModule,
-            CommonModule,
-            ChartsModule,
-            CarbonListModule,
-            TranslateModule], exports: [MeterDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }], imports: [CommonModule,
+            DropdownModule,
+            CarbonMultiInputModule], exports: [CaseGroupByConfigurationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, providers: [
+            { provide: DATA_SOURCE_TOKEN, useValue: caseGroupByDataSourceSpecification, multi: true },
+        ], imports: [CommonModule,
             ReactiveFormsModule,
             WidgetTranslatePipeModule,
             InputModule,
-            CheckboxModule,
-            CommonModule,
-            ChartsModule,
-            CarbonListModule,
-            TranslateModule] }); }
+            DropdownModule,
+            CarbonMultiInputModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MeterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CaseGroupByDataSourceModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MeterDisplayComponent, MeterConfigurationComponent],
+                    declarations: [CaseGroupByConfigurationComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         WidgetTranslatePipeModule,
                         InputModule,
-                        CheckboxModule,
-                        CommonModule,
-                        ChartsModule,
-                        CarbonListModule,
-                        TranslateModule,
+                        DropdownModule,
+                        CarbonMultiInputModule,
+                    ],
+                    exports: [CaseGroupByConfigurationComponent],
+                    providers: [
+                        { provide: DATA_SOURCE_TOKEN, useValue: caseGroupByDataSourceSpecification, multi: true },
                     ],
-                    exports: [MeterDisplayComponent],
-                    providers: [{ provide: DISPLAY_TYPE_TOKEN, useValue: meterSpecification, multi: true }],
                 }]
         }] });
 
@@ -3607,22 +3976,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * 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.
  *
@@ -3646,5 +3999,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { BigNumberConfigurationComponent, BigNumberDisplayComponent, BigNumberModule, CaseCountConfigurationComponent, CaseCountDataSourceModule, CaseCountsConfigurationComponent, CaseCountsDataSourceModule, CaseGroupByConfigurationComponent, CaseGroupByDataSourceModule, DATA_FEATURES, DATA_SOURCE_TOKEN, DISPLAY_TYPE_TOKEN, DashboardComponent, DashboardModule, DashboardService, DisplayWidgetTypesModule, 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