@valtimo/components 13.2.1 → 13.3.0

package/fesm2022/valtimo-components.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, RendererStyleFlags2, Inject, Injectable, Input, Component, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, inject, InjectionToken, ChangeDetectionStrategy, signal, TemplateRef, ContentChild, ElementRef, forwardRef, ViewChildren, ContentChildren, computed } from '@angular/core';
-import { combineLatest, map, BehaviorSubject, fromEvent, Subject, Subscription, Observable, take as take$1, of, tap as tap$1, interval, switchMap, startWith, filter as filter$1, merge, debounceTime as debounceTime$1, timer, first } from 'rxjs';
+import { InjectionToken, Pipe, NgModule, Injectable, RendererStyleFlags2, Inject, signal, computed, Input, Component, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, inject, ChangeDetectionStrategy, TemplateRef, ContentChild, ElementRef, forwardRef, ViewChildren, ContentChildren } from '@angular/core';
+import { combineLatest, map, BehaviorSubject, Subscription, Observable, filter as filter$1, fromEvent, Subject, take as take$1, of, tap as tap$1, interval, switchMap, startWith, merge, debounceTime as debounceTime$1, timer, first } from 'rxjs';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
-import { take, map as map$1, tap, debounceTime, filter, distinctUntilChanged, takeUntil, switchMap as switchMap$1, delay } from 'rxjs/operators';
+import { filter, map as map$1, take, tap, debounceTime, distinctUntilChanged, takeUntil, switchMap as switchMap$1, delay } from 'rxjs/operators';
+import * as i1$1 from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import * as i1$2 from '@valtimo/shared';
+import { BaseApiService, VERSIONS, HttpLoaderFactory, getCaseManagementRouteParams, UrlUtils, ConfigService } from '@valtimo/shared';
 import * as i1$4 from '@angular/common';
 import { DOCUMENT, CommonModule, registerLocaleData, CurrencyPipe, DecimalPipe, PercentPipe } from '@angular/common';
-import * as i1$1 from '@valtimo/shared';
-import { BaseApiService, VERSIONS, HttpLoaderFactory, getCaseManagementRouteParams, UrlUtils, ConfigService } from '@valtimo/shared';
-import * as i1$2 from '@angular/common/http';
-import { HttpClient } from '@angular/common/http';
 import * as i1$3 from '@angular/router';
 import { NavigationEnd, NavigationStart, ResolveEnd, RouterModule } from '@angular/router';
 import { deepmerge } from 'deepmerge-ts';
@@ -24,7 +24,7 @@ import moment from 'moment';
 import User20 from '@carbon/icons/es/user/20';
 import * as i1$5 from 'keycloak-angular';
 import * as i3 from 'carbon-components-angular';
-import { UIShellModule, IconModule, LinkModule, DialogModule, GridModule, TabsModule, StructuredListModule, ToggleModule, TagModule, DropdownModule, LayerModule, SkeletonModule, LoadingModule, Table, TableHeaderItem, TableItem, TableModel, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, ButtonModule, ModalModule as ModalModule$1, BreadcrumbModule, InputModule as InputModule$1, CheckboxModule, ComboBoxModule, AccordionModule, ModalButtonType, TilesModule, RadioModule as RadioModule$1, ModalService as ModalService$1 } from 'carbon-components-angular';
+import { UIShellModule, IconModule, LinkModule, DialogModule, GridModule, TabsModule, StructuredListModule, ToggleModule, TagModule, DropdownModule, LayerModule, SkeletonModule, LoadingModule, Table, TableHeaderItem, TableItem, TableModel, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, ButtonModule, ModalModule as ModalModule$1, BreadcrumbModule, InputModule as InputModule$1, CheckboxModule, ComboBoxModule, AccordionModule, ModalButtonType, TilesModule, RadioModule as RadioModule$1, ModalService as ModalService$1, NotificationModule, ContextMenuModule, TooltipModule as TooltipModule$1 } from 'carbon-components-angular';
 import * as i5 from '@angular/platform-browser';
 import * as i2$1 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -34,7 +34,7 @@ import * as i11 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i3$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
-import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16 } from '@carbon/icons';
+import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, TrashCan16 } from '@carbon/icons';
 import localeNl from '@angular/common/locales/nl';
 import moment$1 from 'moment/moment';
 import BpmnViewer from 'bpmn-js';
@@ -45,10 +45,10 @@ import { jwtDecode } from 'jwt-decode';
 import Dropzone from 'dropzone';
 import * as i3$2 from '@valtimo/document';
 import { DocumentModule, DocumentService, InternalCaseStatusUtils, CaseTagsUtils } from '@valtimo/document';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$7 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
+import { OverlayModule, Overlay } from '@angular/cdk/overlay';
 import Currency from '@tadashi/currency';
 import * as i2$2 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
@@ -609,22 +609,6 @@ class TimelineItemImpl {
  * limitations under the License.
  */
 
-/*
- * Copyright 2015-2025 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -692,6 +676,22 @@ var ValuePathSelectorInputMode;
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2025 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -745,6 +745,8 @@ const BOOLEAN_CONVERTER_VALUES = ['Yes', 'No'];
  */
 const CASES_WITHOUT_STATUS_KEY = 'CASES_WITHOUT_STATUS_KEY';
 
+const QUICK_SEARCH_SERVICE = new InjectionToken('QUICK_SEARCH_SERVICE');
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -937,6 +939,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2025 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 CdsThemeService {
+    get preferredTheme$() {
+        return this._preferredTheme$.pipe(filter(theme => !!theme));
+    }
+    get currentTheme$() {
+        return this._currentTheme$.pipe(filter(theme => !!theme));
+    }
+    get toggletipTheme$() {
+        return this.currentTheme$.pipe(map$1(currentTheme => currentTheme === CurrentCarbonTheme.G10 ? CurrentCarbonTheme.G90 : CurrentCarbonTheme.WHITE));
+    }
+    constructor() {
+        this._preferredTheme$ = new BehaviorSubject(SelectableCarbonTheme.G10);
+        this._currentTheme$ = new BehaviorSubject(null);
+        this._subscriptions = new Subscription();
+        this.openDarkModeSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    setPreferredTheme(selectedTheme) {
+        if (selectedTheme)
+            this._preferredTheme$.next(selectedTheme);
+    }
+    openDarkModeSubscription() {
+        combineLatest([this.getBrowserPrefersDarkModeObservable(), this.preferredTheme$]).subscribe(([browserPrefersDarkMode, preferredTheme]) => {
+            switch (preferredTheme) {
+                case SelectableCarbonTheme.SYSTEM:
+                    if (browserPrefersDarkMode) {
+                        this.setThemeOnDocument(CurrentCarbonTheme.G90);
+                    }
+                    else {
+                        this.setThemeOnDocument(CurrentCarbonTheme.G10);
+                    }
+                    break;
+                case SelectableCarbonTheme.G10:
+                    this.setThemeOnDocument(CurrentCarbonTheme.G10);
+                    break;
+                case SelectableCarbonTheme.G90:
+                    this.setThemeOnDocument(CurrentCarbonTheme.G90);
+                    break;
+            }
+        });
+    }
+    setThemeOnDocument(theme) {
+        document.documentElement.setAttribute('data-carbon-theme', theme);
+        this._currentTheme$.next(theme);
+    }
+    getBrowserPrefersDarkModeObservable(signal) {
+        return new Observable(subscriber => {
+            if (!window.matchMedia) {
+                subscriber.error(new Error('No windows Media Match available'));
+            }
+            function emitValue(event) {
+                subscriber.next(event.matches);
+            }
+            const mediaListQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            if (signal) {
+                signal.onabort = () => {
+                    mediaListQuery.removeEventListener('change', emitValue);
+                    !subscriber.closed && subscriber.complete();
+                };
+            }
+            mediaListQuery.addEventListener('change', emitValue);
+            subscriber.next(mediaListQuery.matches);
+            return () => {
+                mediaListQuery.removeEventListener('change', emitValue);
+                !subscriber.closed && subscriber.complete();
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CdsThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CdsThemeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CdsThemeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class ChoiceFieldService {
+    constructor(http, configService) {
+        this.http = http;
+        this.configService = configService;
+        this.valtimoApiConfig = this.configService.config.valtimoApi;
+    }
+    query(params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-fields`, {
+            observe: 'response',
+            params,
+        });
+    }
+    queryPage(params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}v2/choice-fields`, {
+            params,
+        });
+    }
+    get(id) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-fields/${id}`);
+    }
+    create(choiceField) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}v1/choice-fields`, choiceField);
+    }
+    delete(id) {
+        return this.http.delete(`${this.valtimoApiConfig.endpointUri}v1/choice-fields/${id}`);
+    }
+    update(choiceField) {
+        return this.http.put(`${this.valtimoApiConfig.endpointUri}v1/choice-fields`, choiceField);
+    }
+    queryValues(keyName, params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values/${keyName}/values`, { observe: 'response', params });
+    }
+    queryValuesPage(keyName, params) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}v2/choice-field-values/${keyName}/values`, { params });
+    }
+    getValue(choiceFieldId) {
+        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values/${choiceFieldId}`);
+    }
+    updateValue(choiceFieldValue, choiceFieldName) {
+        return this.http.put(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values`, choiceFieldValue, {
+            params: { choice_field_name: choiceFieldName },
+        });
+    }
+    createValue(choiceFieldValue, choiceFieldName) {
+        return this.http.post(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values`, choiceFieldValue, { params: { choice_field_name: choiceFieldName } });
+    }
+    getChoiceFieldByName(name) {
+        return this.http.get(this.valtimoApiConfig.endpointUri + 'v1/choice-fields/name/' + name);
+    }
+    getChoiceFieldValueByNameAndValue(name, value) {
+        return this.http.get(this.valtimoApiConfig.endpointUri +
+            'v1/choice-field-values/choice-field/' +
+            name +
+            '/value/' +
+            value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChoiceFieldService, deps: [{ token: i1$1.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChoiceFieldService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChoiceFieldService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1$2.ConfigService }] });
+
+/*
+ * Copyright 2015-2025 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 KeyGeneratorService {
+    getUniqueKey(entityName, usedKeys) {
+        const dashCaseKey = `${entityName}`
+            .toLowerCase()
+            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
+            .replace(/_[-_]+/g, '_')
+            .replace(/^[^a-z]+|[^a-z0-9]+$/g, '');
+        if (!usedKeys.includes(dashCaseKey)) {
+            return dashCaseKey;
+        }
+        return this.getUniqueKeyWithNumber(dashCaseKey, usedKeys);
+    }
+    getUniqueKeyWithNumber(dashCaseKey, usedKeys) {
+        const numbersFromCurrentKey = (dashCaseKey.match(/^\d+|\d+\b|\d+(?=\w)/g) || []).map((numberValue) => +numberValue);
+        const lastNumberFromCurrentKey = numbersFromCurrentKey.length > 0 && numbersFromCurrentKey[numbersFromCurrentKey.length - 1];
+        const newKey = lastNumberFromCurrentKey
+            ? `${dashCaseKey.replace(`${lastNumberFromCurrentKey}`, `${lastNumberFromCurrentKey + 1}`)}`
+            : `${dashCaseKey}-1`;
+        if (usedKeys.includes(newKey)) {
+            return this.getUniqueKeyWithNumber(newKey, usedKeys);
+        }
+        return newKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyGeneratorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyGeneratorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -1095,158 +1306,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class PromptService {
-    constructor() {
-        this._promptVisible$ = new BehaviorSubject(false);
-        this._appearing$ = new BehaviorSubject(false);
-        this._disappearing$ = new BehaviorSubject(false);
-        this._appearingDelayMs$ = new BehaviorSubject(140);
-        this._identifier$ = new BehaviorSubject('');
-        this._headerText$ = new BehaviorSubject('');
-        this._bodyText$ = new BehaviorSubject('');
-        this._cancelText$ = new BehaviorSubject('');
-        this._confirmText$ = new BehaviorSubject('');
-        this._closeOnConfirm$ = new BehaviorSubject(false);
-        this._closeOnCancel$ = new BehaviorSubject(false);
-        this._closeButtonVisible$ = new BehaviorSubject(false);
-        this._cancelCallbackFunction$ = new BehaviorSubject(() => { });
-        this._confirmCallbackFunction$ = new BehaviorSubject(() => { });
-        this._closeCallbackFunction$ = new BehaviorSubject(() => { });
+class PageHeaderService {
+    get headerViewContainerRef$() {
+        return this._headerViewContainerRef$.pipe(filter(ref => !!ref));
     }
-    get promptVisible$() {
-        return this._promptVisible$.asObservable();
+    get contentViewContainerRef$() {
+        return this._contentViewContainerRef$.pipe(filter(ref => !!ref));
     }
-    get appearing$() {
-        return this._appearing$.asObservable();
+    get compactMode$() {
+        return this._compactMode$.asObservable();
     }
-    get disappearing$() {
-        return this._disappearing$.asObservable();
+    get smallTitle$() {
+        return this._smallTitle$.asObservable();
     }
-    get appearingDelayMs$() {
-        return this._appearingDelayMs$.asObservable();
+    get showUserNameInTopBar$() {
+        return this._showUserNameInTopBar$.asObservable();
     }
-    get appearingDelayMs() {
-        return this._appearingDelayMs$.getValue();
+    get pageActionsHasContent$() {
+        return this._pageActionsHasContent$.asObservable();
     }
-    get identifier$() {
-        return this._identifier$.asObservable();
+    get pageHeadHeight$() {
+        return this._pageHeadHeight$.pipe(filter(height => height !== null));
     }
-    get headerText$() {
-        return this._headerText$.asObservable();
+    constructor(configService) {
+        this.configService = configService;
+        this._headerViewContainerRef$ = new BehaviorSubject(null);
+        this._contentViewContainerRef$ = new BehaviorSubject(null);
+        this._compactMode$ = new BehaviorSubject(!!this.configService?.config?.featureToggles?.compactModeOnByDefault);
+        this._showUserNameInTopBar$ = new BehaviorSubject(this.getDefaultShowUserNameInTopBarValue());
+        this._pageActionsHasContent$ = new BehaviorSubject(false);
+        this._pageHeadHeight$ = new BehaviorSubject(null);
+        this._smallTitle$ = new BehaviorSubject(false);
     }
-    get bodyText$() {
-        return this._bodyText$.asObservable();
+    setHeaderViewContainerRef(ref) {
+        this._headerViewContainerRef$.next(ref);
     }
-    get cancelText$() {
-        return this._cancelText$.asObservable();
+    setContentViewContainerRef(ref) {
+        this._contentViewContainerRef$.next(ref);
     }
-    get confirmText$() {
-        return this._confirmText$.asObservable();
+    setCompactMode(compactMode) {
+        this._compactMode$.next(compactMode);
     }
-    get closeButtonVisible$() {
-        return this._closeButtonVisible$.asObservable();
+    setShowUserNameInTopBar(show) {
+        this._showUserNameInTopBar$.next(show);
     }
-    openPrompt(promptParameters) {
-        if (promptParameters.identifier)
-            this._identifier$.next(promptParameters.identifier);
-        this._headerText$.next(promptParameters.headerText);
-        this._bodyText$.next(promptParameters.bodyText);
-        this._cancelText$.next(promptParameters.cancelButtonText);
-        this._confirmText$.next(promptParameters.confirmButtonText);
-        if (promptParameters.closeOnConfirm)
-            this._closeOnConfirm$.next(promptParameters.closeOnConfirm);
-        if (promptParameters.closeOnCancel)
-            this._closeOnCancel$.next(promptParameters.closeOnCancel);
-        if (promptParameters.closeButtonVisible)
-            this._closeButtonVisible$.next(promptParameters.closeButtonVisible);
-        if (promptParameters.cancelCallbackFunction)
-            this._cancelCallbackFunction$.next(promptParameters.cancelCallbackFunction);
-        if (promptParameters.confirmCallBackFunction)
-            this._confirmCallbackFunction$.next(promptParameters.confirmCallBackFunction);
-        if (promptParameters.closeCallBackFunction)
-            this._closeCallbackFunction$.next(promptParameters.closeCallBackFunction);
-        this._promptVisible$.next(true);
-        this._appearing$.next(true);
-        this.setAppearingTimeout();
+    setPageActionsHasContent(hasContent) {
+        this._pageActionsHasContent$.next(hasContent);
     }
-    setAppearingDelay(appearingDelayMs) {
-        this._appearingDelayMs$.next(appearingDelayMs);
+    setPageHeadHeight(height) {
+        this._pageHeadHeight$.next(height);
     }
-    setBodyText(bodyText) {
-        this._bodyText$.next(bodyText);
+    enableSmallTitle() {
+        this._smallTitle$.next(true);
     }
-    confirm() {
-        combineLatest([this._closeOnConfirm$, this._confirmCallbackFunction$])
-            .pipe(take(1))
-            .subscribe(([closeOnConfirm, confirmCallback]) => {
-            if (closeOnConfirm) {
-                this.closePrompt(confirmCallback);
-            }
-            else if (confirmCallback) {
-                confirmCallback();
-            }
-        });
+    disableSmallTitle() {
+        this._smallTitle$.next(false);
     }
-    cancel() {
-        combineLatest([this._closeOnCancel$, this._cancelCallbackFunction$])
-            .pipe(take(1))
-            .subscribe(([closeOnCancel, cancelCallback]) => {
-            if (closeOnCancel) {
-                this.closePrompt(cancelCallback);
-            }
-            else if (cancelCallback) {
-                cancelCallback();
-            }
-        });
+    getDefaultShowUserNameInTopBarValue() {
+        const featureToggles = this.configService?.config?.featureToggles;
+        if (featureToggles && featureToggles.hasOwnProperty('showUserNameInTopBar')) {
+            return featureToggles.showUserNameInTopBar;
+        }
+        return true;
     }
-    close() {
-        combineLatest([this._closeButtonVisible$, this._closeCallbackFunction$])
-            .pipe(take(1))
-            .subscribe(([closeButtonVisible, cancelCallback]) => {
-            if (closeButtonVisible) {
-                this.closePrompt(cancelCallback);
-            }
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderService, deps: [{ token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.ConfigService }] });
+
+/*
+ * Copyright 2015-2025 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 PageSubtitleService {
+    constructor() {
+        this._titleViewContainerRef$ = new BehaviorSubject(null);
+        this._actionsViewContainerRef$ = new BehaviorSubject(null);
     }
-    closePrompt(callBackFunction) {
-        if (callBackFunction) {
-            callBackFunction();
-        }
-        this._disappearing$.next(true);
-        this.setDisappearingTimeout();
-        this._promptVisible$.next(false);
+    get titleViewContainerRef$() {
+        return this._titleViewContainerRef$.pipe(filter(ref => !!ref));
     }
-    setAppearingTimeout() {
-        this._appearingDelayMs$.pipe(take(1)).subscribe(appearingDelayMs => {
-            setTimeout(() => {
-                this._appearing$.next(false);
-            }, appearingDelayMs);
-        });
+    get actionsViewContainerRef$() {
+        return this._actionsViewContainerRef$.pipe(filter(ref => !!ref));
     }
-    setDisappearingTimeout() {
-        this._appearingDelayMs$.pipe(take(1)).subscribe(appearingDelayMs => {
-            setTimeout(() => {
-                this._disappearing$.next(false);
-                this.clear();
-            }, appearingDelayMs);
-        });
+    setTitleViewContainerRef(ref) {
+        this._titleViewContainerRef$.next(ref);
     }
-    clear() {
-        this._identifier$.next('');
-        this._headerText$.next('');
-        this._bodyText$.next('');
-        this._cancelText$.next('');
-        this._confirmText$.next('');
-        this._closeOnCancel$.next(false);
-        this._closeOnConfirm$.next(false);
-        this._cancelCallbackFunction$.next(() => { });
-        this._confirmCallbackFunction$.next(() => { });
-        this._closeCallbackFunction$.next(() => { });
+    setActionsViewContainerRef(ref) {
+        this._actionsViewContainerRef$.next(ref);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1268,198 +1436,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class ShellService {
-    get sideBarExpanded$() {
-        return this._sideBarExpanded$.asObservable();
-    }
-    get panelExpanded$() {
-        return this._panelExpanded$.asObservable();
+class PageTitleService {
+    get customPageTitle$() {
+        return this._customPageTitle$.asObservable();
     }
-    get largeScreen$() {
-        return this._largeScreen$.asObservable();
+    get customPageTitleSet$() {
+        return this._customPageTitleSet$.asObservable();
     }
-    get mouseOnTopBar$() {
-        return this._mouseOnTopBar$.asObservable();
+    get customPageSubtitle$() {
+        return this._customPageSubtitle$.asObservable();
     }
-    get sidenavWidth$() {
-        return this._sidenavWidth$.asObservable();
+    get customPageSubtitleSet$() {
+        return this._customPageSubtitleSet$.asObservable();
     }
-    get collapsibleWidescreenMenu$() {
-        return this._collapsibleWidescreenMenu$.asObservable();
+    get pageActionsViewContainerRef$() {
+        return this._pageActionsViewContainerRef$.pipe(filter(ref => !!ref));
     }
-    get mainContentResized$() {
-        return this._mainContentResized$.asObservable();
+    get hasPageActions$() {
+        return this._hasPageActions$.asObservable();
     }
-    constructor(rendererFactory2, configService) {
-        this.rendererFactory2 = rendererFactory2;
-        this.configService = configService;
-        this._sideBarExpanded$ = new BehaviorSubject(true);
-        this._panelExpanded$ = new BehaviorSubject(false);
-        this._largeScreen$ = new BehaviorSubject(true);
-        this._mouseOnTopBar$ = new BehaviorSubject(false);
-        this._sidenavWidth$ = new BehaviorSubject(300);
-        this._sidenavElement$ = new BehaviorSubject(undefined);
-        this._contentElement$ = new BehaviorSubject(undefined);
-        this._resizeBorderElement$ = new BehaviorSubject(undefined);
-        this._mouseX$ = fromEvent(document.body, 'mousemove').pipe(map((e) => e.pageX));
-        this._isResizing$ = new BehaviorSubject(false);
-        this._collapsibleWidescreenMenu$ = new BehaviorSubject(false);
-        this._mainContentResized$ = new Subject();
-        this.renderer = rendererFactory2.createRenderer(null, null);
-        this.openSidenavSizeSubscription();
-        this.openMouseSubscriptions();
-        this.initMenuWidth(configService.config);
+    get pageActionsFullWidth$() {
+        return this._pageActionsFullWidth$.asObservable();
     }
-    ngOnDestroy() {
-        this.sidenavSizeSubscription.unsubscribe();
+    get pageTitleHidden$() {
+        return this._pageTitleHidden$.asObservable();
     }
-    toggleSideBar() {
-        const isExpanded = this._sideBarExpanded$.getValue();
-        this._sideBarExpanded$.next(!isExpanded);
+    constructor(router) {
+        this.router = router;
+        this._customPageTitle$ = new BehaviorSubject('');
+        this._customPageTitleSet$ = new BehaviorSubject(false);
+        this._customPageSubtitle$ = new BehaviorSubject('');
+        this._customPageSubtitleSet$ = new BehaviorSubject(false);
+        this._hasPageActions$ = new BehaviorSubject(false);
+        this._pageActionsFullWidth$ = new BehaviorSubject(false);
+        this._pageActionsViewContainerRef$ = new BehaviorSubject(null);
+        this._pageTitleHidden$ = new BehaviorSubject(false);
+        this.openRouteSubscription();
     }
-    collapseSideBar() {
-        this._sideBarExpanded$.next(false);
+    ngOnDestroy() {
+        this._routeSubscription?.unsubscribe();
     }
-    togglePanel() {
-        const isExpanded = this._panelExpanded$.getValue();
-        this._panelExpanded$.next(!isExpanded);
+    setCustomPageTitle(title, preventReset = false) {
+        this._customPageTitle$.next(title);
+        this._customPageTitleSet$.next(true);
+        if (preventReset) {
+            this.disableReset();
+        }
     }
-    setPanelExpanded(isExpanded) {
-        this._panelExpanded$.next(isExpanded);
+    setCustomPageSubtitle(title) {
+        this._customPageSubtitle$.next(title);
+        this._customPageSubtitleSet$.next(true);
     }
-    setSideBarExpanded(isExpanded) {
-        this._sideBarExpanded$.next(isExpanded);
+    disableReset() {
+        this._preventReset = true;
     }
-    setLargeScreen(isLarge) {
-        this._largeScreen$.next(isLarge);
+    enableReset() {
+        this._preventReset = false;
     }
-    setMouseOnTopBar(mouseOnTopBar) {
-        this._mouseOnTopBar$.next(mouseOnTopBar);
+    setPageActionsViewContainerRef(ref) {
+        this._pageActionsViewContainerRef$.next(ref);
     }
-    setSidenavElement(element) {
-        this._sidenavElement$.next(element);
-        this.createResizeBorderElement(element);
+    setHasPageActions(value) {
+        this._hasPageActions$.next(value);
     }
-    setContentElement(element) {
-        this._contentElement$.next(element);
+    setPageActionsFullWidth(value) {
+        this._pageActionsFullWidth$.next(value);
     }
-    setCollapsibleWidescreenMenu(collapsible) {
-        this._collapsibleWidescreenMenu$.next(collapsible);
-        if (collapsible) {
-            this.collapseSideBar();
-        }
+    setCustomPageTitleSet(set) {
+        this._customPageTitleSet$.next(set);
     }
-    onMainContentResize() {
-        this._mainContentResized$.next(null);
+    setPageTitleHidden(hidden) {
+        this._pageTitleHidden$.next(hidden);
     }
-    createResizeBorderElement(sidenavElement) {
-        const borderElement = this.renderer.createElement('div');
-        this.renderer.addClass(borderElement, 'resize-border');
-        this.renderer.appendChild(sidenavElement, borderElement);
-        this._resizeBorderElement$.next(borderElement);
-        this.renderer.listen(borderElement, 'mouseenter', () => {
-            this.renderer.addClass(borderElement, 'resize-hover');
-        });
-        this.renderer.listen(borderElement, 'mouseleave', () => {
-            this._isResizing$.pipe(take(1)).subscribe(isResizing => {
-                if (!isResizing) {
-                    this.renderer.removeClass(borderElement, 'resize-hover');
-                }
-            });
-        });
-        this.renderer.listen(borderElement, 'mousedown', (event) => {
-            this._sidenavWidth$.pipe(take(1)).subscribe(sidenavWidth => {
-                this.sidenavWidthOnClick = sidenavWidth;
-                this.xOnClick = event.pageX;
-                this._isResizing$.next(true);
-                this.renderer.setStyle(document.body, 'user-select', 'none');
-                this.renderer.setStyle(document.body, 'cursor', 'col-resize');
-                this.renderer.setStyle(document.querySelector('.cds--side-nav__navigation'), 'pointer-events', 'none');
-                this.renderer.setStyle(document.querySelector('.main-content'), 'pointer-events', 'none');
-            });
-        });
+    clearPageActionsViewContainerRef() {
+        this._pageActionsViewContainerRef$.getValue()?.clear();
     }
-    openSidenavSizeSubscription() {
-        this.sidenavSizeSubscription = combineLatest([
-            this._largeScreen$,
-            this._sidenavWidth$,
-            this._sidenavElement$,
-            this._contentElement$,
-            this._resizeBorderElement$,
-            this._collapsibleWidescreenMenu$,
-        ]).subscribe(([largeScreen, sidenavWidth, sidenavElement, contentElement, resizeBorderElement, collapsibleWidescreenMenu,]) => {
-            if ((!largeScreen || collapsibleWidescreenMenu) &&
-                sidenavElement &&
-                contentElement &&
-                resizeBorderElement) {
-                this.renderer.removeStyle(sidenavElement, 'min-width');
-                this.renderer.removeStyle(sidenavElement, 'width');
-                this.renderer.removeStyle(sidenavElement, 'transition');
-                this.renderer.removeStyle(contentElement, 'padding-left');
-                this.renderer.addClass(resizeBorderElement, 'resize-border--invisible');
-            }
-            else if (largeScreen &&
-                sidenavElement &&
-                contentElement &&
-                typeof sidenavWidth === 'number') {
-                const pixelWidth = `${sidenavWidth}px`;
-                this.renderer.setStyle(sidenavElement, 'min-width', `${pixelWidth}`);
-                this.renderer.setStyle(sidenavElement, 'width', `${pixelWidth}`);
-                this.renderer.setStyle(sidenavElement, 'transition', 'none');
-                this.renderer.setStyle(contentElement, 'padding-left', `calc(2rem + ${pixelWidth})`);
-                this.renderer.removeClass(resizeBorderElement, 'resize-border--invisible');
+    openRouteSubscription() {
+        this._routeSubscription = combineLatest([this.router.events, this.pageActionsViewContainerRef$])
+            .pipe(filter(([event]) => event instanceof NavigationEnd ||
+            event instanceof NavigationStart ||
+            event instanceof ResolveEnd), tap(([_, pageActionsViewContainerRef]) => {
+            if (!this._preventReset) {
+                this._customPageTitle$.next('');
+                this._customPageTitleSet$.next(false);
+                this._customPageSubtitle$.next('');
+                this._customPageSubtitleSet$.next(false);
             }
-        });
-    }
-    openMouseSubscriptions() {
-        this.mouseXSubscription = combineLatest([this._mouseX$, this._isResizing$])
-            .pipe(debounceTime(3))
-            .subscribe(([x, isResizing]) => {
-            if (isResizing) {
-                const offSetWidth = this.xOnClick - x;
-                const newSidenavWidth = this.sidenavWidthOnClick - offSetWidth;
-                if (newSidenavWidth <= this.maxMenuWidth && newSidenavWidth >= this.minMenuWidth) {
-                    this._sidenavWidth$.next(newSidenavWidth);
-                }
+            if (pageActionsViewContainerRef && !this._preventReset) {
+                pageActionsViewContainerRef.clear();
+                this.setHasPageActions(false);
             }
-        });
-        this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
-            this.stopResizing();
-        });
-    }
-    stopResizing() {
-        const mainContent = document.querySelector('.main-content');
-        const sideNav = document.querySelector('.cds--side-nav__navigation');
-        this.renderer.removeStyle(document.body, 'user-select');
-        this.renderer.removeStyle(document.body, 'cursor');
-        this._isResizing$.next(false);
-        this.renderer.removeClass(this._resizeBorderElement$.getValue(), 'resize-hover');
-        if (sideNav) {
-            this.renderer.removeStyle(sideNav, 'pointer-events');
-        }
-        if (mainContent) {
-            this.renderer.removeStyle(mainContent, 'pointer-events');
-        }
-        localStorage.setItem('sidenavWidth', this._sidenavWidth$.getValue().toString());
-    }
-    initMenuWidth(config) {
-        const customLeftSidebar = config?.customLeftSidebar;
-        const localStorageWidth = localStorage.getItem('sidenavWidth');
-        const localStorageWidthNumber = localStorageWidth && +localStorageWidth;
-        const configWidth = customLeftSidebar?.defaultMenuWidth;
-        this._sidenavWidth$.next(localStorageWidthNumber || configWidth || 256);
-        this.minMenuWidth = customLeftSidebar?.minMenuWidth || 150;
-        this.maxMenuWidth = customLeftSidebar?.maxMenuWidth || 500;
+        }))
+            .subscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShellService, deps: [{ token: i0.RendererFactory2 }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShellService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShellService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1$3.Router }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -1476,174 +1554,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class StepperService {
+class PromptService {
     constructor() {
-        this._steps$ = new BehaviorSubject([]);
-        this._currentStepIndex$ = new BehaviorSubject(0);
-        this._returnToFirstStep$ = new Subject();
-        this._cancelClick$ = new Subject();
-        this._complete$ = new Subject();
-        this._nextStep$ = new Subject();
-        this._disabled$ = new BehaviorSubject(false);
+        this._promptVisible$ = new BehaviorSubject(false);
+        this._appearing$ = new BehaviorSubject(false);
+        this._disappearing$ = new BehaviorSubject(false);
+        this._appearingDelayMs$ = new BehaviorSubject(140);
+        this._identifier$ = new BehaviorSubject('');
+        this._headerText$ = new BehaviorSubject('');
+        this._bodyText$ = new BehaviorSubject('');
+        this._cancelText$ = new BehaviorSubject('');
+        this._confirmText$ = new BehaviorSubject('');
+        this._closeOnConfirm$ = new BehaviorSubject(false);
+        this._closeOnCancel$ = new BehaviorSubject(false);
+        this._closeButtonVisible$ = new BehaviorSubject(false);
+        this._cancelCallbackFunction$ = new BehaviorSubject(() => { });
+        this._confirmCallbackFunction$ = new BehaviorSubject(() => { });
+        this._closeCallbackFunction$ = new BehaviorSubject(() => { });
     }
-    get currentStepIndex$() {
-        return this._currentStepIndex$.asObservable();
+    get promptVisible$() {
+        return this._promptVisible$.asObservable();
     }
-    get steps$() {
-        return this._steps$.asObservable();
+    get appearing$() {
+        return this._appearing$.asObservable();
     }
-    get nextStepAvailable$() {
-        return combineLatest([this._steps$, this._currentStepIndex$]).pipe(map$1(([steps, currentStepIndex]) => currentStepIndex < steps.length - 1));
+    get disappearing$() {
+        return this._disappearing$.asObservable();
     }
-    get previousStepAvailable$() {
-        return this._currentStepIndex$.pipe(map$1(currentStepIndex => currentStepIndex > 0));
+    get appearingDelayMs$() {
+        return this._appearingDelayMs$.asObservable();
     }
-    get returnToFirstStep$() {
-        return this._returnToFirstStep$.asObservable();
+    get appearingDelayMs() {
+        return this._appearingDelayMs$.getValue();
     }
-    get cancelClick$() {
-        return this._cancelClick$.asObservable();
+    get identifier$() {
+        return this._identifier$.asObservable();
     }
-    get complete$() {
-        return this._complete$.asObservable();
+    get headerText$() {
+        return this._headerText$.asObservable();
     }
-    get nextStep$() {
-        return this._nextStep$.asObservable();
+    get bodyText$() {
+        return this._bodyText$.asObservable();
     }
-    get disabled$() {
-        return this._disabled$.asObservable();
+    get cancelText$() {
+        return this._cancelText$.asObservable();
     }
-    setSteps(steps) {
-        const mappedSteps = steps.map((step, index) => ({
-            ...step,
-            isFirst: index === 0,
-            isLast: index === steps.length - 1,
-        }));
-        this._steps$.next(mappedSteps);
+    get confirmText$() {
+        return this._confirmText$.asObservable();
     }
-    setCurrentStepIndex(index) {
-        this._currentStepIndex$.next(index);
+    get closeButtonVisible$() {
+        return this._closeButtonVisible$.asObservable();
     }
-    goToNextStep() {
-        combineLatest([this.nextStepAvailable$, this._currentStepIndex$])
+    openPrompt(promptParameters) {
+        if (promptParameters.identifier)
+            this._identifier$.next(promptParameters.identifier);
+        this._headerText$.next(promptParameters.headerText);
+        this._bodyText$.next(promptParameters.bodyText);
+        this._cancelText$.next(promptParameters.cancelButtonText);
+        this._confirmText$.next(promptParameters.confirmButtonText);
+        if (promptParameters.closeOnConfirm)
+            this._closeOnConfirm$.next(promptParameters.closeOnConfirm);
+        if (promptParameters.closeOnCancel)
+            this._closeOnCancel$.next(promptParameters.closeOnCancel);
+        if (promptParameters.closeButtonVisible)
+            this._closeButtonVisible$.next(promptParameters.closeButtonVisible);
+        if (promptParameters.cancelCallbackFunction)
+            this._cancelCallbackFunction$.next(promptParameters.cancelCallbackFunction);
+        if (promptParameters.confirmCallBackFunction)
+            this._confirmCallbackFunction$.next(promptParameters.confirmCallBackFunction);
+        if (promptParameters.closeCallBackFunction)
+            this._closeCallbackFunction$.next(promptParameters.closeCallBackFunction);
+        this._promptVisible$.next(true);
+        this._appearing$.next(true);
+        this.setAppearingTimeout();
+    }
+    setAppearingDelay(appearingDelayMs) {
+        this._appearingDelayMs$.next(appearingDelayMs);
+    }
+    setBodyText(bodyText) {
+        this._bodyText$.next(bodyText);
+    }
+    confirm() {
+        combineLatest([this._closeOnConfirm$, this._confirmCallbackFunction$])
             .pipe(take(1))
-            .subscribe(([nextStepAvailable, currentStepIndex]) => {
-            if (nextStepAvailable) {
-                this.setCurrentStepIndex(currentStepIndex + 1);
-                this._nextStep$.next(currentStepIndex);
+            .subscribe(([closeOnConfirm, confirmCallback]) => {
+            if (closeOnConfirm) {
+                this.closePrompt(confirmCallback);
+            }
+            else if (confirmCallback) {
+                confirmCallback();
             }
         });
     }
-    goToPreviousStep() {
-        combineLatest([this.previousStepAvailable$, this._currentStepIndex$])
+    cancel() {
+        combineLatest([this._closeOnCancel$, this._cancelCallbackFunction$])
             .pipe(take(1))
-            .subscribe(([previousStepAvailable, currentStepIndex]) => {
-            if (previousStepAvailable) {
-                this.setCurrentStepIndex(currentStepIndex - 1);
+            .subscribe(([closeOnCancel, cancelCallback]) => {
+            if (closeOnCancel) {
+                this.closePrompt(cancelCallback);
+            }
+            else if (cancelCallback) {
+                cancelCallback();
             }
         });
     }
-    cancelClick() {
-        this._cancelClick$.next(null);
-    }
-    complete() {
-        this._complete$.next(null);
-    }
-    disable() {
-        this._disabled$.next(true);
-    }
-    enable() {
-        this._disabled$.next(false);
-    }
-    returnToFirstStep() {
-        this.setCurrentStepIndex(0);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperService, decorators: [{
-            type: Injectable
-        }] });
-
-/*
- * Copyright 2015-2025 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 UserInterfaceService {
-    constructor() {
-        this._showPageHeader$ = new BehaviorSubject(true);
-    }
-    get showPageHeader$() {
-        return this._showPageHeader$.asObservable();
+    close() {
+        combineLatest([this._closeButtonVisible$, this._closeCallbackFunction$])
+            .pipe(take(1))
+            .subscribe(([closeButtonVisible, cancelCallback]) => {
+            if (closeButtonVisible) {
+                this.closePrompt(cancelCallback);
+            }
+        });
     }
-    showPageHeader() {
-        this._showPageHeader$.next(true);
+    closePrompt(callBackFunction) {
+        if (callBackFunction) {
+            callBackFunction();
+        }
+        this._disappearing$.next(true);
+        this.setDisappearingTimeout();
+        this._promptVisible$.next(false);
     }
-    hidePageHeader() {
-        this._showPageHeader$.next(false);
+    setAppearingTimeout() {
+        this._appearingDelayMs$.pipe(take(1)).subscribe(appearingDelayMs => {
+            setTimeout(() => {
+                this._appearing$.next(false);
+            }, appearingDelayMs);
+        });
     }
-    togglePageHeader() {
-        this._showPageHeader$.pipe(take(1)).subscribe(showPageHeader => {
-            this._showPageHeader$.next(!showPageHeader);
+    setDisappearingTimeout() {
+        this._appearingDelayMs$.pipe(take(1)).subscribe(appearingDelayMs => {
+            setTimeout(() => {
+                this._disappearing$.next(false);
+                this.clear();
+            }, appearingDelayMs);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserInterfaceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserInterfaceService, providedIn: 'root' }); }
+    clear() {
+        this._identifier$.next('');
+        this._headerText$.next('');
+        this._bodyText$.next('');
+        this._cancelText$.next('');
+        this._confirmText$.next('');
+        this._closeOnCancel$.next(false);
+        this._closeOnConfirm$.next(false);
+        this._cancelCallbackFunction$.next(() => { });
+        this._confirmCallbackFunction$.next(() => { });
+        this._closeCallbackFunction$.next(() => { });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserInterfaceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-/*
- * Copyright 2015-2025 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 ValtimoModalService {
+class QuickSearchStateService {
     constructor() {
-        this._scrollToTop$ = new Subject();
-        this._caseDefinitionKey$ = new BehaviorSubject('');
-    }
-    get scrollToTop$() {
-        return this._scrollToTop$.asObservable();
+        this._$modalOpen = signal(false);
+        this._paramsToSave$ = new BehaviorSubject(null);
+        this.paramsToSave$ = this._paramsToSave$.pipe(filter$1(params => !!params));
     }
-    get caseDefinitionKey$() {
-        return this._caseDefinitionKey$.pipe(filter(caseDefinitionKey => !!caseDefinitionKey));
+    get $modalOpen() {
+        return computed(() => this._$modalOpen());
     }
-    scrollToTop() {
-        this._scrollToTop$.next(null);
+    openModal(params) {
+        this._paramsToSave$.next(params);
+        this._$modalOpen.set(true);
     }
-    setCaseDefinitionKey(caseDefinitionKey) {
-        this._caseDefinitionKey$.next(caseDefinitionKey);
+    closeModal() {
+        this._paramsToSave$.next(null);
+        this._$modalOpen.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchStateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1665,239 +1754,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class PageHeaderService {
-    get headerViewContainerRef$() {
-        return this._headerViewContainerRef$.pipe(filter(ref => !!ref));
+class ShellService {
+    get sideBarExpanded$() {
+        return this._sideBarExpanded$.asObservable();
     }
-    get contentViewContainerRef$() {
-        return this._contentViewContainerRef$.pipe(filter(ref => !!ref));
+    get panelExpanded$() {
+        return this._panelExpanded$.asObservable();
     }
-    get compactMode$() {
-        return this._compactMode$.asObservable();
+    get largeScreen$() {
+        return this._largeScreen$.asObservable();
     }
-    get smallTitle$() {
-        return this._smallTitle$.asObservable();
+    get mouseOnTopBar$() {
+        return this._mouseOnTopBar$.asObservable();
     }
-    get showUserNameInTopBar$() {
-        return this._showUserNameInTopBar$.asObservable();
+    get sidenavWidth$() {
+        return this._sidenavWidth$.asObservable();
     }
-    get pageActionsHasContent$() {
-        return this._pageActionsHasContent$.asObservable();
+    get collapsibleWidescreenMenu$() {
+        return this._collapsibleWidescreenMenu$.asObservable();
     }
-    get pageHeadHeight$() {
-        return this._pageHeadHeight$.pipe(filter(height => height !== null));
+    get mainContentResized$() {
+        return this._mainContentResized$.asObservable();
     }
-    constructor(configService) {
+    constructor(rendererFactory2, configService) {
+        this.rendererFactory2 = rendererFactory2;
         this.configService = configService;
-        this._headerViewContainerRef$ = new BehaviorSubject(null);
-        this._contentViewContainerRef$ = new BehaviorSubject(null);
-        this._compactMode$ = new BehaviorSubject(!!this.configService?.config?.featureToggles?.compactModeOnByDefault);
-        this._showUserNameInTopBar$ = new BehaviorSubject(this.getDefaultShowUserNameInTopBarValue());
-        this._pageActionsHasContent$ = new BehaviorSubject(false);
-        this._pageHeadHeight$ = new BehaviorSubject(null);
-        this._smallTitle$ = new BehaviorSubject(false);
+        this._sideBarExpanded$ = new BehaviorSubject(true);
+        this._panelExpanded$ = new BehaviorSubject(false);
+        this._largeScreen$ = new BehaviorSubject(true);
+        this._mouseOnTopBar$ = new BehaviorSubject(false);
+        this._sidenavWidth$ = new BehaviorSubject(300);
+        this._sidenavElement$ = new BehaviorSubject(undefined);
+        this._contentElement$ = new BehaviorSubject(undefined);
+        this._resizeBorderElement$ = new BehaviorSubject(undefined);
+        this._mouseX$ = fromEvent(document.body, 'mousemove').pipe(map((e) => e.pageX));
+        this._isResizing$ = new BehaviorSubject(false);
+        this._collapsibleWidescreenMenu$ = new BehaviorSubject(false);
+        this._mainContentResized$ = new Subject();
+        this.renderer = rendererFactory2.createRenderer(null, null);
+        this.openSidenavSizeSubscription();
+        this.openMouseSubscriptions();
+        this.initMenuWidth(configService.config);
     }
-    setHeaderViewContainerRef(ref) {
-        this._headerViewContainerRef$.next(ref);
+    ngOnDestroy() {
+        this.sidenavSizeSubscription.unsubscribe();
     }
-    setContentViewContainerRef(ref) {
-        this._contentViewContainerRef$.next(ref);
+    toggleSideBar() {
+        const isExpanded = this._sideBarExpanded$.getValue();
+        this._sideBarExpanded$.next(!isExpanded);
     }
-    setCompactMode(compactMode) {
-        this._compactMode$.next(compactMode);
+    collapseSideBar() {
+        this._sideBarExpanded$.next(false);
     }
-    setShowUserNameInTopBar(show) {
-        this._showUserNameInTopBar$.next(show);
+    togglePanel() {
+        const isExpanded = this._panelExpanded$.getValue();
+        this._panelExpanded$.next(!isExpanded);
     }
-    setPageActionsHasContent(hasContent) {
-        this._pageActionsHasContent$.next(hasContent);
-    }
-    setPageHeadHeight(height) {
-        this._pageHeadHeight$.next(height);
-    }
-    enableSmallTitle() {
-        this._smallTitle$.next(true);
-    }
-    disableSmallTitle() {
-        this._smallTitle$.next(false);
+    setPanelExpanded(isExpanded) {
+        this._panelExpanded$.next(isExpanded);
     }
-    getDefaultShowUserNameInTopBarValue() {
-        const featureToggles = this.configService?.config?.featureToggles;
-        if (featureToggles && featureToggles.hasOwnProperty('showUserNameInTopBar')) {
-            return featureToggles.showUserNameInTopBar;
-        }
-        return true;
+    setSideBarExpanded(isExpanded) {
+        this._sideBarExpanded$.next(isExpanded);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderService, deps: [{ token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$1.ConfigService }] });
-
-/*
- * Copyright 2015-2025 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 CdsThemeService {
-    get preferredTheme$() {
-        return this._preferredTheme$.pipe(filter(theme => !!theme));
+    setLargeScreen(isLarge) {
+        this._largeScreen$.next(isLarge);
     }
-    get currentTheme$() {
-        return this._currentTheme$.pipe(filter(theme => !!theme));
+    setMouseOnTopBar(mouseOnTopBar) {
+        this._mouseOnTopBar$.next(mouseOnTopBar);
     }
-    get toggletipTheme$() {
-        return this.currentTheme$.pipe(map$1(currentTheme => currentTheme === CurrentCarbonTheme.G10 ? CurrentCarbonTheme.G90 : CurrentCarbonTheme.WHITE));
+    setSidenavElement(element) {
+        this._sidenavElement$.next(element);
+        this.createResizeBorderElement(element);
     }
-    constructor() {
-        this._preferredTheme$ = new BehaviorSubject(SelectableCarbonTheme.G10);
-        this._currentTheme$ = new BehaviorSubject(null);
-        this._subscriptions = new Subscription();
-        this.openDarkModeSubscription();
+    setContentElement(element) {
+        this._contentElement$.next(element);
     }
-    ngOnDestroy() {
-        this._subscriptions.unsubscribe();
+    setCollapsibleWidescreenMenu(collapsible) {
+        this._collapsibleWidescreenMenu$.next(collapsible);
+        if (collapsible) {
+            this.collapseSideBar();
+        }
     }
-    setPreferredTheme(selectedTheme) {
-        if (selectedTheme)
-            this._preferredTheme$.next(selectedTheme);
+    onMainContentResize() {
+        this._mainContentResized$.next(null);
     }
-    openDarkModeSubscription() {
-        combineLatest([this.getBrowserPrefersDarkModeObservable(), this.preferredTheme$]).subscribe(([browserPrefersDarkMode, preferredTheme]) => {
-            switch (preferredTheme) {
-                case SelectableCarbonTheme.SYSTEM:
-                    if (browserPrefersDarkMode) {
-                        this.setThemeOnDocument(CurrentCarbonTheme.G90);
-                    }
-                    else {
-                        this.setThemeOnDocument(CurrentCarbonTheme.G10);
-                    }
-                    break;
-                case SelectableCarbonTheme.G10:
-                    this.setThemeOnDocument(CurrentCarbonTheme.G10);
-                    break;
-                case SelectableCarbonTheme.G90:
-                    this.setThemeOnDocument(CurrentCarbonTheme.G90);
-                    break;
-            }
+    createResizeBorderElement(sidenavElement) {
+        const borderElement = this.renderer.createElement('div');
+        this.renderer.addClass(borderElement, 'resize-border');
+        this.renderer.appendChild(sidenavElement, borderElement);
+        this._resizeBorderElement$.next(borderElement);
+        this.renderer.listen(borderElement, 'mouseenter', () => {
+            this.renderer.addClass(borderElement, 'resize-hover');
+        });
+        this.renderer.listen(borderElement, 'mouseleave', () => {
+            this._isResizing$.pipe(take(1)).subscribe(isResizing => {
+                if (!isResizing) {
+                    this.renderer.removeClass(borderElement, 'resize-hover');
+                }
+            });
+        });
+        this.renderer.listen(borderElement, 'mousedown', (event) => {
+            this._sidenavWidth$.pipe(take(1)).subscribe(sidenavWidth => {
+                this.sidenavWidthOnClick = sidenavWidth;
+                this.xOnClick = event.pageX;
+                this._isResizing$.next(true);
+                this.renderer.setStyle(document.body, 'user-select', 'none');
+                this.renderer.setStyle(document.body, 'cursor', 'col-resize');
+                this.renderer.setStyle(document.querySelector('.cds--side-nav__navigation'), 'pointer-events', 'none');
+                this.renderer.setStyle(document.querySelector('.main-content'), 'pointer-events', 'none');
+            });
         });
     }
-    setThemeOnDocument(theme) {
-        document.documentElement.setAttribute('data-carbon-theme', theme);
-        this._currentTheme$.next(theme);
-    }
-    getBrowserPrefersDarkModeObservable(signal) {
-        return new Observable(subscriber => {
-            if (!window.matchMedia) {
-                subscriber.error(new Error('No windows Media Match available'));
-            }
-            function emitValue(event) {
-                subscriber.next(event.matches);
+    openSidenavSizeSubscription() {
+        this.sidenavSizeSubscription = combineLatest([
+            this._largeScreen$,
+            this._sidenavWidth$,
+            this._sidenavElement$,
+            this._contentElement$,
+            this._resizeBorderElement$,
+            this._collapsibleWidescreenMenu$,
+        ]).subscribe(([largeScreen, sidenavWidth, sidenavElement, contentElement, resizeBorderElement, collapsibleWidescreenMenu,]) => {
+            if ((!largeScreen || collapsibleWidescreenMenu) &&
+                sidenavElement &&
+                contentElement &&
+                resizeBorderElement) {
+                this.renderer.removeStyle(sidenavElement, 'min-width');
+                this.renderer.removeStyle(sidenavElement, 'width');
+                this.renderer.removeStyle(sidenavElement, 'transition');
+                this.renderer.removeStyle(contentElement, 'padding-left');
+                this.renderer.addClass(resizeBorderElement, 'resize-border--invisible');
             }
-            const mediaListQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            if (signal) {
-                signal.onabort = () => {
-                    mediaListQuery.removeEventListener('change', emitValue);
-                    !subscriber.closed && subscriber.complete();
-                };
+            else if (largeScreen &&
+                sidenavElement &&
+                contentElement &&
+                typeof sidenavWidth === 'number') {
+                const pixelWidth = `${sidenavWidth}px`;
+                this.renderer.setStyle(sidenavElement, 'min-width', `${pixelWidth}`);
+                this.renderer.setStyle(sidenavElement, 'width', `${pixelWidth}`);
+                this.renderer.setStyle(sidenavElement, 'transition', 'none');
+                this.renderer.setStyle(contentElement, 'padding-left', `calc(2rem + ${pixelWidth})`);
+                this.renderer.removeClass(resizeBorderElement, 'resize-border--invisible');
             }
-            mediaListQuery.addEventListener('change', emitValue);
-            subscriber.next(mediaListQuery.matches);
-            return () => {
-                mediaListQuery.removeEventListener('change', emitValue);
-                !subscriber.closed && subscriber.complete();
-            };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CdsThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CdsThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CdsThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class ChoiceFieldService {
-    constructor(http, configService) {
-        this.http = http;
-        this.configService = configService;
-        this.valtimoApiConfig = this.configService.config.valtimoApi;
-    }
-    query(params) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-fields`, {
-            observe: 'response',
-            params,
-        });
-    }
-    queryPage(params) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}v2/choice-fields`, {
-            params,
+    openMouseSubscriptions() {
+        this.mouseXSubscription = combineLatest([this._mouseX$, this._isResizing$])
+            .pipe(debounceTime(3))
+            .subscribe(([x, isResizing]) => {
+            if (isResizing) {
+                const offSetWidth = this.xOnClick - x;
+                const newSidenavWidth = this.sidenavWidthOnClick - offSetWidth;
+                if (newSidenavWidth <= this.maxMenuWidth && newSidenavWidth >= this.minMenuWidth) {
+                    this._sidenavWidth$.next(newSidenavWidth);
+                }
+            }
         });
-    }
-    get(id) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-fields/${id}`);
-    }
-    create(choiceField) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}v1/choice-fields`, choiceField);
-    }
-    delete(id) {
-        return this.http.delete(`${this.valtimoApiConfig.endpointUri}v1/choice-fields/${id}`);
-    }
-    update(choiceField) {
-        return this.http.put(`${this.valtimoApiConfig.endpointUri}v1/choice-fields`, choiceField);
-    }
-    queryValues(keyName, params) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values/${keyName}/values`, { observe: 'response', params });
-    }
-    queryValuesPage(keyName, params) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}v2/choice-field-values/${keyName}/values`, { params });
-    }
-    getValue(choiceFieldId) {
-        return this.http.get(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values/${choiceFieldId}`);
-    }
-    updateValue(choiceFieldValue, choiceFieldName) {
-        return this.http.put(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values`, choiceFieldValue, {
-            params: { choice_field_name: choiceFieldName },
+        this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
+            this.stopResizing();
         });
     }
-    createValue(choiceFieldValue, choiceFieldName) {
-        return this.http.post(`${this.valtimoApiConfig.endpointUri}v1/choice-field-values`, choiceFieldValue, { params: { choice_field_name: choiceFieldName } });
-    }
-    getChoiceFieldByName(name) {
-        return this.http.get(this.valtimoApiConfig.endpointUri + 'v1/choice-fields/name/' + name);
+    stopResizing() {
+        const mainContent = document.querySelector('.main-content');
+        const sideNav = document.querySelector('.cds--side-nav__navigation');
+        this.renderer.removeStyle(document.body, 'user-select');
+        this.renderer.removeStyle(document.body, 'cursor');
+        this._isResizing$.next(false);
+        this.renderer.removeClass(this._resizeBorderElement$.getValue(), 'resize-hover');
+        if (sideNav) {
+            this.renderer.removeStyle(sideNav, 'pointer-events');
+        }
+        if (mainContent) {
+            this.renderer.removeStyle(mainContent, 'pointer-events');
+        }
+        localStorage.setItem('sidenavWidth', this._sidenavWidth$.getValue().toString());
     }
-    getChoiceFieldValueByNameAndValue(name, value) {
-        return this.http.get(this.valtimoApiConfig.endpointUri +
-            'v1/choice-field-values/choice-field/' +
-            name +
-            '/value/' +
-            value);
+    initMenuWidth(config) {
+        const customLeftSidebar = config?.customLeftSidebar;
+        const localStorageWidth = localStorage.getItem('sidenavWidth');
+        const localStorageWidthNumber = localStorageWidth && +localStorageWidth;
+        const configWidth = customLeftSidebar?.defaultMenuWidth;
+        this._sidenavWidth$.next(localStorageWidthNumber || configWidth || 256);
+        this.minMenuWidth = customLeftSidebar?.minMenuWidth || 150;
+        this.maxMenuWidth = customLeftSidebar?.maxMenuWidth || 500;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChoiceFieldService, deps: [{ token: i1$2.HttpClient }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChoiceFieldService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShellService, deps: [{ token: i0.RendererFactory2 }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShellService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ChoiceFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShellService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i0.RendererFactory2 }, { type: i1$2.ConfigService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -1914,150 +1962,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class PageSubtitleService {
+class StepperService {
     constructor() {
-        this._titleViewContainerRef$ = new BehaviorSubject(null);
-        this._actionsViewContainerRef$ = new BehaviorSubject(null);
-    }
-    get titleViewContainerRef$() {
-        return this._titleViewContainerRef$.pipe(filter(ref => !!ref));
-    }
-    get actionsViewContainerRef$() {
-        return this._actionsViewContainerRef$.pipe(filter(ref => !!ref));
+        this._steps$ = new BehaviorSubject([]);
+        this._currentStepIndex$ = new BehaviorSubject(0);
+        this._returnToFirstStep$ = new Subject();
+        this._cancelClick$ = new Subject();
+        this._complete$ = new Subject();
+        this._nextStep$ = new Subject();
+        this._disabled$ = new BehaviorSubject(false);
     }
-    setTitleViewContainerRef(ref) {
-        this._titleViewContainerRef$.next(ref);
+    get currentStepIndex$() {
+        return this._currentStepIndex$.asObservable();
     }
-    setActionsViewContainerRef(ref) {
-        this._actionsViewContainerRef$.next(ref);
+    get steps$() {
+        return this._steps$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-/*
- * Copyright 2015-2025 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 PageTitleService {
-    get customPageTitle$() {
-        return this._customPageTitle$.asObservable();
+    get nextStepAvailable$() {
+        return combineLatest([this._steps$, this._currentStepIndex$]).pipe(map$1(([steps, currentStepIndex]) => currentStepIndex < steps.length - 1));
     }
-    get customPageTitleSet$() {
-        return this._customPageTitleSet$.asObservable();
+    get previousStepAvailable$() {
+        return this._currentStepIndex$.pipe(map$1(currentStepIndex => currentStepIndex > 0));
     }
-    get customPageSubtitle$() {
-        return this._customPageSubtitle$.asObservable();
+    get returnToFirstStep$() {
+        return this._returnToFirstStep$.asObservable();
     }
-    get customPageSubtitleSet$() {
-        return this._customPageSubtitleSet$.asObservable();
+    get cancelClick$() {
+        return this._cancelClick$.asObservable();
     }
-    get pageActionsViewContainerRef$() {
-        return this._pageActionsViewContainerRef$.pipe(filter(ref => !!ref));
+    get complete$() {
+        return this._complete$.asObservable();
     }
-    get hasPageActions$() {
-        return this._hasPageActions$.asObservable();
+    get nextStep$() {
+        return this._nextStep$.asObservable();
     }
-    get pageActionsFullWidth$() {
-        return this._pageActionsFullWidth$.asObservable();
+    get disabled$() {
+        return this._disabled$.asObservable();
     }
-    get pageTitleHidden$() {
-        return this._pageTitleHidden$.asObservable();
+    setSteps(steps) {
+        const mappedSteps = steps.map((step, index) => ({
+            ...step,
+            isFirst: index === 0,
+            isLast: index === steps.length - 1,
+        }));
+        this._steps$.next(mappedSteps);
     }
-    constructor(router) {
-        this.router = router;
-        this._customPageTitle$ = new BehaviorSubject('');
-        this._customPageTitleSet$ = new BehaviorSubject(false);
-        this._customPageSubtitle$ = new BehaviorSubject('');
-        this._customPageSubtitleSet$ = new BehaviorSubject(false);
-        this._hasPageActions$ = new BehaviorSubject(false);
-        this._pageActionsFullWidth$ = new BehaviorSubject(false);
-        this._pageActionsViewContainerRef$ = new BehaviorSubject(null);
-        this._pageTitleHidden$ = new BehaviorSubject(false);
-        this.openRouteSubscription();
+    setCurrentStepIndex(index) {
+        this._currentStepIndex$.next(index);
     }
-    ngOnDestroy() {
-        this._routeSubscription?.unsubscribe();
+    goToNextStep() {
+        combineLatest([this.nextStepAvailable$, this._currentStepIndex$])
+            .pipe(take(1))
+            .subscribe(([nextStepAvailable, currentStepIndex]) => {
+            if (nextStepAvailable) {
+                this.setCurrentStepIndex(currentStepIndex + 1);
+                this._nextStep$.next(currentStepIndex);
+            }
+        });
     }
-    setCustomPageTitle(title, preventReset = false) {
-        this._customPageTitle$.next(title);
-        this._customPageTitleSet$.next(true);
-        if (preventReset) {
-            this.disableReset();
-        }
+    goToPreviousStep() {
+        combineLatest([this.previousStepAvailable$, this._currentStepIndex$])
+            .pipe(take(1))
+            .subscribe(([previousStepAvailable, currentStepIndex]) => {
+            if (previousStepAvailable) {
+                this.setCurrentStepIndex(currentStepIndex - 1);
+            }
+        });
     }
-    setCustomPageSubtitle(title) {
-        this._customPageSubtitle$.next(title);
-        this._customPageSubtitleSet$.next(true);
+    cancelClick() {
+        this._cancelClick$.next(null);
     }
-    disableReset() {
-        this._preventReset = true;
+    complete() {
+        this._complete$.next(null);
     }
-    enableReset() {
-        this._preventReset = false;
+    disable() {
+        this._disabled$.next(true);
     }
-    setPageActionsViewContainerRef(ref) {
-        this._pageActionsViewContainerRef$.next(ref);
+    enable() {
+        this._disabled$.next(false);
     }
-    setHasPageActions(value) {
-        this._hasPageActions$.next(value);
+    returnToFirstStep() {
+        this.setCurrentStepIndex(0);
     }
-    setPageActionsFullWidth(value) {
-        this._pageActionsFullWidth$.next(value);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperService, decorators: [{
+            type: Injectable
+        }] });
+
+/*
+ * Copyright 2015-2025 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 UserInterfaceService {
+    constructor() {
+        this._showPageHeader$ = new BehaviorSubject(true);
     }
-    setCustomPageTitleSet(set) {
-        this._customPageTitleSet$.next(set);
+    get showPageHeader$() {
+        return this._showPageHeader$.asObservable();
     }
-    setPageTitleHidden(hidden) {
-        this._pageTitleHidden$.next(hidden);
+    showPageHeader() {
+        this._showPageHeader$.next(true);
     }
-    clearPageActionsViewContainerRef() {
-        this._pageActionsViewContainerRef$.getValue()?.clear();
+    hidePageHeader() {
+        this._showPageHeader$.next(false);
     }
-    openRouteSubscription() {
-        this._routeSubscription = combineLatest([this.router.events, this.pageActionsViewContainerRef$])
-            .pipe(filter(([event]) => event instanceof NavigationEnd ||
-            event instanceof NavigationStart ||
-            event instanceof ResolveEnd), tap(([_, pageActionsViewContainerRef]) => {
-            if (!this._preventReset) {
-                this._customPageTitle$.next('');
-                this._customPageTitleSet$.next(false);
-                this._customPageSubtitle$.next('');
-                this._customPageSubtitleSet$.next(false);
-            }
-            if (pageActionsViewContainerRef && !this._preventReset) {
-                pageActionsViewContainerRef.clear();
-                this.setHasPageActions(false);
-            }
-        }))
-            .subscribe();
+    togglePageHeader() {
+        this._showPageHeader$.pipe(take(1)).subscribe(showPageHeader => {
+            this._showPageHeader$.next(!showPageHeader);
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleService, deps: [{ token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserInterfaceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserInterfaceService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserInterfaceService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$3.Router }] });
+        }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -2074,33 +2109,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-class KeyGeneratorService {
-    getUniqueKey(entityName, usedKeys) {
-        const dashCaseKey = `${entityName}`
-            .toLowerCase()
-            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
-            .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+|[^a-z0-9]+$/g, '');
-        if (!usedKeys.includes(dashCaseKey)) {
-            return dashCaseKey;
-        }
-        return this.getUniqueKeyWithNumber(dashCaseKey, usedKeys);
+class ValtimoModalService {
+    constructor() {
+        this._scrollToTop$ = new Subject();
+        this._caseDefinitionKey$ = new BehaviorSubject('');
     }
-    getUniqueKeyWithNumber(dashCaseKey, usedKeys) {
-        const numbersFromCurrentKey = (dashCaseKey.match(/^\d+|\d+\b|\d+(?=\w)/g) || []).map((numberValue) => +numberValue);
-        const lastNumberFromCurrentKey = numbersFromCurrentKey.length > 0 && numbersFromCurrentKey[numbersFromCurrentKey.length - 1];
-        const newKey = lastNumberFromCurrentKey
-            ? `${dashCaseKey.replace(`${lastNumberFromCurrentKey}`, `${lastNumberFromCurrentKey + 1}`)}`
-            : `${dashCaseKey}-1`;
-        if (usedKeys.includes(newKey)) {
-            return this.getUniqueKeyWithNumber(newKey, usedKeys);
-        }
-        return newKey;
+    get scrollToTop$() {
+        return this._scrollToTop$.asObservable();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyGeneratorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyGeneratorService, providedIn: 'root' }); }
+    get caseDefinitionKey$() {
+        return this._caseDefinitionKey$.pipe(filter(caseDefinitionKey => !!caseDefinitionKey));
+    }
+    scrollToTop() {
+        this._scrollToTop$.next(null);
+    }
+    setCaseDefinitionKey(caseDefinitionKey) {
+        this._caseDefinitionKey$.next(caseDefinitionKey);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyGeneratorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2198,7 +2227,7 @@ class ValuePathSelectorService extends BaseApiService {
     getPrefixesFromResults(results) {
         return [...new Set(results.map((result) => result.path.split(':')[0]))];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorService, deps: [{ token: i1$2.HttpClient }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorService, deps: [{ token: i1$1.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorService, decorators: [{
@@ -2206,7 +2235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1$2.ConfigService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -3376,13 +3405,13 @@ class TopbarComponent {
             base64string,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$5.KeycloakService }, { token: i1$1.ConfigService }, { token: i3.IconService }, { token: ShellService }, { token: i5.DomSanitizer }, { token: PageHeaderService }, { token: CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$5.KeycloakService }, { token: i1$2.ConfigService }, { token: i3.IconService }, { token: ShellService }, { token: i5.DomSanitizer }, { token: PageHeaderService }, { token: CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TopbarComponent, isStandalone: false, selector: "valtimo-topbar", host: { properties: { "class.cds--header": "this.headerClass" } }, viewQueries: [{ propertyName: "_headerVcr", first: true, predicate: ["headerVcr"], descendants: true, read: ViewContainerRef, static: 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\n<cds-header [useRouter]=\"false\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <a\n    *ngIf=\"logoBase64$ | async as logoBase64\"\n    class=\"logo-link\"\n    [ngClass]=\"{'logo-link--large-margin': largeLogoMargin}\"\n    [routerLink]=\"['/']\"\n    [title]=\"applicationTitle\"\n  >\n    <img [src]=\"logoBase64\" class=\"logo-image\" />\n  </a>\n  <cds-hamburger\n    *ngIf=\"(largeScreen$ | async) === false || (collapsibleWidescreenMenu$ | async)\"\n    [active]=\"sideBarExpanded$ | async\"\n    (selected)=\"toggleSideBar()\"\n  ></cds-hamburger>\n  <cds-header-global>\n    <ng-container #headerVcr></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n\n    <cds-header-action\n      title=\"action\"\n      [active]=\"panelExpanded$ | async\"\n      (activeChange)=\"setPanelExpanded($event)\"\n    >\n      <svg cdsIcon=\"user\" size=\"20\"></svg>\n    </cds-header-action>\n  </cds-header-global>\n</cds-header>\n\n<ng-template #userFullName>\n  <div\n    class=\"user-full-name\"\n    *ngIf=\"(showUserNameInTopBar$ | async) && {userFullName: userFullName$ | async} as obs\"\n  >\n    <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: [".user-icon{font-size:30px}.be-toggle-right-sidebar{display:flex}.user-full-name{display:flex;height:100%;align-items:center;justify-content:center;margin-inline-end:var(--v-top-bar-user-name-spacing);flex-shrink:0}::ng-deep .cds--header__name{display:none!important}.logo-link{height:100%;padding-left:16px;padding-top:8px;padding-bottom:8px}.logo-link--large-margin{padding-top:16px;padding-bottom:16px}.logo-image{height:100%;object-fit:contain}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "component", type: i3.Header, selector: "cds-header, ibm-header", inputs: ["skipTo", "name", "brand", "href", "route", "routeExtras", "useRouter"], outputs: ["navigation"] }, { kind: "component", type: i3.HeaderGlobal, selector: "cds-header-global, ibm-header-global" }, { kind: "component", type: i3.HeaderAction, selector: "cds-header-action, ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }, { kind: "component", type: i3.Hamburger, selector: "cds-hamburger, ibm-hamburger", inputs: ["active", "activeTitle", "inactiveTitle"], outputs: ["selected"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-topbar', standalone: false, 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<cds-header [useRouter]=\"false\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <a\n    *ngIf=\"logoBase64$ | async as logoBase64\"\n    class=\"logo-link\"\n    [ngClass]=\"{'logo-link--large-margin': largeLogoMargin}\"\n    [routerLink]=\"['/']\"\n    [title]=\"applicationTitle\"\n  >\n    <img [src]=\"logoBase64\" class=\"logo-image\" />\n  </a>\n  <cds-hamburger\n    *ngIf=\"(largeScreen$ | async) === false || (collapsibleWidescreenMenu$ | async)\"\n    [active]=\"sideBarExpanded$ | async\"\n    (selected)=\"toggleSideBar()\"\n  ></cds-hamburger>\n  <cds-header-global>\n    <ng-container #headerVcr></ng-container>\n\n    <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n\n    <cds-header-action\n      title=\"action\"\n      [active]=\"panelExpanded$ | async\"\n      (activeChange)=\"setPanelExpanded($event)\"\n    >\n      <svg cdsIcon=\"user\" size=\"20\"></svg>\n    </cds-header-action>\n  </cds-header-global>\n</cds-header>\n\n<ng-template #userFullName>\n  <div\n    class=\"user-full-name\"\n    *ngIf=\"(showUserNameInTopBar$ | async) && {userFullName: userFullName$ | async} as obs\"\n  >\n    <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: [".user-icon{font-size:30px}.be-toggle-right-sidebar{display:flex}.user-full-name{display:flex;height:100%;align-items:center;justify-content:center;margin-inline-end:var(--v-top-bar-user-name-spacing);flex-shrink:0}::ng-deep .cds--header__name{display:none!important}.logo-link{height:100%;padding-left:16px;padding-top:8px;padding-bottom:8px}.logo-link--large-margin{padding-top:16px;padding-bottom:16px}.logo-image{height:100%;object-fit:contain}\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$5.KeycloakService }, { type: i1$1.ConfigService }, { type: i3.IconService }, { type: ShellService }, { type: i5.DomSanitizer }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { headerClass: [{
+        }], ctorParameters: () => [{ type: i1$5.KeycloakService }, { type: i1$2.ConfigService }, { type: i3.IconService }, { type: ShellService }, { type: i5.DomSanitizer }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { headerClass: [{
                 type: HostBinding,
                 args: ['class.cds--header']
             }], _headerVcr: [{
@@ -3607,13 +3636,13 @@ class MenuService {
             functionValue,
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuService, deps: [{ token: i1$1.ConfigService }, { token: i1$2.HttpClient }, { token: i4.NGXLogger }, { token: i1$1.MenuIncludeService }, { token: PendingChangesService }, { token: i1$3.Router }, { token: i6.UserProviderService }, { token: i1$5.KeycloakService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuService, deps: [{ token: i1$2.ConfigService }, { token: i1$1.HttpClient }, { token: i4.NGXLogger }, { token: i1$2.MenuIncludeService }, { token: PendingChangesService }, { token: i1$3.Router }, { token: i6.UserProviderService }, { token: i1$5.KeycloakService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.ConfigService }, { type: i1$2.HttpClient }, { type: i4.NGXLogger }, { type: i1$1.MenuIncludeService }, { type: PendingChangesService }, { type: i1$3.Router }, { type: i6.UserProviderService }, { type: i1$5.KeycloakService }] });
+        }], ctorParameters: () => [{ type: i1$2.ConfigService }, { type: i1$1.HttpClient }, { type: i4.NGXLogger }, { type: i1$2.MenuIncludeService }, { type: PendingChangesService }, { type: i1$3.Router }, { type: i6.UserProviderService }, { type: i1$5.KeycloakService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -3812,7 +3841,7 @@ class VersionService {
     getVersion() {
         return this.http.get(`${this.valtimoEndpointUri}v1/valtimo/version`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VersionService, deps: [{ token: i1$2.HttpClient }, { token: i1$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VersionService, deps: [{ token: i1$1.HttpClient }, { token: i1$2.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VersionService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VersionService, decorators: [{
@@ -3820,7 +3849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i1$1.ConfigService }] });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i1$2.ConfigService }] });
 
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
@@ -4105,13 +4134,13 @@ class RightSidebarComponent {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i6.UserProviderService }, { token: i2.FormBuilder }, { token: VersionService }, { token: ShellService }, { token: i0.ElementRef }, { token: i1$1.ConfigService }, { token: i1$1.UserSettingsService }, { token: PageHeaderService }, { token: CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i6.UserProviderService }, { token: i2.FormBuilder }, { token: VersionService }, { token: ShellService }, { token: i0.ElementRef }, { token: i1$2.ConfigService }, { token: i1$2.UserSettingsService }, { token: PageHeaderService }, { token: CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RightSidebarComponent, isStandalone: false, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, 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<div class=\"right-sidebar-menu\">\n  <cds-panel [expanded]=\"panelExpanded$ | async\">\n    <div cdsGrid [condensed]=\"true\">\n      <div cdsRow>\n        <div cdsCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\" cdsLayer>\n          <cds-tabs class=\"cds--tab--list--full-width\">\n            <cds-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </cds-tab>\n\n            <cds-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </cds-tab>\n          </cds-tabs>\n        </div>\n      </div>\n    </div>\n  </cds-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"interfaceSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n\n  @if (showValtimoVersions) {\n    <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.informationTitle' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <cds-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.email' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.email }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.username' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.username }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.name' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.quickLinks' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <cds-structured-list>\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" cdsLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" cdsLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"resetUrl\">\n        <cds-list-column>\n          <a [href]=\"resetUrl\" cdsLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"javascript:void(0)\" cdsLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"showPlantATreeButton\">\n        <cds-list-column>\n          <a\n            class=\"text-success\"\n            href=\"mailto:valtimo@ritense.com?subject=Plant een boom voor Valtimo&body=Hallo Valtimo gebruiker,%0D%0DMet het versturen van deze e-mail gaan we gelijk aan de slag om een boom te planten. Hiermee compenseren we voor een deel de CO2 uitstoot van je Valtimo gebruik.%0D%0DMet Groene Groet,%0D%0DHet Valtimo team%0D%0D*Deze bomenplantactie kan 1 keer ingezet worden door elke geregistreerde Valtimo gebruiker.%0D%0D** Ritense plant ook jaarlijks bomen voor alle Valtimo installaties die in gebruik zijn.\"\n            target=\"_blank\"\n            cdsLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.language.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-dropdown\n          [id]=\"'language-dropdown'\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"updateUserLanguage($event)\"\n        >\n          <cds-dropdown-list [items]=\"(languageListItems$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <cds-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.notification.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #interfaceSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.interface.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.collapsibleMenu' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"collapsibleWidescreenMenu$ | async\"\n          (ngModelChange)=\"setCollapsibleWidescreenMenu($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"allowUserThemeSwitching\">\n      <cds-list-column>\n        <cds-dropdown\n          [label]=\"'settings.interface.themePreference' | translate\"\n          [appendInline]=\"true\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"setPreferredTheme($event)\"\n          [dropUp]=\"false\"\n        >\n          <cds-dropdown-list [items]=\"(themeOptions$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableCompactModeToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.compactMode' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"compactMode$ | async\"\n          (ngModelChange)=\"setCompactMode($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableShowUserNameToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.showUserName' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"showUserNameInTopBar$ | async\"\n          (ngModelChange)=\"setShowUserName($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <cds-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <cds-list-header>\n        <cds-list-column>{{ 'settings.version.title' | translate }}</cds-list-column>\n      </cds-list-header>\n\n      <cds-list-row *ngIf=\"obs.backendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ obs.backendVersion.version }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"frontendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.valtimo-frontend-libraries' | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ frontendVersion }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <cds-list-column>\n    <a\n      [href]=\"\n        'mailto:' +\n        overrideFeedbackMenuItemToMailTo.email +\n        '?subject=' +\n        (overrideFeedbackMenuItemToMailTo.subjectTranslationKey | translate) +\n        '&body=' +\n        (overrideFeedbackMenuItemToMailTo.bodyTranslationKey | translate)\n      \"\n      target=\"_blank\"\n      cdsLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </cds-list-column>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu cds-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--grid--condensed{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu cds-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .build-information .tag-container .cds--tag{margin-left:0;margin-right:0;margin-bottom:0}.right-sidebar-menu .information-table cds-list-row:first-child{border-top:0}.right-sidebar-menu .information-table cds-list-row:first-child cds-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table cds-list-row:last-child cds-list-column{padding-bottom:0}.right-sidebar-menu .information-table cds-list-row cds-list-column:first-child{padding-left:0!important}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:fit-content}.cds--select-input{background-color:var(--cds-field-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: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.Panel, selector: "cds-panel, ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i3.ColumnDirective, selector: "[cdsCol], [ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i3.GridDirective, selector: "[cdsGrid], [ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i3.RowDirective, selector: "[cdsRow], [ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i3.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i3.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i3.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i3.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "directive", type: i3.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RightSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-right-sidebar', encapsulation: ViewEncapsulation.None, standalone: false, 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<div class=\"right-sidebar-menu\">\n  <cds-panel [expanded]=\"panelExpanded$ | async\">\n    <div cdsGrid [condensed]=\"true\">\n      <div cdsRow>\n        <div cdsCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\" cdsLayer>\n          <cds-tabs class=\"cds--tab--list--full-width\">\n            <cds-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </cds-tab>\n\n            <cds-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </cds-tab>\n          </cds-tabs>\n        </div>\n      </div>\n    </div>\n  </cds-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"interfaceSettingsTemplate\"></ng-container>\n\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n\n  @if (showValtimoVersions) {\n    <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.informationTitle' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <cds-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.email' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.email }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.username' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.username }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column\n          >{{ 'interface.name' | translate }}\n          <cds-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</cds-tag>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'account.quickLinks' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <cds-structured-list>\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" cdsLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" cdsLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"resetUrl\">\n        <cds-list-column>\n          <a [href]=\"resetUrl\" cdsLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row>\n        <cds-list-column>\n          <a href=\"javascript:void(0)\" cdsLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"showPlantATreeButton\">\n        <cds-list-column>\n          <a\n            class=\"text-success\"\n            href=\"mailto:valtimo@ritense.com?subject=Plant een boom voor Valtimo&body=Hallo Valtimo gebruiker,%0D%0DMet het versturen van deze e-mail gaan we gelijk aan de slag om een boom te planten. Hiermee compenseren we voor een deel de CO2 uitstoot van je Valtimo gebruik.%0D%0DMet Groene Groet,%0D%0DHet Valtimo team%0D%0D*Deze bomenplantactie kan 1 keer ingezet worden door elke geregistreerde Valtimo gebruiker.%0D%0D** Ritense plant ook jaarlijks bomen voor alle Valtimo installaties die in gebruik zijn.\"\n            target=\"_blank\"\n            cdsLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.language.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-dropdown\n          [id]=\"'language-dropdown'\"\n          [appendInline]=\"true\"\n          [dropUp]=\"false\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"updateUserLanguage($event)\"\n        >\n          <cds-dropdown-list [items]=\"(languageListItems$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <cds-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.notification.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.taskNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"taskNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row>\n      <cds-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <cds-toggle\n            [label]=\"'settings.notification.emailNotifications' | translate\"\n            [onText]=\"'interface.on' | translate\"\n            [offText]=\"'interface.off' | translate\"\n            formControlName=\"emailNotifications\"\n            [disabled]=\"updatingSettings$ | async\"\n          >\n          </cds-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #interfaceSettingsTemplate>\n  <cds-structured-list>\n    <cds-list-header>\n      <cds-list-column>{{ 'settings.interface.title' | translate }}</cds-list-column>\n    </cds-list-header>\n\n    <cds-list-row>\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.collapsibleMenu' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"collapsibleWidescreenMenu$ | async\"\n          (ngModelChange)=\"setCollapsibleWidescreenMenu($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"allowUserThemeSwitching\">\n      <cds-list-column>\n        <cds-dropdown\n          [label]=\"'settings.interface.themePreference' | translate\"\n          [appendInline]=\"true\"\n          (click)=\"$event.stopPropagation()\"\n          (selected)=\"setPreferredTheme($event)\"\n          [dropUp]=\"false\"\n        >\n          <cds-dropdown-list [items]=\"(themeOptions$ | async) || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableCompactModeToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.compactMode' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"compactMode$ | async\"\n          (ngModelChange)=\"setCompactMode($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n\n    <cds-list-row *ngIf=\"enableShowUserNameToggle\">\n      <cds-list-column>\n        <cds-toggle\n          [label]=\"'settings.interface.showUserName' | translate\"\n          [onText]=\"'interface.on' | translate\"\n          [offText]=\"'interface.off' | translate\"\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"showUserNameInTopBar$ | async\"\n          (ngModelChange)=\"setShowUserName($event)\"\n        >\n        </cds-toggle>\n      </cds-list-column>\n    </cds-list-row>\n  </cds-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <cds-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <cds-list-header>\n        <cds-list-column>{{ 'settings.version.title' | translate }}</cds-list-column>\n      </cds-list-header>\n\n      <cds-list-row *ngIf=\"obs.backendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ obs.backendVersion.version }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n\n      <cds-list-row *ngIf=\"frontendVersion\">\n        <cds-list-column>\n          <div class=\"build-information\">\n            <span class=\"build-title\">{{\n              'interface.builds.valtimo-frontend-libraries' | translate\n            }}</span>\n            <div class=\"tag-container\">\n              <cds-tag type=\"blue\">{{ frontendVersion }}</cds-tag>\n            </div>\n          </div>\n        </cds-list-column>\n      </cds-list-row>\n    </cds-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <cds-list-column>\n    <a\n      [href]=\"\n        'mailto:' +\n        overrideFeedbackMenuItemToMailTo.email +\n        '?subject=' +\n        (overrideFeedbackMenuItemToMailTo.subjectTranslationKey | translate) +\n        '&body=' +\n        (overrideFeedbackMenuItemToMailTo.bodyTranslationKey | translate)\n      \"\n      target=\"_blank\"\n      cdsLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </cds-list-column>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu cds-structured-list:last-child .cds--structured-list-row:last-child{border-bottom:0}.right-sidebar-menu .cds--grid,.right-sidebar-menu .cds--row,.right-sidebar-menu .menu-tabs{height:100%}.right-sidebar-menu .cds--grid--condensed{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .cds--tab--list--full-width{display:flex;flex-direction:column;height:100%}.right-sidebar-menu cds-tab{overflow:auto}.right-sidebar-menu .build-information{display:inline-flex;flex-direction:column}.right-sidebar-menu .build-information:not(:last-child){margin-bottom:1rem}.right-sidebar-menu .build-information .tag-container .cds--tag{margin-left:0;margin-right:0;margin-bottom:0}.right-sidebar-menu .information-table cds-list-row:first-child{border-top:0}.right-sidebar-menu .information-table cds-list-row:first-child cds-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table cds-list-row:last-child cds-list-column{padding-bottom:0}.right-sidebar-menu .information-table cds-list-row cds-list-column:first-child{padding-left:0!important}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%}.account-information .cds--structured-list-td .cds--tag{margin:0;margin-top:.25rem;width:fit-content}.cds--select-input{background-color:var(--cds-field-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"] }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i6.UserProviderService }, { type: i2.FormBuilder }, { type: VersionService }, { type: ShellService }, { type: i0.ElementRef }, { type: i1$1.ConfigService }, { type: i1$1.UserSettingsService }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { onPageClick: [{
+        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i6.UserProviderService }, { type: i2.FormBuilder }, { type: VersionService }, { type: ShellService }, { type: i0.ElementRef }, { type: i1$2.ConfigService }, { type: i1$2.UserSettingsService }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { onPageClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
             }] } });
@@ -4356,11 +4385,11 @@ class LeftSidebarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i0.ElementRef }, { token: MenuService }, { token: ShellService }, { token: i3$1.BreakpointObserver }, { token: i1$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: 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\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n        <cds-sidenav-menu\n          [title]=\"menuItem | menuItemTranslate | async\"\n          [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n        >\n          <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n            <ng-container\n              *ngIf=\"{\n                count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                sequence: '' + menuItem.sequence + childMenuItem.sequence,\n              } as vars\"\n            >\n              <cds-sidenav-item\n                [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                [ngClass]=\"{\n                  'cds--side-nav__item--empty': !childMenuItem.link,\n                  'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                  'menu-item--visible':\n                    childMenuItem.includeFunction !== undefined &&\n                    (includeFunctionObservables[childMenuItem.title] | async),\n                }\"\n                [active]=\"vars.sequence === obs.closestSequence\"\n                [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                (contextmenu)=\"onRightClick(vars.sequence)\"\n                (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n              >\n                <valtimo-menu-item-text\n                  [accent]=\"!childMenuItem.link\"\n                  [menuItem]=\"childMenuItem\"\n                  [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                  (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                  (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                ></valtimo-menu-item-text>\n\n                <ng-container\n                  *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n                ></ng-container>\n              </cds-sidenav-item>\n            </ng-container>\n          </ng-container>\n        </cds-sidenav-menu>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text> </cds-sidenav-item\n  ></ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: LeftSidebarComponent, isStandalone: false, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: 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\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n        <cds-sidenav-menu\n          [title]=\"menuItem | menuItemTranslate | async\"\n          [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n        >\n          <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n            <ng-container\n              *ngIf=\"{\n                count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                sequence: '' + menuItem.sequence + childMenuItem.sequence,\n              } as vars\"\n            >\n              <cds-sidenav-item\n                [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                [ngClass]=\"{\n                  'cds--side-nav__item--empty': !childMenuItem.link,\n                  'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                  'menu-item--visible':\n                    childMenuItem.includeFunction !== undefined &&\n                    (includeFunctionObservables[childMenuItem.title] | async),\n                }\"\n                [active]=\"vars.sequence === obs.closestSequence\"\n                [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                (contextmenu)=\"onRightClick(vars.sequence)\"\n                (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n              >\n                <valtimo-menu-item-text\n                  [accent]=\"!childMenuItem.link\"\n                  [menuItem]=\"childMenuItem\"\n                  [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                  (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                  (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                ></valtimo-menu-item-text>\n\n                <ng-container\n                  *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n                ></ng-container>\n              </cds-sidenav-item>\n            </ng-container>\n          </ng-container>\n        </cds-sidenav-menu>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent", "showOverFlowMenu"], outputs: ["overflowMenuClosed", "openInNewTab"] }, { kind: "component", type: i3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i3.SideNavMenu, selector: "cds-sidenav-menu, ibm-sidenav-menu", inputs: ["useRouter", "title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "directive", type: CtrlClickDirective, selector: "[ctrl-click]", outputs: ["ctrl-click"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LeftSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-left-sidebar', standalone: false, 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<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n        <cds-sidenav-menu\n          [title]=\"menuItem | menuItemTranslate | async\"\n          [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n        >\n          <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n            <ng-container\n              *ngIf=\"{\n                count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                sequence: '' + menuItem.sequence + childMenuItem.sequence,\n              } as vars\"\n            >\n              <cds-sidenav-item\n                [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                [ngClass]=\"{\n                  'cds--side-nav__item--empty': !childMenuItem.link,\n                  'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                  'menu-item--visible':\n                    childMenuItem.includeFunction !== undefined &&\n                    (includeFunctionObservables[childMenuItem.title] | async),\n                }\"\n                [active]=\"vars.sequence === obs.closestSequence\"\n                [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                (contextmenu)=\"onRightClick(vars.sequence)\"\n                (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n              >\n                <valtimo-menu-item-text\n                  [accent]=\"!childMenuItem.link\"\n                  [menuItem]=\"childMenuItem\"\n                  [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                  (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                  (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                ></valtimo-menu-item-text>\n\n                <ng-container\n                  *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n                ></ng-container>\n              </cds-sidenav-item>\n            </ng-container>\n          </ng-container>\n        </cds-sidenav-menu>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text> </cds-sidenav-item\n  ></ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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"] }]
+            args: [{ selector: 'valtimo-left-sidebar', standalone: false, 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<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n    menuItemsLoaded: menuItemsLoaded$ | async,\n    menuItems: menuItems$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngIf=\"obs.menuItemsLoaded; else loadingTemplate\">\n    <ng-container *ngFor=\"let menuItem of obs.menuItems\">\n      <ng-container *ngIf=\"!menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              menuItem: menuItem,\n              closestSequence: obs.closestSequence,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"menuItem.children\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            topMenuItem;\n            context: {\n              closestSequence: obs.closestSequence,\n              menuItem: menuItem,\n              overflowMenuSequence: obs.overflowMenuSequence,\n            }\n          \"\n        ></ng-container>\n\n        <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n\n        <cds-sidenav-menu\n          [title]=\"menuItem | menuItemTranslate | async\"\n          [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n        >\n          <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n            <ng-container\n              *ngIf=\"{\n                count: childMenuItem?.count$ && (childMenuItem?.count$ | async),\n                sequence: '' + menuItem.sequence + childMenuItem.sequence,\n              } as vars\"\n            >\n              <cds-sidenav-item\n                [attr.data-testid]=\"'sidenav-item-' + childMenuItem?.title\"\n                [ngClass]=\"{\n                  'cds--side-nav__item--empty': !childMenuItem.link,\n                  'menu-item--hidden': childMenuItem.includeFunction !== undefined,\n                  'menu-item--visible':\n                    childMenuItem.includeFunction !== undefined &&\n                    (includeFunctionObservables[childMenuItem.title] | async),\n                }\"\n                [active]=\"vars.sequence === obs.closestSequence\"\n                [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n                (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n                (contextmenu)=\"onRightClick(vars.sequence)\"\n                (ctrl-click)=\"openInNewTab(childMenuItem.link)\"\n              >\n                <valtimo-menu-item-text\n                  [accent]=\"!childMenuItem.link\"\n                  [menuItem]=\"childMenuItem\"\n                  [showOverFlowMenu]=\"obs.overflowMenuSequence === vars.sequence\"\n                  (openInNewTab)=\"openInNewTab(childMenuItem.link)\"\n                  (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n                ></valtimo-menu-item-text>\n\n                <ng-container\n                  *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n                ></ng-container>\n              </cds-sidenav-item>\n            </ng-container>\n          </ng-container>\n        </cds-sidenav-menu>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text>\n    </cds-sidenav-item>\n  </ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\">\n    <cds-loading size=\"sm\"></cds-loading>\n  </div>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}::ng-deep .resize-border{position:absolute;width:3px;height:100%;top:0;right:0;cursor:col-resize;background-color:var(--cds-border-strong);opacity:0;transition:opacity .11s cubic-bezier(.2,0,1,.9)}::ng-deep .resize-hover{opacity:1}::ng-deep .resize-border--invisible{display:none}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:13px;height:0}.menu-item-icon-container i{width:0px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}::ng-deep .cds--side-nav__icon{margin-left:-16px}::ng-deep .cds--side-nav__item.cds--side-nav__item--icon a.cds--side-nav__link{padding-left:3.5rem}::ng-deep .cds--side-nav__submenu-title{padding-right:1.5rem}::ng-deep .cds--side-nav__items{display:flex!important;flex-direction:column!important;overflow:visible!important}::ng-deep .cds--side-nav__navigation{top:3rem;height:calc(100% - 3rem)!important;overflow-x:hidden!important;overflow-y:auto!important}::ng-deep .cds--side-nav__navigation:not(.cds--side-nav--expanded){width:0}.loading-container{display:flex;width:100%;justify-content:center}\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: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3$1.BreakpointObserver }, { type: i1$3.Router }], propDecorators: { toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton']
@@ -4460,13 +4489,13 @@ class PageTitleComponent {
             this.isCompact = compactMode;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: i5.Title }, { token: i1.TranslateService }, { token: i4.NGXLogger }, { token: i1$1.ConfigService }, { token: PageTitleService }, { token: PageHeaderService }, { token: PageSubtitleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: i5.Title }, { token: i1.TranslateService }, { token: i4.NGXLogger }, { token: i1$2.ConfigService }, { token: PageTitleService }, { token: PageHeaderService }, { token: PageSubtitleService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PageTitleComponent, isStandalone: false, selector: "valtimo-page-title", host: { properties: { "class.valtimo-page-title--compact": "this.isCompact" } }, viewQueries: [{ propertyName: "_subtitleVcr", first: true, predicate: ["subtitleVcr"], descendants: true, read: ViewContainerRef, static: 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\n<div\n  class=\"page-title-container\"\n  [ngClass]=\"{\n    'page-title-container--no-margin': hidePageTitle || isCompact,\n    'page-title-container--compact': isCompact,\n  }\"\n>\n  <ng-container\n    *ngIf=\"\n      hidePageTitle === false && {\n        title: translatedTitle$ | async,\n        hasCustomPageTitle: hasCustomPageTitle$ | async,\n        customPageTitle: customPageTitle$ | async,\n        customPageTitleSet: customPageTitleSet$ | async,\n      } as obs\n    \"\n  >\n    <div\n      class=\"skeleton-container\"\n      *ngIf=\"obs.hasCustomPageTitle && !obs.customPageTitleSet\"\n      [ngClass]=\"{'skeleton-container--compact': isCompact}\"\n    >\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <ng-container *ngIf=\"obs.hasCustomPageTitle ? obs.customPageTitleSet : obs.title !== ''\">\n      @if (!isCompact) {\n        <h2\n          [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n          class=\"page-title\"\n          [ngClass]=\"{'page-title--small-title': smallTitle$ | async}\"\n        >\n          {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n        </h2>\n      } @else {\n        <span\n          [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n          class=\"cds--breadcrumb compact-page-title\"\n        >\n          {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n        </span>\n      }\n    </ng-container>\n  </ng-container>\n\n  <ng-container #subtitleVcr></ng-container>\n</div>\n", styles: [".page-title-container{display:flex;flex-direction:row;align-items:flex-end}.page-title-container--no-margin{margin-bottom:0}.page-title-container--compact{align-items:center}.page-title-container .page-title{flex-shrink:0;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title-container .page-title--small-title{font-size:var(--cds-body-compact-01-font-size, .875rem);font-weight:var(--cds-body-compact-01-font-weight, 400);line-height:var(--cds-body-compact-01-line-height, 1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing, .16px)}.page-title-container .compact-page-title{margin-left:8px;flex-shrink:0}.page-title-container .skeleton-container .cds--skeleton__placeholder{width:200px;height:40px}.page-title-container .skeleton-container--compact{width:60px;height:18px;overflow:hidden;margin-left:8px}.valtimo-page-title--compact{width:100%}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-page-title', encapsulation: ViewEncapsulation.None, standalone: false, 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<div\n  class=\"page-title-container\"\n  [ngClass]=\"{\n    'page-title-container--no-margin': hidePageTitle || isCompact,\n    'page-title-container--compact': isCompact,\n  }\"\n>\n  <ng-container\n    *ngIf=\"\n      hidePageTitle === false && {\n        title: translatedTitle$ | async,\n        hasCustomPageTitle: hasCustomPageTitle$ | async,\n        customPageTitle: customPageTitle$ | async,\n        customPageTitleSet: customPageTitleSet$ | async,\n      } as obs\n    \"\n  >\n    <div\n      class=\"skeleton-container\"\n      *ngIf=\"obs.hasCustomPageTitle && !obs.customPageTitleSet\"\n      [ngClass]=\"{'skeleton-container--compact': isCompact}\"\n    >\n      <cds-skeleton-placeholder></cds-skeleton-placeholder>\n    </div>\n\n    <ng-container *ngIf=\"obs.hasCustomPageTitle ? obs.customPageTitleSet : obs.title !== ''\">\n      @if (!isCompact) {\n        <h2\n          [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n          class=\"page-title\"\n          [ngClass]=\"{'page-title--small-title': smallTitle$ | async}\"\n        >\n          {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n        </h2>\n      } @else {\n        <span\n          [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\"\n          class=\"cds--breadcrumb compact-page-title\"\n        >\n          {{ obs.hasCustomPageTitle ? obs.customPageTitle : obs.title }}\n        </span>\n      }\n    </ng-container>\n  </ng-container>\n\n  <ng-container #subtitleVcr></ng-container>\n</div>\n", styles: [".page-title-container{display:flex;flex-direction:row;align-items:flex-end}.page-title-container--no-margin{margin-bottom:0}.page-title-container--compact{align-items:center}.page-title-container .page-title{flex-shrink:0;font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title-container .page-title--small-title{font-size:var(--cds-body-compact-01-font-size, .875rem);font-weight:var(--cds-body-compact-01-font-weight, 400);line-height:var(--cds-body-compact-01-line-height, 1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing, .16px)}.page-title-container .compact-page-title{margin-left:8px;flex-shrink:0}.page-title-container .skeleton-container .cds--skeleton__placeholder{width:200px;height:40px}.page-title-container .skeleton-container--compact{width:60px;height:18px;overflow:hidden;margin-left:8px}.valtimo-page-title--compact{width:100%}\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.Router }, { type: i1$3.ActivatedRoute }, { type: i5.Title }, { type: i1.TranslateService }, { type: i4.NGXLogger }, { type: i1$1.ConfigService }, { type: PageTitleService }, { type: PageHeaderService }, { type: PageSubtitleService }], propDecorators: { isCompact: [{
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: i5.Title }, { type: i1.TranslateService }, { type: i4.NGXLogger }, { type: i1$2.ConfigService }, { type: PageTitleService }, { type: PageHeaderService }, { type: PageSubtitleService }], propDecorators: { isCompact: [{
                 type: HostBinding,
                 args: ['class.valtimo-page-title--compact']
             }], _subtitleVcr: [{
@@ -5370,7 +5399,7 @@ class ValtimoCdsModalDirective {
     applyStyleToModalElements() {
         if (this.minContentHeight <= 0)
             return;
-        const contentElements = Array.from(this.document.querySelectorAll('.cds--modal-content'));
+        const contentElements = this.elementRef.nativeElement.querySelectorAll('.cds--modal-content');
         for (const element of contentElements) {
             this.renderer.setStyle(element, 'min-height', `${this.minContentHeight}px`, RendererStyleFlags2.Important);
         }
@@ -8189,13 +8218,13 @@ class FormioComponent {
             return;
         this._overrideOptions$.next(config.formioOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormioComponent, deps: [{ token: i6.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$1.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormioComponent, deps: [{ token: i6.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$3.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i1$2.ConfigService }, { token: FormIoTagsService }, { token: i0.Injector }, { token: FormioTranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FormioComponent, isStandalone: false, selector: "valtimo-form-io", inputs: { options: "options", submission: "submission", form: "form", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change", event: "event" }, host: { listeners: { "window:beforeunload": "handleBeforeUnload($event)" } }, providers: [FormIoLocalStorageService], 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\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormioComponent, selector: "formio" }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], standalone: false, 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<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i6.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$3.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i1$1.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
+        }], ctorParameters: () => [{ type: i6.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$3.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i1$2.ConfigService }, { type: FormIoTagsService }, { type: i0.Injector }, { type: FormioTranslationService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
                 type: Input
@@ -8348,13 +8377,13 @@ class FormioBuilderComponent {
             return;
         this._overrideOptions$.next(config.formioOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormioBuilderComponent, deps: [{ token: i1.TranslateService }, { token: FormIoStateService }, { token: i1$1.ConfigService }, { token: i0.Injector }, { token: FormIoTagsService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormioBuilderComponent, deps: [{ token: i1.TranslateService }, { token: FormIoStateService }, { token: i1$2.ConfigService }, { token: i0.Injector }, { token: FormIoTagsService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: FormioBuilderComponent, isStandalone: false, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, 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<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [options]=\"formioOptions$ | async\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormioBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-io-builder', standalone: false, 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<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [options]=\"formioOptions$ | async\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: FormIoStateService }, { type: i1$1.ConfigService }, { type: i0.Injector }, { type: FormIoTagsService }, { type: i1$3.ActivatedRoute }], propDecorators: { form: [{
+        }], ctorParameters: () => [{ type: i1.TranslateService }, { type: FormIoStateService }, { type: i1$2.ConfigService }, { type: i0.Injector }, { type: FormIoTagsService }, { type: i1$3.ActivatedRoute }], propDecorators: { form: [{
                 type: Input
             }], change: [{
                 type: Output
@@ -9428,8 +9457,7 @@ class ValuePathSelectorComponent {
         this.collectionSelected = new EventEmitter();
         this._caseDefinitionKeySubject$ = new BehaviorSubject(null);
         this._caseDefinitionVersionTag$ = new BehaviorSubject(null);
-        this.showToggle$ = this._caseDefinitionKey$
-            .pipe(map(caseDefinitionKey => !!caseDefinitionKey));
+        this.showToggle$ = this._caseDefinitionKey$.pipe(map(caseDefinitionKey => !!caseDefinitionKey));
         this._prefixes$ = new BehaviorSubject([]);
         this._inputMode$ = new BehaviorSubject(ValuePathSelectorInputMode.DROPDOWN);
         this.inputModeIsDropdown$ = this._inputMode$.pipe(map(mode => {
@@ -9445,7 +9473,7 @@ class ValuePathSelectorComponent {
                 this._prefixes$,
                 this._type$,
                 this._caseDefinitionVersionTag$,
-                this.showToggle$
+                this.showToggle$,
             ]).pipe(filter$1(([, , , , showToggle]) => showToggle), switchMap(([caseDefinitionKey, prefixes, type, caseDefinitionVersionTag]) => this.valuePathSelectorService.getResolvableKeys(prefixes, caseDefinitionKey, type, caseDefinitionVersionTag)))), map((results) => results
             .map((result) => ({
             ...result,
@@ -9544,7 +9572,7 @@ class ValuePathSelectorComponent {
                 multi: true,
                 useExisting: forwardRef(() => ValuePathSelectorComponent),
             },
-        ], 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    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n    showToggle: showToggle$ | async\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form\n    [formGroup]=\"formGroup\"\n    [ngClass]=\"{\n    'value-path-selector__form--case-def-input':\n       showCaseDefinitionSelector && obs.inputModeIsDropdown  && !obs.showToggle\n    }\"\n    class=\"value-path-selector__form\"\n  >\n    <cds-toggle\n      *ngIf=\"obs.showToggle\"\n      data-testid=\"value-path-selector-toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown && obs.showToggle) {\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        (selected)=\"onPathSelected($event)\"\n        cdsLayer\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n        cdsLayer\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:grid;grid-template-columns:110px 1fr;width:100%;align-items:center;gap:16px;justify-content:space-between}::ng-deep .value-path-selector__form--case-def-input{display:flex!important}.value-path-selector__form ::ng-deep cds-dropdown{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
+        ], 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    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n    showToggle: showToggle$ | async,\n  } as obs\"\n>\n  <v-input-label *ngIf=\"!!label\" [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\">\n  </v-input-label>\n\n  <form\n    [formGroup]=\"formGroup\"\n    [ngClass]=\"{\n      'value-path-selector__form--case-def-input':\n        showCaseDefinitionSelector && obs.inputModeIsDropdown && !obs.showToggle,\n    }\"\n    class=\"value-path-selector__form\"\n  >\n    <cds-toggle\n      *ngIf=\"obs.showToggle\"\n      data-testid=\"value-path-selector-toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown && obs.showToggle) {\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        (selected)=\"onPathSelected($event)\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:grid;grid-template-columns:110px 1fr;width:100%;align-items:center;gap:16px;justify-content:space-between}::ng-deep .value-path-selector__form--case-def-input{display:flex!important}.value-path-selector__form ::ng-deep cds-dropdown{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: LoadingModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: InputLabelModule }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: LayerModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorComponent, decorators: [{
             type: Component,
@@ -9565,7 +9593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => ValuePathSelectorComponent),
                         },
-                    ], 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    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n    showToggle: showToggle$ | async\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form\n    [formGroup]=\"formGroup\"\n    [ngClass]=\"{\n    'value-path-selector__form--case-def-input':\n       showCaseDefinitionSelector && obs.inputModeIsDropdown  && !obs.showToggle\n    }\"\n    class=\"value-path-selector__form\"\n  >\n    <cds-toggle\n      *ngIf=\"obs.showToggle\"\n      data-testid=\"value-path-selector-toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown && obs.showToggle) {\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        (selected)=\"onPathSelected($event)\"\n        cdsLayer\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n        cdsLayer\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:grid;grid-template-columns:110px 1fr;width:100%;align-items:center;gap:16px;justify-content:space-between}::ng-deep .value-path-selector__form--case-def-input{display:flex!important}.value-path-selector__form ::ng-deep cds-dropdown{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\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\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n    showToggle: showToggle$ | async,\n  } as obs\"\n>\n  <v-input-label *ngIf=\"!!label\" [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\">\n  </v-input-label>\n\n  <form\n    [formGroup]=\"formGroup\"\n    [ngClass]=\"{\n      'value-path-selector__form--case-def-input':\n        showCaseDefinitionSelector && obs.inputModeIsDropdown && !obs.showToggle,\n    }\"\n    class=\"value-path-selector__form\"\n  >\n    <cds-toggle\n      *ngIf=\"obs.showToggle\"\n      data-testid=\"value-path-selector-toggle\"\n      size=\"sm\"\n      [disabled]=\"obs.disabled\"\n      [onText]=\"'valuePathSelector.dropdown' | translate\"\n      [offText]=\"'valuePathSelector.manual' | translate\"\n      [checked]=\"obs.inputModeIsDropdown\"\n      (checkedChange)=\"onInputModeChange($event)\"\n    ></cds-toggle>\n\n    @if (obs.inputModeIsDropdown && obs.showToggle) {\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"\n          obs.disabled ||\n          obs.loadingValuePathItems ||\n          !obs.valuePathListItems ||\n          (obs.valuePathListItems || []).length === 0\n        \"\n        (selected)=\"onPathSelected($event)\"\n        [placeholder]=\"'valuePathSelector.placeholder' | translate\"\n      >\n        <cds-dropdown-list [items]=\"obs.valuePathListItems || []\"></cds-dropdown-list>\n      </cds-dropdown>\n    } @else {\n      <input\n        data-testid=\"value-path-selector-input\"\n        cdsText\n        type=\"text\"\n        formControlName=\"selectedPath\"\n      />\n    }\n  </form>\n</ng-container>\n", styles: [":host{width:100%;display:flex;flex-direction:column}::ng-deep .value-path-selector--margin-bottom{margin-bottom:16px}::ng-deep .value-path-selector--margin-bottom-lg{margin-bottom:24px}::ng-deep .value-path-selector--margin-bottom-xl{margin-bottom:34px}.value-path-selector__form{display:grid;grid-template-columns:110px 1fr;width:100%;align-items:center;gap:16px;justify-content:space-between}::ng-deep .value-path-selector__form--case-def-input{display:flex!important}.value-path-selector__form ::ng-deep cds-dropdown{width:100%;min-width:0}.value-path-selector__form ::ng-deep .cds--toggle__label-text{display:none}.value-path-selector__form ::ng-deep .cds--toggle__label{display:flex}\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: ValuePathSelectorService }, { type: i2.FormBuilder }, { type: i3$2.DocumentService }, { type: i1$3.ActivatedRoute }], propDecorators: { _showMargin: [{
                 type: HostBinding,
                 args: ['class.value-path-selector--margin-bottom']
@@ -11301,6 +11329,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * limitations under the License.
  */
 class InputComponent {
+    set defaultValue(value) {
+        this._defaultValue = value;
+        this.setDefaultValue(this.defaultValue);
+    }
+    get defaultValue() {
+        return this._defaultValue;
+    }
     set fullWidth(value) {
         this.fullWidthClass = value;
     }
@@ -11311,7 +11346,7 @@ class InputComponent {
         this.type = 'text';
         this.title = '';
         this.titleTranslationKey = '';
-        this.defaultValue = '';
+        this._defaultValue = '';
         this.margin = false;
         this.smallMargin = false;
         this.disabled = false;
@@ -11401,11 +11436,11 @@ class InputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, deps: [{ token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputComponent, isStandalone: false, selector: "v-input", inputs: { name: "name", type: "type", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", step: "step", min: "min", maxLength: "maxLength", tooltip: "tooltip", required: "required", hideNumberSpinBox: "hideNumberSpinBox", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", carbonTheme: "carbonTheme", placeholder: "placeholder", dataTestId: "dataTestId", trim: "trim", presetsTitle: "presetsTitle", presetOptions: "presetOptions" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, 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\n<div class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"presets\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin && presetOptions.length === 0,\n      'v-input--small-margin': smallMargin && presetOptions.length === 0,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n\n      <div class=\"v-input__password-icon\">\n        <cds-icon-button align=\"top\" (click)=\"toggleShowPassword()\">\n          <svg cdsIcon=\"{{ obs.showPassword ? 'view-off' : 'view' }}\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #presets>\n  <div\n    *ngIf=\"isText && presetOptions.length > 0\"\n    [ngClass]=\"{\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    class=\"v-input--preset-options\">\n    <span>{{ presetsTitle }}:</span>\n    @for (preset of presetOptions; track $index; let isFirst = $first) {\n      @if (!isFirst) { | }\n      <a (click)=\"presetWithValue(preset)\" class=\"v-input--preset-option\">{{ preset }}</a>\n    }\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}div.v-input--preset-options{margin-top:3px;font-size:var(--v-input-font-size);color:var(--v-input-color)}div.v-input--preset-options span:first-child{padding-right:3px}div.v-input--preset-options a.v-input--preset-option{cursor:pointer;font-style:italic}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i3.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[digitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputComponent, isStandalone: false, selector: "v-input", inputs: { name: "name", type: "type", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", step: "step", min: "min", maxLength: "maxLength", tooltip: "tooltip", required: "required", hideNumberSpinBox: "hideNumberSpinBox", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", carbonTheme: "carbonTheme", placeholder: "placeholder", dataTestId: "dataTestId", trim: "trim", presetsTitle: "presetsTitle", presetOptions: "presetOptions" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, 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\n<div class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"presets\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin && presetOptions.length === 0,\n      'v-input--small-margin': smallMargin && presetOptions.length === 0,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n\n      <div class=\"v-input__password-icon\">\n        <cds-icon-button align=\"top\" (click)=\"toggleShowPassword()\">\n          <svg cdsIcon=\"{{ obs.showPassword ? 'view-off' : 'view' }}\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #presets>\n  <div\n    *ngIf=\"isText && presetOptions.length > 0\"\n    [ngClass]=\"{\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    class=\"v-input--preset-options\">\n    <span>{{ presetsTitle }}:</span>\n\n    @for (preset of presetOptions; track $index) {\n      @if (!$first) { | }\n      <a (click)=\"presetWithValue(preset)\" class=\"v-input--preset-option\">{{ preset }}</a>\n    }\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}div.v-input--preset-options{margin-top:3px;font-size:var(--v-input-font-size);color:var(--v-input-color)}div.v-input--preset-options span:first-child{padding-right:3px}div.v-input--preset-options a.v-input--preset-option{cursor:pointer;font-style:italic}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i3.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[digitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'v-input', standalone: false, 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<div class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"presets\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin && presetOptions.length === 0,\n      'v-input--small-margin': smallMargin && presetOptions.length === 0,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n\n      <div class=\"v-input__password-icon\">\n        <cds-icon-button align=\"top\" (click)=\"toggleShowPassword()\">\n          <svg cdsIcon=\"{{ obs.showPassword ? 'view-off' : 'view' }}\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #presets>\n  <div\n    *ngIf=\"isText && presetOptions.length > 0\"\n    [ngClass]=\"{\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    class=\"v-input--preset-options\">\n    <span>{{ presetsTitle }}:</span>\n    @for (preset of presetOptions; track $index; let isFirst = $first) {\n      @if (!isFirst) { | }\n      <a (click)=\"presetWithValue(preset)\" class=\"v-input--preset-option\">{{ preset }}</a>\n    }\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}div.v-input--preset-options{margin-top:3px;font-size:var(--v-input-font-size);color:var(--v-input-color)}div.v-input--preset-options span:first-child{padding-right:3px}div.v-input--preset-options a.v-input--preset-option{cursor:pointer;font-style:italic}\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"] }]
+            args: [{ selector: 'v-input', standalone: false, 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<div class=\"v-input-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"textareaInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"passwordInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"numberInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"digitOnlyInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"checkboxInput\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"presets\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #textInput>\n  <input\n    *ngIf=\"isText\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin && presetOptions.length === 0,\n      'v-input--small-margin': smallMargin && presetOptions.length === 0,\n    }\"\n    [ngModel]=\"inputValue$ | async\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #textareaInput>\n  <textarea\n    *ngIf=\"isTextarea\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsTextArea\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [rows]=\"rows\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n  ></textarea>\n</ng-template>\n\n<ng-template #passwordInput>\n  <ng-container *ngIf=\"isPassword\">\n    <div\n      *ngIf=\"{showPassword: showPassword$ | async} as obs\"\n      [ngClass]=\"{\n        'v-input--full-width': fullWidthClass,\n        'v-input--margin': margin,\n        'v-input--small-margin': smallMargin,\n      }\"\n      class=\"v-input__password-container\"\n    >\n      <input\n        [ngClass]=\"{\n          'v-input--full-width': fullWidthClass,\n        }\"\n        cdsText\n        [attr.data-testid]=\"dataTestId\"\n        [disabled]=\"disabled\"\n        [maxLength]=\"maxLength\"\n        [min]=\"0\"\n        [name]=\"name\"\n        [ngModel]=\"inputValue$ | async\"\n        [step]=\"step\"\n        (ngModelChange)=\"onValueChange($event)\"\n        [style.width.px]=\"widthPx\"\n        [type]=\"obs.showPassword ? 'text' : 'password'\"\n      />\n\n      <div class=\"v-input__password-icon\">\n        <cds-icon-button align=\"top\" (click)=\"toggleShowPassword()\">\n          <svg cdsIcon=\"{{ obs.showPassword ? 'view-off' : 'view' }}\" size=\"16\"></svg>\n        </cds-icon-button>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #numberInput>\n  <input\n    *ngIf=\"isNumber\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n      'v-input--hide-spinbox': hideNumberSpinBox,\n    }\"\n    cdsText\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"min\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"number\"\n  />\n</ng-template>\n\n<ng-template #digitOnlyInput>\n  <input\n    *ngIf=\"isDigitOnly\"\n    [ngClass]=\"{\n      'v-input--full-width': fullWidthClass,\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    cdsText\n    digitOnly\n    [attr.data-testid]=\"dataTestId\"\n    [disabled]=\"disabled\"\n    [maxLength]=\"maxLength\"\n    [min]=\"0\"\n    [name]=\"name\"\n    [ngModel]=\"inputValue$ | async\"\n    [step]=\"step\"\n    (ngModelChange)=\"onValueChange($event)\"\n    [style.width.px]=\"widthPx\"\n    type=\"text\"\n  />\n</ng-template>\n\n<ng-template #checkboxInput>\n  <div *ngIf=\"isCheckbox\" (click)=\"stopCheckboxEventPropagation($event)\">\n    <cds-checkbox\n      [attr.data-testid]=\"dataTestId\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [ngModel]=\"inputValue$ | async\"\n      (ngModelChange)=\"onValueChange($event)\"\n    >\n    </cds-checkbox>\n  </div>\n</ng-template>\n\n<ng-template #presets>\n  <div\n    *ngIf=\"isText && presetOptions.length > 0\"\n    [ngClass]=\"{\n      'v-input--margin': margin,\n      'v-input--small-margin': smallMargin,\n    }\"\n    class=\"v-input--preset-options\">\n    <span>{{ presetsTitle }}:</span>\n\n    @for (preset of presetOptions; track $index) {\n      @if (!$first) { | }\n      <a (click)=\"presetWithValue(preset)\" class=\"v-input--preset-option\">{{ preset }}</a>\n    }\n  </div>\n</ng-template>\n", styles: [".full-width{width:100%}.v-input-container{display:flex;flex-direction:column}.v-input__label{margin:0;font-size:var(--v-input-title-font-size);color:var(--v-input-title-font-color);line-height:var(--v-input-title-line-height);font-weight:var(--v-input-title-font-weight);margin-block-end:var(--v-input-title-margin)}.v-input{all:unset;font-size:var(--v-input-font-size);line-height:var(--v-input-line-height);color:var(--v-input-color);font-weight:var(--v-input-font-weight);padding-block-start:var(--v-input-padding-block);padding-block-end:var(--v-input-padding-block);padding-inline-start:var(--v-input-padding-inline);padding-inline-end:var(--v-input-padding-inline);background-color:var(--v-input-bg-color);border-radius:var(--v-input-border-radius);border:var(--v-input-border);transition:var(--v-input-transition);width:var(--v-input-default-width);box-sizing:border-box}.v-input:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-input:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-input--full-width{width:100%}.v-input--margin{margin-block-end:var(--v-input-margin)}.v-input--small-margin{margin-block-end:var(--v-input-small-margin)}.v-input__password-container{display:flex;flex-direction:row;align-items:center}.v-input__password-icon{margin-inline-start:var(--v-input-password-icon-spacing)}.v-input--hide-spinbox::-webkit-outer-spin-button,.v-input--hide-spinbox::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.v-input--hide-spinbox{-moz-appearance:textfield}.v-input--checkbox{width:20px;height:20px;margin-block-end:var(--v-input-margin)}div.v-input--preset-options{margin-top:3px;font-size:var(--v-input-font-size);color:var(--v-input-color)}div.v-input--preset-options span:first-child{padding-right:3px}div.v-input--preset-options a.v-input--preset-option{cursor:pointer;font-style:italic}\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: i3.IconService }], propDecorators: { fullWidthClass: [{
                 type: HostBinding,
                 args: ['class.full-width']
@@ -12176,6 +12211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class CarbonMultiInputComponent {
     constructor() {
         this.addRowText = '';
+        this.addButtonType = 'primary';
         this.addRowTranslationKey = '';
         this._defaultValues$ = new BehaviorSubject([]);
         this.deleteRowText = '';
@@ -12388,13 +12424,13 @@ class CarbonMultiInputComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarbonMultiInputComponent, isStandalone: false, selector: "valtimo-carbon-multi-input", inputs: { addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", arbitraryAmountTitles: "arbitraryAmountTitles", arbitraryValueAmount: "arbitraryValueAmount", defaultValues: "defaultValues", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", dropdownColumnTitle: "dropdownColumnTitle", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", hideAddButton: "hideAddButton", hideDeleteButton: "hideDeleteButton", initialAmountOfRows: "initialAmountOfRows", keyColumnTitle: "keyColumnTitle", margin: "margin", maxRows: "maxRows", minimumAmountOfRows: "minimumAmountOfRows", name: "name", required: "required", title: "title", titleTranslationKey: "titleTranslationKey", tooltip: "tooltip", type: "type", valueColumnTitle: "valueColumnTitle", valuePathSelectorCaseDefinitionKey: "valuePathSelectorCaseDefinitionKey", valuePathSelectorPrefixes: "valuePathSelectorPrefixes", valuePathSelectorShowCaseDefinitionSelector: "valuePathSelectorShowCaseDefinitionSelector", valuePathSelectorNotation: "valuePathSelectorNotation", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarbonMultiInputComponent, isStandalone: false, selector: "valtimo-carbon-multi-input", inputs: { addRowText: "addRowText", addButtonType: "addButtonType", addRowTranslationKey: "addRowTranslationKey", arbitraryAmountTitles: "arbitraryAmountTitles", arbitraryValueAmount: "arbitraryValueAmount", defaultValues: "defaultValues", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", dropdownColumnTitle: "dropdownColumnTitle", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", hideAddButton: "hideAddButton", hideDeleteButton: "hideDeleteButton", initialAmountOfRows: "initialAmountOfRows", keyColumnTitle: "keyColumnTitle", margin: "margin", maxRows: "maxRows", minimumAmountOfRows: "minimumAmountOfRows", name: "name", required: "required", title: "title", titleTranslationKey: "titleTranslationKey", tooltip: "tooltip", type: "type", valueColumnTitle: "valueColumnTitle", valuePathSelectorCaseDefinitionKey: "valuePathSelectorCaseDefinitionKey", valuePathSelectorPrefixes: "valuePathSelectorPrefixes", valuePathSelectorShowCaseDefinitionSelector: "valuePathSelectorShowCaseDefinitionSelector", valuePathSelectorNotation: "valuePathSelectorNotation", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CarbonMultiInputComponent),
                 multi: 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\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: KeyValueComponent, selector: "valtimo-key-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: SingleValueComponent, selector: "valtimo-single-value", inputs: ["value", "fullWidth", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: KeyDropdownValueComponent, selector: "valtimo-key-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ArbitraryAmountValueComponent, selector: "valtimo-arbitrary-amount-value", inputs: ["index", "value", "fullWidth", "disabled", "arbitraryAmountTitles", "amountOfArbitraryValuesArray$"], outputs: ["valueChange"] }, { kind: "component", type: KeyValuePathSelectorComponent, selector: "valtimo-key-value-path-selector", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorValueComponent, selector: "valtimo-value-path-selector-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorDropdownValueComponent, selector: "valtimo-value-path-selector-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        [cdsButton]=\"addButtonType\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: KeyValueComponent, selector: "valtimo-key-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: SingleValueComponent, selector: "valtimo-single-value", inputs: ["value", "fullWidth", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: KeyDropdownValueComponent, selector: "valtimo-key-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ArbitraryAmountValueComponent, selector: "valtimo-arbitrary-amount-value", inputs: ["index", "value", "fullWidth", "disabled", "arbitraryAmountTitles", "amountOfArbitraryValuesArray$"], outputs: ["valueChange"] }, { kind: "component", type: KeyValuePathSelectorComponent, selector: "valtimo-key-value-path-selector", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorValueComponent, selector: "valtimo-value-path-selector-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorDropdownValueComponent, selector: "valtimo-value-path-selector-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "caseDefinitionKey", "prefixes", "showCaseDefinitionSelector", "notation", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonMultiInputComponent, decorators: [{
             type: Component,
@@ -12404,9 +12440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => CarbonMultiInputComponent),
                             multi: true,
                         },
-                    ], 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<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\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\n<div\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate),\n  } as vars\"\n  [ngClass]=\"{'v-multi-input--margin': margin, 'v-multi-input--no-delete-button': hideDeleteButton}\"\n  class=\"v-multi-input\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip\"\n  >\n  </v-input-label>\n\n  <div class=\"v-multi-input__rows\">\n    <div\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n      class=\"v-multi-input__row\"\n    >\n      @switch (type) {\n        @case ('value') {\n          <valtimo-single-value\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, 'value')\"\n          ></valtimo-single-value>\n        }\n        @case ('keyValue') {\n          <valtimo-key-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value>\n        }\n        @case ('keyDropdownValue') {\n          <valtimo-key-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-dropdown-value>\n        }\n        @case ('arbitraryAmount') {\n          <valtimo-arbitrary-amount-value\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [arbitraryAmountTitles]=\"arbitraryAmountTitles\"\n            [amountOfArbitraryValuesArray$]=\"amountOfArbitraryValuesArray$\"\n            (valueChange)=\"\n              onValueChange($event.value, $event.inputValue, $event.type, $event.arbitraryIndex)\n            \"\n          ></valtimo-arbitrary-amount-value>\n        }\n        @case ('keyValuePathSelector') {\n          <valtimo-key-value-path-selector\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-key-value-path-selector>\n        }\n        @case ('valuePathSelectorValue') {\n          <valtimo-value-path-selector-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-value>\n        }\n        @case ('valuePathSelectorDropdownValue') {\n          <valtimo-value-path-selector-dropdown-value\n            [keyColumnTitle]=\"keyColumnTitle\"\n            [dropdownColumnTitle]=\"dropdownColumnTitle\"\n            [valueColumnTitle]=\"valueColumnTitle\"\n            [index]=\"i\"\n            [value]=\"value\"\n            [fullWidth]=\"fullWidth\"\n            [disabled]=\"$disabled()\"\n            [caseDefinitionKey]=\"valuePathSelectorCaseDefinitionKey\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showCaseDefinitionSelector]=\"valuePathSelectorShowCaseDefinitionSelector\"\n            [notation]=\"valuePathSelectorNotation\"\n            [keyColumnFlex]=\"keyColumnFlex\"\n            [dropdownColumnFlex]=\"dropdownColumnFlex\"\n            [valueColumnFlex]=\"valueColumnFlex\"\n            (valueChange)=\"onValueChange($event.value, $event.inputValue, $event.type)\"\n          ></valtimo-value-path-selector-dropdown-value>\n        }\n      }\n\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        cdsButton=\"danger\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || $disabled()\"\n        [iconOnly]=\"true\"\n        size=\"md\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        [cdsButton]=\"addButtonType\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || $disabled()\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\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"] }]
         }], propDecorators: { addRowText: [{
                 type: Input
+            }], addButtonType: [{
+                type: Input
             }], addRowTranslationKey: [{
                 type: Input
             }], arbitraryAmountTitles: [{
@@ -12499,6 +12537,9 @@ class DatePickerComponent {
     set fullWidth(value) {
         this.fullWidthClass = value;
     }
+    set defaultDate(value) {
+        this.dateValue$.next(value);
+    }
     constructor(translateService) {
         this.translateService = translateService;
         this.fullWidthClass = false;
@@ -13121,6 +13162,14 @@ class SearchFieldsComponent {
             }
         });
     }
+    set defaultValues(value) {
+        console.log({ value });
+        this._defaultValues = value;
+        this.setDefaultValues();
+    }
+    get defaultValues() {
+        return this._defaultValues;
+    }
     constructor(documentService, translateService, iconService) {
         this.documentService = documentService;
         this.translateService = translateService;
@@ -13128,7 +13177,10 @@ class SearchFieldsComponent {
         this._caseDefinitionKey$ = new BehaviorSubject('');
         this.inputDisabled = false;
         this.externalSearchField = false;
+        this.canSaveSearch = false;
         this.doSearch = new EventEmitter();
+        this.saveSearchEvent = new EventEmitter();
+        this.clearEvent = new EventEmitter();
         this.searchFields$ = new BehaviorSubject([]);
         this.values$ = new BehaviorSubject({});
         this.hasValidValues$ = this.values$.pipe(map(values => {
@@ -13214,6 +13266,7 @@ class SearchFieldsComponent {
     clear() {
         this.clear$.next(null);
         this.doSearch.emit({});
+        this.clearEvent.emit();
     }
     getDefaultBooleanSelectionId(values, searchFieldKey) {
         const searchFieldValue = values[searchFieldKey];
@@ -13225,6 +13278,9 @@ class SearchFieldsComponent {
         }
         return null;
     }
+    saveSearch() {
+        this.values$.pipe(take$1(1)).subscribe(values => this.saveSearchEvent.emit(values));
+    }
     getSingleValue(value, isDateTime) {
         if (isDateTime) {
             return new Date(value).toISOString();
@@ -13288,20 +13344,18 @@ class SearchFieldsComponent {
         this.expanded$.next(true);
     }
     setDefaultValues() {
-        if (this.defaultValues &&
-            typeof this.defaultValues === 'object' &&
-            Object.keys(this.defaultValues).length > 0) {
+        if (this.defaultValues && typeof this.defaultValues === 'object') {
             this.values$.next(this.defaultValues);
             this.search();
             this.expand();
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i3$2.DocumentService }, { token: i1.TranslateService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField" }, outputs: { doSearch: "doSearch" }, 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 *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: 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", "dataTestId"], outputs: ["selectedChange"] }, { 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: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchFieldsComponent, isStandalone: false, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", caseDefinitionKey: "caseDefinitionKey", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField", canSaveSearch: "canSaveSearch" }, outputs: { doSearch: "doSearch", saveSearchEvent: "saveSearchEvent", clearEvent: "clearEvent" }, 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 *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded && canSaveSearch\"\n        cdsButton=\"secondary\"\n        data-testid=\"search-fields-save-button\"\n        (click)=\"saveSearch()\"\n        type=\"button\"\n        id=\"save\"\n      >\n        <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.saveButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\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: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: "component", type: FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime", "carbonTheme"], outputs: ["valueChange"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: 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", "dataTestId"], outputs: ["selectedChange"] }, { 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: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-search-fields', standalone: false, 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 *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\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"] }]
+            args: [{ selector: 'valtimo-search-fields', standalone: false, 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 *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!loading\">\n  <cds-accordion>\n    <cds-accordion-item\n      [title]=\"'searchFields.searchButtonText' | translate\"\n      (selected)=\"toggleExpanded()\"\n      [expanded]=\"expanded$ | async\"\n    >\n      <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n    </cds-accordion-item>\n  </cds-accordion>\n</ng-container>\n\n<ng-template #loadingTemplate>\n  <div class=\"loading-container\"><cds-loading></cds-loading></div>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <ng-container *ngIf=\"searchFields$ | async as searchFields\">\n    <ng-container\n      *ngIf=\"{\n        noSearchFields: (!searchFields || searchFields.length === 0) && !externalSearchField,\n      } as vars\"\n    >\n      <div\n        *ngIf=\"!vars.noSearchFields\"\n        class=\"search-fields-container\"\n        [ngClass]=\"{'search-fields-container--hidden': (expanded$ | async) === false}\"\n        [cdsLayer]=\"1\"\n      >\n        <ng-content></ng-content>\n\n        <ng-container *ngFor=\"let searchField of searchFields\">\n          <div class=\"search-field-container\">\n            <ng-container\n              *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n            ></ng-container>\n          </div>\n        </ng-container>\n      </div>\n\n      <div class=\"meta-container\" *ngIf=\"expanded$ | async\">\n        <ng-container\n          *ngTemplateOutlet=\"buttonsTemplate; context: {noSearchFields: vars.noSearchFields}\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #searchFieldTemplate let-searchField=\"searchField\">\n  <ng-container\n    *ngIf=\"{\n      values: values$ | async,\n      tooltipKey: 'searchFieldsTooltips.' + searchField.key,\n      tooltip: 'searchFieldsTooltips.' + searchField.key | translate,\n      searchField,\n      title:\n        searchField.title ||\n        ('searchFields.' + searchField.key !== ('searchFields.' + searchField.key | translate)\n          ? ('searchFields.' + searchField.key | translate)\n          : searchField.key),\n    } as vars\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateText;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumber;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDate;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateBoolean;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTime;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateNumberRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateTextRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateDateTimeRange;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateSingleSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"\n        searchFieldTemplateMultiSelectDropdown;\n        context: {\n          searchField: searchField,\n          tooltipKey: vars.tooltipKey,\n          tooltip: vars.tooltip,\n          title: vars.title,\n          values: vars.values,\n        }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateText\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumber\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-input\n    *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'single'\"\n    [dataTestId]=\"'search-field-' + searchField.key\"\n    [name]=\"searchField.key\"\n    [title]=\"title\"\n    [fullWidth]=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    type=\"number\"\n    [hideNumberSpinBox]=\"true\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultValue]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  >\n  </v-input>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDate\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event)\"\n    [smallLabel]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateTextRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'text' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateNumberRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'number' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-input\n        name=\"start\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [dataTestId]=\"'search-field-' + searchField.key\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      >\n      </v-input>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'date' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateBoolean\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'boolean'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"booleanItems$ | async as booleanItems\"\n      [items]=\"booleanItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTime\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <v-date-picker\n    *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'single'\"\n    [title]=\"title\"\n    [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n    [name]=\"searchField.key\"\n    fullWidth=\"true\"\n    (valueChange)=\"singleValueChange(searchField.key, $event, true)\"\n    [smallLabel]=\"true\"\n    [enableTime]=\"true\"\n    [clear$]=\"clear$\"\n    (keyup.enter)=\"search()\"\n    [defaultDate]=\"values[searchField.key]\"\n    [disabled]=\"inputDisabled\"\n  ></v-date-picker>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateDateTimeRange\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container *ngIf=\"searchField.dataType === 'datetime' && searchField.fieldType === 'range'\">\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-form\n      (valueChange)=\"multipleValueChange(searchField.key, $event, true)\"\n      className=\"multiple-search-fields\"\n    >\n      <v-date-picker\n        name=\"start\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.start\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker\n        name=\"end\"\n        fullWidth=\"true\"\n        [enableTime]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultDate]=\"values[searchField.key]?.end\"\n        [disabled]=\"inputDisabled\"\n      ></v-date-picker>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateSingleSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'single-select-dropdown' ||\n        searchField.fieldType === 'single_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template\n  #searchFieldTemplateMultiSelectDropdown\n  let-searchField=\"searchField\"\n  let-tooltip=\"tooltip\"\n  let-tooltipKey=\"tooltipKey\"\n  let-title=\"title\"\n  let-values=\"values\"\n>\n  <ng-container\n    *ngIf=\"\n      searchField.dataType === 'text' &&\n      (searchField.fieldType === 'multi-select-dropdown' ||\n        searchField.fieldType === 'multi_select_dropdown')\n    \"\n  >\n    <v-input-label\n      [title]=\"title\"\n      [tooltip]=\"tooltip !== tooltipKey && tooltip\"\n      [small]=\"true\"\n    ></v-input-label>\n    <v-select\n      *ngIf=\"dropdownSelectItemsMap[searchField.key] as searchFieldSelectItems\"\n      [items]=\"searchFieldSelectItems\"\n      [margin]=\"false\"\n      [multiple]=\"true\"\n      [required]=\"false\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\n      [disabled]=\"inputDisabled\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded && canSaveSearch\"\n        cdsButton=\"secondary\"\n        data-testid=\"search-fields-save-button\"\n        (click)=\"saveSearch()\"\n        type=\"button\"\n        id=\"save\"\n      >\n        <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.saveButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\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: i3$2.DocumentService }, { type: i1.TranslateService }, { type: i3.IconService }], propDecorators: { loading: [{
                 type: Input
             }], searchFields: [{
@@ -13318,8 +13372,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], externalSearchField: [{
                 type: Input
+            }], canSaveSearch: [{
+                type: Input
             }], doSearch: [{
                 type: Output
+            }], saveSearchEvent: [{
+                type: Output
+            }], clearEvent: [{
+                type: Output
             }] } });
 
 /*
@@ -14339,25 +14399,25 @@ class StatusSelectorComponent {
             tagType: InternalCaseStatusUtils.getTagTypeFromInternalCaseStatusColor(status.color),
         })));
     }
-    set selectedStatuses(value) {
-        this._selectedStatuses$.next(value);
+    set selectedStatusKeys(value) {
+        this._selectedStatusKeys$.next(value);
     }
     constructor(translateService) {
         this.translateService = translateService;
         this.carbonTheme = CARBON_THEME.WHITE;
         this.selectedStatusesChangeEvent = new EventEmitter();
         this._statuses$ = new BehaviorSubject([]);
-        this._selectedStatuses$ = new BehaviorSubject([]);
+        this._selectedStatusKeys$ = new BehaviorSubject([]);
         this.CASES_WITHOUT_STATUS_KEY = CASES_WITHOUT_STATUS_KEY;
         this.listItems$ = combineLatest([
             this._statuses$,
-            this._selectedStatuses$,
+            this._selectedStatusKeys$,
             this.translateService.stream('key'),
         ]).pipe(filter(([statuses, selectedStatuses]) => !!statuses && !!selectedStatuses), map(([statuses, selectedStatuses]) => statuses.map(status => ({
             content: status.key === this.CASES_WITHOUT_STATUS_KEY
                 ? this.translateService.instant('caseManagement.statuses.withoutStatus')
                 : status.title,
-            selected: !!selectedStatuses.find(selectedStatus => selectedStatus.key === status.key),
+            selected: !!selectedStatuses.find(selectedStatusKey => selectedStatusKey === status.key),
             key: status.key,
             tagType: status.tagType,
         }))), distinctUntilChanged((previous, current) => isEqual(previous, current)));
@@ -14367,19 +14427,20 @@ class StatusSelectorComponent {
         this._statuses$.pipe(take(1)).subscribe(statuses => {
             const newSelectedStatuses = newSelectedItems
                 .map(item => statuses.find(status => status.key === item.key))
-                .filter(status => !!status);
+                .filter(status => !!status)
+                .map(status => status?.key ?? '');
             this.selectedStatusesChangeEvent.emit(newSelectedStatuses);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusSelectorComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StatusSelectorComponent, isStandalone: true, selector: "valtimo-status-selector", inputs: { statuses: "statuses", selectedStatuses: "selectedStatuses", carbonTheme: "carbonTheme", disabled: "disabled" }, outputs: { selectedStatusesChangeEvent: "selectedStatusesChangeEvent" }, 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<cds-label class=\"status-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'caseManagement.statuses.searchFieldTitle' | translate }}\n\n  <cds-dropdown\n    [appendInline]=\"false\"\n    type=\"multi\"\n    [disabled]=\"disabled\"\n    selectionFeedback=\"fixed\"\n    (selected)=\"itemSelected($event)\"\n  >\n    <cds-dropdown-list\n      [items]=\"listItems\"\n      [listTpl]=\"colorDropdownItemTemplate\"\n    ></cds-dropdown-list>\n  </cds-dropdown>\n</cds-label>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"status-selector-dropdown-template\">\n    <cds-checkbox [checked]=\"item.selected\"></cds-checkbox>\n\n    <span *ngIf=\"item.key === CASES_WITHOUT_STATUS_KEY\" class=\"generic-span\">{{\n      item?.content\n    }}</span>\n\n    <cds-tag\n      *ngIf=\"item.key !== CASES_WITHOUT_STATUS_KEY\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item?.tagType\"\n      [title]=\"item?.content\"\n    >\n      {{ item?.content }}\n    </cds-tag>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .status-selector .cds--label{width:100%;margin-bottom:0!important}::ng-deep .status-selector .cds--multiselect{margin-top:8px}::ng-deep .status-selector-dropdown-template{display:flex;margin-top:-4px}::ng-deep .status-selector-dropdown-template .cds--tag{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px;max-width:100%}::ng-deep .status-selector-dropdown-template .generic-span{display:flex;align-items:center}\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: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StatusSelectorComponent, isStandalone: true, selector: "valtimo-status-selector", inputs: { statuses: "statuses", selectedStatusKeys: "selectedStatusKeys", carbonTheme: "carbonTheme", disabled: "disabled" }, outputs: { selectedStatusesChangeEvent: "selectedStatusesChangeEvent" }, 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<cds-label class=\"status-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'caseManagement.statuses.searchFieldTitle' | translate }}\n\n  <cds-dropdown\n    [appendInline]=\"false\"\n    type=\"multi\"\n    [disabled]=\"disabled\"\n    selectionFeedback=\"fixed\"\n    (selected)=\"itemSelected($event)\"\n  >\n    <cds-dropdown-list\n      [items]=\"listItems\"\n      [listTpl]=\"colorDropdownItemTemplate\"\n    ></cds-dropdown-list>\n  </cds-dropdown>\n</cds-label>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"status-selector-dropdown-template\">\n    <cds-checkbox [checked]=\"item.selected\"></cds-checkbox>\n\n    <span *ngIf=\"item.key === CASES_WITHOUT_STATUS_KEY\" class=\"generic-span\">{{\n      item?.content\n    }}</span>\n\n    <cds-tag\n      *ngIf=\"item.key !== CASES_WITHOUT_STATUS_KEY\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item?.tagType\"\n      [title]=\"item?.content\"\n    >\n      {{ item?.content }}\n    </cds-tag>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .status-selector .cds--label{width:100%;margin-bottom:0!important}::ng-deep .status-selector .cds--multiselect{margin-top:8px}::ng-deep .status-selector-dropdown-template{display:flex;margin-top:-4px}::ng-deep .status-selector-dropdown-template .cds--tag{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px;max-width:100%}::ng-deep .status-selector-dropdown-template .generic-span{display:flex;align-items:center}\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: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StatusSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-status-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, DropdownModule, CheckboxModule, InputModule$1, TranslateModule, TagModule], 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<cds-label class=\"status-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'caseManagement.statuses.searchFieldTitle' | translate }}\n\n  <cds-dropdown\n    [appendInline]=\"false\"\n    type=\"multi\"\n    [disabled]=\"disabled\"\n    selectionFeedback=\"fixed\"\n    (selected)=\"itemSelected($event)\"\n  >\n    <cds-dropdown-list\n      [items]=\"listItems\"\n      [listTpl]=\"colorDropdownItemTemplate\"\n    ></cds-dropdown-list>\n  </cds-dropdown>\n</cds-label>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"status-selector-dropdown-template\">\n    <cds-checkbox [checked]=\"item.selected\"></cds-checkbox>\n\n    <span *ngIf=\"item.key === CASES_WITHOUT_STATUS_KEY\" class=\"generic-span\">{{\n      item?.content\n    }}</span>\n\n    <cds-tag\n      *ngIf=\"item.key !== CASES_WITHOUT_STATUS_KEY\"\n      class=\"cds-tag--no-margin\"\n      [type]=\"item?.tagType\"\n      [title]=\"item?.content\"\n    >\n      {{ item?.content }}\n    </cds-tag>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .status-selector .cds--label{width:100%;margin-bottom:0!important}::ng-deep .status-selector .cds--multiselect{margin-top:8px}::ng-deep .status-selector-dropdown-template{display:flex;margin-top:-4px}::ng-deep .status-selector-dropdown-template .cds--tag{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px;max-width:100%}::ng-deep .status-selector-dropdown-template .generic-span{display:flex;align-items:center}\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.TranslateService }], propDecorators: { statuses: [{
                 type: Input
-            }], selectedStatuses: [{
+            }], selectedStatusKeys: [{
                 type: Input
             }], carbonTheme: [{
                 type: Input
@@ -15425,16 +15486,16 @@ class PendingChangesComponent {
  */
 class CaseTagsSelectorComponent {
     constructor() {
+        this._selectedCaseTagKeys$ = new BehaviorSubject([]);
         this.carbonTheme = CARBON_THEME.WHITE;
         this.selectedCaseTagsChangeEvent = new EventEmitter();
         this._caseTags$ = new BehaviorSubject([]);
-        this._selectedCaseTags$ = new BehaviorSubject([]);
         this.listItems$ = combineLatest([
             this._caseTags$,
-            this._selectedCaseTags$,
+            this._selectedCaseTagKeys$,
         ]).pipe(filter(([caseTags, selectedCaseTags]) => !!caseTags && !!selectedCaseTags), map(([caseTags, selectedCaseTags]) => caseTags.map(caseTag => ({
             content: caseTag.title,
-            selected: !!selectedCaseTags.find(selectedCaseTag => selectedCaseTag.key === caseTag.key),
+            selected: !!selectedCaseTags.find(selectedCaseTagKey => selectedCaseTagKey === caseTag.key),
             key: caseTag.key,
             tagType: caseTag.tagType,
         }))), distinctUntilChanged((previous, current) => isEqual(previous, current)));
@@ -15445,27 +15506,28 @@ class CaseTagsSelectorComponent {
             tagType: CaseTagsUtils.getTagTypeFromCaseTagColor(caseTags.color),
         })));
     }
-    set selectedCaseTags(value) {
-        this._selectedCaseTags$.next(value);
+    set selectedCaseTagKeys(value) {
+        this._selectedCaseTagKeys$.next(value);
     }
     itemSelected(event) {
         const newSelectedItems = event?.filter(item => item?.selected) || [];
         this._caseTags$.pipe(take(1)).subscribe(caseTags => {
             const newSelectedCaseTags = newSelectedItems
                 .map(item => caseTags.find(caseTag => caseTag.key === item.key))
-                .filter(caseTag => !!caseTag);
+                .filter(caseTag => !!caseTag)
+                .map(caseTag => caseTag?.key ?? '');
             this.selectedCaseTagsChangeEvent.emit(newSelectedCaseTags);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CaseTagsSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CaseTagsSelectorComponent, isStandalone: true, selector: "valtimo-case-tags-selector", inputs: { caseTags: "caseTags", selectedCaseTags: "selectedCaseTags", carbonTheme: "carbonTheme", disabled: "disabled" }, outputs: { selectedCaseTagsChangeEvent: "selectedCaseTagsChangeEvent" }, 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<cds-label class=\"case-tag-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'caseManagement.caseTags.searchFieldTitle' | translate }}\n\n  <cds-dropdown\n    [appendInline]=\"false\"\n    type=\"multi\"\n    [disabled]=\"disabled\"\n    selectionFeedback=\"fixed\"\n    (selected)=\"itemSelected($event)\"\n  >\n    <cds-dropdown-list\n      [items]=\"listItems\"\n      [listTpl]=\"colorDropdownItemTemplate\"\n    ></cds-dropdown-list>\n  </cds-dropdown>\n</cds-label>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"case-tag-selector-dropdown-template\">\n    <cds-checkbox [checked]=\"item.selected\"></cds-checkbox>\n\n    <cds-tag class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ item?.content }}\n    </cds-tag>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .case-tag-selector .cds--label{width:100%;margin-bottom:0!important}::ng-deep .case-tag-selector .cds--multiselect{margin-top:8px}::ng-deep .case-tag-selector-dropdown-template{display:flex;margin-top:-4px}::ng-deep .case-tag-selector-dropdown-template .cds--tag{margin:0}::ng-deep .case-tag-selector-dropdown-template .generic-span{display:flex;align-items:center}\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: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CaseTagsSelectorComponent, isStandalone: true, selector: "valtimo-case-tags-selector", inputs: { caseTags: "caseTags", selectedCaseTagKeys: "selectedCaseTagKeys", carbonTheme: "carbonTheme", disabled: "disabled" }, outputs: { selectedCaseTagsChangeEvent: "selectedCaseTagsChangeEvent" }, 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<cds-label class=\"case-tag-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'caseManagement.caseTags.searchFieldTitle' | translate }}\n\n  <cds-dropdown\n    [appendInline]=\"false\"\n    type=\"multi\"\n    [disabled]=\"disabled\"\n    selectionFeedback=\"fixed\"\n    (selected)=\"itemSelected($event)\"\n  >\n    <cds-dropdown-list\n      [items]=\"listItems\"\n      [listTpl]=\"colorDropdownItemTemplate\"\n    ></cds-dropdown-list>\n  </cds-dropdown>\n</cds-label>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"case-tag-selector-dropdown-template\">\n    <cds-checkbox [checked]=\"item.selected\"></cds-checkbox>\n\n    <cds-tag class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ item?.content }}\n    </cds-tag>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .case-tag-selector .cds--label{width:100%;margin-bottom:0!important}::ng-deep .case-tag-selector .cds--multiselect{margin-top:8px}::ng-deep .case-tag-selector-dropdown-template{display:flex;margin-top:-4px}::ng-deep .case-tag-selector-dropdown-template .cds--tag{margin:0}::ng-deep .case-tag-selector-dropdown-template .generic-span{display:flex;align-items:center}\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: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i3.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: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "cds-checkbox, ibm-checkbox", inputs: ["disabled", "skeleton", "hideLabel", "name", "id", "required", "value", "ariaLabel", "ariaLabelledby", "indeterminate", "checked"], outputs: ["click", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CaseTagsSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-case-tags-selector', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, DropdownModule, CheckboxModule, InputModule$1, TranslateModule, TagModule], 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<cds-label class=\"case-tag-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'caseManagement.caseTags.searchFieldTitle' | translate }}\n\n  <cds-dropdown\n    [appendInline]=\"false\"\n    type=\"multi\"\n    [disabled]=\"disabled\"\n    selectionFeedback=\"fixed\"\n    (selected)=\"itemSelected($event)\"\n  >\n    <cds-dropdown-list\n      [items]=\"listItems\"\n      [listTpl]=\"colorDropdownItemTemplate\"\n    ></cds-dropdown-list>\n  </cds-dropdown>\n</cds-label>\n\n<ng-template #colorDropdownItemTemplate let-item=\"item\">\n  <div class=\"case-tag-selector-dropdown-template\">\n    <cds-checkbox [checked]=\"item.selected\"></cds-checkbox>\n\n    <cds-tag class=\"cds-tag--no-margin\" [type]=\"item?.tagType\">\n      {{ item?.content }}\n    </cds-tag>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .case-tag-selector .cds--label{width:100%;margin-bottom:0!important}::ng-deep .case-tag-selector .cds--multiselect{margin-top:8px}::ng-deep .case-tag-selector-dropdown-template{display:flex;margin-top:-4px}::ng-deep .case-tag-selector-dropdown-template .cds--tag{margin:0}::ng-deep .case-tag-selector-dropdown-template .generic-span{display:flex;align-items:center}\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"] }]
         }], propDecorators: { caseTags: [{
                 type: Input
-            }], selectedCaseTags: [{
+            }], selectedCaseTagKeys: [{
                 type: Input
             }], carbonTheme: [{
                 type: Input
@@ -15655,6 +15717,258 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Output
             }] } });
 
+/*
+ * Copyright 2015-2025 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 ContextMenuDirective {
+    constructor() {
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.hostEl = inject((ElementRef));
+        this.positions = [
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'top' },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'top' },
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
+        ];
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    onContextMenu(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.openAt(ev.clientX, ev.clientY);
+    }
+    onKeydown(ev) {
+        if ((ev.shiftKey && ev.key === 'F10') || ev.key === 'ContextMenu') {
+            ev.preventDefault();
+            const rect = this.hostEl.nativeElement.getBoundingClientRect();
+            this.openAt(rect.left + 12, rect.top + 12);
+        }
+    }
+    openAt(clientX, clientY) {
+        this.close();
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo({ x: clientX, y: clientY })
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withPositions(this.positions);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'app-context-menu-panel',
+        });
+        const portal = new TemplatePortal(this.menuTpl, this.vcr, {
+            data: this.contextData,
+            close: () => this.close(),
+        });
+        this.overlayRef.attach(portal);
+        const subBackdropClick = this.overlayRef.backdropClick().subscribe(() => this.close());
+        const subKeydown = this.overlayRef
+            .keydownEvents()
+            .subscribe(e => e.key === 'Escape' && this.close());
+        const backdropEl = this.overlayRef.backdropElement;
+        const onBackdropContextMenu = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const { clientX: x, clientY: y } = e;
+            this.close();
+            setTimeout(() => {
+                const target = document.elementFromPoint(x, y);
+                if (target) {
+                    target.dispatchEvent(new MouseEvent('contextmenu', {
+                        bubbles: true,
+                        cancelable: true,
+                        clientX: x,
+                        clientY: y,
+                    }));
+                }
+            }, 0);
+        };
+        backdropEl.addEventListener('contextmenu', onBackdropContextMenu);
+        const subDetach = this.overlayRef.detachments().subscribe(() => {
+            subBackdropClick.unsubscribe();
+            subKeydown.unsubscribe();
+            subDetach.unsubscribe();
+            backdropEl.removeEventListener('contextmenu', onBackdropContextMenu);
+        });
+    }
+    close() {
+        if (this.overlayRef && this.overlayRef.hasAttached()) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ContextMenuDirective, isStandalone: true, selector: "[valtimoContextMenu]", inputs: { menuTpl: ["valtimoContextMenu", "menuTpl"], contextData: "contextData", positions: "positions" }, host: { listeners: { "contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[valtimoContextMenu]',
+                    standalone: true,
+                }]
+        }], propDecorators: { menuTpl: [{
+                type: Input,
+                args: ['valtimoContextMenu']
+            }], contextData: [{
+                type: Input
+            }], positions: [{
+                type: Input
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/*
+ * Copyright 2015-2025 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 QuickSearchModalComponent {
+    constructor(fb, quickSearchStateService) {
+        this.fb = fb;
+        this.quickSearchStateService = quickSearchStateService;
+        this.closeEvent = new EventEmitter();
+        this.$modalOpen = this.quickSearchStateService.$modalOpen;
+        this.formGroup = this.fb.group({ title: this.fb.control('', Validators.required) });
+    }
+    closeModal(save = false) {
+        this.closeEvent.emit(save ? this.formGroup.getRawValue().title : null);
+        setTimeout(() => {
+            this.formGroup.reset();
+        }, CARBON_CONSTANTS.modalAnimationMs);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchModalComponent, deps: [{ token: i2.FormBuilder }, { token: QuickSearchStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QuickSearchModalComponent, isStandalone: true, selector: "valtimo-quick-search-modal", outputs: { closeEvent: "closeEvent" }, 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<cds-modal\n  valtimoCdsModal\n  [minContentHeight]=\"0\"\n  [open]=\"$modalOpen()\"\n  size=\"sm\"\n  showFooter=\"true\"\n  (close)=\"closeModal()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'quickSearch.addItem' | translate }}</h3>\n  </cds-modal-header>\n\n  <form cdsModalContent class=\"valtimo-qiuck-search-modal__content\" [formGroup]=\"formGroup\">\n    <cds-text-label>\n      {{ 'interface.title' | translate }}\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        type=\"text\"\n        [placeholder]=\"'interface.title' | translate\"\n        [attr.modal-primary-focus]=\"true\"\n      />\n    </cds-text-label>\n\n    <cds-inline-notification\n      [notificationObj]=\"{\n        type: 'info',\n        message: 'quickSearch.deleteHelperText' | translate,\n        showClose: false,\n        lowContrast: true,\n      }\"\n    ></cds-inline-notification>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"formGroup.invalid\" cdsButton=\"primary\" (click)=\"closeModal(true)\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-qiuck-search-modal__content{display:flex;flex-direction:column;gap:16px}\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: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ModalModule$1 }, { kind: "component", type: i3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "ngmodule", type: InputModule$1 }, { 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: NotificationModule }, { kind: "component", type: i3.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-quick-search-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        ModalModule$1,
+                        ButtonModule,
+                        ValtimoCdsModalDirective,
+                        InputModule$1,
+                        NotificationModule,
+                    ], 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<cds-modal\n  valtimoCdsModal\n  [minContentHeight]=\"0\"\n  [open]=\"$modalOpen()\"\n  size=\"sm\"\n  showFooter=\"true\"\n  (close)=\"closeModal()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>{{ 'quickSearch.addItem' | translate }}</h3>\n  </cds-modal-header>\n\n  <form cdsModalContent class=\"valtimo-qiuck-search-modal__content\" [formGroup]=\"formGroup\">\n    <cds-text-label>\n      {{ 'interface.title' | translate }}\n\n      <input\n        formControlName=\"title\"\n        cdsText\n        type=\"text\"\n        [placeholder]=\"'interface.title' | translate\"\n        [attr.modal-primary-focus]=\"true\"\n      />\n    </cds-text-label>\n\n    <cds-inline-notification\n      [notificationObj]=\"{\n        type: 'info',\n        message: 'quickSearch.deleteHelperText' | translate,\n        showClose: false,\n        lowContrast: true,\n      }\"\n    ></cds-inline-notification>\n  </form>\n\n  <cds-modal-footer>\n    <button cdsButton=\"ghost\" (click)=\"closeModal()\">\n      {{ 'interface.cancel' | translate }}\n    </button>\n\n    <button [disabled]=\"formGroup.invalid\" cdsButton=\"primary\" (click)=\"closeModal(true)\">\n      {{ 'interface.save' | translate }}\n    </button>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".valtimo-qiuck-search-modal__content{display:flex;flex-direction:column;gap:16px}\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: i2.FormBuilder }, { type: QuickSearchStateService }], propDecorators: { closeEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2025 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 QuickSearchComponent {
+    constructor(iconService, quickSearchStateService, quickSearchService) {
+        this.iconService = iconService;
+        this.quickSearchStateService = quickSearchStateService;
+        this.quickSearchService = quickSearchService;
+        this.$modalOpen = this.quickSearchStateService.$modalOpen;
+        this.showDeleteModal$ = new BehaviorSubject(false);
+        this.$itemToDelete = signal(null);
+        this._refresh$ = new BehaviorSubject(null);
+        this.quickSearchItems$ = combineLatest([
+            this._refresh$,
+            this.quickSearchService.params$,
+        ]).pipe(switchMap(() => this.quickSearchService.getQuickSearchItems()));
+        this.paramsToSave$ = this.quickSearchStateService.paramsToSave$;
+        this.quickSearchEvent = new EventEmitter();
+        this.TOOLTIP_DELAY = 1500;
+        this.iconService.register(TrashCan16);
+    }
+    deleteItem(item) {
+        this.$itemToDelete.set(item);
+        this.showDeleteModal$.next(true);
+    }
+    onDeleteConfirm(item) {
+        this.quickSearchService.deleteQuickSearchItem(item).subscribe(() => {
+            this._refresh$.next(null);
+        });
+    }
+    onItemClick(item) {
+        this.quickSearchEvent.emit(item.queryPath);
+    }
+    onModalCloseEvent(title, paramsToSave) {
+        this.quickSearchStateService.closeModal();
+        if (!title)
+            return;
+        const queryPath = new URLSearchParams(paramsToSave ?? {}).toString();
+        this.quickSearchService
+            .createQuickSearchItem({
+            title,
+            queryPath,
+        })
+            .subscribe(() => this._refresh$.next(null));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchComponent, deps: [{ token: i3.IconService }, { token: QuickSearchStateService }, { token: QUICK_SEARCH_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: QuickSearchComponent, isStandalone: true, selector: "valtimo-quick-search", outputs: { quickSearchEvent: "quickSearchEvent" }, 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=\"{paramsToSave: paramsToSave$ | async, quickSearchItems: quickSearchItems$ | async} as obs\"\n>\n  @for (item of obs.quickSearchItems; track item.title) {\n    <cds-tooltip\n      [description]=\"'quickSearch.rightClickTooltip' | translate\"\n      [enterDelayMs]=\"TOOLTIP_DELAY\"\n    >\n      <cds-tag\n        type=\"blue\"\n        [valtimoContextMenu]=\"contextMenuTpl\"\n        [contextData]=\"item\"\n        (click)=\"onItemClick(item)\"\n      >\n        {{ item.title }}\n      </cds-tag>\n    </cds-tooltip>\n  }\n\n  <valtimo-quick-search-modal\n    (closeEvent)=\"onModalCloseEvent($event, obs.paramsToSave)\"\n  ></valtimo-quick-search-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"quickSearch.deleteModalContent\"\n    [outputOnConfirm]=\"$itemToDelete()\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"quickSearch.deleteModalTitle\"\n    (confirmEvent)=\"onDeleteConfirm($event)\"\n  ></valtimo-confirmation-modal>\n\n  <ng-template #contextMenuTpl let-data=\"data\" let-close=\"close\">\n    <cds-overflow-menu-option (click)=\"deleteItem(data); close()\">\n      {{ 'interface.delete' | translate }}\n\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg\n    ></cds-overflow-menu-option>\n  </ng-template>\n</ng-container>\n", styles: ["cds-tag{cursor:pointer}cds-overflow-menu-option{background:var(--cds-layer)}\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: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: QuickSearchModalComponent, selector: "valtimo-quick-search-modal", outputs: ["closeEvent"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: ContextMenuDirective, selector: "[valtimoContextMenu]", inputs: ["valtimoContextMenu", "contextData", "positions"] }, { kind: "ngmodule", type: TooltipModule$1 }, { kind: "component", type: i3.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-quick-search', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        QuickSearchModalComponent,
+                        TagModule,
+                        ConfirmationModalModule,
+                        ContextMenuModule,
+                        IconModule,
+                        ContextMenuDirective,
+                        TooltipModule$1,
+                        DialogModule,
+                    ], 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=\"{paramsToSave: paramsToSave$ | async, quickSearchItems: quickSearchItems$ | async} as obs\"\n>\n  @for (item of obs.quickSearchItems; track item.title) {\n    <cds-tooltip\n      [description]=\"'quickSearch.rightClickTooltip' | translate\"\n      [enterDelayMs]=\"TOOLTIP_DELAY\"\n    >\n      <cds-tag\n        type=\"blue\"\n        [valtimoContextMenu]=\"contextMenuTpl\"\n        [contextData]=\"item\"\n        (click)=\"onItemClick(item)\"\n      >\n        {{ item.title }}\n      </cds-tag>\n    </cds-tooltip>\n  }\n\n  <valtimo-quick-search-modal\n    (closeEvent)=\"onModalCloseEvent($event, obs.paramsToSave)\"\n  ></valtimo-quick-search-modal>\n\n  <valtimo-confirmation-modal\n    confirmButtonTextTranslationKey=\"interface.delete\"\n    confirmButtonType=\"danger\"\n    contentTranslationKey=\"quickSearch.deleteModalContent\"\n    [outputOnConfirm]=\"$itemToDelete()\"\n    [showModalSubject$]=\"showDeleteModal$\"\n    titleTranslationKey=\"quickSearch.deleteModalTitle\"\n    (confirmEvent)=\"onDeleteConfirm($event)\"\n  ></valtimo-confirmation-modal>\n\n  <ng-template #contextMenuTpl let-data=\"data\" let-close=\"close\">\n    <cds-overflow-menu-option (click)=\"deleteItem(data); close()\">\n      {{ 'interface.delete' | translate }}\n\n      <svg cdsIcon=\"trash-can\" size=\"16\"></svg\n    ></cds-overflow-menu-option>\n  </ng-template>\n</ng-container>\n", styles: ["cds-tag{cursor:pointer}cds-overflow-menu-option{background:var(--cds-layer)}\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: i3.IconService }, { type: QuickSearchStateService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [QUICK_SEARCH_SERVICE]
+                }] }], propDecorators: { quickSearchEvent: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -16260,5 +16574,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JsonEditorComponent, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoCdsOverflowButtonDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, runAfterCarbonModalClosed };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, AutoKeyInputComponent, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CaseCountPipe, CaseTagsSelectorComponent, CdsThemeService, ChoiceFieldService, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, ContextMenuDirective, CtrlClickDirective, CurrentCarbonTheme, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, EllipsisPipe, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoTagsService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, JsonEditorComponent, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, PageHeaderComponent, PageHeaderModule, PageHeaderService, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, QUICK_SEARCH_SERVICE, QuickSearchComponent, QuickSearchStateService, RadioComponent, RadioModule, ReadOnlyDirective, RemoveClassnamesDirective, RenderInBodyComponent, RenderInPageHeaderDirective, RenderPageHeaderDirective, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SelectComponent, SelectModule, SelectableCarbonTheme, ShellService, SpinnerComponent, SpinnerModule, StatusSelectorComponent, StepperContainerComponent, StepperContentComponent, StepperFooterComponent, StepperFooterStepComponent, StepperHeaderComponent, StepperModule, StepperService, StepperStepComponent, TAG_ELLIPSIS_LIMIT, TableComponent, TableModule, TimelineComponent, TimelineItemImpl, TimelineModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VModalComponent, VModalModule, ValtimoCdsModalDirective, ValtimoCdsOverflowButtonDirective, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ValuePathType, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomTag, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent, runAfterCarbonModalClosed };
 //# sourceMappingURL=valtimo-components.mjs.map