@valtimo/layout 13.16.0 → 13.17.0

package/fesm2022/valtimo-layout.mjs

@@ -7,19 +7,20 @@ import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2$1 from '@ngx-translate/core';
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 import * as i1 from '@valtimo/components';
-import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, InputLabelModule, ConfirmationModalModule, JsonEditorComponent, ValuePathSelectorComponent, SelectModule, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
+import { ViewType, CarbonListModule, EllipsisPipe, MdiIconViewerComponent, FormIoModule, CARBON_THEME, CurrentCarbonTheme, InputLabelModule, InputModule as InputModule$1, FormModule, SelectModule, ParagraphModule, DateTimePickerComponent, runAfterCarbonModalClosed, AutoKeyInputComponent, CARBON_CONSTANTS, ValuePathSelectorPrefix, CarbonMultiInputModule, ConfirmationModalModule, JsonEditorComponent, ValuePathSelectorComponent, MdiIconSelectorComponent, ValuePathType, MenuRoutingModule, TopbarModule, LeftSidebarModule, RightSidebarModule, PageHeaderModule, AlertModule, PromptModule, MultiInputFormModule, RenderInPageHeaderDirective } from '@valtimo/components';
 import * as i3 from 'carbon-components-angular';
-import { ButtonModule, InputModule, LayerModule, SkeletonModule, PaginationModel, PaginationModule, TilesModule, IconModule, DialogModule, MenuButtonModule, ContextMenuModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, DropdownModule, StructuredListModule, ToggleModule, AccordionModule, ProgressIndicatorModule, TabsModule, CheckboxModule, TagModule, Tab, SelectModule as SelectModule$1, PlaceholderModule } from 'carbon-components-angular';
+import { ButtonModule, InputModule, LayerModule, SkeletonModule, PaginationModel, PaginationModule, TilesModule, IconModule, TimePickerModule, DialogModule, MenuButtonModule, ContextMenuModule, LoadingModule, ModalModule, TooltipModule, ComboBoxModule, DropdownModule, StructuredListModule, ToggleModule, AccordionModule, ProgressIndicatorModule, TabsModule, CheckboxModule, TagModule, Tab, SelectModule as SelectModule$1, PlaceholderModule } from 'carbon-components-angular';
 import { Subscription, BehaviorSubject, combineLatest, map, tap, switchMap, take, filter as filter$1, Subject, debounceTime, of, startWith, merge, delay } from 'rxjs';
 import { TrashCan16, Filter16, Link16, Edit16, ArrowUp16, ArrowDown16, DragVertical16 } from '@carbon/icons';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
-import { filter } from 'rxjs/operators';
+import { filter, catchError } from 'rxjs/operators';
 import * as i1$1 from '@valtimo/shared';
 import { getCaseManagementRouteParams, GlobalNotificationComponent, ROLE_ADMIN } from '@valtimo/shared';
 import { isEqual, cloneDeep } from 'lodash';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@valtimo/form';
+import * as i2$3 from '@angular/common/http';
 import { HttpParams } from '@angular/common/http';
 import * as i2$2 from '@valtimo/document';
 import * as i3$1 from '@valtimo/access-control';
@@ -91,6 +92,11 @@ var MoveRowDirection;
     MoveRowDirection["UP"] = "UP";
     MoveRowDirection["DOWN"] = "DOWN";
 })(MoveRowDirection || (MoveRowDirection = {}));
+var FilterDropdownDataProvider;
+(function (FilterDropdownDataProvider) {
+    FilterDropdownDataProvider["DATABASE"] = "dropdownDatabaseDataProvider";
+    FilterDropdownDataProvider["JSON"] = "dropdownJsonFileDataProvider";
+})(FilterDropdownDataProvider || (FilterDropdownDataProvider = {}));
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -1384,23 +1390,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
 class WidgetInteractiveTableSearchComponent {
     set initSearchRequest(value) {
         this._initSearchRequest = value ?? {};
-        this.setInitialForm();
     }
     set filters(value) {
         this._filters = value ?? [];
-        this.buildFiltersFormControls();
-        this.setInitialForm();
+        this.rebuildFormControlsPreservingValues();
+        this.loadDropdownItems();
+        this.setInitialForm(this._initSearchRequest ?? {});
     }
     get filters() {
         return this._filters;
     }
-    get filtersFormGroup() {
-        return this.formGroup.get('filters');
-    }
-    constructor(cdsThemeService, fb, iconService) {
+    constructor(cdsThemeService, fb, iconService, translateService) {
         this.cdsThemeService = cdsThemeService;
         this.fb = fb;
         this.iconService = iconService;
+        this.translateService = translateService;
         this._initSearchRequest = {};
         this._filters = [];
         this.searchSubmitEvent = new EventEmitter();
@@ -1408,58 +1412,228 @@ class WidgetInteractiveTableSearchComponent {
         this.formGroup = this.fb.group({
             filters: this.fb.group({}),
         });
+        this.dropdownSelectItemsMap = {};
+        this.clear$ = new Subject();
         this._subscriptions = new Subscription();
+        this.BOOLEAN_POSITIVE = 'booleanPositive';
+        this.BOOLEAN_NEGATIVE = 'booleanNegative';
+        this.booleanItems$ = this.translateService
+            .stream([`searchFields.${this.BOOLEAN_POSITIVE}`, `searchFields.${this.BOOLEAN_NEGATIVE}`])
+            .pipe(map(() => [
+            { id: this.BOOLEAN_POSITIVE, text: this.translateService.instant(`searchFields.${this.BOOLEAN_POSITIVE}`) },
+            { id: this.BOOLEAN_NEGATIVE, text: this.translateService.instant(`searchFields.${this.BOOLEAN_NEGATIVE}`) },
+        ]));
         this.iconService.register(TrashCan16);
     }
     ngOnInit() {
-        this.buildFiltersFormControls();
-        this.setInitialForm();
+        this.rebuildFormControlsPreservingValues();
+        this.setInitialForm(this._initSearchRequest ?? {});
         this._subscriptions.add(this.filtersFormGroup.valueChanges.pipe(debounceTime(500)).subscribe(() => {
-            this.searchSubmitEvent.emit(this.mapFormValueToWidgetInteractiveTableSearch());
+            const req = this.mapFormValueToWidgetInteractiveTableSearch();
+            this.searchSubmitEvent.emit(req);
         }));
+        const initialReq = this.mapFormValueToWidgetInteractiveTableSearch();
+        this.searchSubmitEvent.emit(initialReq);
     }
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
     }
+    ngOnChanges(changes) {
+        if (changes['initSearchRequest'] && !changes['initSearchRequest'].firstChange) {
+            this.setInitialForm(this._initSearchRequest ?? {});
+        }
+    }
+    get filtersFormGroup() {
+        return this.formGroup.get('filters');
+    }
     onClearFilter() {
         this.filtersFormGroup.reset(this.getDefaultFilterValues());
+        this.clear$.next();
+        this.searchSubmitEvent.emit({});
     }
-    buildFiltersFormControls() {
+    singleValueChange(controlKey, value) {
+        const control = this.filtersFormGroup.get(controlKey);
+        if (!control)
+            return;
+        control.setValue(value);
+    }
+    rangeValueChange(filterKey, value) {
+        this.filtersFormGroup.patchValue({
+            [`${filterKey}_start`]: value?.start ?? '',
+            [`${filterKey}_end`]: value?.end ?? '',
+        }, { emitEvent: true });
+    }
+    rebuildFormControlsPreservingValues() {
+        const snapshot = (this.filtersFormGroup.getRawValue() ?? {});
+        const expectedKeys = new Set();
         this.filters.forEach((filter) => {
-            if (!this.filtersFormGroup.get(filter.key)) {
-                this.filtersFormGroup.addControl(filter.key, this.fb.control(''));
+            if (filter.fieldType === 'range') {
+                expectedKeys.add(`${filter.key}_start`);
+                expectedKeys.add(`${filter.key}_end`);
+                return;
+            }
+            expectedKeys.add(filter.key);
+        });
+        Object.keys(this.filtersFormGroup.controls).forEach(controlKey => {
+            if (!expectedKeys.has(controlKey)) {
+                this.filtersFormGroup.removeControl(controlKey);
             }
         });
+        this.filters.forEach((filter) => {
+            if (filter.fieldType === 'range') {
+                this.ensureControl(`${filter.key}_start`, '');
+                this.ensureControl(`${filter.key}_end`, '');
+                return;
+            }
+            if (this.isDropdownField(filter) || filter.dataType === 'boolean') {
+                const initialValue = filter.fieldType === 'multi-select-dropdown' ? [] : '';
+                this.ensureControl(filter.key, initialValue);
+                return;
+            }
+            this.ensureControl(filter.key, '');
+        });
+        const toRestore = {};
+        expectedKeys.forEach(k => {
+            if (snapshot[k] !== undefined)
+                toRestore[k] = snapshot[k];
+        });
+        if (Object.keys(toRestore).length) {
+            this.filtersFormGroup.patchValue(toRestore, { emitEvent: false });
+        }
+    }
+    ensureControl(key, initialValue = '') {
+        if (!this.filtersFormGroup.get(key)) {
+            this.filtersFormGroup.addControl(key, this.fb.control(initialValue));
+        }
     }
     getDefaultFilterValues() {
-        return Object.fromEntries(this.filters.map(filter => [filter.key, '']));
+        const defaults = {};
+        this.filters.forEach(filter => {
+            if (filter.fieldType === 'range') {
+                defaults[`${filter.key}_start`] = '';
+                defaults[`${filter.key}_end`] = '';
+                return;
+            }
+            if (this.isDropdownField(filter) || filter.dataType === 'boolean') {
+                defaults[filter.key] = filter.fieldType === 'multi-select-dropdown' ? [] : '';
+                return;
+            }
+            defaults[filter.key] = '';
+        });
+        return defaults;
+    }
+    setInitialForm(searchRequest) {
+        const mapped = this.mapSearchRequestToFormValue(searchRequest);
+        this.filtersFormGroup.reset(this.getDefaultFilterValues(), { emitEvent: false });
+        if (mapped.filters) {
+            this.filtersFormGroup.patchValue(mapped.filters, { emitEvent: false });
+        }
     }
     mapFormValueToWidgetInteractiveTableSearch() {
-        const formValue = this.formGroup.getRawValue();
+        const rawFilters = (this.formGroup.getRawValue().filters ?? {});
         const filters = {};
-        for (const key in formValue.filters) {
-            if (formValue.filters[key]) {
-                filters[key] = formValue.filters[key];
+        for (const filter of this.filters) {
+            if (filter.fieldType === 'range') {
+                const start = rawFilters[`${filter.key}_start`];
+                const end = rawFilters[`${filter.key}_end`];
+                const hasStart = this.hasValue(start);
+                const hasEnd = this.hasValue(end);
+                if (hasStart || hasEnd) {
+                    filters[filter.key] = JSON.stringify({
+                        rangeFrom: hasStart ? this.normalizeValue(start, filter.dataType) : null,
+                        rangeTo: hasEnd ? this.normalizeValue(end, filter.dataType) : null,
+                    });
+                }
+                continue;
             }
+            const value = rawFilters[filter.key];
+            if (!this.hasValue(value))
+                continue;
+            filters[filter.key] = this.normalizeValue(value, filter.dataType);
         }
         return {
             ...(Object.keys(filters).length && { filters }),
         };
     }
     mapSearchRequestToFormValue(searchRequest) {
-        return {
-            ...(searchRequest.filters && { filters: searchRequest.filters }),
-        };
+        const result = {};
+        const search = (searchRequest.filters ?? {});
+        for (const filter of this.filters) {
+            if (filter.fieldType === 'range') {
+                const raw = search[filter.key];
+                if (typeof raw === 'string') {
+                    try {
+                        const parsed = JSON.parse(raw);
+                        result[`${filter.key}_start`] = parsed?.rangeFrom ?? '';
+                        result[`${filter.key}_end`] = parsed?.rangeTo ?? '';
+                    }
+                    catch {
+                        result[`${filter.key}_start`] = '';
+                        result[`${filter.key}_end`] = '';
+                    }
+                }
+                continue;
+            }
+            const raw = search[filter.key];
+            if (raw === undefined)
+                continue;
+            if (filter.dataType === 'boolean') {
+                if (raw === true || raw === 'true')
+                    result[filter.key] = this.BOOLEAN_POSITIVE;
+                else if (raw === false || raw === 'false')
+                    result[filter.key] = this.BOOLEAN_NEGATIVE;
+                else if (raw === this.BOOLEAN_POSITIVE || raw === this.BOOLEAN_NEGATIVE)
+                    result[filter.key] = raw;
+                else
+                    result[filter.key] = '';
+                continue;
+            }
+            result[filter.key] = raw;
+        }
+        return Object.keys(result).length ? { filters: result } : {};
     }
-    setInitialForm() {
-        const mappedFormValue = this.mapSearchRequestToFormValue(this._initSearchRequest);
-        this.filtersFormGroup.reset(this.getDefaultFilterValues(), { emitEvent: false });
-        if (mappedFormValue.filters) {
-            this.filtersFormGroup.patchValue(this.mapSearchRequestToFormValue(this._initSearchRequest).filters, { emitEvent: false });
+    normalizeValue(value, dataType) {
+        if (Array.isArray(value)) {
+            return value
+                .map(entry => this.normalizeValue(entry, dataType))
+                .filter(entry => entry !== null && entry !== undefined);
+        }
+        if (value && typeof value === 'object' && 'id' in value) {
+            value = value.id;
+        }
+        if (dataType === 'boolean') {
+            if (value === this.BOOLEAN_POSITIVE)
+                return true;
+            if (value === this.BOOLEAN_NEGATIVE)
+                return false;
+            if (value === true || value === false)
+                return value;
+            return null;
         }
+        return value;
+    }
+    hasValue(value) {
+        if (value === null || value === undefined)
+            return false;
+        if (typeof value === 'string')
+            return value.trim().length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        return true;
+    }
+    isDropdownField(filter) {
+        return ['single-select-dropdown', 'multi-select-dropdown'].includes(filter.fieldType);
+    }
+    loadDropdownItems() {
+        this.filters
+            .filter(f => this.isDropdownField(f) && !!f.dropdownDataProvider && !!f.key)
+            .forEach(filter => {
+            const dropdownEntries = Object.entries(filter.dropdownValues ?? {});
+            this.dropdownSelectItemsMap[filter.key] = dropdownEntries.map(([id, text]) => ({ id, text }));
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableSearchComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableSearchComponent, isStandalone: true, selector: "valtimo-widget-interactive-table-search", inputs: { initSearchRequest: "initSearchRequest", filters: "filters" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n        {{ filter.title }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [formControlName]=\"filter.key\"\n          [placeholder]=\"filter.title\"\n        />\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--widget-text-color, var(--cds-text-secondary))}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableSearchComponent, deps: [{ token: i1.CdsThemeService }, { token: i1$3.FormBuilder }, { token: i3.IconService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableSearchComponent, isStandalone: true, selector: "valtimo-widget-interactive-table-search", inputs: { initSearchRequest: "initSearchRequest", filters: "filters" }, outputs: { searchSubmitEvent: "searchSubmitEvent" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label\n        class=\"valtimo-widget-interactive-table-search__filter-field\"\n        [ngClass]=\"{\n          'valtimo-widget-interactive-table-search__filter-field--range': filter.fieldType === 'range'\n        }\"\n      >\n        <v-input-label *ngIf=\"filter.title\" [title]=\"filter.title\"></v-input-label>\n\n        @if (filter.dataType === 'text' && filter.fieldType === 'single') {\n          <v-input\n            [dataTestId]=\"'widget-interactive-table-filter-' + filter.key\"\n            [name]=\"filter.key\"\n            [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n            [defaultValue]=\"filtersFormGroup.get(filter.key)?.value\"\n            [fullWidth]=\"true\"\n            [carbonTheme]=\"'g100'\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></v-input>\n        }\n        @else if (filter.dataType === 'text' && filter.fieldType === 'range') {\n          <v-form className=\"multiple-search-fields\" (valueChange)=\"rangeValueChange(filter.key, $event)\">\n            <v-input\n              name=\"start\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_start')?.value\"\n              [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <v-input\n              name=\"end\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_end')?.value\"\n              [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n          </v-form>\n        }\n        @else if (filter.dataType === 'text' && filter.fieldType === 'single-select-dropdown') {\n          <v-select\n            [items]=\"dropdownSelectItemsMap[filter.key]\"\n            [formControlName]=\"filter.key\"\n            [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n            [appendInline]=\"true\"\n          ></v-select>\n        }\n        @else if (filter.dataType === 'text' && filter.fieldType === 'multi-select-dropdown') {\n          <v-select\n            [items]=\"dropdownSelectItemsMap[filter.key]\"\n            [formControlName]=\"filter.key\"\n            [multiple]=\"true\"\n            [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n            [appendInline]=\"true\"\n          ></v-select>\n        }\n        @else if (filter.dataType === 'number' && filter.fieldType === 'single') {\n          <v-input\n            type=\"number\"\n            [hideNumberSpinBox]=\"true\"\n            [name]=\"filter.key\"\n            [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n            [defaultValue]=\"filtersFormGroup.get(filter.key)?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></v-input>\n        }\n        @else if (filter.dataType === 'number' && filter.fieldType === 'range') {\n          <v-form className=\"multiple-search-fields\" (valueChange)=\"rangeValueChange(filter.key, $event)\">\n            <v-input\n              type=\"number\"\n              name=\"start\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_start')?.value\"\n              [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <v-input\n              type=\"number\"\n              name=\"end\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_end')?.value\"\n              [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n          </v-form>\n        }\n        @else if (filter.dataType === 'boolean' && filter.fieldType === 'single') {\n          <v-select\n            *ngIf=\"booleanItems$ | async as booleanItems\"\n            [items]=\"booleanItems\"\n            [formControlName]=\"filter.key\"\n            [clearSelectionSubject$]=\"clear$\"\n          ></v-select>\n        }\n        @else if (filter.dataType === 'time' && filter.fieldType === 'single') {\n          <cds-timepicker\n            [placeholder]=\"'searchFields.timePlaceholder' | translate\"\n            [formControlName]=\"filter.key\"\n          ></cds-timepicker>\n        }\n        @else if (filter.dataType === 'time' && filter.fieldType === 'range') {\n          <cds-timepicker [formControlName]=\"filter.key + '_start'\"></cds-timepicker>\n\n          <div class=\"to-text\">\n            <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n          </div>\n\n          <cds-timepicker [formControlName]=\"filter.key + '_end'\"></cds-timepicker>\n        }\n        @else if (filter.dataType === 'date' && filter.fieldType === 'single') {\n          <valtimo-date-time-picker\n            [defaultDate]=\"filtersFormGroup.get(filter.key)?.value ?? ''\"\n            [clear$]=\"clear$\"\n            [enableTime]=\"false\"\n            [showFieldLabel]=\"false\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></valtimo-date-time-picker>\n        }\n        @else if (filter.dataType === 'date' && filter.fieldType === 'range') {\n          <div class=\"multiple-search-fields\">\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_start')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"false\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_start', $event)\"\n            ></valtimo-date-time-picker>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_end')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"false\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_end', $event)\"\n            ></valtimo-date-time-picker>\n          </div>\n        }\n        @else if (filter.dataType === 'datetime' && filter.fieldType === 'single') {\n          <valtimo-date-time-picker\n            [defaultDate]=\"filtersFormGroup.get(filter.key)?.value ?? ''\"\n            [clear$]=\"clear$\"\n            [enableTime]=\"true\"\n            [showFieldLabel]=\"false\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></valtimo-date-time-picker>\n        }\n        @else if (filter.dataType === 'datetime' && filter.fieldType === 'range') {\n          <div class=\"multiple-search-fields multiple-search-fields--stacked\">\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_start')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"true\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_start', $event)\"\n            ></valtimo-date-time-picker>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_end')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"true\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_end', $event)\"\n            ></valtimo-date-time-picker>\n          </div>\n        }\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:420px;max-height:300px;overflow-y:scroll}.valtimo-widget-interactive-table-search__fields{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);align-items:flex-end}.valtimo-widget-interactive-table-search__datetime{align-items:flex-end}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column;min-width:0}.valtimo-widget-interactive-table-search__filter-field--range{grid-column:1/-1}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--widget-text-color, var(--cds-text-secondary))}::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center!important}.to-text{margin-inline-start:8px;margin-inline-end:8px}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important;width:180px!important}::ng-deep v-input input{background-color:var(--cds-layer-02)!important}::ng-deep v-select input{background-color:var(--cds-layer-02)!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important;max-height:max-content!important;height:max-content!important}::ng-deep .multiple-search-fields--stacked{flex-direction:column!important;align-items:stretch!important;gap:8px!important}.to-text--stacked{margin-inline-start:0;margin-inline-end:0}::ng-deep .cds--list-box__field{background-color:var(--cds-layer-02)!important}\n/*!\n * Copyright 2015-2026 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1$3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TimePickerModule }, { kind: "component", type: i3.TimePicker, selector: "cds-timepicker, ibm-timepicker", inputs: ["invalid", "invalidText", "label", "hideLabel", "placeholder", "pattern", "id", "disabled", "value", "maxLength", "skeleton", "theme", "size"], outputs: ["valueChange"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i1.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", "trim", "presetsTitle", "presetOptions"], outputs: ["valueChange"] }, { kind: "ngmodule", type: FormModule }, { kind: "component", type: i1.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i1.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "disabled", "dropUp", "invalid", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "clearable", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "warn", "warnText", "dataTestId"], outputs: ["selectedChange"] }, { kind: "ngmodule", type: ParagraphModule }, { kind: "component", type: i1.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "component", type: DateTimePickerComponent, selector: "valtimo-date-time-picker", inputs: ["fullWidth", "margin", "name", "title", "placeholder", "titleTranslationKey", "disabled", "tooltip", "required", "smallLabel", "enableTime", "carbonTheme", "dateFormat", "showFieldLabel", "datePlaceholder", "timePlaceholder", "labelText", "defaultDate", "defaultDateIsToday", "clear$"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableSearchComponent, decorators: [{
             type: Component,
@@ -1471,8 +1645,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         InputModule,
                         ReactiveFormsModule,
                         FormsModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 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<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopImmediatePropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label class=\"valtimo-widget-interactive-table-search__filter-field\">\n        {{ filter.title }}\n\n        <input\n          cdsText\n          [attr.data-carbon-theme]=\"theme\"\n          [formControlName]=\"filter.key\"\n          [placeholder]=\"filter.title\"\n        />\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;width:360px;padding:16px}.valtimo-widget-interactive-table-search__fields{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-end;margin-bottom:16px;gap:16px}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--widget-text-color, var(--cds-text-secondary))}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 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.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i3.IconService }], propDecorators: { initSearchRequest: [{
+                        InputLabelModule,
+                        TimePickerModule,
+                        InputModule$1,
+                        FormModule,
+                        SelectModule,
+                        ParagraphModule,
+                        DateTimePickerComponent,
+                    ], template: "<!--\n  ~ Copyright 2015-2025 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<form\n  *ngIf=\"theme$ | async as theme\"\n  class=\"valtimo-widget-interactive-table-search\"\n  [formGroup]=\"formGroup\"\n  (click)=\"$event.stopPropagation()\"\n>\n  <section class=\"valtimo-widget-interactive-table-search__fields\" formGroupName=\"filters\">\n    @for (filter of filters; track filter.key) {\n      <cds-text-label\n        class=\"valtimo-widget-interactive-table-search__filter-field\"\n        [ngClass]=\"{\n          'valtimo-widget-interactive-table-search__filter-field--range': filter.fieldType === 'range'\n        }\"\n      >\n        <v-input-label *ngIf=\"filter.title\" [title]=\"filter.title\"></v-input-label>\n\n        @if (filter.dataType === 'text' && filter.fieldType === 'single') {\n          <v-input\n            [dataTestId]=\"'widget-interactive-table-filter-' + filter.key\"\n            [name]=\"filter.key\"\n            [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n            [defaultValue]=\"filtersFormGroup.get(filter.key)?.value\"\n            [fullWidth]=\"true\"\n            [carbonTheme]=\"'g100'\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></v-input>\n        }\n        @else if (filter.dataType === 'text' && filter.fieldType === 'range') {\n          <v-form className=\"multiple-search-fields\" (valueChange)=\"rangeValueChange(filter.key, $event)\">\n            <v-input\n              name=\"start\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_start')?.value\"\n              [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <v-input\n              name=\"end\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_end')?.value\"\n              [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n          </v-form>\n        }\n        @else if (filter.dataType === 'text' && filter.fieldType === 'single-select-dropdown') {\n          <v-select\n            [items]=\"dropdownSelectItemsMap[filter.key]\"\n            [formControlName]=\"filter.key\"\n            [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n            [appendInline]=\"true\"\n          ></v-select>\n        }\n        @else if (filter.dataType === 'text' && filter.fieldType === 'multi-select-dropdown') {\n          <v-select\n            [items]=\"dropdownSelectItemsMap[filter.key]\"\n            [formControlName]=\"filter.key\"\n            [multiple]=\"true\"\n            [placeholder]=\"'searchFields.textPlaceholder' | translate\"\n            [appendInline]=\"true\"\n          ></v-select>\n        }\n        @else if (filter.dataType === 'number' && filter.fieldType === 'single') {\n          <v-input\n            type=\"number\"\n            [hideNumberSpinBox]=\"true\"\n            [name]=\"filter.key\"\n            [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n            [defaultValue]=\"filtersFormGroup.get(filter.key)?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></v-input>\n        }\n        @else if (filter.dataType === 'number' && filter.fieldType === 'range') {\n          <v-form className=\"multiple-search-fields\" (valueChange)=\"rangeValueChange(filter.key, $event)\">\n            <v-input\n              type=\"number\"\n              name=\"start\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_start')?.value\"\n              [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <v-input\n              type=\"number\"\n              name=\"end\"\n              [defaultValue]=\"filtersFormGroup.get(filter.key + '_end')?.value\"\n              [placeholder]=\"'searchFields.numberPlaceholder' | translate\"\n              [fullWidth]=\"true\"\n            ></v-input>\n          </v-form>\n        }\n        @else if (filter.dataType === 'boolean' && filter.fieldType === 'single') {\n          <v-select\n            *ngIf=\"booleanItems$ | async as booleanItems\"\n            [items]=\"booleanItems\"\n            [formControlName]=\"filter.key\"\n            [clearSelectionSubject$]=\"clear$\"\n          ></v-select>\n        }\n        @else if (filter.dataType === 'time' && filter.fieldType === 'single') {\n          <cds-timepicker\n            [placeholder]=\"'searchFields.timePlaceholder' | translate\"\n            [formControlName]=\"filter.key\"\n          ></cds-timepicker>\n        }\n        @else if (filter.dataType === 'time' && filter.fieldType === 'range') {\n          <cds-timepicker [formControlName]=\"filter.key + '_start'\"></cds-timepicker>\n\n          <div class=\"to-text\">\n            <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n          </div>\n\n          <cds-timepicker [formControlName]=\"filter.key + '_end'\"></cds-timepicker>\n        }\n        @else if (filter.dataType === 'date' && filter.fieldType === 'single') {\n          <valtimo-date-time-picker\n            [defaultDate]=\"filtersFormGroup.get(filter.key)?.value ?? ''\"\n            [clear$]=\"clear$\"\n            [enableTime]=\"false\"\n            [showFieldLabel]=\"false\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></valtimo-date-time-picker>\n        }\n        @else if (filter.dataType === 'date' && filter.fieldType === 'range') {\n          <div class=\"multiple-search-fields\">\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_start')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"false\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_start', $event)\"\n            ></valtimo-date-time-picker>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_end')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"false\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_end', $event)\"\n            ></valtimo-date-time-picker>\n          </div>\n        }\n        @else if (filter.dataType === 'datetime' && filter.fieldType === 'single') {\n          <valtimo-date-time-picker\n            [defaultDate]=\"filtersFormGroup.get(filter.key)?.value ?? ''\"\n            [clear$]=\"clear$\"\n            [enableTime]=\"true\"\n            [showFieldLabel]=\"false\"\n            (valueChange)=\"singleValueChange(filter.key, $event)\"\n          ></valtimo-date-time-picker>\n        }\n        @else if (filter.dataType === 'datetime' && filter.fieldType === 'range') {\n          <div class=\"multiple-search-fields multiple-search-fields--stacked\">\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_start')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"true\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_start', $event)\"\n            ></valtimo-date-time-picker>\n\n            <div class=\"to-text\">\n              <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n            </div>\n\n            <valtimo-date-time-picker\n              [defaultDate]=\"filtersFormGroup.get(filter.key + '_end')?.value ?? ''\"\n              [clear$]=\"clear$\"\n              [enableTime]=\"true\"\n              [showFieldLabel]=\"false\"\n              (valueChange)=\"singleValueChange(filter.key + '_end', $event)\"\n            ></valtimo-date-time-picker>\n          </div>\n        }\n      </cds-text-label>\n    }\n  </section>\n\n  <button cdsButton=\"tertiary\" type=\"button\" (click)=\"onClearFilter()\">\n    {{ 'interface.clear' | translate }}\n    <svg class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n  </button>\n</form>\n", styles: [".valtimo-widget-interactive-table-search{display:flex;flex-direction:column;gap:16px;padding:16px;max-width:420px;max-height:300px;overflow-y:scroll}.valtimo-widget-interactive-table-search__fields{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);align-items:flex-end}.valtimo-widget-interactive-table-search__datetime{align-items:flex-end}.valtimo-widget-interactive-table-search__filter-field{width:100%;display:flex;flex-direction:column;min-width:0}.valtimo-widget-interactive-table-search__filter-field--range{grid-column:1/-1}.valtimo-widget-interactive-table-search__label{font-size:var(--cds-label-01-font-size);color:var(--widget-text-color, var(--cds-text-secondary))}::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center!important}.to-text{margin-inline-start:8px;margin-inline-end:8px}::ng-deep .cds--date-picker.cds--date-picker--single .cds--date-picker__input{inline-size:unset!important;width:180px!important}::ng-deep v-input input{background-color:var(--cds-layer-02)!important}::ng-deep v-select input{background-color:var(--cds-layer-02)!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important;max-height:max-content!important;height:max-content!important}::ng-deep .multiple-search-fields--stacked{flex-direction:column!important;align-items:stretch!important;gap:8px!important}.to-text--stacked{margin-inline-start:0;margin-inline-end:0}::ng-deep .cds--list-box__field{background-color:var(--cds-layer-02)!important}\n/*!\n * Copyright 2015-2026 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.CdsThemeService }, { type: i1$3.FormBuilder }, { type: i3.IconService }, { type: i2$1.TranslateService }], propDecorators: { initSearchRequest: [{
                 type: Input
             }], filters: [{
                 type: Input
@@ -1481,7 +1662,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
+ * Copyright 2015-2026 Ritense BV, the Netherlands.
  *
  * Licensed under EUPL, Version 1.2 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1675,7 +1856,7 @@ class WidgetInteractiveTableComponent {
         this.searchSubmitEvent.emit(searchRequest);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$2.DocumentService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", searchRequest: "searchRequest" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent", queryParamsEvent: "queryParamsEvent", searchSubmitEvent: "searchSubmitEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-table__title-container\">\n    <valtimo-mdi-icon-viewer\n      *ngIf=\"widgetConfiguration?.icon\"\n      [mdiIcon]=\"widgetConfiguration.icon\"\n    ></valtimo-mdi-icon-viewer>\n\n    <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n  </div>\n\n  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "directive", type: i3.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "ngmodule", type: MenuButtonModule }, { kind: "component", type: i3.MenuButtonComponent, selector: "cds-menu-button", inputs: ["menuId", "kind", "size", "menuAlignment", "buttonTabIndex", "disabled", "open", "label"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: ["disabled", "danger", "label", "info", "type", "checked", "icon", "value"], outputs: ["checkedChange", "itemClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: WidgetInteractiveTableSearchComponent, selector: "valtimo-widget-interactive-table-search", inputs: ["initSearchRequest", "filters"], outputs: ["searchSubmitEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetInteractiveTableComponent, isStandalone: true, selector: "valtimo-widget-interactive-table", inputs: { widgetConfiguration: "widgetConfiguration", widgetData: "widgetData", searchRequest: "searchRequest" }, outputs: { paginationEvent: "paginationEvent", rowClickEvent: "rowClickEvent", actionEvent: "actionEvent", caseStartEvent: "caseStartEvent", queryParamsEvent: "queryParamsEvent", searchSubmitEvent: "searchSubmitEvent" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-table__title-container\">\n    <valtimo-mdi-icon-viewer\n      *ngIf=\"widgetConfiguration?.icon\"\n      [mdiIcon]=\"widgetConfiguration.icon\"\n    ></valtimo-mdi-icon-viewer>\n\n    <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n  </div>\n\n  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{width:min(50vw,420px)!important;max-width:min(50vw,420px)!important}\n/*!\n * Copyright 2015-2026 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: CarbonListModule }, { kind: "component", type: i1.CarbonListComponent, selector: "valtimo-carbon-list", inputs: ["items", "fields", "tableTranslations", "paginatorConfig", "pagination", "loading", "skeletonRowCount", "actions", "actionItems", "showActionItems", "header", "hideColumnHeader", "initialSortState", "sortState", "isSearchable", "enableSingleSelection", "lastColumnTemplate", "paginationIdentifier", "showSelectionColumn", "striped", "hideToolbar", "lockedTooltipTranslationKey", "movingRowsEnabled", "dragAndDrop", "dragAndDropDisabled"], outputs: ["rowClicked", "paginationClicked", "paginationSet", "search", "sortChanged", "moveRow", "itemsReordered"] }, { kind: "component", type: i1.CarbonNoResultsComponent, selector: "valtimo-no-results", inputs: ["action", "description", "illustration", "title", "smallPadding", "collapseVertically", "alwaysRenderVertically"] }, { kind: "ngmodule", type: PaginationModule }, { kind: "ngmodule", type: TilesModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "directive", type: i3.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "ngmodule", type: MenuButtonModule }, { kind: "component", type: i3.MenuButtonComponent, selector: "cds-menu-button", inputs: ["menuId", "kind", "size", "menuAlignment", "buttonTabIndex", "disabled", "open", "label"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i3.ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: ["disabled", "danger", "label", "info", "type", "checked", "icon", "value"], outputs: ["checkedChange", "itemClick"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: MdiIconViewerComponent, selector: "valtimo-mdi-icon-viewer", inputs: ["mdiIcon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: WidgetInteractiveTableSearchComponent, selector: "valtimo-widget-interactive-table-search", inputs: ["initSearchRequest", "filters"], outputs: ["searchSubmitEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableComponent, decorators: [{
             type: Component,
@@ -1693,7 +1874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         MdiIconViewerComponent,
                         SkeletonModule,
                         WidgetInteractiveTableSearchComponent,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-table__title-container\">\n    <valtimo-mdi-icon-viewer\n      *ngIf=\"widgetConfiguration?.icon\"\n      [mdiIcon]=\"widgetConfiguration.icon\"\n    ></valtimo-mdi-icon-viewer>\n\n    <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n  </div>\n\n  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{max-width:max-content!important;width:max-content!important}\n/*!\n * Copyright 2015-2026 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"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2026 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    fields: fields$ | async,\n    widgetData: widgetData$ | async,\n    caseDefinitions: caseDefinitions$ | async,\n    filters: filters$ | async,\n  } as obs\"\n>\n  <div class=\"valtimo-widget-interactive-table__title-container\">\n    <valtimo-mdi-icon-viewer\n      *ngIf=\"widgetConfiguration?.icon\"\n      [mdiIcon]=\"widgetConfiguration.icon\"\n    ></valtimo-mdi-icon-viewer>\n\n    <span class=\"widget-title\">{{ widgetConfiguration?.title }}</span>\n  </div>\n\n  <valtimo-carbon-list\n    [header]=\"false\"\n    [fields]=\"obs.fields\"\n    [items]=\"obs.widgetData || []\"\n    [initialSortState]=\"$initialSortState()\"\n    [loading]=\"obs.widgetData === null\"\n    [skeletonRowCount]=\"widgetConfiguration?.properties?.defaultPageSize || 5\"\n    [pagination]=\"$paginationModel()\"\n    [paginatorConfig]=\"$paginatorConfig()\"\n    (paginationClicked)=\"onPaginationClicked($event)\"\n    (paginationSet)=\"onPaginationSet($event)\"\n    (sortChanged)=\"onSortChanged($event)\"\n    (rowClicked)=\"rowClick($event)\"\n  >\n    <section class=\"valtimo-widget-interactive-table__header\" carbonToolbarContent>\n      <button\n        *ngIf=\"!!obs.filters.length\"\n        carbonToolbarContent\n        [cdsOverflowMenu]=\"widgetInteractiveTableSearch\"\n        [customPane]=\"true\"\n        [iconOnly]=\"true\"\n        [flip]=\"true\"\n        [offset]=\"{x: 0, y: 47}\"\n        placement=\"bottom\"\n        cdsButton=\"ghost\"\n      >\n        <svg cdsIcon=\"filter\" size=\"16\"></svg>\n      </button>\n\n      <cds-overflow-menu\n        *ngIf=\"!!widgetConfiguration?.actions?.length\"\n        [customTrigger]=\"externalLinkTrigger\"\n        placement=\"bottom\"\n        flip=\"true\"\n        [offset]=\"{x: 4, y: 44}\"\n      >\n        @for (action of widgetConfiguration?.actions; track action.name) {\n          <cds-overflow-menu-option (click)=\"onActionClick(action)\">\n            {{ action.name }}\n          </cds-overflow-menu-option>\n        }\n      </cds-overflow-menu>\n\n      <cds-menu-button\n        *ngIf=\"widgetConfiguration?.properties?.canStartCase\"\n        [label]=\"'Start Case' | translate\"\n      >\n        @for (definition of obs.caseDefinitions; track definition.caseDefinitionKey) {\n          <cds-menu-item\n            [label]=\"definition.name\"\n            (click)=\"onCaseStart(definition)\"\n          ></cds-menu-item>\n        }\n      </cds-menu-button>\n    </section>\n\n    <valtimo-no-results\n      *ngIf=\"obs.widgetData !== null\"\n      [collapseVertically]=\"true\"\n      [description]=\"'widgets.noData' | translate\"\n      [smallPadding]=\"true\"\n    ></valtimo-no-results>\n  </valtimo-carbon-list>\n\n  <ng-template #widgetInteractiveTableSearch>\n    <valtimo-widget-interactive-table-search\n      [filters]=\"obs.filters\"\n      [initSearchRequest]=\"searchRequest\"\n      (searchSubmitEvent)=\"onSearchSubmit($event)\"\n    ></valtimo-widget-interactive-table-search>\n  </ng-template>\n\n  <ng-template #externalLinkTrigger>\n    <button cdsButton=\"ghost\" iconOnly=\"true\">\n      <svg cdsIcon=\"link\" size=\"16\"></svg>\n    </button>\n  </ng-template>\n</ng-container>\n", styles: [".valtimo-widget-interactive-table{display:flex;flex-direction:column;height:100%}.valtimo-widget-interactive-table__header{display:flex;align-items:center;justify-content:flex-end;width:100%}.valtimo-widget-interactive-table__title-container{display:flex;align-items:center;gap:8px;padding:12px 0 0 16px}.valtimo-widget-interactive-table__content{display:flex;align-items:center;flex-direction:column}.valtimo-widget-interactive-table valtimo-carbon-list,.valtimo-widget-interactive-table cds-table-container{width:100%;height:100%}.valtimo-widget-interactive-table cds-table{height:calc(100% - 88px)}.valtimo-widget-interactive-table .widget-title{color:var(--widget-text-color, var(--cds-text-primary));font-weight:600;font-size:16px;line-height:24px}.cds--menu-item__label{overflow:unset!important}::ng-deep .cds--overflow-menu-options.cds--overflow-menu-options--open{width:min(50vw,420px)!important;max-width:min(50vw,420px)!important}\n/*!\n * Copyright 2015-2026 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: i0.ChangeDetectorRef }, { type: i2$2.DocumentService }, { type: i3.IconService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -2920,6 +3101,26 @@ class WidgetWizardFiltersStepComponent {
                 content: this.translateService.instant('searchFields.text'),
                 selected: false,
             },
+            {
+                id: 'number',
+                content: this.translateService.instant('searchFields.number'),
+                selected: false,
+            },
+            {
+                id: 'date',
+                content: this.translateService.instant('searchFields.date'),
+                selected: false,
+            },
+            {
+                id: 'datetime',
+                content: this.translateService.instant('searchFields.datetime'),
+                selected: false,
+            },
+            {
+                id: 'boolean',
+                content: this.translateService.instant('searchFields.boolean'),
+                selected: false,
+            },
         ];
         this.FIELD_TYPE_ITEMS = [
             {
@@ -2927,6 +3128,40 @@ class WidgetWizardFiltersStepComponent {
                 content: this.translateService.instant('searchFieldsOverview.single'),
                 selected: false,
             },
+            {
+                id: 'range',
+                content: this.translateService.instant('searchFieldsOverview.range'),
+                selected: false,
+            },
+            {
+                id: 'single-select-dropdown',
+                content: this.translateService.instant('searchFieldsOverview.single-select-dropdown'),
+                selected: false,
+            },
+            {
+                id: 'multi-select-dropdown',
+                content: this.translateService.instant('searchFieldsOverview.multi-select-dropdown'),
+                selected: false,
+            },
+        ];
+        this.MATCH_TYPE_ITEMS = [
+            {
+                id: 'exact',
+                content: this.translateService.instant('searchFieldsOverview.exact'),
+                selected: false,
+            },
+            {
+                id: 'like',
+                content: this.translateService.instant('searchFieldsOverview.like'),
+                selected: false,
+            },
+        ];
+        this.DROPDOWN_PROVIDER_ITEMS = [
+            {
+                id: 'dropdownDatabaseDataProvider',
+                content: this.translateService.instant('searchFieldsOverview.dropdownDatabaseDataProvider'),
+                selected: false,
+            },
         ];
         this.iconService.registerAll([TrashCan16, ArrowUp16, ArrowDown16]);
     }
@@ -2971,14 +3206,24 @@ class WidgetWizardFiltersStepComponent {
             return;
         this.reorderFilters(data.index, data.index + 1);
     }
+    selectItem(items, id) {
+        const selectedItem = items.find(item => item.id === id);
+        return selectedItem ? { ...selectedItem, selected: true } : null;
+    }
     createFilterFormGroup(filter) {
-        return this.fb.group({
+        const formGroup = this.fb.group({
             title: this.fb.control(filter?.title ?? '', Validators.required),
             key: this.fb.control(filter?.key ?? '', Validators.required),
-            dataType: this.fb.control(this.getDataTypeControlValue(), Validators.required),
-            fieldType: this.fb.control(this.getFieldTypeControlValue(), Validators.required),
-            matchType: this.fb.control(filter?.matchType ?? null),
+            dataType: this.fb.control(this.selectItem(this.DATA_TYPE_ITEMS, filter?.dataType), Validators.required),
+            fieldType: this.fb.control(this.selectItem(this.FIELD_TYPE_ITEMS, filter?.fieldType), Validators.required),
+            matchType: this.fb.control(this.selectItem(this.MATCH_TYPE_ITEMS, filter?.matchType)),
+            dropdownDataProvider: this.fb.control(this.selectItem(this.DROPDOWN_PROVIDER_ITEMS, filter?.dropdownDataProvider)),
+            dropdownValues: this.fb.array([]),
         });
+        if (filter?.dropdownValues) {
+            Object.entries(filter.dropdownValues).forEach(([k, v]) => this.addDropdownValue(formGroup, { key: k, value: v }));
+        }
+        return formGroup;
     }
     initForm() {
         const filters = this.widgetWizardService.$widgetContent()?.filters ?? [];
@@ -2993,12 +3238,39 @@ class WidgetWizardFiltersStepComponent {
     }
     openFormSubscription() {
         this._subscriptions.add(this.formGroup.valueChanges.pipe(debounceTime(100)).subscribe(({ filters }) => {
+            (filters ?? []).forEach((_, index) => {
+                const form = this.filters.at(index);
+                const dataTypeId = form.get('dataType')?.value?.id;
+                const fieldTypeId = form.get('fieldType')?.value?.id;
+                const isDropdown = dataTypeId === 'text' &&
+                    (fieldTypeId === 'single-select-dropdown' || fieldTypeId === 'multi-select-dropdown');
+                if (isDropdown && !form.get('dropdownDataProvider')?.value) {
+                    form
+                        .get('dropdownDataProvider')
+                        ?.setValue({ ...this.DROPDOWN_PROVIDER_ITEMS[0], selected: true }, { emitEvent: false });
+                }
+                if (isDropdown) {
+                    const providerId = form.get('dropdownDataProvider')?.value?.id;
+                    if (providerId === 'dropdownDatabaseDataProvider') {
+                        const arr = this.getDropdownValuesArray(form);
+                        if (arr.length === 0) {
+                            this.addDropdownValue(form);
+                        }
+                    }
+                }
+                if (!isDropdown && form.get('dropdownDataProvider')?.value) {
+                    form.get('dropdownDataProvider')?.setValue(null, { emitEvent: false });
+                    this.getDropdownValuesArray(form).clear();
+                }
+            });
             const mappedFilters = (filters ?? []).map(filter => ({
                 title: filter.title,
                 key: filter.key,
-                dataType: this.getListItemId(filter.dataType) ?? 'text',
-                fieldType: this.getListItemId(filter.fieldType) ?? 'single',
-                matchType: filter.matchType,
+                dataType: this.getListItemId(filter.dataType) ?? null,
+                fieldType: this.getListItemId(filter.fieldType) ?? null,
+                matchType: this.getListItemId(filter.matchType) ?? null,
+                dropdownDataProvider: this.getListItemId(filter.dropdownDataProvider) ?? null,
+                dropdownValues: this.mapDropdownValues(filter.dropdownValues) ?? null,
             }));
             this.widgetWizardService.$widgetContent.update((content) => ({
                 ...content,
@@ -3007,28 +3279,63 @@ class WidgetWizardFiltersStepComponent {
             this.widgetWizardService.$widgetFiltersValid.set(this.formGroup.valid);
         }));
     }
+    getDropdownValuesArray(formGroup) {
+        return formGroup.get('dropdownValues');
+    }
     getDataTypeDropdownItems(filterRow) {
-        const selectedId = this.getListItemId(filterRow.get('dataType')?.value) ?? 'text';
-        return this.selectItem(this.DATA_TYPE_ITEMS, selectedId);
+        const selectedId = filterRow.get('dataType')?.value?.id ?? null;
+        return this.DATA_TYPE_ITEMS.map(item => ({ ...item, selected: item.id === selectedId }));
     }
     getFieldTypeDropdownItems(filterRow) {
-        const selectedId = this.getListItemId(filterRow.get('fieldType')?.value) ?? 'single';
-        return this.selectItem(this.FIELD_TYPE_ITEMS, selectedId);
+        const selectedId = filterRow.get('fieldType')?.value?.id ?? null;
+        const dataTypeId = filterRow.get('dataType')?.value?.id ?? null;
+        const isText = dataTypeId === 'text';
+        const isBoolean = dataTypeId === 'boolean';
+        const items = this.FIELD_TYPE_ITEMS.filter(item => {
+            if (isText)
+                return true;
+            if (isBoolean)
+                return item.id === 'single';
+            return item.id !== 'single-select-dropdown' && item.id !== 'multi-select-dropdown';
+        });
+        return items.map(item => ({
+            ...item,
+            selected: item.id === selectedId,
+        }));
+    }
+    getMatchTypeDropdownItems(filterRow) {
+        const selectedId = filterRow.get('matchType')?.value?.id ?? null;
+        return this.MATCH_TYPE_ITEMS.map(item => ({ ...item, selected: item.id === selectedId }));
+    }
+    getDropdownDataProviderItems(filterRow) {
+        const selectedId = filterRow.get('dropdownDataProvider')?.value?.id ?? null;
+        return this.DROPDOWN_PROVIDER_ITEMS.map(item => ({ ...item, selected: item.id === selectedId }));
+    }
+    shouldShowDropdownValues(filterRow) {
+        const dataTypeId = filterRow.get('dataType')?.value?.id ?? null;
+        const fieldTypeId = filterRow.get('fieldType')?.value?.id ?? null;
+        const providerId = filterRow.get('dropdownDataProvider')?.value?.id ?? null;
+        const hasValues = (filterRow.get('dropdownValues')?.value?.length ?? 0) > 0;
+        const isDropdownField = dataTypeId === 'text' &&
+            (fieldTypeId === 'single-select-dropdown' || fieldTypeId === 'multi-select-dropdown');
+        return isDropdownField && (providerId === 'dropdownDatabaseDataProvider' || hasValues);
+    }
+    addDropdownValue(filterRow, prefill) {
+        const arr = this.getDropdownValuesArray(filterRow);
+        arr.push(this.fb.group({
+            key: this.fb.control(prefill?.key ?? '', Validators.required),
+            value: this.fb.control(prefill?.value ?? '', Validators.required),
+        }));
+    }
+    removeDropdownValue(filterRow, index) {
+        const arr = this.getDropdownValuesArray(filterRow);
+        arr.removeAt(index);
     }
     onFilterAccordionSelection(expanded, index) {
         this.expandedFilterIndex = expanded ? index : -1;
     }
     getListItemId(value) {
-        if (!value) {
-            return null;
-        }
-        return value.id;
-    }
-    getDataTypeControlValue() {
-        return { ...this.DATA_TYPE_ITEMS[0], selected: true };
-    }
-    getFieldTypeControlValue() {
-        return { ...this.FIELD_TYPE_ITEMS[0], selected: true };
+        return value?.id ?? null;
     }
     reorderFilters(fromIndex, toIndex) {
         const reorderedControls = this.swapItems(this.filters.controls, fromIndex, toIndex);
@@ -3045,20 +3352,24 @@ class WidgetWizardFiltersStepComponent {
             this.expandedFilterIndex = fromIndex;
         }
     }
-    selectItem(items, selectedId) {
-        return items.map(item => ({
-            ...item,
-            selected: item.id === selectedId,
-        }));
-    }
     swapItems(items, index1, index2) {
         const itemToInsert = items[index1];
         const filteredItems = items.filter((_, index) => index !== index1);
         filteredItems.splice(index2, 0, itemToInsert);
         return filteredItems;
     }
+    mapDropdownValues(values) {
+        if (!values || values.length === 0)
+            return null;
+        return values.reduce((acc, curr) => {
+            if (!curr?.key)
+                return acc;
+            acc[curr.key] = curr.value ?? '';
+            return acc;
+        }, {});
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardFiltersStepComponent, deps: [{ token: i1$3.FormBuilder }, { token: WidgetWizardService }, { token: i3.IconService }, { token: i2$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetWizardFiltersStepComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index,\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: WidgetWizardFiltersStepComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2025 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<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index,\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            @if ((filterRow.get('dataType')?.value?.id) === 'text') {\n              <cds-dropdown cdsLayer [label]=\"'searchFieldsOverview.matchType' | translate\" formControlName=\"matchType\">\n                <cds-dropdown-list [items]=\"getMatchTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n              </cds-dropdown>\n            }\n\n            @if (\n              (filterRow.get('dataType')?.value?.id) === 'text' &&\n              ((filterRow.get('fieldType')?.value?.id) === 'single-select-dropdown' ||\n                (filterRow.get('fieldType')?.value?.id) === 'multi-select-dropdown')\n              ) {\n              <cds-dropdown\n                cdsLayer\n                [label]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n                formControlName=\"dropdownDataProvider\"\n              >\n                <cds-dropdown-list\n                  [items]=\"getDropdownDataProviderItems(filterRow)\"\n                ></cds-dropdown-list>\n              </cds-dropdown>\n            }\n\n            @if (shouldShowDropdownValues(filterRow)) {\n              <div class=\"valtimo-widget-wizard-filters__list\" formArrayName=\"dropdownValues\">\n                <v-input-label\n                  [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n                  [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n                  [noMargin]=\"true\"\n                ></v-input-label>\n\n                @for (dropdownValue of (filterRow.get('dropdownValues')?.['controls'] ?? []); track $index) {\n                  <div [formGroup]=\"dropdownValue\" class=\"valtimo-widget-wizard-filters__dropdown-values\">\n                    <cds-text-label>\n                      {{ 'interface.value' | translate }}\n                      <input cdsText type=\"text\" formControlName=\"key\" cdsLayer />\n                    </cds-text-label>\n\n                    <cds-text-label>\n                      {{ 'interface.display' | translate }}\n                      <input cdsText type=\"text\" formControlName=\"value\" cdsLayer />\n                    </cds-text-label>\n\n                    <button\n                      cdsButton=\"danger\"\n                      [iconOnly]=\"true\"\n                      type=\"button\"\n                      [disabled]=\"(filterRow.get('dropdownValues')?.value?.length ?? 0) === 1\"\n                      (click)=\"removeDropdownValue(filterRow, $index)\"\n                    >\n                      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                    </button>\n                  </div>\n                }\n\n                <button cdsButton=\"primary\" type=\"button\" (click)=\"addDropdownValue(filterRow)\">\n                  {{ 'interface.addRow' | translate }}\n                  <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n                </button>\n              </div>\n            }\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:flex-end}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters__dropdown-values{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:16px;align-items:flex-end;width:100%;margin-bottom:12px}.valtimo-widget-wizard-filters__dropdown-values cds-text-label{width:100%}.valtimo-widget-wizard-filters__dropdown-values button[cdsbutton=danger]{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}.valtimo-widget-wizard-filters .cds--text-input{background:var(--cds-layer-02)}v-input-label{margin-bottom:8px}\n/*!\n * Copyright 2015-2025 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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1$3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "ngmodule", type: InputModule }, { kind: "component", type: i3.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: i1.InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i7.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "readonly", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp", "fluid"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i7.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetWizardFiltersStepComponent, decorators: [{
             type: Component,
@@ -3073,7 +3384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         IconModule,
                         InputLabelModule,
                         DropdownModule,
-                    ], template: "<!--\n  ~ Copyright 2015-2025 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<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index,\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:1fr 1fr 180px 180px;align-items:flex-end;gap:16px}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters .cds--text-input{background:var(--cds-layer-02)}\n/*!\n * Copyright 2015-2025 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"] }]
+                    ], template: "<!--\n  ~ Copyright 2015-2025 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<form [formGroup]=\"formGroup\" class=\"valtimo-widget-wizard-filters\">\n  <cds-accordion formArrayName=\"filters\" align=\"start\" size=\"sm\">\n    @for (filterRow of filters.controls; track $index) {\n      <cds-accordion-item\n        [title]=\"filterTitle\"\n        [expanded]=\"expandedFilterIndex === $index\"\n        [context]=\"{\n          title: filterRow.get('title')?.value,\n          count: $count,\n          index: $index,\n        }\"\n        (selected)=\"onFilterAccordionSelection($event.expanded, $index)\"\n        class=\"valtimo-widget-wizard-filters__item\"\n      >\n        <form\n          [formGroup]=\"filterRow\"\n          class=\"valtimo-widget-wizard-filters__container\"\n          (click)=\"$event.stopImmediatePropagation()\"\n        >\n          <div class=\"valtimo-widget-wizard-filters__row\">\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.title' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.titleTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"title\"\n                [placeholder]=\"'widgetTabManagement.filters.titlePlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-text-label>\n              <v-input-label\n                [title]=\"'widgetTabManagement.filters.key' | translate\"\n                [tooltip]=\"'widgetTabManagement.filters.keyTooltip' | translate\"\n              ></v-input-label>\n\n              <input\n                cdsText\n                formControlName=\"key\"\n                [placeholder]=\"'widgetTabManagement.filters.keyPlaceholder' | translate\"\n                type=\"text\"\n              />\n            </cds-text-label>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.dataType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.dataTypePlaceholder' | translate\"\n              formControlName=\"dataType\"\n            >\n              <cds-dropdown-list [items]=\"getDataTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            <cds-dropdown\n              cdsLayer\n              [label]=\"'widgetTabManagement.filters.fieldType' | translate\"\n              [placeholder]=\"'widgetTabManagement.filters.fieldTypePlaceholder' | translate\"\n              formControlName=\"fieldType\"\n            >\n              <cds-dropdown-list [items]=\"getFieldTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n            </cds-dropdown>\n\n            @if ((filterRow.get('dataType')?.value?.id) === 'text') {\n              <cds-dropdown cdsLayer [label]=\"'searchFieldsOverview.matchType' | translate\" formControlName=\"matchType\">\n                <cds-dropdown-list [items]=\"getMatchTypeDropdownItems(filterRow)\"></cds-dropdown-list>\n              </cds-dropdown>\n            }\n\n            @if (\n              (filterRow.get('dataType')?.value?.id) === 'text' &&\n              ((filterRow.get('fieldType')?.value?.id) === 'single-select-dropdown' ||\n                (filterRow.get('fieldType')?.value?.id) === 'multi-select-dropdown')\n              ) {\n              <cds-dropdown\n                cdsLayer\n                [label]=\"'searchFieldsOverview.dropdownDataProvider' | translate\"\n                formControlName=\"dropdownDataProvider\"\n              >\n                <cds-dropdown-list\n                  [items]=\"getDropdownDataProviderItems(filterRow)\"\n                ></cds-dropdown-list>\n              </cds-dropdown>\n            }\n\n            @if (shouldShowDropdownValues(filterRow)) {\n              <div class=\"valtimo-widget-wizard-filters__list\" formArrayName=\"dropdownValues\">\n                <v-input-label\n                  [title]=\"'searchFieldsOverview.dropdownListValues' | translate\"\n                  [tooltip]=\"'searchFieldsOverviewTooltips.dropdownListValues' | translate\"\n                  [noMargin]=\"true\"\n                ></v-input-label>\n\n                @for (dropdownValue of (filterRow.get('dropdownValues')?.['controls'] ?? []); track $index) {\n                  <div [formGroup]=\"dropdownValue\" class=\"valtimo-widget-wizard-filters__dropdown-values\">\n                    <cds-text-label>\n                      {{ 'interface.value' | translate }}\n                      <input cdsText type=\"text\" formControlName=\"key\" cdsLayer />\n                    </cds-text-label>\n\n                    <cds-text-label>\n                      {{ 'interface.display' | translate }}\n                      <input cdsText type=\"text\" formControlName=\"value\" cdsLayer />\n                    </cds-text-label>\n\n                    <button\n                      cdsButton=\"danger\"\n                      [iconOnly]=\"true\"\n                      type=\"button\"\n                      [disabled]=\"(filterRow.get('dropdownValues')?.value?.length ?? 0) === 1\"\n                      (click)=\"removeDropdownValue(filterRow, $index)\"\n                    >\n                      <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n                    </button>\n                  </div>\n                }\n\n                <button cdsButton=\"primary\" type=\"button\" (click)=\"addDropdownValue(filterRow)\">\n                  {{ 'interface.addRow' | translate }}\n                  <svg cdsIcon=\"add\" size=\"16\" class=\"cds--btn__icon\"></svg>\n                </button>\n              </div>\n            }\n          </div>\n        </form>\n      </cds-accordion-item>\n    }\n  </cds-accordion>\n\n  <button cdsButton=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFilter()\">\n    {{ 'widgetTabManagement.filters.add' | translate }}\n\n    <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n  </button>\n</form>\n\n<ng-template #filterTitle let-title=\"title\" let-count=\"count\" let-index=\"index\">\n  <div class=\"valtimo-widget-wizard-filters__title\">\n    <span>\n      {{ title || ('widgetTabManagement.filters.titlePlaceholder' | translate) }}\n    </span>\n\n    <section class=\"valtimo-widget-wizard-filters__actions\">\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === 0\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveUpClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"tertiary\"\n        [disabled]=\"index === count - 1\"\n        [iconOnly]=\"true\"\n        size=\"sm\"\n        type=\"button\"\n        (click)=\"onMoveDownClick($event, {index: index, length: count})\"\n      >\n        <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n      </button>\n\n      <button\n        cdsButton=\"danger\"\n        [iconOnly]=\"true\"\n        type=\"button\"\n        class=\"valtimo-widget-wizard-filters__delete-button\"\n        (click)=\"removeFilter($event, index)\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </section>\n  </div>\n</ng-template>\n", styles: [".valtimo-widget-wizard-filters{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__item{background:var(--cds-layer-01)}.valtimo-widget-wizard-filters__item .cds--accordion__content{padding-inline-end:20px}.valtimo-widget-wizard-filters__container{display:flex;flex-direction:column;gap:16px}.valtimo-widget-wizard-filters__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:flex-end}.valtimo-widget-wizard-filters__title{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8px}.valtimo-widget-wizard-filters__actions{display:flex;gap:8px;align-items:center}.valtimo-widget-wizard-filters__dropdown-values{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:16px;align-items:flex-end;width:100%;margin-bottom:12px}.valtimo-widget-wizard-filters__dropdown-values cds-text-label{width:100%}.valtimo-widget-wizard-filters__dropdown-values button[cdsbutton=danger]{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}.valtimo-widget-wizard-filters .cds--text-input{background:var(--cds-layer-02)}v-input-label{margin-bottom:8px}\n/*!\n * Copyright 2015-2025 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: WidgetWizardService }, { type: i3.IconService }, { type: i2$1.TranslateService }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -5524,6 +5835,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i2$1.TranslateService }] });
 
+/*
+ * Copyright 2015-2026 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 WidgetInteractiveTableService {
+    constructor(documentService, httpClient, configService, fb) {
+        this.documentService = documentService;
+        this.httpClient = httpClient;
+        this.configService = configService;
+        this.fb = fb;
+    }
+    getDropdownDataProviders() {
+        return this.documentService.getDropdownDataProviders();
+    }
+    supportsDropdownValueUpdates(providerId) {
+        return providerId === FilterDropdownDataProvider.DATABASE;
+    }
+    getDropdownValues(provider, dropdownKey) {
+        if (!provider || !dropdownKey)
+            return of(null);
+        return this.httpClient
+            .get(this.getDropdownListUrl(provider, dropdownKey))
+            .pipe(catchError(() => of(null)));
+    }
+    saveDropdownValues(provider, dropdownKey, dropdownValues) {
+        if (!provider || !dropdownKey || !Object.keys(dropdownValues ?? {}).length)
+            return of({});
+        return this.httpClient.post(this.getDropdownListUrl(provider, dropdownKey), dropdownValues);
+    }
+    deleteDropdownValues(provider, dropdownKey) {
+        if (!provider || !dropdownKey)
+            return of({});
+        return this.httpClient.delete(this.getDropdownListUrl(provider, dropdownKey));
+    }
+    buildDropdownDataKey(context, params, filterKey) {
+        if (!filterKey)
+            return null;
+        if (context === 'case' && this.isCaseParams(params)) {
+            return `${params.caseDefinitionKey}_${filterKey}`;
+        }
+        if (context === 'iko' && this.isIkoParams(params)) {
+            return params.actionKey
+                ? `${params.aggregateKey}_${params.actionKey}_${filterKey}`
+                : null;
+        }
+        return null;
+    }
+    createDropdownValuesFormArray(values) {
+        const entries = Array.isArray(values)
+            ? values.map(({ key, value }) => [key, value])
+            : Object.entries(values ?? {});
+        const controls = entries.map(([key, value]) => this.createDropdownValueGroup(key, value));
+        return this.fb.array(controls.length ? controls : [this.createDropdownValueGroup()]);
+    }
+    createDropdownValueGroup(key = '', value = '') {
+        return this.fb.group({
+            key: this.fb.control(key, Validators.required),
+            value: this.fb.control(value, Validators.required),
+        });
+    }
+    mapDropdownValuesArrayToObject(dropdownValues) {
+        if (!dropdownValues?.length)
+            return null;
+        return dropdownValues.reduce((acc, value) => value?.key && value?.value ? { ...acc, [value.key]: value.value } : acc, {});
+    }
+    isDropdownFieldType(fieldTypeId) {
+        return ['single-select-dropdown', 'multi-select-dropdown'].includes(fieldTypeId ?? '');
+    }
+    getDropdownListUrl(provider, dropdownKey) {
+        const key = encodeURI(dropdownKey);
+        return `${this.configService.config.valtimoApi.endpointUri}v1/data/dropdown-list?provider=${provider}&key=${key}`;
+    }
+    isCaseParams(params) {
+        return typeof params === 'object' && params !== null && 'caseDefinitionKey' in params;
+    }
+    isIkoParams(params) {
+        return typeof params === 'object' && params !== null && 'aggregateKey' in params;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableService, deps: [{ token: i2$2.DocumentService }, { token: i2$3.HttpClient }, { token: i1$1.ConfigService }, { token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: WidgetInteractiveTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i2$2.DocumentService }, { type: i2$3.HttpClient }, { type: i1$1.ConfigService }, { type: i1$3.FormBuilder }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -5745,5 +6155,5 @@ class ManagementWidgetDetailsComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_COLOR_ILLUSTRATION_MAP, WIDGET_COLOR_ITEMS, WIDGET_COLOR_LABELS, WIDGET_COLOR_THEME_MAP, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetColor, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetInteractiveTableSearchComponent, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
+export { AVAILABLE_WIDGETS, CUSTOM_WIDGET_TOKEN, DEFAULT_WIDGET_COMPONENT_MAP, FilterDropdownDataProvider, LayoutComponent, LayoutInternalComponent, LayoutModule, LayoutPublicComponent, LayoutService, ManagementWidgetDetailsComponent, TranslationManagementComponent, TranslationManagementModule, WIDGET_COLOR_ILLUSTRATION_MAP, WIDGET_COLOR_ITEMS, WIDGET_COLOR_LABELS, WIDGET_COLOR_THEME_MAP, WIDGET_DENSITY_LABELS, WIDGET_HEIGHT_1X, WIDGET_MANAGEMENT_SERVICE, WIDGET_WIDTH_1X, WIDGET_WIDTH_LABELS, WIZARD_STEP_COMPONENTS, WidgetActionButtonComponent, WidgetBlockComponent, WidgetCollectionComponent, WidgetColor, WidgetContainerComponent, WidgetCustomComponent, WidgetDensity, WidgetDisplayTypeKey, WidgetFieldComponent, WidgetFieldsService, WidgetFormioComponent, WidgetInteractiveTableComponent, WidgetInteractiveTableSearchComponent, WidgetInteractiveTableService, WidgetLayoutService, WidgetManagementCollectionComponent, WidgetManagementComponent, WidgetManagementCustomComponent, WidgetManagementEditorComponent, WidgetManagementFieldsComponent, WidgetManagementMapComponent, WidgetManagementTab, WidgetManagementTableComponent, WidgetManagementWizardComponent, WidgetMapComponent, WidgetTableComponent, WidgetType, WidgetTypeTags, WidgetWizardCloseEventType, WidgetWizardService, WidgetWizardStep };
 //# sourceMappingURL=valtimo-layout.mjs.map