@valtimo/components 13.3.0 → 13.4.0

package/fesm2022/valtimo-components.mjs

@@ -23,8 +23,8 @@ import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, Forms
 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, NotificationModule, ContextMenuModule, TooltipModule as TooltipModule$1 } from 'carbon-components-angular';
+import * as i2$2 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, TooltipModule as TooltipModule$1, NotificationModule, ContextMenuModule } 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';
@@ -32,9 +32,9 @@ import * as i4 from 'ngx-logger';
 import * as i6 from '@valtimo/security';
 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 * as i3 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
-import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, TrashCan16 } from '@carbon/icons';
+import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, View16, ViewOff16, ChevronUp16, ChevronDown16, Close16, Add16, Edit16, Save16, WarningAltFilled16, WarningFilled16, TrashCan16 } from '@carbon/icons';
 import localeNl from '@angular/common/locales/nl';
 import moment$1 from 'moment/moment';
 import BpmnViewer from 'bpmn-js';
@@ -43,16 +43,16 @@ import * as i1$6 from '@valtimo/resource';
 import { S3Resource, ResourceModule } from '@valtimo/resource';
 import { jwtDecode } from 'jwt-decode';
 import Dropzone from 'dropzone';
-import * as i3$2 from '@valtimo/document';
+import * as i3$1 from '@valtimo/document';
 import { DocumentModule, DocumentService, InternalCaseStatusUtils, CaseTagsUtils } from '@valtimo/document';
 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, Overlay } from '@angular/cdk/overlay';
 import Currency from '@tadashi/currency';
-import * as i2$2 from 'ngx-spinner';
+import * as i2$3 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
-import * as i2$3 from 'ng-multiselect-dropdown';
+import * as i2$4 from 'ng-multiselect-dropdown';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
 import { v4 } from 'uuid';
 import flatpickr from 'flatpickr';
@@ -692,6 +692,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.
  *
@@ -1471,6 +1487,7 @@ class PageTitleService {
         this._pageActionsFullWidth$ = new BehaviorSubject(false);
         this._pageActionsViewContainerRef$ = new BehaviorSubject(null);
         this._pageTitleHidden$ = new BehaviorSubject(false);
+        this._preventReset$ = new BehaviorSubject(false);
         this.openRouteSubscription();
     }
     ngOnDestroy() {
@@ -1488,10 +1505,10 @@ class PageTitleService {
         this._customPageSubtitleSet$.next(true);
     }
     disableReset() {
-        this._preventReset = true;
+        this._preventReset$.next(true);
     }
     enableReset() {
-        this._preventReset = false;
+        this._preventReset$.next(false);
     }
     setPageActionsViewContainerRef(ref) {
         this._pageActionsViewContainerRef$.next(ref);
@@ -1512,17 +1529,21 @@ class PageTitleService {
         this._pageActionsViewContainerRef$.getValue()?.clear();
     }
     openRouteSubscription() {
-        this._routeSubscription = combineLatest([this.router.events, this.pageActionsViewContainerRef$])
+        this._routeSubscription = combineLatest([
+            this.router.events,
+            this.pageActionsViewContainerRef$,
+            this._preventReset$,
+        ])
             .pipe(filter(([event]) => event instanceof NavigationEnd ||
             event instanceof NavigationStart ||
-            event instanceof ResolveEnd), tap(([_, pageActionsViewContainerRef]) => {
-            if (!this._preventReset) {
+            event instanceof ResolveEnd), tap(([_, pageActionsViewContainerRef, preventReset]) => {
+            if (!preventReset) {
                 this._customPageTitle$.next('');
                 this._customPageTitleSet$.next(false);
                 this._customPageSubtitle$.next('');
                 this._customPageSubtitleSet$.next(false);
             }
-            if (pageActionsViewContainerRef && !this._preventReset) {
+            if (pageActionsViewContainerRef && !preventReset) {
                 pageActionsViewContainerRef.clear();
                 this.setHasPageActions(false);
             }
@@ -3405,13 +3426,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$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" }] }); }
+    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: i2$2.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: i2$2.Header, selector: "cds-header, ibm-header", inputs: ["skipTo", "name", "brand", "href", "route", "routeExtras", "useRouter"], outputs: ["navigation"] }, { kind: "component", type: i2$2.HeaderGlobal, selector: "cds-header-global, ibm-header-global" }, { kind: "component", type: i2$2.HeaderAction, selector: "cds-header-action, ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }, { kind: "component", type: i2$2.Hamburger, selector: "cds-hamburger, ibm-hamburger", inputs: ["active", "activeTitle", "inactiveTitle"], outputs: ["selected"] }, { kind: "directive", type: i2$2.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$2.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: i2$2.IconService }, { type: ShellService }, { type: i5.DomSanitizer }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { headerClass: [{
                 type: HostBinding,
                 args: ['class.cds--header']
             }], _headerVcr: [{
@@ -3720,7 +3741,7 @@ class MenuItemTextComponent {
         this.openInNewTab.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MenuItemTextComponent, isStandalone: false, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent", showOverFlowMenu: "showOverFlowMenu" }, outputs: { overflowMenuClosed: "overflowMenuClosed", openInNewTab: "openInNewTab" }, 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=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\"\n  class=\"menu-item-text-container\"\n  id=\"{{ menuItem?.id }}\"\n>\n  <span *ngIf=\"obs.titleTranslation\" [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"overflowTrigger\"></ng-container>\n\n  <cds-overflow-menu\n    [customTrigger]=\"overflowTrigger\"\n    [open]=\"showOverFlowMenu\"\n    [offset]=\"{x: 100, y: -25}\"\n    placement=\"bottom\"\n    wrapperClass=\"--hide-after --wide\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n    <cds-overflow-menu-option (selected)=\"onSelectOpenInNewTab()\">{{\n      'interface.openInNewTab' | translate\n    }}</cds-overflow-menu-option>\n  </cds-overflow-menu>\n</div>\n\n<ng-template #overflowTrigger>\n  <div></div>\n</ng-template>\n", styles: [".menu-item-text-container{display:flex}.menu-item-text-container .menu-item-icon-container{position:absolute;margin-left:-.75rem;transform:translate(-100%)}.menu-item-text-container .empty-menu-icon-text{font-weight:600!important}.menu-item-text-container .cds--overflow-menu{visibility:hidden;height:0;width:0;position:absolute}\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: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MenuItemTextComponent, isStandalone: false, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent", showOverFlowMenu: "showOverFlowMenu" }, outputs: { overflowMenuClosed: "overflowMenuClosed", openInNewTab: "openInNewTab" }, 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=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\"\n  class=\"menu-item-text-container\"\n  id=\"{{ menuItem?.id }}\"\n>\n  <span *ngIf=\"obs.titleTranslation\" [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"overflowTrigger\"></ng-container>\n\n  <cds-overflow-menu\n    [customTrigger]=\"overflowTrigger\"\n    [open]=\"showOverFlowMenu\"\n    [offset]=\"{x: 100, y: -25}\"\n    placement=\"bottom\"\n    wrapperClass=\"--hide-after --wide\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n    <cds-overflow-menu-option (selected)=\"onSelectOpenInNewTab()\">{{\n      'interface.openInNewTab' | translate\n    }}</cds-overflow-menu-option>\n  </cds-overflow-menu>\n</div>\n\n<ng-template #overflowTrigger>\n  <div></div>\n</ng-template>\n", styles: [".menu-item-text-container{display:flex}.menu-item-text-container .menu-item-icon-container{position:absolute;margin-left:-.75rem;transform:translate(-100%)}.menu-item-text-container .empty-menu-icon-text{font-weight:600!important}.menu-item-text-container .cds--overflow-menu{visibility:hidden;height:0;width:0;position:absolute}\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: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuItemTextComponent, decorators: [{
             type: Component,
@@ -4135,7 +4156,7 @@ 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$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 }); }
+    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: i2$2.Panel, selector: "cds-panel, ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i2$2.ColumnDirective, selector: "[cdsCol], [ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i2$2.GridDirective, selector: "[cdsGrid], [ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i2$2.RowDirective, selector: "[cdsRow], [ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i2$2.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$2.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i2$2.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i2$2.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i2$2.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i2$2.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "directive", type: i2$2.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i2$2.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: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i2$2.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,
@@ -4384,13 +4405,13 @@ 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>\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" }] }); }
+    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.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>\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: i2$2.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$2.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$2.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: i2$2.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>\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: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3.BreakpointObserver }, { type: i1$3.Router }], propDecorators: { toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton']
             }], onPageClick: [{
@@ -4490,7 +4511,7 @@ class PageTitleComponent {
         }));
     }
     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 }); }
+    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: i2$2.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,
@@ -5470,7 +5491,7 @@ class CarbonTagsModalComponent {
         this.closeEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonTagsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarbonTagsModalComponent, isStandalone: false, selector: "valtimo-tags-modal", inputs: { open: "open", tags: "tags" }, 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  [title]=\"'interface.tags' | translate\"\n  size=\"xs\"\n  [open]=\"open\"\n  (close)=\"onCloseSelect()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\">\n    <h3 cdsModalHeading>{{ 'interface.tags' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-tags-modal__content\">\n    <div class=\"valtimo-tags-modal__container\">\n      @for (tag of tags; track tag.content) {\n        <cds-tag [type]=\"tag.type\">\n          {{ tag.content }}\n        </cds-tag>\n      }\n    </div>\n  </section>\n</cds-modal>\n", styles: [".valtimo-tags-modal__content{max-height:300px}.valtimo-tags-modal__container{width:100%;max-height:100%;overflow:auto;background:var(--cds-layer-02);padding:16px;border-radius:8px}.valtimo-tags-modal__container>*:first-child{margin-left:0!important}\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: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { 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: "directive", type: i3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarbonTagsModalComponent, isStandalone: false, selector: "valtimo-tags-modal", inputs: { open: "open", tags: "tags" }, 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  [title]=\"'interface.tags' | translate\"\n  size=\"xs\"\n  [open]=\"open\"\n  (close)=\"onCloseSelect()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"onCloseSelect()\">\n    <h3 cdsModalHeading>{{ 'interface.tags' | translate }}</h3>\n  </cds-modal-header>\n\n  <section cdsModalContent class=\"valtimo-tags-modal__content\">\n    <div class=\"valtimo-tags-modal__container\">\n      @for (tag of tags; track tag.content) {\n        <cds-tag [type]=\"tag.type\">\n          {{ tag.content }}\n        </cds-tag>\n      }\n    </div>\n  </section>\n</cds-modal>\n", styles: [".valtimo-tags-modal__content{max-height:300px}.valtimo-tags-modal__container{width:100%;max-height:100%;overflow:auto;background:var(--cds-layer-02);padding:16px;border-radius:8px}.valtimo-tags-modal__container>*:first-child{margin-left:0!important}\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: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonTagsModalComponent, decorators: [{
             type: Component,
@@ -5515,12 +5536,10 @@ class CarbonListComponent {
         this._tableTranslations$.next({ ...DEFAULT_LIST_TRANSLATIONS, ...value });
     }
     set pagination(value) {
-        if (!value) {
+        if (!value)
             return;
-        }
-        if (!this._pagination) {
+        if (!this._pagination)
             this._pagination = { ...DEFAULT_PAGINATION, ...value };
-        }
         this._pagination = { ...this._pagination, ...value };
         this.buildPaginationModel();
         if (this._isPaginationInit || !value.size)
@@ -5660,6 +5679,7 @@ class CarbonListComponent {
                         return new TableItem({
                             data,
                             template: this.booleanTemplate,
+                            item,
                         });
                     case ViewType.TAGS: {
                         return new TableItem({
@@ -5667,6 +5687,7 @@ class CarbonListComponent {
                                 tags: this.resolveTagObject(item, field.key),
                                 tagAmount: field?.tagAmount || 1,
                             },
+                            item,
                             template: this.tagTemplate,
                         });
                     }
@@ -5968,13 +5989,13 @@ class CarbonListComponent {
             type: 'blue',
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i3.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, 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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    placement=\"bottom\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonListComponent, deps: [{ token: EllipsisPipe }, { token: CarbonListFilterPipe }, { token: i2$2.IconService }, { token: i4.NGXLogger }, { token: i1.TranslateService }, { token: ViewContentService }, { token: KeyStateService }, { token: CarbonListDragAndDropService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: CarbonListComponent, isStandalone: false, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", showActionItems: "showActionItems", header: "header", hideColumnHeader: "hideColumnHeader", initialSortState: "initialSortState", sortState: "sortState", isSearchable: "isSearchable", enableSingleSelection: "enableSingleSelection", lastColumnTemplate: "lastColumnTemplate", paginationIdentifier: "paginationIdentifier", showSelectionColumn: "showSelectionColumn", striped: "striped", hideToolbar: "hideToolbar", lockedTooltipTranslationKey: "lockedTooltipTranslationKey", movingRowsEnabled: "movingRowsEnabled", dragAndDrop: "dragAndDrop", dragAndDropDisabled: "dragAndDropDisabled" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged", moveRow: "moveRow", itemsReordered: "itemsReordered" }, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], viewQueries: [{ propertyName: "actionsMenuTemplate", first: true, predicate: ["actionsMenuTemplate"], descendants: true }, { propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true }, { propertyName: "booleanTemplate", first: true, predicate: ["booleanTemplate"], descendants: true }, { propertyName: "moveRowsTemplate", first: true, predicate: ["moveRowsTemplate"], descendants: true }, { propertyName: "dragAndDropTemplate", first: true, predicate: ["dragAndDropTemplate"], descendants: true }, { propertyName: "rowDisabled", first: true, predicate: ["rowDisabled"], descendants: true }, { propertyName: "tagTemplate", first: true, predicate: ["tagTemplate"], descendants: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "_table", first: true, predicate: Table, 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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    placement=\"bottom\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$2.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$2.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$2.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$2.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$2.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$2.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$2.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$2.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showExpandAllToggle", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$2.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i11.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CarbonListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], 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<cds-table-container\n  *ngIf=\"{\n    sort: sort$ | async,\n    model: model$ | async,\n    viewInitialized: viewInitialized$ | async,\n  } as obs\"\n  class=\"valtimo-carbon-list\"\n>\n  <cds-table-header *ngIf=\"header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </cds-table-header>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <cds-table-toolbar\n    *ngIf=\"!hideToolbar\"\n    class=\"valtimo-carbon-list__toolbar\"\n    [model]=\"obs.model\"\n    [batchText]=\"batchText$ | async\"\n  >\n    <cds-table-toolbar-actions>\n      <ng-content select=\"[carbonToolbarActions]\"> </ng-content>\n    </cds-table-toolbar-actions>\n\n    <cds-table-toolbar-content>\n      <cds-table-toolbar-search\n        *ngIf=\"isSearchable\"\n        [expandable]=\"true\"\n        [formControl]=\"searchFormControl\"\n      ></cds-table-toolbar-search>\n\n      <ng-content select=\"[carbonToolbarContent]\"> </ng-content>\n    </cds-table-toolbar-content>\n  </cds-table-toolbar>\n\n  <cds-table\n    *ngIf=\"!!obs.sort\"\n    [ngClass]=\"{\n      'valtimo-carbon-list__header--hidden': hideColumnHeader,\n      'valtimo-carbon-list--unclickable': !this.rowClicked.observed,\n    }\"\n    [enableSingleSelect]=\"enableSingleSelect\"\n    [model]=\"loading || !obs.viewInitialized ? skeletonModel : obs.model\"\n    [showSelectionColumn]=\"showSelectionColumn\"\n    [skeleton]=\"loading\"\n    [striped]=\"striped\"\n    (sort)=\"onSort(obs.model.header[$event])\"\n    (rowClick)=\"onRowClick($event)\"\n  >\n    <tbody cdsTableBody>\n      <tr class=\"valtimo-carbon-list__no-results\">\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          <ng-content></ng-content>\n        </td>\n\n        <td [attr.colspan]=\"obs.model.header.length + (showSelectionColumn ? 1 : 0)\">\n          {{ 'list.noResults' | translate }}\n        </td>\n      </tr>\n    </tbody>\n  </cds-table>\n\n  <cds-pagination\n    *ngIf=\"paginationModel && items?.length\"\n    [itemsPerPageOptions]=\"paginatorConfig.itemsPerPageOptions\"\n    [model]=\"paginationModel\"\n    [showPageInput]=\"paginatorConfig.showPageInput\"\n    [skeleton]=\"loading\"\n    [translations]=\"paginationTranslations$ | async\"\n    (selectPage)=\"onSelectPage($event)\"\n  ></cds-pagination>\n</cds-table-container>\n\n<ng-template #actionTemplate let-data=\"data\">\n  <i\n    class=\"clickable\"\n    [ngClass]=\"data.iconClass\"\n    (click)=\"$event.stopPropagation(); data.callback(data.item)\"\n  ></i>\n</ng-template>\n\n<ng-template #booleanTemplate let-data=\"data\">\n  {{ data | translate }}\n</ng-template>\n\n<ng-template #actionsMenuTemplate let-data=\"data\">\n  <cds-overflow-menu\n    *ngIf=\"showActionItems\"\n    [open]=\"currentOpenActionId === data.item\"\n    (openChange)=\"handleActionOpenChange(data.item, $event)\"\n    [flip]=\"true\"\n    [offset]=\"{x: 0, y: 50}\"\n    placement=\"bottom\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    @for (action of data.actions; track action.label) {\n      <cds-overflow-menu-option\n        [disabled]=\"action.disabledCallback ? action.disabledCallback(data.item) : false\"\n        [type]=\"action.type\"\n        (selected)=\"action.callback(data.item)\"\n      >\n        <i *ngIf=\"!!action.iconClass\" [ngClass]=\"action.iconClass\"></i>\n\n        {{ action.label | translate }}\n      </cds-overflow-menu-option>\n    }\n  </cds-overflow-menu>\n</ng-template>\n\n<ng-template #rowDisabled let-data=\"data\">\n  <div *ngIf=\"data.locked\" class=\"locked\">\n    <span\n      class=\"float-right badge badge-pill badge-secondary bg-grey\"\n      ngbTooltip=\"{{ lockedTooltipTranslationKey | translate }}\"\n    >\n      <i class=\"icon mdi mdi-lock\"></i>\n    </span>\n  </div>\n</ng-template>\n\n<ng-template #moveRowsTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__move-rows\">\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === 0\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveUpClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--up\" size=\"16\"></svg>\n    </button>\n\n    <button\n      cdsButton=\"tertiary\"\n      [disabled]=\"data.index === data.length - 1\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (click)=\"onMoveDownClick($event, data)\"\n    >\n      <svg cdsIcon=\"arrow--down\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #dragAndDropTemplate let-data=\"data\">\n  <div class=\"valtimo-carbon-list__draggable\">\n    <button\n      cdsButton=\"ghost\"\n      [disabled]=\"dragAndDropDisabled\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      (mousedown)=\"onDragStart($event, data)\"\n    >\n      <svg cdsIcon=\"draggable\" size=\"16\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  @if (!data.tags) {\n    -\n  } @else {\n    <div class=\"tag-template\">\n      @if (data.tags.length === 0) {\n        -\n      } @else {\n        @for (tag of data.tags.slice(0, data.tagAmount); track tag) {\n          <cds-tag class=\"cds-tag--no-margin\" [type]=\"tag.type\">\n            {{ tag.ellipsisContent ?? tag.content }}\n          </cds-tag>\n        }\n\n        <cds-tag\n          *ngIf=\"data.tags.length > data.tagAmount\"\n          class=\"cds-tag--no-margin valtimo-carbon-list__expand-tag\"\n          type=\"high-contrast\"\n          (click)=\"onTagClick($event, data.tags)\"\n        >\n          {{ data.tags.length - data.tagAmount }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n        </cds-tag>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultTemplate let-data=\"data\">\n  <span>{{ data }}</span>\n</ng-template>\n\n<valtimo-tags-modal\n  [open]=\"tagModalOpen$ | async\"\n  [tags]=\"tagModalData$ | async\"\n  (closeEvent)=\"onCloseEvent()\"\n></valtimo-tags-modal>\n", styles: [".clickable{cursor:pointer}.container-fluid{background-color:var(--cds-layer)}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}th:first-child,td:first-child{padding-left:25px}::ng-deep tr:has(>td .locked){cursor:not-allowed}::ng-deep tr:has(>td .locked) td{color:var(--cds-text-on-color-disabled)}::ng-deep .valtimo-carbon-list__header--hidden thead{display:none}::ng-deep .valtimo-carbon-list--unclickable tr{cursor:default}.valtimo-carbon-list__toolbar:empty{display:none}.valtimo-carbon-list__no-results{cursor:default}.valtimo-carbon-list__no-results td:empty,.valtimo-carbon-list__no-results td:not(:empty)+td{display:none}.valtimo-carbon-list__move-rows,.valtimo-carbon-list__draggable{width:100%;justify-content:flex-end;display:flex;flex-direction:row;position:relative}.valtimo-carbon-list__move-rows button:not(:last-child),.valtimo-carbon-list__draggable button:not(:last-child){margin-right:8px}.valtimo-carbon-list__expand-tag{cursor:pointer}.valtimo-carbon-list label{margin-bottom:0!important}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag{margin:0}.valtimo-carbon-list ::ng-deep .tag-template .cds--tag svg{fill:var(--cds-background)}.valtimo-carbon-list ::ng-deep .tag-template>*:not(:last-child){margin-right:8px}.valtimo-carbon-list ::ng-deep .cds--tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:24px}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!important;padding-top:8px!important;padding-bottom:8px!important}::ng-deep .valtimo-carbon-list__drag-table-row{cursor:move!important}::ng-deep .valtimo-carbon-list__drag-table-row .valtimo-carbon-list__draggable .cds--btn--ghost{outline:0;border-color:var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60)));box-shadow:inset 0 0 0 1px var(--cds-button-focus-color, var(--cds-focus, var(--vcds-color-60))),inset 0 0 0 2px var(--cds-background, #f4f4f4)}\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: EllipsisPipe }, { type: CarbonListFilterPipe }, { type: i3.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }], propDecorators: { actionsMenuTemplate: [{
+        }], ctorParameters: () => [{ type: EllipsisPipe }, { type: CarbonListFilterPipe }, { type: i2$2.IconService }, { type: i4.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }], propDecorators: { actionsMenuTemplate: [{
                 type: ViewChild,
                 args: ['actionsMenuTemplate']
             }], actionTemplate: [{
@@ -6410,7 +6431,7 @@ class BreadcrumbNavigationComponent {
         this._subscriptions.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BreadcrumbNavigationComponent, deps: [{ token: BreadcrumbService }, { token: PageHeaderService }, { token: PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BreadcrumbNavigationComponent, isStandalone: false, selector: "valtimo-breadcrumb-navigation", host: { properties: { "class.valtimo-breadcrumb-navigation--compact": "this.isCompact" } }, 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=\"breadcrumbItems$ | async as breadcrumbItems\">\n  <div\n    class=\"breadcrumbs-container\"\n    *ngIf=\"breadcrumbItems.length > 0\"\n    [ngClass]=\"{'--compact': compactMode$ | async}\"\n  >\n    <cds-breadcrumb [items]=\"breadcrumbItems\"></cds-breadcrumb>\n  </div>\n</ng-container>\n", styles: [".breadcrumbs-container{margin-bottom:8px;display:flex;width:max-content}.breadcrumbs-container.--compact{margin-bottom:0}.valtimo-breadcrumb-navigation--compact{flex-shrink: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Breadcrumb, selector: "cds-breadcrumb, ibm-breadcrumb", inputs: ["items", "noTrailingSlash", "ariaLabel", "skeleton", "threshold", "autoAlign", "description"], outputs: ["navigation"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BreadcrumbNavigationComponent, isStandalone: false, selector: "valtimo-breadcrumb-navigation", host: { properties: { "class.valtimo-breadcrumb-navigation--compact": "this.isCompact" } }, 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=\"breadcrumbItems$ | async as breadcrumbItems\">\n  <div\n    class=\"breadcrumbs-container\"\n    *ngIf=\"breadcrumbItems.length > 0\"\n    [ngClass]=\"{'--compact': compactMode$ | async}\"\n  >\n    <cds-breadcrumb [items]=\"breadcrumbItems\"></cds-breadcrumb>\n  </div>\n</ng-container>\n", styles: [".breadcrumbs-container{margin-bottom:8px;display:flex;width:max-content}.breadcrumbs-container.--compact{margin-bottom:0}.valtimo-breadcrumb-navigation--compact{flex-shrink: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.Breadcrumb, selector: "cds-breadcrumb, ibm-breadcrumb", inputs: ["items", "noTrailingSlash", "ariaLabel", "skeleton", "threshold", "autoAlign", "description"], outputs: ["navigation"] }, { 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: BreadcrumbNavigationComponent, decorators: [{
             type: Component,
@@ -6628,7 +6649,7 @@ class PageSubtitleComponent {
         this.compactMode$ = this.pageHeaderService.compactMode$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleComponent, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }, { token: PageTitleService }, { token: PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PageSubtitleComponent, isStandalone: true, selector: "valtimo-page-subtitle", 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 renderPageSubtitle>\n  <ng-template>\n    <div\n      class=\"subtitle-container\"\n      *ngIf=\"{\n        hasCustomPageSubtitle: hasCustomPageSubtitle$ | async,\n        customPageSubtitleSet: customPageSubtitleSet$ | async,\n        customPageSubtitle: customPageSubtitle$ | async,\n        compactMode: compactMode$ | async,\n        hasPageActions: hasPageActions$ | async,\n        pageActionsFullWidth: pageActionsFullWidth$ | async,\n      } as obs\"\n    >\n      <div\n        *ngIf=\"obs.hasCustomPageSubtitle && !obs.customPageSubtitleSet\"\n        class=\"subtitle-skeleton-container\"\n        [ngClass]=\"{'--compact': obs.compactMode}\"\n      >\n        <cds-skeleton-placeholder></cds-skeleton-placeholder>\n      </div>\n\n      <span\n        *ngIf=\"obs.hasCustomPageSubtitle && obs.customPageSubtitleSet\"\n        [innerHtml]=\"obs.customPageSubtitle\"\n        [title]=\"obs.customPageSubtitle\"\n        class=\"page-subtitle\"\n        [ngClass]=\"{'--compact': obs.compactMode}\"\n      >\n      </span>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".subtitle-container .subtitle-skeleton-container .cds--skeleton__placeholder{height:18px;margin-bottom:8px;width:200px;margin-left:16px}.subtitle-container .subtitle-skeleton-container.--compact .cds--skeleton__placeholder{height:18px;width:60px;margin:0}.subtitle-container .page-subtitle{margin-left:16px;padding-bottom:4px;color:var(--cds-text-helper, #6f6f6f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:18px}.subtitle-container .page-subtitle b{font-weight:bolder}.subtitle-container .page-subtitle.--compact{padding-bottom:0;margin-left: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: "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: SkeletonModule }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "directive", type: RenderPageSubtitleDirective, selector: "[renderPageSubtitle]" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PageSubtitleComponent, isStandalone: true, selector: "valtimo-page-subtitle", 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 renderPageSubtitle>\n  <ng-template>\n    <div\n      class=\"subtitle-container\"\n      *ngIf=\"{\n        hasCustomPageSubtitle: hasCustomPageSubtitle$ | async,\n        customPageSubtitleSet: customPageSubtitleSet$ | async,\n        customPageSubtitle: customPageSubtitle$ | async,\n        compactMode: compactMode$ | async,\n        hasPageActions: hasPageActions$ | async,\n        pageActionsFullWidth: pageActionsFullWidth$ | async,\n      } as obs\"\n    >\n      <div\n        *ngIf=\"obs.hasCustomPageSubtitle && !obs.customPageSubtitleSet\"\n        class=\"subtitle-skeleton-container\"\n        [ngClass]=\"{'--compact': obs.compactMode}\"\n      >\n        <cds-skeleton-placeholder></cds-skeleton-placeholder>\n      </div>\n\n      <span\n        *ngIf=\"obs.hasCustomPageSubtitle && obs.customPageSubtitleSet\"\n        [innerHtml]=\"obs.customPageSubtitle\"\n        [title]=\"obs.customPageSubtitle\"\n        class=\"page-subtitle\"\n        [ngClass]=\"{'--compact': obs.compactMode}\"\n      >\n      </span>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".subtitle-container .subtitle-skeleton-container .cds--skeleton__placeholder{height:18px;margin-bottom:8px;width:200px;margin-left:16px}.subtitle-container .subtitle-skeleton-container.--compact .cds--skeleton__placeholder{height:18px;width:60px;margin:0}.subtitle-container .page-subtitle{margin-left:16px;padding-bottom:4px;color:var(--cds-text-helper, #6f6f6f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:18px}.subtitle-container .page-subtitle b{font-weight:bolder}.subtitle-container .page-subtitle.--compact{padding-bottom:0;margin-left: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: "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: SkeletonModule }, { kind: "component", type: i2$2.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "directive", type: RenderPageSubtitleDirective, selector: "[renderPageSubtitle]" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageSubtitleComponent, decorators: [{
             type: Component,
@@ -6678,11 +6699,11 @@ class PageHeaderComponent {
         this._pageHeadResizeObserver.observe(this._pageHead.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderComponent, deps: [{ token: UserInterfaceService }, { token: PageHeaderService }, { token: PageTitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PageHeaderComponent, isStandalone: false, selector: "valtimo-page-header", viewQueries: [{ propertyName: "_contentrVcr", first: true, predicate: ["contentVcr"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_pageHead", first: true, predicate: ["pageHead"], descendants: true, read: ElementRef, 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  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-header-container{width:min-content}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}\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: "component", type: PageTitleComponent, selector: "valtimo-page-title" }, { kind: "component", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation" }, { kind: "directive", type: RenderPageHeaderDirective, selector: "[renderPageHeader]" }, { kind: "component", type: PageActionsComponent, selector: "valtimo-page-actions" }, { kind: "component", type: PageSubtitleComponent, selector: "valtimo-page-subtitle" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PageHeaderComponent, isStandalone: false, selector: "valtimo-page-header", viewQueries: [{ propertyName: "_contentrVcr", first: true, predicate: ["contentVcr"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_pageHead", first: true, predicate: ["pageHead"], descendants: true, read: ElementRef, 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  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-header-container{width:min-content}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}\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: "component", type: PageTitleComponent, selector: "valtimo-page-title" }, { kind: "component", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation" }, { kind: "directive", type: RenderPageHeaderDirective, selector: "[renderPageHeader]" }, { kind: "component", type: PageActionsComponent, selector: "valtimo-page-actions" }, { kind: "component", type: PageSubtitleComponent, selector: "valtimo-page-subtitle" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-page-header', 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  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-header-container{width:min-content}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}\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-page-header', 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  #pageHead\n  class=\"page-head\"\n  [ngClass]=\"{\n    'page-head--hidden': (showPageHeader$ | async) === false,\n    'page-head--compact': compactMode$ | async,\n    'page-head--no-content': (compactMode$ | async) && (pageActionsHasContent$ | async) === false,\n    'page-head--no-margin': pageTitleHidden$ | async,\n    'page-head--small-title': smallTitle$ | async,\n  }\"\n>\n  <ng-container #contentVcr></ng-container>\n\n  <valtimo-page-subtitle></valtimo-page-subtitle>\n\n  <valtimo-page-actions></valtimo-page-actions>\n</div>\n\n<ng-container renderPageHeader>\n  <ng-template>\n    <div\n      class=\"page-header-container\"\n      [ngClass]=\"{\n        'page-header-container--compact': compactMode$ | async,\n        'page-header-container--small-title': smallTitle$ | async,\n      }\"\n    >\n      <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n\n      <valtimo-page-title></valtimo-page-title>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: [".page-head{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.page-head--hidden{display:none}.page-head--compact{margin-bottom:16px}.page-head--small-title{align-items:flex-start;margin-bottom:0}.page-head--no-content,.page-head--no-margin{margin-bottom:0}.page-header-container{width:min-content}.page-header-container--compact{display:flex;width:100%;justify-content:space-between;align-items:center;padding-inline:16px}.page-header-container--small-title{display:flex;flex-direction:row;gap:8px;width:min-content}\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: UserInterfaceService }, { type: PageHeaderService }, { type: PageTitleService }], propDecorators: { _contentrVcr: [{
                 type: ViewChild,
                 args: ['contentVcr', { static: true, read: ViewContainerRef }]
@@ -7163,7 +7184,7 @@ class TimelineComponent {
         this.actions$.next(value.reduce((acc, curr) => ({ ...acc, [curr.id]: curr }), {}));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TimelineComponent, isStandalone: false, selector: "valtimo-timeline", inputs: { items: "items", actions: "actions" }, 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@if (items$ | async; as items) {\n  <ul class=\"timeline mb-0 py-5\">\n    @for (item of items; track item.customData.id) {\n      <li class=\"timeline-item status-done\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n\n          <br />\n\n          <span>{{ item.time }}</span>\n        </div>\n\n        <div class=\"timeline-content\" *ngIf=\"actions$ | async as actions\">\n          <div class=\"timeline-header\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <br />\n\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n            <p class=\"timeline-summary\">\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n\n          <cds-overflow-menu *ngIf=\"item.supportedActionIds?.length > 0\">\n            @for (actionId of item.supportedActionIds; track actionId) {\n              <cds-overflow-menu-option (click)=\"actions[actionId].callback(item, $event)\">\n                <i\n                  *ngIf=\"!!actions[actionId].icon\"\n                  class=\"icon mdi\"\n                  [ngClass]=\"actions[actionId].icon\"\n                ></i>\n\n                {{ actions[actionId]?.label || '-' }}\n              </cds-overflow-menu-option>\n            }\n          </cds-overflow-menu>\n        </div>\n      </li>\n    }\n  </ul>\n}\n", styles: [".timeline-activity{font-size:100%}.timeline-header{padding:38px 0 38px 38px}.timeline-content{display:flex;justify-content:space-between}.timeline-summary{font-size:.8rem;white-space:pre-line}\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.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TimelineComponent, isStandalone: false, selector: "valtimo-timeline", inputs: { items: "items", actions: "actions" }, 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@if (items$ | async; as items) {\n  <ul class=\"timeline mb-0 py-5\">\n    @for (item of items; track item.customData.id) {\n      <li class=\"timeline-item status-done\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n\n          <br />\n\n          <span>{{ item.time }}</span>\n        </div>\n\n        <div class=\"timeline-content\" *ngIf=\"actions$ | async as actions\">\n          <div class=\"timeline-header\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <br />\n\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n            <p class=\"timeline-summary\">\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n\n          <cds-overflow-menu *ngIf=\"item.supportedActionIds?.length > 0\">\n            @for (actionId of item.supportedActionIds; track actionId) {\n              <cds-overflow-menu-option (click)=\"actions[actionId].callback(item, $event)\">\n                <i\n                  *ngIf=\"!!actions[actionId].icon\"\n                  class=\"icon mdi\"\n                  [ngClass]=\"actions[actionId].icon\"\n                ></i>\n\n                {{ actions[actionId]?.label || '-' }}\n              </cds-overflow-menu-option>\n            }\n          </cds-overflow-menu>\n        </div>\n      </li>\n    }\n  </ul>\n}\n", styles: [".timeline-activity{font-size:100%}.timeline-header{padding:38px 0 38px 38px}.timeline-content{display:flex;justify-content:space-between}.timeline-summary{font-size:.8rem;white-space:pre-line}\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: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$2.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { 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: TimelineComponent, decorators: [{
             type: Component,
@@ -8219,7 +8240,7 @@ class FormioComponent {
         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$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" }] }); }
+    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: i2$2.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,
@@ -8378,7 +8399,7 @@ class FormioBuilderComponent {
         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$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" }] }); }
+    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: i2$2.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,
@@ -9201,7 +9222,7 @@ class InputLabelComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputLabelComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: InputLabelComponent, isStandalone: false, selector: "v-input-label", inputs: { name: "name", tooltip: "tooltip", tooltipTranslationKey: "tooltipTranslationKey", largeMargin: "largeMargin", small: "small", noMargin: "noMargin", title: "title", titleTranslationKey: "titleTranslationKey", required: "required", disabled: "disabled", carbonTheme: "carbonTheme" }, 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=\"v-input-label-container\"\n  [ngClass]=\"{\n    'v-input-label-container--large-margin': largeMargin,\n    'v-input-label-container--no-margin': noMargin,\n  }\"\n>\n  <cds-label [disabled]=\"disabled\">\n    <span class=\"label-with-tooltip\">\n      {{ displayTitle$ | async }}\n\n      <v-tooltip-icon\n        *ngIf=\"tooltip || tooltipTranslationKey\"\n        [disabled]=\"disabled\"\n        [tooltip]=\"tooltipTranslationKey ? (tooltipTranslationKey | translate) : tooltip\"\n      ></v-tooltip-icon>\n    </span>\n\n    <ng-content></ng-content>\n  </cds-label>\n</div>\n", styles: [".v-input-label-container{display:flex;flex-direction:row;align-items:center}.v-input-label-container--large-margin{margin-block-end:var(--v-input-title-margin)}.v-input-label-container--no-margin{margin-block-end:0}.v-input-label-container--no-margin ::ng-deep .cds--label{margin:0}.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)}.v-input-label--small{font-size:var(--v-input-title-small-font-size);color:var(--v-input-title-small-font-color);line-height:var(--v-input-title-small-line-height);font-weight:var(--v-input-title-small-font-weight)}.v-input-label__tooltip{display:flex;justify-content:center;align-items:center;font-size:var(--v-input-tooltip-icon-size);width:var(--v-input-tooltip-icon-size);height:var(--v-input-tooltip-icon-size);color:var(--v-input-tooltip-icon-color);margin-inline-start:var(--v-input-tooltip-icon-margin)}.v-input-label--required:after{content:\" *\";color:var(--v-input-required-asterisk-color)}.label-with-tooltip{display:flex;align-items:center}:host ::ng-deep .cds--label{display:flex;flex-direction:column;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "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: TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { 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: InputLabelComponent, isStandalone: false, selector: "v-input-label", inputs: { name: "name", tooltip: "tooltip", tooltipTranslationKey: "tooltipTranslationKey", largeMargin: "largeMargin", small: "small", noMargin: "noMargin", title: "title", titleTranslationKey: "titleTranslationKey", required: "required", disabled: "disabled", carbonTheme: "carbonTheme" }, 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=\"v-input-label-container\"\n  [ngClass]=\"{\n    'v-input-label-container--large-margin': largeMargin,\n    'v-input-label-container--no-margin': noMargin,\n  }\"\n>\n  <cds-label [disabled]=\"disabled\">\n    <span class=\"label-with-tooltip\">\n      {{ displayTitle$ | async }}\n\n      <v-tooltip-icon\n        *ngIf=\"tooltip || tooltipTranslationKey\"\n        [disabled]=\"disabled\"\n        [tooltip]=\"tooltipTranslationKey ? (tooltipTranslationKey | translate) : tooltip\"\n      ></v-tooltip-icon>\n    </span>\n\n    <ng-content></ng-content>\n  </cds-label>\n</div>\n", styles: [".v-input-label-container{display:flex;flex-direction:row;align-items:center}.v-input-label-container--large-margin{margin-block-end:var(--v-input-title-margin)}.v-input-label-container--no-margin{margin-block-end:0}.v-input-label-container--no-margin ::ng-deep .cds--label{margin:0}.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)}.v-input-label--small{font-size:var(--v-input-title-small-font-size);color:var(--v-input-title-small-font-color);line-height:var(--v-input-title-small-line-height);font-weight:var(--v-input-title-small-font-weight)}.v-input-label__tooltip{display:flex;justify-content:center;align-items:center;font-size:var(--v-input-tooltip-icon-size);width:var(--v-input-tooltip-icon-size);height:var(--v-input-tooltip-icon-size);color:var(--v-input-tooltip-icon-color);margin-inline-start:var(--v-input-tooltip-icon-margin)}.v-input-label--required:after{content:\" *\";color:var(--v-input-required-asterisk-color)}.label-with-tooltip{display:flex;align-items:center}:host ::ng-deep .cds--label{display:flex;flex-direction:column;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "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: TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { 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: InputLabelComponent, decorators: [{
             type: Component,
@@ -9565,14 +9586,14 @@ class ValuePathSelectorComponent {
         const formattedPath = splitPath.reduce((acc, pathPart) => `${acc}${requiredNotation === 'slashes' ? '/' : '.'}${pathPart}`, '');
         return `${prefix}:${requiredNotation === 'dots' ? formattedPath.substring(1) : formattedPath}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorComponent, deps: [{ token: ValuePathSelectorService }, { token: i2.FormBuilder }, { token: i3$2.DocumentService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorComponent, deps: [{ token: ValuePathSelectorService }, { token: i2.FormBuilder }, { token: i3$1.DocumentService }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ValuePathSelectorComponent, isStandalone: true, selector: "valtimo-value-path-selector", inputs: { name: "name", appendInline: "appendInline", margin: "margin", marginLg: "marginLg", marginXl: "marginXl", disabled: "disabled", caseDefinitionKey: "caseDefinitionKey", caseDefinitionVersionTag: "caseDefinitionVersionTag", prefixes: "prefixes", label: "label", tooltip: "tooltip", required: "required", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", defaultValue: "defaultValue", type: "type", parentItem: "parentItem" }, outputs: { valueChangeEvent: "valueChangeEvent", collectionSelected: "collectionSelected" }, host: { listeners: { "focusout": "onBlur()" }, properties: { "class.value-path-selector--margin-bottom": "this._showMargin", "class.value-path-selector--margin-bottom-lg": "this._showMarginLg", "class.value-path-selector--margin-bottom-xl": "this._showMarginXl" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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 *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 }] }); }
+        ], 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: i2$2.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: i2$2.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: i2$2.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "ariaLabel", "skeleton"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i2$2.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,
@@ -9594,7 +9615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             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 *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: [{
+        }], ctorParameters: () => [{ type: ValuePathSelectorService }, { type: i2.FormBuilder }, { type: i3$1.DocumentService }, { type: i1$3.ActivatedRoute }], propDecorators: { _showMargin: [{
                 type: HostBinding,
                 args: ['class.value-path-selector--margin-bottom']
             }], _showMarginLg: [{
@@ -10095,7 +10116,7 @@ class SpinnerComponent {
         this.noMarginTop = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SpinnerComponent, isStandalone: false, selector: "valtimo-spinner", inputs: { useBootstrapSpinner: "useBootstrapSpinner", name: "name", type: "type", size: "size", color: "color", bdColor: "bdColor", fullScreen: "fullScreen", noMarginTop: "noMarginTop" }, 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=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: [".spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SpinnerComponent, isStandalone: false, selector: "valtimo-spinner", inputs: { useBootstrapSpinner: "useBootstrapSpinner", name: "name", type: "type", size: "size", color: "color", bdColor: "bdColor", fullScreen: "fullScreen", noMarginTop: "noMarginTop" }, 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=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: [".spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -10985,7 +11006,7 @@ class MultiselectDropdownComponent {
         this.itemsSelected.emit(this.selectedItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectDropdownComponent, isStandalone: false, selector: "valtimo-multiselect-dropdown", inputs: { selectedItems: "selectedItems", items: "items", placeHolder: "placeHolder", dropdownSettings: "dropdownSettings" }, outputs: { itemsSelected: "itemsSelected" }, 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-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n", styles: ["/*!\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: ["placeholder", "disabled", "settings", "data"], outputs: ["onFilterChange", "onDropDownClose", "onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiselectDropdownComponent, isStandalone: false, selector: "valtimo-multiselect-dropdown", inputs: { selectedItems: "selectedItems", items: "items", placeHolder: "placeHolder", dropdownSettings: "dropdownSettings" }, outputs: { itemsSelected: "itemsSelected" }, 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-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n", styles: ["/*!\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$4.MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: ["placeholder", "disabled", "settings", "data"], outputs: ["onFilterChange", "onDropDownClose", "onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -11435,13 +11456,13 @@ 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\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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, deps: [{ token: i2$2.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\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: i2$2.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: i2$2.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: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$2.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: i2$2.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\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: [{
+        }], ctorParameters: () => [{ type: i2$2.IconService }], propDecorators: { fullWidthClass: [{
                 type: HostBinding,
                 args: ['class.full-width']
             }], name: [{
@@ -11658,7 +11679,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], 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  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\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  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"$disabled() || loading || (vars?.items || []).length === 0\"\n    [dropUp]=\"dropUp\"\n    [invalid]=\"invalid\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : (vars?.items || []).length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars?.items || []\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!important}\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: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i3.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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  *ngIf=\"{\n    placeholderText: placeholder || ('interface.filter' | translate),\n    loadingText: loadingText || ('interface.loading' | translate),\n    clearText: clearText || ('interface.clear' | translate),\n    clearAllText: clearAllText || ('interface.clearAll' | translate),\n    notFoundText: notFoundText || ('interface.noItemsFound' | translate),\n    items: listItems$ | async,\n  } as vars\"\n  class=\"v-select-container\"\n  [ngClass]=\"{\n    'v-select-container--margin': margin,\n    'v-select-container--small-margin': smallMargin,\n    'v-select-container--not-clearable': !clearable,\n  }\"\n  [style.width.px]=\"widthInPx\"\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  <cds-combo-box\n    [attr.data-testid]=\"dataTestId\"\n    [appendInline]=\"appendInline\"\n    [clearSelectionTitle]=\"vars.clearText\"\n    [clearSelectionsTitle]=\"vars.clearAllText\"\n    [disabled]=\"$disabled() || loading || (vars?.items || []).length === 0\"\n    [dropUp]=\"dropUp\"\n    [invalid]=\"invalid\"\n    [placeholder]=\"\n      loading\n        ? vars.loadingText\n        : (vars?.items || []).length === 0\n          ? vars.notFoundText\n          : vars.placeholderText\n    \"\n    [type]=\"multiple ? 'multi' : 'single'\"\n    (clear)=\"clear()\"\n    (selected)=\"setSelected($event)\"\n  >\n    <cds-dropdown-list [items]=\"vars?.items || []\"></cds-dropdown-list>\n  </cds-combo-box>\n</div>\n", styles: [".v-select-container--margin{margin-block-end:var(--v-input-margin)}.v-select-container--small-margin{margin-block-end:var(--v-input-small-margin)}.v-select-container--not-clearable .cds--list-box.cds--combo-box .cds--list-box__field>.cds--list-box__selection{display:none!important}\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: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$2.ComboBox, selector: "cds-combo-box, ibm-combo-box", inputs: ["placeholder", "openMenuAria", "closeMenuAria", "clearSelectionsTitle", "clearSelectionsAria", "clearSelectionTitle", "clearSelectionAria", "id", "labelId", "items", "type", "size", "itemValueKey", "label", "hideLabel", "helperText", "appendInline", "invalid", "invalidText", "warn", "warnText", "maxLength", "theme", "selectionFeedback", "autocomplete", "dropUp", "disabled", "readonly", "fluid"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { 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: SelectComponent, decorators: [{
             type: Component,
@@ -11754,7 +11775,7 @@ class KeyValueComponent {
         this.valueChange.emit({ value: this.value, inputValue, type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: KeyValueComponent, isStandalone: true, selector: "valtimo-key-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    cdsLayer\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    cdsLayer\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{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: "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: "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: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: KeyValueComponent, isStandalone: true, selector: "valtimo-key-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    cdsLayer\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    cdsLayer\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{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: "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: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: LayerModule }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyValueComponent, decorators: [{
             type: Component,
@@ -11807,7 +11828,7 @@ class SingleValueComponent {
         this.valueChange.emit({ value: this.value, inputValue });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SingleValueComponent, isStandalone: true, selector: "valtimo-single-value", inputs: { value: "value", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n  <input\n    cdsText\n    [defaultValue]=\"value?.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange($event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SingleValueComponent, isStandalone: true, selector: "valtimo-single-value", inputs: { value: "value", fullWidth: "fullWidth", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n  <input\n    cdsText\n    [defaultValue]=\"value?.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange($event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SingleValueComponent, decorators: [{
             type: Component,
@@ -11854,7 +11875,7 @@ class KeyDropdownValueComponent {
         this.valueChange.emit({ value: this.value, inputValue, type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyDropdownValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: KeyDropdownValueComponent, isStandalone: true, selector: "valtimo-key-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{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: "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: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: KeyDropdownValueComponent, isStandalone: true, selector: "valtimo-key-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{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: "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: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.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: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyDropdownValueComponent, decorators: [{
             type: Component,
@@ -11923,7 +11944,7 @@ class ArbitraryAmountValueComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArbitraryAmountValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArbitraryAmountValueComponent, isStandalone: true, selector: "valtimo-arbitrary-amount-value", inputs: { index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", arbitraryAmountTitles: "arbitraryAmountTitles", amountOfArbitraryValuesArray$: "amountOfArbitraryValuesArray$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.isFullWidth" } }, 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@for (_ of amountOfArbitraryValuesArray$ | async; let i = $index; track i) {\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0\">{{\n      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value ? value['' + i] : ''\"\n      [disabled]=\"disabled\"\n      (input)=\"onInputChange(i, $event.target.value)\"\n    />\n  </div>\n\n  @if (((amountOfArbitraryValuesArray$ | async) || []).length - 1 !== i) {\n    <div class=\"v-multi-input__separator\"></div>\n  }\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .process-start-modal-content{padding: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: "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: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArbitraryAmountValueComponent, isStandalone: true, selector: "valtimo-arbitrary-amount-value", inputs: { index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", arbitraryAmountTitles: "arbitraryAmountTitles", amountOfArbitraryValuesArray$: "amountOfArbitraryValuesArray$" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.isFullWidth" } }, 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@for (_ of amountOfArbitraryValuesArray$ | async; let i = $index; track i) {\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0\">{{\n      arbitraryAmountTitles ? arbitraryAmountTitles[i] : ''\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value ? value['' + i] : ''\"\n      [disabled]=\"disabled\"\n      (input)=\"onInputChange(i, $event.target.value)\"\n    />\n  </div>\n\n  @if (((amountOfArbitraryValuesArray$ | async) || []).length - 1 !== i) {\n    <div class=\"v-multi-input__separator\"></div>\n  }\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .process-start-modal-content{padding: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: "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: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArbitraryAmountValueComponent, decorators: [{
             type: Component,
@@ -11994,7 +12015,7 @@ class KeyValuePathSelectorComponent {
         this.valueChange.emit({ value: this.value, inputValue, type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyValuePathSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: KeyValuePathSelectorComponent, isStandalone: true, selector: "valtimo-key-value-path-selector", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", caseDefinitionKey: "caseDefinitionKey", prefixes: "prefixes", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input key\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [prefixes]=\"prefixes\"\n    [showCaseDefinitionSelector]=\"showCaseDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.value\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('value', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\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: "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: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: KeyValuePathSelectorComponent, isStandalone: true, selector: "valtimo-key-value-path-selector", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", caseDefinitionKey: "caseDefinitionKey", prefixes: "prefixes", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input key\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.key\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('key', $event.target.value)\"\n  />\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [prefixes]=\"prefixes\"\n    [showCaseDefinitionSelector]=\"showCaseDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.value\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('value', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\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: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KeyValuePathSelectorComponent, decorators: [{
             type: Component,
@@ -12067,7 +12088,7 @@ class ValuePathSelectorValueComponent {
         this.valueChange.emit({ value: this.value, inputValue, type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ValuePathSelectorValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", caseDefinitionKey: "caseDefinitionKey", prefixes: "prefixes", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [prefixes]=\"prefixes\"\n    [showCaseDefinitionSelector]=\"showCaseDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\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: "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: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ValuePathSelectorValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", caseDefinitionKey: "caseDefinitionKey", prefixes: "prefixes", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [prefixes]=\"prefixes\"\n    [showCaseDefinitionSelector]=\"showCaseDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:flex-end}:host.--full-width{width:100%}:host .path-selector{flex:2}\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: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorValueComponent, decorators: [{
             type: Component,
@@ -12142,7 +12163,7 @@ class ValuePathSelectorDropdownValueComponent {
         this.valueChange.emit({ value: this.value, inputValue, type });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorDropdownValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ValuePathSelectorDropdownValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", caseDefinitionKey: "caseDefinitionKey", prefixes: "prefixes", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [prefixes]=\"prefixes\"\n    [showCaseDefinitionSelector]=\"showCaseDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;align-items:flex-end}:host.--full-width{width:100%}:host .process-start-modal-content{padding: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: "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: InputModule$1 }, { kind: "component", type: i3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { 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: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ValuePathSelectorDropdownValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", caseDefinitionKey: "caseDefinitionKey", prefixes: "prefixes", showCaseDefinitionSelector: "showCaseDefinitionSelector", notation: "notation", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", disabled: "disabled", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, 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=\"v-multi-input__input path-selector\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"keyColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n  <valtimo-value-path-selector\n    [caseDefinitionKey]=\"caseDefinitionKey\"\n    [prefixes]=\"prefixes\"\n    [showCaseDefinitionSelector]=\"showCaseDefinitionSelector\"\n    [disabled]=\"disabled\"\n    [defaultValue]=\"value?.key\"\n    [notation]=\"notation\"\n    (valueChangeEvent)=\"onInputChange('key', $event)\"\n  ></valtimo-value-path-selector>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.minWidth.px]=\"dropdownWidth\"\n  [style.flex]=\"dropdownColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n  <cds-dropdown (selected)=\"onInputChange('dropdown', $event.item.id)\" [appendInline]=\"true\">\n    <cds-dropdown-list [items]=\"dropdownItems$ | async\" type=\"multi\"></cds-dropdown-list>\n  </cds-dropdown>\n</div>\n\n<div class=\"v-multi-input__separator\"></div>\n\n<div\n  class=\"v-multi-input__input\"\n  [ngClass]=\"{'--full-width': fullWidth}\"\n  [style.flex]=\"valueColumnFlex\"\n>\n  <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n  <input\n    cdsText\n    [defaultValue]=\"value.value\"\n    [disabled]=\"disabled\"\n    (input)=\"onInputChange('value', $event.target.value)\"\n  />\n</div>\n", styles: [":host{display:flex;align-items:flex-end}:host.--full-width{width:100%}:host .process-start-modal-content{padding: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: "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: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$2.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: i2$2.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "component", type: ValuePathSelectorComponent, selector: "valtimo-value-path-selector", inputs: ["name", "appendInline", "margin", "marginLg", "marginXl", "disabled", "caseDefinitionKey", "caseDefinitionVersionTag", "prefixes", "label", "tooltip", "required", "showCaseDefinitionSelector", "notation", "defaultValue", "type", "parentItem"], outputs: ["valueChangeEvent", "collectionSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValuePathSelectorDropdownValueComponent, decorators: [{
             type: Component,
@@ -12430,7 +12451,7 @@ class CarbonMultiInputComponent {
                 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]=\"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 }); }
+        ], 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: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.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,
@@ -12627,7 +12648,7 @@ class DatePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: false, selector: "v-date-picker", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", disabled: "disabled", tooltip: "tooltip", required: "required", defaultDate: "defaultDate", defaultDateIsToday: "defaultDateIsToday", smallLabel: "smallLabel", clear$: "clear$", enableTime: "enableTime", carbonTheme: "carbonTheme" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, viewQueries: [{ propertyName: "datePickerElement", first: true, predicate: ["datePickerElement"], 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<div class=\"v-date-picker-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"dateInput\"></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 #dateInput>\n  <input\n    #datePickerElement\n    cdsText\n    [ngClass]=\"{\n      'v-date-picker--full-width': fullWidthClass,\n      'v-date-picker--margin': margin,\n    }\"\n    [ngModel]=\"dateValue$ | async\"\n    [disabled]=\"disabled\"\n    [style.width.px]=\"widthPx + 20\"\n    type=\"text\"\n  />\n</ng-template>\n", styles: [".full-width{width:100%}.v-date-picker-container{display:flex;flex-direction:column}.v-date-picker{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-date-picker:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-date-picker:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-date-picker--full-width{width:100%}.v-date-picker--margin{margin-block-end:var(--v-input-margin)}\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: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatePickerComponent, isStandalone: false, selector: "v-date-picker", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", disabled: "disabled", tooltip: "tooltip", required: "required", defaultDate: "defaultDate", defaultDateIsToday: "defaultDateIsToday", smallLabel: "smallLabel", clear$: "clear$", enableTime: "enableTime", carbonTheme: "carbonTheme" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, viewQueries: [{ propertyName: "datePickerElement", first: true, predicate: ["datePickerElement"], 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<div class=\"v-date-picker-container\">\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"dateInput\"></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 #dateInput>\n  <input\n    #datePickerElement\n    cdsText\n    [ngClass]=\"{\n      'v-date-picker--full-width': fullWidthClass,\n      'v-date-picker--margin': margin,\n    }\"\n    [ngModel]=\"dateValue$ | async\"\n    [disabled]=\"disabled\"\n    [style.width.px]=\"widthPx + 20\"\n    type=\"text\"\n  />\n</ng-template>\n", styles: [".full-width{width:100%}.v-date-picker-container{display:flex;flex-direction:column}.v-date-picker{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-date-picker:focus{outline:var(--v-input-focus-border);outline-offset:var(--v-outline-offset)}.v-date-picker:disabled{color:var(--v-input-font-color-disabled);cursor:var(--v-input-disabled-cursor)}.v-date-picker--full-width{width:100%}.v-date-picker--margin{margin-block-end:var(--v-input-margin)}\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: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -12848,13 +12869,13 @@ class MultiInputFormComponent {
             this.valueChange.emit(values);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiInputFormComponent, deps: [{ token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiInputFormComponent, isStandalone: false, selector: "v-multi-input-form", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange", deleteRowEvent: "deleteRowEvent" }, 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=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: initialDefaultValues$ | defaultValue: value.uuid | async,\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <cds-icon-button\n            (click)=\"toggleRow(value.uuid, value.expanded)\"\n            size=\"sm\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          >\n            <svg\n              [cdsIcon]=\"value.expanded === true ? 'chevron--up' : 'chevron--down'\"\n              size=\"16\"\n            ></svg>\n          </cds-icon-button>\n        </div>\n\n        <div class=\"v-multi-input__delete-button\">\n          <cds-icon-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            (click)=\"deleteRow(value.uuid)\"\n            size=\"sm\"\n            kind=\"danger\"\n            [title]=\"vars.deleteRowText\"\n          >\n            <svg cdsIcon=\"close\" size=\"16\"></svg>\n          </cds-icon-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        cdsButton\n        (click)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        <svg cdsIcon=\"add\" size=\"16\"></svg>\n\n        {{ vars.addRowText }}\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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: 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: "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: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { 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" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DefaultValuePipe, name: "defaultValue" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiInputFormComponent, deps: [{ token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MultiInputFormComponent, isStandalone: false, selector: "v-multi-input-form", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", formTemplate: "formTemplate" }, outputs: { valueChange: "valueChange", deleteRowEvent: "deleteRowEvent" }, 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=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: initialDefaultValues$ | defaultValue: value.uuid | async,\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <cds-icon-button\n            (click)=\"toggleRow(value.uuid, value.expanded)\"\n            size=\"sm\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          >\n            <svg\n              [cdsIcon]=\"value.expanded === true ? 'chevron--up' : 'chevron--down'\"\n              size=\"16\"\n            ></svg>\n          </cds-icon-button>\n        </div>\n\n        <div class=\"v-multi-input__delete-button\">\n          <cds-icon-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            (click)=\"deleteRow(value.uuid)\"\n            size=\"sm\"\n            kind=\"danger\"\n            [title]=\"vars.deleteRowText\"\n          >\n            <svg cdsIcon=\"close\" size=\"16\"></svg>\n          </cds-icon-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        cdsButton\n        (click)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        <svg cdsIcon=\"add\" size=\"16\"></svg>\n\n        {{ vars.addRowText }}\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "tooltipTranslationKey", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$2.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: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DefaultValuePipe, name: "defaultValue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiInputFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-multi-input-form', 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=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\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>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\" #rows>\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; let i = index\"\n    >\n      <div\n        class=\"full-width\"\n        [ngClass]=\"{'v-multi-input__row-form--invisible': value.expanded === false}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            formTemplate;\n            context: {\n              index: i,\n              changeFunction: formValueChange,\n              uuid: value.uuid,\n              prefill: initialDefaultValues$ | defaultValue: value.uuid | async,\n            }\n          \"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"value.expanded === false\">\n        <v-paragraph>{{ getFirstValue(value) }}</v-paragraph>\n      </div>\n      <div class=\"v-multi-input__buttons\">\n        <div class=\"v-multi-input__toggle-button\">\n          <cds-icon-button\n            (click)=\"toggleRow(value.uuid, value.expanded)\"\n            size=\"sm\"\n            [title]=\"\n              value.expanded ? ('interface.collapse' | translate) : ('interface.expand' | translate)\n            \"\n          >\n            <svg\n              [cdsIcon]=\"value.expanded === true ? 'chevron--up' : 'chevron--down'\"\n              size=\"16\"\n            ></svg>\n          </cds-icon-button>\n        </div>\n\n        <div class=\"v-multi-input__delete-button\">\n          <cds-icon-button\n            [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n            (click)=\"deleteRow(value.uuid)\"\n            size=\"sm\"\n            kind=\"danger\"\n            [title]=\"vars.deleteRowText\"\n          >\n            <svg cdsIcon=\"close\" size=\"16\"></svg>\n          </cds-icon-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        cdsButton\n        (click)=\"addRow()\"\n        [title]=\"vars.addRowText\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        <svg cdsIcon=\"add\" size=\"16\"></svg>\n\n        {{ vars.addRowText }}\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:center;justify-content:space-between;margin-block-end:var(--v-multi-input-row-spacing-block);border:var(--v-multi-input-form-border);padding-block-start:var(--v-multi-input-padding);padding-block-end:var(--v-multi-input-padding);padding-inline-start:var(--v-multi-input-padding);padding-inline-end:var(--v-multi-input-padding);background-color:var(--v-multi-input-form-bg-color)}.v-multi-input__delete-button{align-self:flex-start}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__row-form--invisible{display:none}.v-multi-input__buttons{display:flex;align-items:center;justify-content:center;align-self:flex-start}.v-multi-input__toggle-button{margin-inline-end:var(--v-multi-input-button-spacing)}\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: { name: [{
+        }], ctorParameters: () => [{ type: i2$2.IconService }], propDecorators: { name: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -12963,7 +12984,7 @@ class RadioComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: RadioComponent, isStandalone: false, selector: "v-radio", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", radioValues: "radioValues" }, outputs: { valueChange: "valueChange" }, 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=\"v-input-container\"\n  [ngClass]=\"{\n    'v-input--margin': margin,\n    'v-input--small-margin': smallMargin,\n  }\"\n  (click)=\"stopRadioEventPropagation($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"radioInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #radioInput>\n  <cds-radio-group\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"radioValue$ | async\"\n    (ngModelChange)=\"onValueChange($event)\"\n  >\n    <cds-radio *ngFor=\"let radio of radioValues\" [value]=\"radio.value\" [disabled]=\"radio.disabled\">\n      {{ radio.titleTranslationKey ? (radio.titleTranslationKey | translate) : radio.title }}\n    </cds-radio>\n  </cds-radio-group>\n</ng-template>\n", styles: [".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)}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i3.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { 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: RadioComponent, isStandalone: false, selector: "v-radio", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", defaultValue: "defaultValue", widthPx: "widthPx", fullWidth: "fullWidth", margin: "margin", smallMargin: "smallMargin", disabled: "disabled", tooltip: "tooltip", required: "required", smallLabel: "smallLabel", rows: "rows", clear$: "clear$", radioValues: "radioValues" }, outputs: { valueChange: "valueChange" }, 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=\"v-input-container\"\n  [ngClass]=\"{\n    'v-input--margin': margin,\n    'v-input--small-margin': smallMargin,\n  }\"\n  (click)=\"stopRadioEventPropagation($event)\"\n>\n  <ng-container *ngTemplateOutlet=\"inputTitle\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"radioInput\"></ng-container>\n</div>\n\n<ng-template #inputTitle>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n    [small]=\"smallLabel\"\n  >\n  </v-input-label>\n</ng-template>\n\n<ng-template #radioInput>\n  <cds-radio-group\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    [ngModel]=\"radioValue$ | async\"\n    (ngModelChange)=\"onValueChange($event)\"\n  >\n    <cds-radio *ngFor=\"let radio of radioValues\" [value]=\"radio.value\" [disabled]=\"radio.disabled\">\n      {{ radio.titleTranslationKey ? (radio.titleTranslationKey | translate) : radio.title }}\n    </cds-radio>\n  </cds-radio-group>\n</ng-template>\n", styles: [".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)}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: i2$2.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i2$2.RadioGroup, selector: "cds-radio-group, ibm-radio-group", inputs: ["selected", "value", "name", "disabled", "skeleton", "orientation", "labelPlacement", "legend", "ariaLabel", "ariaLabelledby", "helperText", "invalid", "invalidText", "warn", "warnText"], outputs: ["change"] }, { 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: RadioComponent, decorators: [{
             type: Component,
@@ -13163,7 +13184,6 @@ class SearchFieldsComponent {
         });
     }
     set defaultValues(value) {
-        console.log({ value });
         this._defaultValues = value;
         this.setDefaultValues();
     }
@@ -13191,6 +13211,7 @@ class SearchFieldsComponent {
         }));
         this.expanded$ = new BehaviorSubject(false);
         this.clear$ = new Subject();
+        this.isSearchEmpty$ = this.values$.pipe(map((searchFieldValues) => !Object.values(searchFieldValues).some((value) => !!value)));
         this._subscriptions = new Subscription();
         this.BOOLEAN_POSITIVE = 'booleanPositive';
         this.BOOLEAN_NEGATIVE = 'booleanNegative';
@@ -13215,6 +13236,7 @@ class SearchFieldsComponent {
         this.setDefaultValues();
     }
     ngOnDestroy() {
+        this.collapse();
         this._subscriptions.unsubscribe();
     }
     singleValueChange(searchFieldKey, value, isDateTime) {
@@ -13344,19 +13366,21 @@ class SearchFieldsComponent {
         this.expanded$.next(true);
     }
     setDefaultValues() {
-        if (this.defaultValues && typeof this.defaultValues === 'object') {
+        if (this.defaultValues &&
+            typeof this.defaultValues === 'object' &&
+            !!Object.keys(this.defaultValues).length) {
             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", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i3$1.DocumentService }, { token: i1.TranslateService }, { token: i2$2.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", disableSaveSearch: "disableSaveSearch", 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<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\n    class=\"buttons-container\"\n    *ngIf=\"\n      !noSearchFields && {expanded: expanded$ | async, isSearchEmpty: isSearchEmpty$ | async} as obs\n    \"\n  >\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        [disabled]=\"disableSaveSearch && obs.isSearchEmpty\"\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: i2$2.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: i2$2.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$2.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i2$2.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$2.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 && 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: [{
+            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<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\n    class=\"buttons-container\"\n    *ngIf=\"\n      !noSearchFields && {expanded: expanded$ | async, isSearchEmpty: isSearchEmpty$ | async} as obs\n    \"\n  >\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        [disabled]=\"disableSaveSearch && obs.isSearchEmpty\"\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$1.DocumentService }, { type: i1.TranslateService }, { type: i2$2.IconService }], propDecorators: { loading: [{
                 type: Input
             }], searchFields: [{
                 type: Input
@@ -13368,6 +13392,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], defaultValues: [{
                 type: Input
+            }], disableSaveSearch: [{
+                type: Input
             }], inputDisabled: [{
                 type: Input
             }], externalSearchField: [{
@@ -13863,7 +13889,7 @@ class ConfirmationModalComponent {
         this.optionalEvent.emit(this.outputOnOptional);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ConfirmationModalComponent, isStandalone: false, selector: "valtimo-confirmation-modal", inputs: { titleTranslationKey: "titleTranslationKey", title: "title", content: "content", contentTranslationKey: "contentTranslationKey", confirmButtonText: "confirmButtonText", confirmButtonTextTranslationKey: "confirmButtonTextTranslationKey", confirmButtonType: "confirmButtonType", showOptionalButton: "showOptionalButton", optionalButtonText: "optionalButtonText", optionalButtonTextTranslationKey: "optionalButtonTextTranslationKey", optionalButtonType: "optionalButtonType", cancelButtonText: "cancelButtonText", cancelButtonTextTranslationKey: "cancelButtonTextTranslationKey", cancelButtonType: "cancelButtonType", showModalSubject$: "showModalSubject$", outputOnConfirm: "outputOnConfirm", outputOnOptional: "outputOnOptional", spacerAfterCancelButton: "spacerAfterCancelButton" }, outputs: { confirmEvent: "confirmEvent", optionalEvent: "optionalEvent", cancelEvent: "cancelEvent" }, 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  [open]=\"modalOpen$ | async\"\n  *ngIf=\"{\n    deleteTranslation: 'interface.delete' | translate,\n    deleteConfirmationTranslation: 'interface.deleteConfirmation' | translate,\n    cancelTranslation: 'interface.cancel' | translate,\n    titleTranslation: titleTranslationKey | translate,\n    contentTranslation: contentTranslationKey | translate,\n    confirmButtonTranslation: confirmButtonTextTranslationKey | translate,\n    cancelButtonTranslation: cancelButtonTextTranslationKey | translate,\n    optionalButtonTranslation: optionalButtonTextTranslationKey | translate,\n  } as obs\"\n  (close)=\"closeModal()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n\n    <div class=\"modal-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        data-testid=\"confirmation-modal-close\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"cancelButtonType\"\n        (click)=\"closeModal()\"\n      >\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <div *ngIf=\"spacerAfterCancelButton\" class=\"modal-spacer\"></div>\n      <button\n        *ngIf=\"showOptionalButton\"\n        data-testid=\"confirmation-modal-optional\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"optionalButtonType\"\n        (click)=\"onOptional()\"\n      >\n        {{\n          (optionalButtonTextTranslationKey !== obs.optionalButtonTranslation\n            ? obs.optionalButtonTranslation\n            : '') ||\n            optionalButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n      <button\n        data-testid=\"confirmation-modal-confirm\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"confirmButtonType\"\n        (click)=\"onConfirm()\"\n      >\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".modal-spacer{flex:0 1 50%}.modal-body-content{margin-top: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { 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: ConfirmationModalComponent, isStandalone: false, selector: "valtimo-confirmation-modal", inputs: { titleTranslationKey: "titleTranslationKey", title: "title", content: "content", contentTranslationKey: "contentTranslationKey", confirmButtonText: "confirmButtonText", confirmButtonTextTranslationKey: "confirmButtonTextTranslationKey", confirmButtonType: "confirmButtonType", showOptionalButton: "showOptionalButton", optionalButtonText: "optionalButtonText", optionalButtonTextTranslationKey: "optionalButtonTextTranslationKey", optionalButtonType: "optionalButtonType", cancelButtonText: "cancelButtonText", cancelButtonTextTranslationKey: "cancelButtonTextTranslationKey", cancelButtonType: "cancelButtonType", showModalSubject$: "showModalSubject$", outputOnConfirm: "outputOnConfirm", outputOnOptional: "outputOnOptional", spacerAfterCancelButton: "spacerAfterCancelButton" }, outputs: { confirmEvent: "confirmEvent", optionalEvent: "optionalEvent", cancelEvent: "cancelEvent" }, 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  [open]=\"modalOpen$ | async\"\n  *ngIf=\"{\n    deleteTranslation: 'interface.delete' | translate,\n    deleteConfirmationTranslation: 'interface.deleteConfirmation' | translate,\n    cancelTranslation: 'interface.cancel' | translate,\n    titleTranslation: titleTranslationKey | translate,\n    contentTranslation: contentTranslationKey | translate,\n    confirmButtonTranslation: confirmButtonTextTranslationKey | translate,\n    cancelButtonTranslation: cancelButtonTextTranslationKey | translate,\n    optionalButtonTranslation: optionalButtonTextTranslationKey | translate,\n  } as obs\"\n  (close)=\"closeModal()\"\n>\n  <cds-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 cdsModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </cds-modal-header>\n\n  <section cdsModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n\n    <div class=\"modal-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </section>\n\n  <cds-modal-footer>\n    <ng-container>\n      <button\n        data-testid=\"confirmation-modal-close\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"cancelButtonType\"\n        (click)=\"closeModal()\"\n      >\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <div *ngIf=\"spacerAfterCancelButton\" class=\"modal-spacer\"></div>\n      <button\n        *ngIf=\"showOptionalButton\"\n        data-testid=\"confirmation-modal-optional\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"optionalButtonType\"\n        (click)=\"onOptional()\"\n      >\n        {{\n          (optionalButtonTextTranslationKey !== obs.optionalButtonTranslation\n            ? obs.optionalButtonTranslation\n            : '') ||\n            optionalButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n      <button\n        data-testid=\"confirmation-modal-confirm\"\n        [attr.modal-primary-focus]=\"true\"\n        [cdsButton]=\"confirmButtonType\"\n        (click)=\"onConfirm()\"\n      >\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </cds-modal-footer>\n</cds-modal>\n", styles: [".modal-spacer{flex:0 1 50%}.modal-body-content{margin-top: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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]", inputs: ["minContentHeight"] }, { 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: ConfirmationModalComponent, decorators: [{
             type: Component,
@@ -13965,7 +13991,7 @@ class ExpansionPanelComponent {
         this.open$.next(!this.open$.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ExpansionPanelComponent, isStandalone: false, selector: "valtimo-expansion-panel-component", inputs: { hideAboveFoldWhenExpanded: "hideAboveFoldWhenExpanded" }, host: { listeners: { "click": "clickInside()" } }, 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-expandable-tile>\n  <div\n    [hidden]=\"hideAboveFoldWhenExpanded && (open$ | async) === true\"\n    class=\"cds--tile-content__above-the-fold above-fold\"\n  >\n    <ng-content select=\"[collapsed]\"></ng-content>\n  </div>\n  <div class=\"cds--tile-content__below-the-fold below-fold\">\n    <ng-content select=\"[expanded]\"></ng-content>\n  </div>\n</cds-expandable-tile>\n", styles: ["/*!\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: "component", type: i3.ExpandableTile, selector: "cds-expandable-tile, ibm-expandable-tile", inputs: ["theme", "expanded", "interactive", "translations"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ExpansionPanelComponent, isStandalone: false, selector: "valtimo-expansion-panel-component", inputs: { hideAboveFoldWhenExpanded: "hideAboveFoldWhenExpanded" }, host: { listeners: { "click": "clickInside()" } }, 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-expandable-tile>\n  <div\n    [hidden]=\"hideAboveFoldWhenExpanded && (open$ | async) === true\"\n    class=\"cds--tile-content__above-the-fold above-fold\"\n  >\n    <ng-content select=\"[collapsed]\"></ng-content>\n  </div>\n  <div class=\"cds--tile-content__below-the-fold below-fold\">\n    <ng-content select=\"[expanded]\"></ng-content>\n  </div>\n</cds-expandable-tile>\n", styles: ["/*!\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: "component", type: i2$2.ExpandableTile, selector: "cds-expandable-tile, ibm-expandable-tile", inputs: ["theme", "expanded", "interactive", "translations"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
@@ -14433,7 +14459,7 @@ class StatusSelectorComponent {
         });
     }
     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", 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 }); }
+    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: i2$2.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: i2$2.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: i2$2.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: i2$2.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: i2$2.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,
@@ -14663,13 +14689,13 @@ class TableComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, deps: [{ token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\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.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: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, deps: [{ token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TableComponent, isStandalone: false, selector: "v-table", inputs: { items: "items", columns: "columns", loading: "loading", showEditButtons: "showEditButtons", showPagination: "showPagination", editButtonTranslationKey: "editButtonTranslationKey", itemsTranslationKey: "itemsTranslationKey", noResultsTranslationKey: "noResultsTranslationKey", mobileBreakpointPx: "mobileBreakpointPx", amountOfLoadingRows: "amountOfLoadingRows", collectionSize: "collectionSize", page: "page", size: "size" }, outputs: { editButtonClicked: "editButtonClicked", paginationSizeSet: "paginationSizeSet", paginationPageSet: "paginationPageSet" }, 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\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.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: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "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: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-table', 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=\"{items: items$ | async} as obs\">\n  <div class=\"v-table-container\">\n    <table class=\"v-table\">\n      <ng-container *ngTemplateOutlet=\"tableHead\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBody; context: {tableItems: obs.items}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableBodyLoading\"></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"tableBodyNoResults; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </table>\n    <ng-container *ngIf=\"showPagination\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationContainer; context: {tableItems: obs.items}\"\n      ></ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<ng-template #tableHead>\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th class=\"v-table__header\" *ngFor=\"let column of columns\">\n        {{ column.labelTranslationKey | translate }}\n      </th>\n      <th *ngIf=\"showEditButtons\" class=\"v-table__header\"></th>\n    </tr>\n  </thead>\n</ng-template>\n\n<ng-template #tableBody let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length > 0\">\n    <tr *ngFor=\"let item of tableItems\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCell; context: {item: item}\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCell; context: {item: item}\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableBodyNoResults let-tableItems=\"tableItems\">\n  <tbody class=\"v-table__body\" *ngIf=\"!loading && tableItems && tableItems?.length === 0\">\n    <tr class=\"v-table__row\">\n      <td class=\"v-table__cell\" *ngFor=\"let column of columns; let i = index\">\n        <span *ngIf=\"i === 0\" class=\"v-table__cell-content\">\n          {{\n            noResultsTranslationKey\n              ? (noResultsTranslationKey | translate)\n              : ('interface.noResults' | translate)\n          }}\n        </span>\n      </td>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCell let-item=\"item\">\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\">\n      {{ item[column.dataKey] }}\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCell let-item=\"item\">\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" (click)=\"editButtonClicked.emit(item)\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #tableBodyLoading>\n  <tbody class=\"v-table__body\" *ngIf=\"loading\">\n    <tr *ngFor=\"let item of getArrayOfLength(amountOfLoadingRows)\" class=\"v-table__row\">\n      <ng-container *ngTemplateOutlet=\"tableCellLoading\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"tableEditButtonCellLoading\"></ng-container>\n    </tr>\n  </tbody>\n</ng-template>\n\n<ng-template #tableCellLoading>\n  <td *ngFor=\"let column of columns\" class=\"v-table__cell\">\n    <span class=\"v-table__cell-content\"\n      ><ngx-skeleton-loader\n        appearance=\"line\"\n        [theme]=\"{\n          width: 'var(--v-table-loading-skeleton-width)',\n          height: 'var(--v-table-loading-skeleton-line-height)',\n          margin: '0',\n          'background-color': 'var(--v-table-loading-skeleton-bg-color)',\n        }\"\n      ></ngx-skeleton-loader\n    ></span>\n  </td>\n</ng-template>\n\n<ng-template #tableEditButtonCellLoading>\n  <td *ngIf=\"showEditButtons\" class=\"v-table__cell v-table__cell--with-button\">\n    <span class=\"v-table__cell-button-container\">\n      <button cdsButton=\"secondary\" [disabled]=\"true\">\n        {{ editButtonTranslationKey || 'interface.edit' | translate }}\n      </button>\n    </span>\n  </td>\n</ng-template>\n\n<ng-template #paginationContainer let-tableItems=\"tableItems\">\n  <div *ngIf=\"pagination$ | async as paginationObject\" class=\"v-table__pagination-container\">\n    <div class=\"v-table__pagination-size-container\">\n      <ng-container\n        *ngTemplateOutlet=\"paginationSizeSelect; context: {paginationObject: paginationObject}\"\n      ></ng-container>\n      <ng-container\n        *ngTemplateOutlet=\"\n          paginationSizeAmountText;\n          context: {paginationObject: paginationObject, tableItems: tableItems}\n        \"\n      ></ng-container>\n    </div>\n    <ng-container\n      *ngTemplateOutlet=\"paginationNavigation; context: {paginationObject: paginationObject}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #paginationSizeSelect let-paginationObject=\"paginationObject\">\n  <span class=\"v-table__pagination-size-text\">{{ 'interface.show' | translate }}</span>\n  <span class=\"v-table__pagination-size-select\">\n    <v-select\n      [items]=\"paginationOptions\"\n      [clearable]=\"false\"\n      [defaultSelection]=\"(defaultPaginationSize$ | async) || paginationOptions[0]\"\n      [disabled]=\"loading\"\n      (selectedChange)=\"setPaginationSize($event)\"\n    ></v-select>\n  </span>\n  <span class=\"v-table__pagination-size-text\">{{\n    itemsTranslationKey ? (itemsTranslationKey | translate) : ('interface.items' | translate)\n  }}</span>\n</ng-template>\n\n<ng-template\n  #paginationSizeAmountText\n  let-paginationObject=\"paginationObject\"\n  let-tableItems=\"tableItems\"\n>\n  <ng-container *ngTemplateOutlet=\"paginationSizeAmountTextLoading\"></ng-container>\n  <span\n    class=\"v-table__pagination-amount-text\"\n    *ngIf=\"!loading && tableItems && paginationObject\"\n    >{{\n      tableItems.length +\n        ' ' +\n        ('interface.of' | translate) +\n        ' ' +\n        paginationObject.collectionSize +\n        ' ' +\n        (itemsTranslationKey\n          ? (itemsTranslationKey | translate)\n          : ('interface.items' | translate)) +\n        ' ' +\n        ('interface.visible' | translate)\n    }}</span\n  >\n</ng-template>\n\n<ng-template #paginationSizeAmountTextLoading>\n  <span class=\"v-table__pagination-amount-text\" *ngIf=\"loading\"\n    ><ngx-skeleton-loader\n      appearance=\"line\"\n      [theme]=\"{\n        width: 'var(--v-table-loading-skeleton-width)',\n        height: 'var(--v-table-loading-skeleton-line-height)',\n        margin: '0',\n        'background-color': 'var(--v-table-loading-skeleton-pagination-size-bg-color)',\n      }\"\n    ></ngx-skeleton-loader\n  ></span>\n</ng-template>\n\n<ng-template #paginationNavigation let-paginationObject=\"paginationObject\">\n  <div\n    class=\"v-table__pagination-navigation-container\"\n    *ngIf=\"paginationObject && paginationObject.collectionSize > paginationObject.size\"\n  >\n    <span *ngIf=\"paginationObject.page > 1\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('previous')\" [disabled]=\"loading\">\n        {{ 'interface.previous' | translate }}\n      </button>\n    </span>\n\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <button cdsButton=\"ghost\" (click)=\"setPage('next')\" [disabled]=\"loading\">\n        {{ 'interface.nextArrow' | translate }}\n      </button>\n    </span>\n  </div>\n</ng-template>\n", styles: [".v-table-container{width:100%;display:flex;flex-direction:column}.v-table{width:100%;border-spacing:var(--v-table-border-spacing);table-layout:var(--v-table-layout)}.v-table__header{color:var(--v-table-header-font-color);text-transform:var(--v-table-header-text-transform);font-size:var(--v-table-header-font-size);font-weight:var(--v-table-header-font-weight);letter-spacing:var(--v-table-header-letter-spacing);padding-block-end:var(--v-table-header-padding-block-end);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline)}.v-table__header:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__body{outline:var(--v-table-body-border);border-radius:var(--v-border-radius-md)}.v-table__row{border-bottom:var(--v-table-row-bottom-border)}.v-table__row:first-child .v-table__cell:first-child{border-top-left-radius:var(--v-border-radius-md)}.v-table__row:first-child .v-table__cell:last-child{border-top-right-radius:var(--v-border-radius-md)}.v-table__row:last-child{border-bottom:none}.v-table__row:last-child .v-table__cell:first-child{border-bottom-left-radius:var(--v-border-radius-md)}.v-table__row:last-child .v-table__cell:last-child{border-bottom-right-radius:var(--v-border-radius-md)}.v-table__cell{padding-block-start:var(--v-table-cell-padding-block);padding-block-end:var(--v-table-cell-padding-block);padding-inline-start:var(--v-table-cell-padding-inline);padding-inline-end:var(--v-table-cell-padding-inline);background-color:var(--v-table-background-color);font-size:var(--v-font-size-smaller);font-weight:var(--v-font-weight-bold);line-height:var(--v-line-height-smaller);width:var(--v-table-cell-width)}.v-table__cell:first-child{padding-inline-start:var(--v-table-first-cell-padding-inline-start)}.v-table__cell-content{display:flex;color:var(--v-table-cell-font-color);padding-block-start:var(--v-table-cell-content-padding-block);padding-block-end:var(--v-table-cell-content-padding-block)}.v-table__cell--with-button{width:.1%;white-space:nowrap}.v-table__cell-button-container{display:flex}ngx-skeleton-loader{display:flex}.v-table__pagination-container{display:flex;width:100%;flex-direction:row;justify-content:space-between;margin-block-start:var(--v-table-pagination-margin-block)}.v-table__pagination-size-container{display:flex;flex-direction:row;align-items:center}.v-table__pagination-size-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-size-spacing-inline)}.v-table__pagination-size-text{color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-size-text-font-weight)}.v-table__pagination-size-select{display:flex}.v-table__pagination-amount-text{margin-inline-start:var(--v-table-pagination-amount-text-margin-inline);color:var(--v-table-pagination-size-text-color);font-size:var(--v-table-pagination-size-text-font-size);font-weight:var(--v-table-pagination-amount-text-font-weight)}.v-table__pagination-navigation-container{display:flex;flex-direction:row}.v-table__pagination-navigation-container span:not(:last-child){margin-inline-end:var(--v-table-pagination-button-spacing-inline)}\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$1.BreakpointObserver }], propDecorators: { items: [{
+        }], ctorParameters: () => [{ type: i3.BreakpointObserver }], propDecorators: { items: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -14798,13 +14824,13 @@ class VModalComponent {
     setAppearingDelayInService() {
         this.modalService.setAppearingDelay(this.appearingDelayMs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VModalComponent, deps: [{ token: ModalService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: VModalComponent, isStandalone: false, selector: "v-modal", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx", hideFooter: "hideFooter", parentId: "parentId" }, 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<ng-container\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n    mouseInsideModal: mouseInsideModal$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-modal-backdrop\"\n    [ngClass]=\"{\n      'v-modal-backdrop--visible': obs.visible || obs.disappearing,\n      'v-modal-backdrop--backdrop': obs.showBackdrop,\n      'v-modal-backdrop--hidden': !obs.visible,\n      'v-modal-backdrop--appearing': obs.appearing,\n      'v-modal-backdrop--disappearing': obs.disappearing,\n      'v-modal-backdrop--mouse-on-backdrop': !obs.mouseInsideModal,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div\n    class=\"v-modal\"\n    (mouseenter)=\"modalMouseEnter()\"\n    (mouseleave)=\"modalMouseLeave()\"\n    [style.max-width.px]=\"maxWidthPx\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalFooter\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-modal__header\">\n    <ng-content select=\"div[role=header]\"></ng-content>\n    <div class=\"v-modal__header-overflow\">\n      <div class=\"v-modal__header-overflow-gradient\"></div>\n      <div class=\"v-modal__header-overflow-bg\"></div>\n    </div>\n    <div class=\"v-modal__header-buttons\">\n      <button cdsButton=\"ghost\" iconOnly=\"true\" (click)=\"closeModal()\" size=\"sm\">\n        <svg cdsIcon=\"close\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-modal__content\">\n    <ng-content select=\"div[role=content]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter>\n  <div class=\"v-modal__footer\" [ngClass]=\"{'v-modal__footer--hidden': hideFooter}\">\n    <ng-content select=\"div[role=footer]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".v-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-modal-z-index);background-color:var(--v-color-backdrop-transparant);backdrop-filter:blur(0);transition:var(--v-modal-backdrop-transition);display:none;cursor:var(--v-modal-backdrop-cursor);padding-inline-start:var(--v-modal-backdrop-padding-inline);padding-inline-end:var(--v-modal-backdrop-padding-inline);padding-block-start:var(--v-modal-backdrop-padding-block);padding-block-end:var(--v-modal-backdrop-padding-block)}.v-modal-backdrop--visible,.v-modal-backdrop--disappearing{display:flex;align-items:center;justify-content:flex-end}.v-modal{position:relative;right:-100%;background-color:var(--v-modal-background-color);height:100%;min-height:var(--v-modal-min-height);max-height:100%;width:100%;max-width:var(--v-modal-max-width);opacity:0;transition:var(--v-modal-transition);cursor:var(--v-modal-cursor);border-radius:var(--v-modal-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-modal-box-shadow)}.v-modal-backdrop--backdrop{background-color:var(--v-modal-backdrop-color);backdrop-filter:var(--v-modal-backdrop-filter)}.v-modal-backdrop--backdrop .v-modal{right:0;opacity:1}.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--disappearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--appearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:hover{background-color:var(--v-modal-backdrop-color-hover);backdrop-filter:var(--v-modal-backdrop-filter-hover)}.v-modal-backdrop--hidden,.v-modal-backdrop--appearing{cursor:var(--v-modal-backdrop-cursor-disappearing)}.v-modal__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-modal-header-bg-color);padding-block-start:var(--v-modal-header-padding-block);padding-block-end:var(--v-modal-header-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-bottom:var(--v-modal-header-border);min-height:var(--v-modal-header-min-height);box-sizing:content-box}.v-modal__header-buttons{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block)}.v-modal__header-overflow{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block);height:calc(100% - var(--v-modal-header-padding-block) - var(--v-modal-header-padding-block));display:flex;flex-direction:row}.v-modal__header-overflow-gradient{width:var(--v-modal-header-overflow-gradient-width);height:100%;background-image:var(--v-modal-header-overflow-gradient-bg-image)}.v-modal__header-overflow-bg{width:var(--v-modal-header-overflow-width);height:100%;background-color:var(--v-modal-header-bg-color)}.v-modal__footer{display:flex;flex-shrink:0;background-color:var(--v-modal-footer-bg-color);padding-block-start:var(--v-modal-footer-padding-block);padding-block-end:var(--v-modal-footer-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-top:var(--v-modal-footer-border)}.v-modal__footer--hidden{display:none}.v-modal__content{height:100%;padding-block-start:var(--v-modal-content-padding-block-start);padding-block-end:var(--v-modal-content-padding-block-end);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);overflow:auto}::ng-deep .v-modal div[role=header],::ng-deep .v-modal div[role=content],::ng-deep .v-modal div[role=footer]{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: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: VModalComponent, deps: [{ token: ModalService }, { token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: VModalComponent, isStandalone: false, selector: "v-modal", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx", hideFooter: "hideFooter", parentId: "parentId" }, 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<ng-container\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n    mouseInsideModal: mouseInsideModal$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-modal-backdrop\"\n    [ngClass]=\"{\n      'v-modal-backdrop--visible': obs.visible || obs.disappearing,\n      'v-modal-backdrop--backdrop': obs.showBackdrop,\n      'v-modal-backdrop--hidden': !obs.visible,\n      'v-modal-backdrop--appearing': obs.appearing,\n      'v-modal-backdrop--disappearing': obs.disappearing,\n      'v-modal-backdrop--mouse-on-backdrop': !obs.mouseInsideModal,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div\n    class=\"v-modal\"\n    (mouseenter)=\"modalMouseEnter()\"\n    (mouseleave)=\"modalMouseLeave()\"\n    [style.max-width.px]=\"maxWidthPx\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalFooter\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-modal__header\">\n    <ng-content select=\"div[role=header]\"></ng-content>\n    <div class=\"v-modal__header-overflow\">\n      <div class=\"v-modal__header-overflow-gradient\"></div>\n      <div class=\"v-modal__header-overflow-bg\"></div>\n    </div>\n    <div class=\"v-modal__header-buttons\">\n      <button cdsButton=\"ghost\" iconOnly=\"true\" (click)=\"closeModal()\" size=\"sm\">\n        <svg cdsIcon=\"close\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-modal__content\">\n    <ng-content select=\"div[role=content]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter>\n  <div class=\"v-modal__footer\" [ngClass]=\"{'v-modal__footer--hidden': hideFooter}\">\n    <ng-content select=\"div[role=footer]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".v-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-modal-z-index);background-color:var(--v-color-backdrop-transparant);backdrop-filter:blur(0);transition:var(--v-modal-backdrop-transition);display:none;cursor:var(--v-modal-backdrop-cursor);padding-inline-start:var(--v-modal-backdrop-padding-inline);padding-inline-end:var(--v-modal-backdrop-padding-inline);padding-block-start:var(--v-modal-backdrop-padding-block);padding-block-end:var(--v-modal-backdrop-padding-block)}.v-modal-backdrop--visible,.v-modal-backdrop--disappearing{display:flex;align-items:center;justify-content:flex-end}.v-modal{position:relative;right:-100%;background-color:var(--v-modal-background-color);height:100%;min-height:var(--v-modal-min-height);max-height:100%;width:100%;max-width:var(--v-modal-max-width);opacity:0;transition:var(--v-modal-transition);cursor:var(--v-modal-cursor);border-radius:var(--v-modal-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-modal-box-shadow)}.v-modal-backdrop--backdrop{background-color:var(--v-modal-backdrop-color);backdrop-filter:var(--v-modal-backdrop-filter)}.v-modal-backdrop--backdrop .v-modal{right:0;opacity:1}.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--disappearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--appearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:hover{background-color:var(--v-modal-backdrop-color-hover);backdrop-filter:var(--v-modal-backdrop-filter-hover)}.v-modal-backdrop--hidden,.v-modal-backdrop--appearing{cursor:var(--v-modal-backdrop-cursor-disappearing)}.v-modal__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-modal-header-bg-color);padding-block-start:var(--v-modal-header-padding-block);padding-block-end:var(--v-modal-header-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-bottom:var(--v-modal-header-border);min-height:var(--v-modal-header-min-height);box-sizing:content-box}.v-modal__header-buttons{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block)}.v-modal__header-overflow{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block);height:calc(100% - var(--v-modal-header-padding-block) - var(--v-modal-header-padding-block));display:flex;flex-direction:row}.v-modal__header-overflow-gradient{width:var(--v-modal-header-overflow-gradient-width);height:100%;background-image:var(--v-modal-header-overflow-gradient-bg-image)}.v-modal__header-overflow-bg{width:var(--v-modal-header-overflow-width);height:100%;background-color:var(--v-modal-header-bg-color)}.v-modal__footer{display:flex;flex-shrink:0;background-color:var(--v-modal-footer-bg-color);padding-block-start:var(--v-modal-footer-padding-block);padding-block-end:var(--v-modal-footer-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-top:var(--v-modal-footer-border)}.v-modal__footer--hidden{display:none}.v-modal__content{height:100%;padding-block-start:var(--v-modal-content-padding-block-start);padding-block-end:var(--v-modal-content-padding-block-end);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);overflow:auto}::ng-deep .v-modal div[role=header],::ng-deep .v-modal div[role=content],::ng-deep .v-modal div[role=footer]{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: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$2.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: VModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-modal', 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\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n    mouseInsideModal: mouseInsideModal$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-modal-backdrop\"\n    [ngClass]=\"{\n      'v-modal-backdrop--visible': obs.visible || obs.disappearing,\n      'v-modal-backdrop--backdrop': obs.showBackdrop,\n      'v-modal-backdrop--hidden': !obs.visible,\n      'v-modal-backdrop--appearing': obs.appearing,\n      'v-modal-backdrop--disappearing': obs.disappearing,\n      'v-modal-backdrop--mouse-on-backdrop': !obs.mouseInsideModal,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div\n    class=\"v-modal\"\n    (mouseenter)=\"modalMouseEnter()\"\n    (mouseleave)=\"modalMouseLeave()\"\n    [style.max-width.px]=\"maxWidthPx\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalFooter\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-modal__header\">\n    <ng-content select=\"div[role=header]\"></ng-content>\n    <div class=\"v-modal__header-overflow\">\n      <div class=\"v-modal__header-overflow-gradient\"></div>\n      <div class=\"v-modal__header-overflow-bg\"></div>\n    </div>\n    <div class=\"v-modal__header-buttons\">\n      <button cdsButton=\"ghost\" iconOnly=\"true\" (click)=\"closeModal()\" size=\"sm\">\n        <svg cdsIcon=\"close\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-modal__content\">\n    <ng-content select=\"div[role=content]\"></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter>\n  <div class=\"v-modal__footer\" [ngClass]=\"{'v-modal__footer--hidden': hideFooter}\">\n    <ng-content select=\"div[role=footer]\"></ng-content>\n  </div>\n</ng-template>\n", styles: [".v-modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-modal-z-index);background-color:var(--v-color-backdrop-transparant);backdrop-filter:blur(0);transition:var(--v-modal-backdrop-transition);display:none;cursor:var(--v-modal-backdrop-cursor);padding-inline-start:var(--v-modal-backdrop-padding-inline);padding-inline-end:var(--v-modal-backdrop-padding-inline);padding-block-start:var(--v-modal-backdrop-padding-block);padding-block-end:var(--v-modal-backdrop-padding-block)}.v-modal-backdrop--visible,.v-modal-backdrop--disappearing{display:flex;align-items:center;justify-content:flex-end}.v-modal{position:relative;right:-100%;background-color:var(--v-modal-background-color);height:100%;min-height:var(--v-modal-min-height);max-height:100%;width:100%;max-width:var(--v-modal-max-width);opacity:0;transition:var(--v-modal-transition);cursor:var(--v-modal-cursor);border-radius:var(--v-modal-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-modal-box-shadow)}.v-modal-backdrop--backdrop{background-color:var(--v-modal-backdrop-color);backdrop-filter:var(--v-modal-backdrop-filter)}.v-modal-backdrop--backdrop .v-modal{right:0;opacity:1}.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--disappearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:not(.v-modal-backdrop--appearing),.v-modal-backdrop--backdrop.v-modal-backdrop--mouse-on-backdrop:hover{background-color:var(--v-modal-backdrop-color-hover);backdrop-filter:var(--v-modal-backdrop-filter-hover)}.v-modal-backdrop--hidden,.v-modal-backdrop--appearing{cursor:var(--v-modal-backdrop-cursor-disappearing)}.v-modal__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-modal-header-bg-color);padding-block-start:var(--v-modal-header-padding-block);padding-block-end:var(--v-modal-header-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-bottom:var(--v-modal-header-border);min-height:var(--v-modal-header-min-height);box-sizing:content-box}.v-modal__header-buttons{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block)}.v-modal__header-overflow{position:absolute;right:var(--v-modal-padding-inline);top:var(--v-modal-header-padding-block);height:calc(100% - var(--v-modal-header-padding-block) - var(--v-modal-header-padding-block));display:flex;flex-direction:row}.v-modal__header-overflow-gradient{width:var(--v-modal-header-overflow-gradient-width);height:100%;background-image:var(--v-modal-header-overflow-gradient-bg-image)}.v-modal__header-overflow-bg{width:var(--v-modal-header-overflow-width);height:100%;background-color:var(--v-modal-header-bg-color)}.v-modal__footer{display:flex;flex-shrink:0;background-color:var(--v-modal-footer-bg-color);padding-block-start:var(--v-modal-footer-padding-block);padding-block-end:var(--v-modal-footer-padding-block);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);border-top:var(--v-modal-footer-border)}.v-modal__footer--hidden{display:none}.v-modal__content{height:100%;padding-block-start:var(--v-modal-content-padding-block-start);padding-block-end:var(--v-modal-content-padding-block-end);padding-inline-start:var(--v-modal-padding-inline);padding-inline-end:var(--v-modal-padding-inline);overflow:auto}::ng-deep .v-modal div[role=header],::ng-deep .v-modal div[role=content],::ng-deep .v-modal div[role=footer]{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: ModalService }, { type: i3.IconService }], propDecorators: { appearingDelayMs: [{
+        }], ctorParameters: () => [{ type: ModalService }, { type: i2$2.IconService }], propDecorators: { appearingDelayMs: [{
                 type: Input
             }], maxWidthPx: [{
                 type: Input
@@ -15057,7 +15083,7 @@ class StepperFooterStepComponent {
         this.stepperService.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StepperFooterStepComponent, deps: [{ token: StepperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StepperFooterStepComponent, isStandalone: false, selector: "v-stepper-footer-step", inputs: { nextButtonEnabled: "nextButtonEnabled", completeButtonEnabled: "completeButtonEnabled", nextButtonTranslationKey: "nextButtonTranslationKey", cancelButtonTranslationKey: "cancelButtonTranslationKey", completeButtonTranslationKey: "completeButtonTranslationKey", completeButtonMdiIcon: "completeButtonMdiIcon", showCompleteButton: "showCompleteButton" }, 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=\"stepper-footer-step\" *ngIf=\"(currentStepIndex$ | async) === (stepIndex$ | async)\">\n  <ng-container *ngIf=\"{disabled: disabled$ | async, isLastStep: isLastStep$ | async} as obs\">\n    <ng-container\n      *ngTemplateOutlet=\"cancelButton; context: {disabled: obs.disabled}\"\n    ></ng-container>\n    <ng-container *ngIf=\"obs.isLastStep === false\">\n      <ng-container\n        *ngTemplateOutlet=\"nextButton; context: {disabled: obs.disabled}\"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"obs.isLastStep === true && showCompleteButton\">\n      <ng-container\n        *ngTemplateOutlet=\"completeButton; context: {disabled: obs.disabled}\"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #cancelButton let-disabled=\"disabled\">\n  <button cdsButton=\"secondary\" (click)=\"cancel()\" [disabled]=\"disabled\">\n    {{\n      cancelButtonTranslationKey\n        ? (cancelButtonTranslationKey | translate)\n        : ('stepper.cancelButtonText' | translate)\n    }}\n  </button>\n</ng-template>\n\n<ng-template #nextButton let-disabled=\"disabled\">\n  <button cdsButton=\"primary\" [disabled]=\"!nextButtonEnabled || disabled\" (click)=\"goToNextStep()\">\n    {{\n      nextButtonTranslationKey\n        ? (nextButtonTranslationKey | translate)\n        : ('stepper.nextButtonText' | translate)\n    }}\n  </button>\n</ng-template>\n\n<ng-template #completeButton let-disabled=\"disabled\">\n  <button cdsButton=\"primary\" [disabled]=\"!completeButtonEnabled || disabled\" (click)=\"complete()\">\n    {{\n      completeButtonTranslationKey\n        ? (completeButtonTranslationKey | translate)\n        : ('stepper.completeButtonText' | translate)\n    }}\n  </button>\n</ng-template>\n", styles: [".stepper-footer-step{display:flex;width:100%;flex-direction:row;justify-content:space-between}\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: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { 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: StepperFooterStepComponent, isStandalone: false, selector: "v-stepper-footer-step", inputs: { nextButtonEnabled: "nextButtonEnabled", completeButtonEnabled: "completeButtonEnabled", nextButtonTranslationKey: "nextButtonTranslationKey", cancelButtonTranslationKey: "cancelButtonTranslationKey", completeButtonTranslationKey: "completeButtonTranslationKey", completeButtonMdiIcon: "completeButtonMdiIcon", showCompleteButton: "showCompleteButton" }, 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=\"stepper-footer-step\" *ngIf=\"(currentStepIndex$ | async) === (stepIndex$ | async)\">\n  <ng-container *ngIf=\"{disabled: disabled$ | async, isLastStep: isLastStep$ | async} as obs\">\n    <ng-container\n      *ngTemplateOutlet=\"cancelButton; context: {disabled: obs.disabled}\"\n    ></ng-container>\n    <ng-container *ngIf=\"obs.isLastStep === false\">\n      <ng-container\n        *ngTemplateOutlet=\"nextButton; context: {disabled: obs.disabled}\"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"obs.isLastStep === true && showCompleteButton\">\n      <ng-container\n        *ngTemplateOutlet=\"completeButton; context: {disabled: obs.disabled}\"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #cancelButton let-disabled=\"disabled\">\n  <button cdsButton=\"secondary\" (click)=\"cancel()\" [disabled]=\"disabled\">\n    {{\n      cancelButtonTranslationKey\n        ? (cancelButtonTranslationKey | translate)\n        : ('stepper.cancelButtonText' | translate)\n    }}\n  </button>\n</ng-template>\n\n<ng-template #nextButton let-disabled=\"disabled\">\n  <button cdsButton=\"primary\" [disabled]=\"!nextButtonEnabled || disabled\" (click)=\"goToNextStep()\">\n    {{\n      nextButtonTranslationKey\n        ? (nextButtonTranslationKey | translate)\n        : ('stepper.nextButtonText' | translate)\n    }}\n  </button>\n</ng-template>\n\n<ng-template #completeButton let-disabled=\"disabled\">\n  <button cdsButton=\"primary\" [disabled]=\"!completeButtonEnabled || disabled\" (click)=\"complete()\">\n    {{\n      completeButtonTranslationKey\n        ? (completeButtonTranslationKey | translate)\n        : ('stepper.completeButtonText' | translate)\n    }}\n  </button>\n</ng-template>\n", styles: [".stepper-footer-step{display:flex;width:100%;flex-direction:row;justify-content:space-between}\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$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { 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: StepperFooterStepComponent, decorators: [{
             type: Component,
@@ -15255,7 +15281,7 @@ class PromptComponent {
         this.promptService.setAppearingDelay(this.appearingDelayMs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptComponent, deps: [{ token: PromptService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PromptComponent, isStandalone: false, selector: "v-prompt", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx" }, 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<ng-container\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-prompt-backdrop\"\n    [ngClass]=\"{\n      'v-prompt-backdrop--visible': obs.visible || obs.disappearing,\n      'v-prompt-backdrop--backdrop': obs.showBackdrop,\n      'v-prompt-backdrop--hidden': !obs.visible,\n      'v-prompt-backdrop--appearing': obs.appearing,\n      'v-prompt-backdrop--disappearing': obs.disappearing,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt\" [style.max-width.px]=\"maxWidthPx\">\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"modalFooter; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__header\">\n    <h4>{{ headerText$ | async }}</h4>\n  </div>\n  <div class=\"v-prompt__close\" *ngIf=\"closeButtonVisible$ | async\">\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-prompt__content\">\n    <v-paragraph>{{ bodyText$ | async }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__footer\">\n    <div class=\"v-prompt__buttons\">\n      <button cdsButton=\"primary\" [disabled]=\"appearing || disappearing\" (click)=\"cancel()\">\n        {{ cancelText$ | async }}\n      </button>\n\n      <button cdsButton=\"secondary\" [disabled]=\"appearing || disappearing\" (click)=\"confirm()\">\n        {{ confirmText$ | async }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".v-prompt-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-prompt-z-index);background-color:var(--v-color-backdrop-transparant);backdrop-filter:blur(0);transition:var(--v-prompt-backdrop-transition);display:none;cursor:var(--v-prompt-backdrop-cursor);padding-inline-start:var(--v-prompt-backdrop-padding-inline);padding-inline-end:var(--v-prompt-backdrop-padding-inline);padding-block-start:var(--v-prompt-backdrop-padding-block);padding-block-end:var(--v-prompt-backdrop-padding-block)}.v-prompt-backdrop--visible,.v-prompt-backdrop--disappearing{display:flex;align-items:center;justify-content:center}.v-prompt{background-color:var(--v-prompt-background-color);min-height:var(--v-prompt-min-height);max-height:100%;width:100%;max-width:var(--v-prompt-max-width);transform:translateY(-100%);opacity:0;transition:var(--v-prompt-transition);cursor:var(--v-prompt-cursor);border-radius:var(--v-prompt-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-prompt-box-shadow)}.v-prompt-backdrop--backdrop{background-color:var(--v-prompt-backdrop-color);backdrop-filter:var(--v-prompt-backdrop-filter)}.v-prompt-backdrop--backdrop .v-prompt{transform:translateY(0);opacity:1}.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--disappearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--appearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:hover{background-color:var(--v-prompt-backdrop-color-hover);backdrop-filter:var(--v-prompt-backdrop-filter-hover)}.v-prompt-backdrop--hidden,.v-prompt-backdrop--appearing{cursor:var(--v-prompt-backdrop-cursor-disappearing)}.v-prompt__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-prompt-header-bg-color);padding-block-start:var(--v-prompt-header-padding-block);padding-block-end:var(--v-prompt-header-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-bottom:var(--v-prompt-header-border);min-height:var(--v-prompt-header-min-height);box-sizing:content-box}.v-prompt__close{position:absolute;top:0;right:0;padding-block-start:var(--v-prompt-border-radius);padding-block-end:var(--v-prompt-border-radius);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline)}.v-prompt__footer{display:flex;flex-shrink:0;background-color:var(--v-prompt-footer-bg-color);padding-block-start:var(--v-prompt-footer-padding-block);padding-block-end:var(--v-prompt-footer-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-top:var(--v-prompt-footer-border)}.v-prompt__content{height:100%;padding-block-start:var(--v-prompt-content-padding-block-start);padding-block-end:var(--v-prompt-content-padding-block-end);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);overflow:auto}.v-prompt__buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}\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: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PromptComponent, isStandalone: false, selector: "v-prompt", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx" }, 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<ng-container\n  *ngIf=\"{\n    visible: visible$ | async,\n    appearing: appearing$ | async,\n    disappearing: disappearing$ | async,\n    showBackdrop: showBackdrop$ | async,\n  } as obs\"\n>\n  <div\n    class=\"v-prompt-backdrop\"\n    [ngClass]=\"{\n      'v-prompt-backdrop--visible': obs.visible || obs.disappearing,\n      'v-prompt-backdrop--backdrop': obs.showBackdrop,\n      'v-prompt-backdrop--hidden': !obs.visible,\n      'v-prompt-backdrop--appearing': obs.appearing,\n      'v-prompt-backdrop--disappearing': obs.disappearing,\n    }\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"modal; context: {appearing: obs.appearing, disappearing: obs.disappearing}\"\n    ></ng-container>\n  </div>\n</ng-container>\n\n<ng-template #modal let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt\" [style.max-width.px]=\"maxWidthPx\">\n    <ng-container\n      *ngTemplateOutlet=\"modalHeader; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n    <ng-container *ngTemplateOutlet=\"modalContent\"></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"modalFooter; context: {appearing: appearing, disappearing: disappearing}\"\n    ></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #modalHeader let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__header\">\n    <h4>{{ headerText$ | async }}</h4>\n  </div>\n  <div class=\"v-prompt__close\" *ngIf=\"closeButtonVisible$ | async\">\n    <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"close()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"v-prompt__content\">\n    <v-paragraph>{{ bodyText$ | async }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #modalFooter let-appearing=\"appearing\" let-disappearing=\"disappearing\">\n  <div class=\"v-prompt__footer\">\n    <div class=\"v-prompt__buttons\">\n      <button cdsButton=\"primary\" [disabled]=\"appearing || disappearing\" (click)=\"cancel()\">\n        {{ cancelText$ | async }}\n      </button>\n\n      <button cdsButton=\"secondary\" [disabled]=\"appearing || disappearing\" (click)=\"confirm()\">\n        {{ confirmText$ | async }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".v-prompt-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--v-prompt-z-index);background-color:var(--v-color-backdrop-transparant);backdrop-filter:blur(0);transition:var(--v-prompt-backdrop-transition);display:none;cursor:var(--v-prompt-backdrop-cursor);padding-inline-start:var(--v-prompt-backdrop-padding-inline);padding-inline-end:var(--v-prompt-backdrop-padding-inline);padding-block-start:var(--v-prompt-backdrop-padding-block);padding-block-end:var(--v-prompt-backdrop-padding-block)}.v-prompt-backdrop--visible,.v-prompt-backdrop--disappearing{display:flex;align-items:center;justify-content:center}.v-prompt{background-color:var(--v-prompt-background-color);min-height:var(--v-prompt-min-height);max-height:100%;width:100%;max-width:var(--v-prompt-max-width);transform:translateY(-100%);opacity:0;transition:var(--v-prompt-transition);cursor:var(--v-prompt-cursor);border-radius:var(--v-prompt-border-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--v-prompt-box-shadow)}.v-prompt-backdrop--backdrop{background-color:var(--v-prompt-backdrop-color);backdrop-filter:var(--v-prompt-backdrop-filter)}.v-prompt-backdrop--backdrop .v-prompt{transform:translateY(0);opacity:1}.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--disappearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:not(.v-prompt-backdrop--appearing),.v-prompt-backdrop--backdrop.v-prompt-backdrop--mouse-on-backdrop:hover{background-color:var(--v-prompt-backdrop-color-hover);backdrop-filter:var(--v-prompt-backdrop-filter-hover)}.v-prompt-backdrop--hidden,.v-prompt-backdrop--appearing{cursor:var(--v-prompt-backdrop-cursor-disappearing)}.v-prompt__header{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-shrink:0;background-color:var(--v-prompt-header-bg-color);padding-block-start:var(--v-prompt-header-padding-block);padding-block-end:var(--v-prompt-header-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-bottom:var(--v-prompt-header-border);min-height:var(--v-prompt-header-min-height);box-sizing:content-box}.v-prompt__close{position:absolute;top:0;right:0;padding-block-start:var(--v-prompt-border-radius);padding-block-end:var(--v-prompt-border-radius);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline)}.v-prompt__footer{display:flex;flex-shrink:0;background-color:var(--v-prompt-footer-bg-color);padding-block-start:var(--v-prompt-footer-padding-block);padding-block-end:var(--v-prompt-footer-padding-block);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);border-top:var(--v-prompt-footer-border)}.v-prompt__content{height:100%;padding-block-start:var(--v-prompt-content-padding-block-start);padding-block-end:var(--v-prompt-content-padding-block-end);padding-inline-start:var(--v-prompt-padding-inline);padding-inline-end:var(--v-prompt-padding-inline);overflow:auto}.v-prompt__buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}\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$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading", "dataTestId"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PromptComponent, decorators: [{
             type: Component,
@@ -15520,7 +15546,7 @@ class CaseTagsSelectorComponent {
         });
     }
     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", 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 }); }
+    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: i2$2.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: i2$2.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: i2$2.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: i2$2.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: i2$2.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,
@@ -15672,8 +15698,8 @@ class JsonEditorComponent {
         this._changesToSave = null;
         this.isEditActive.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: JsonEditorComponent, deps: [{ token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: JsonEditorComponent, isStandalone: true, selector: "valtimo-json-editor", inputs: { disabled: "disabled", model: "model", editorOptions: "editorOptions", fitPage: "fitPage", fitPageExtraSpace: "fitPageExtraSpace", formatOnLoad: "formatOnLoad", heightPx: "heightPx", heightStyle: "heightStyle", jsonSchema: "jsonSchema", showEditButton: "showEditButton", widthPx: "widthPx" }, outputs: { changeEvent: "changeEvent", discardEvent: "discardEvent", keepEditingEvent: "keepEditingEvent", saveEvent: "saveEvent" }, 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=\"cds--toolbar-content\">\n  @if (isEditActive()) {\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick()\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"!isValidJson()\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  } @else {\n    <ng-content></ng-content>\n\n    <button\n      *ngIf=\"showEditButton\"\n      cdsButton=\"primary\"\n      [disabled]=\"disableEditButton\"\n      (click)=\"onEditClick()\"\n    >\n      {{ 'interface.edit' | translate }}\n\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  }\n</div>\n\n<valtimo-editor\n  [disabled]=\"isDisabled()\"\n  [fitPage]=\"fitPage\"\n  [fitPageExtraSpace]=\"fitPageExtraSpace\"\n  [formatOnLoad]=\"formatOnLoad\"\n  [heightPx]=\"heightPx\"\n  [heightStyle]=\"heightStyle\"\n  [jsonSchema]=\"jsonSchema\"\n  [model]=\"model\"\n  [widthPx]=\"widthPx\"\n  (validEvent)=\"onValidEvent($event)\"\n  (valueChangeEvent)=\"onValueChangeEvent($event)\"\n>\n</valtimo-editor>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showSaveConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.cancel\"\n  confirmButtonTextTranslationKey=\"interface.save\"\n  contentTranslationKey=\"interface.jsonEditor.saveModalContent\"\n  titleTranslationKey=\"interface.save\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showCancelConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.pendingChanges.keepEditing\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.discard\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"interface.jsonEditor.cancelModal.content\"\n  optionalButtonTextTranslationKey=\"interface.save\"\n  optionalButtonType=\"secondary\"\n  titleTranslationKey=\"interface.jsonEditor.cancelModal.title\"\n  showOptionalButton=\"true\"\n  spacerAfterCancelButton=\"true\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onDiscardChanges()\"\n  (optionalEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n", styles: [".cds--toolbar-content{background-color: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: "ngmodule", type: EditorModule }, { kind: "component", type: EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageExtraSpace"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: JsonEditorComponent, deps: [{ token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: JsonEditorComponent, isStandalone: true, selector: "valtimo-json-editor", inputs: { disabled: "disabled", model: "model", editorOptions: "editorOptions", fitPage: "fitPage", fitPageExtraSpace: "fitPageExtraSpace", formatOnLoad: "formatOnLoad", heightPx: "heightPx", heightStyle: "heightStyle", jsonSchema: "jsonSchema", showEditButton: "showEditButton", widthPx: "widthPx" }, outputs: { changeEvent: "changeEvent", discardEvent: "discardEvent", keepEditingEvent: "keepEditingEvent", saveEvent: "saveEvent" }, 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=\"cds--toolbar-content\">\n  @if (isEditActive()) {\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick()\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"!isValidJson()\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  } @else {\n    <ng-content></ng-content>\n\n    <button\n      *ngIf=\"showEditButton\"\n      cdsButton=\"primary\"\n      [disabled]=\"disableEditButton\"\n      (click)=\"onEditClick()\"\n    >\n      {{ 'interface.edit' | translate }}\n\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  }\n</div>\n\n<valtimo-editor\n  [disabled]=\"isDisabled()\"\n  [fitPage]=\"fitPage\"\n  [fitPageExtraSpace]=\"fitPageExtraSpace\"\n  [formatOnLoad]=\"formatOnLoad\"\n  [heightPx]=\"heightPx\"\n  [heightStyle]=\"heightStyle\"\n  [jsonSchema]=\"jsonSchema\"\n  [model]=\"model\"\n  [widthPx]=\"widthPx\"\n  (validEvent)=\"onValidEvent($event)\"\n  (valueChangeEvent)=\"onValueChangeEvent($event)\"\n>\n</valtimo-editor>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showSaveConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.cancel\"\n  confirmButtonTextTranslationKey=\"interface.save\"\n  contentTranslationKey=\"interface.jsonEditor.saveModalContent\"\n  titleTranslationKey=\"interface.save\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showCancelConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.pendingChanges.keepEditing\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.discard\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"interface.jsonEditor.cancelModal.content\"\n  optionalButtonTextTranslationKey=\"interface.save\"\n  optionalButtonType=\"secondary\"\n  titleTranslationKey=\"interface.jsonEditor.cancelModal.title\"\n  showOptionalButton=\"true\"\n  spacerAfterCancelButton=\"true\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onDiscardChanges()\"\n  (optionalEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n", styles: [".cds--toolbar-content{background-color:var(--cds-layer)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: EditorComponent, selector: "valtimo-editor", inputs: ["editorOptions", "model", "disabled", "formatOnLoad", "widthPx", "heightPx", "heightStyle", "jsonSchema", "fitPage", "fitPageExtraSpace"], outputs: ["validEvent", "valueChangeEvent"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: JsonEditorComponent, decorators: [{
             type: Component,
@@ -15684,8 +15710,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         IconModule,
                         TranslateModule,
                         ConfirmationModalModule,
-                    ], 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=\"cds--toolbar-content\">\n  @if (isEditActive()) {\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick()\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"!isValidJson()\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  } @else {\n    <ng-content></ng-content>\n\n    <button\n      *ngIf=\"showEditButton\"\n      cdsButton=\"primary\"\n      [disabled]=\"disableEditButton\"\n      (click)=\"onEditClick()\"\n    >\n      {{ 'interface.edit' | translate }}\n\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  }\n</div>\n\n<valtimo-editor\n  [disabled]=\"isDisabled()\"\n  [fitPage]=\"fitPage\"\n  [fitPageExtraSpace]=\"fitPageExtraSpace\"\n  [formatOnLoad]=\"formatOnLoad\"\n  [heightPx]=\"heightPx\"\n  [heightStyle]=\"heightStyle\"\n  [jsonSchema]=\"jsonSchema\"\n  [model]=\"model\"\n  [widthPx]=\"widthPx\"\n  (validEvent)=\"onValidEvent($event)\"\n  (valueChangeEvent)=\"onValueChangeEvent($event)\"\n>\n</valtimo-editor>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showSaveConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.cancel\"\n  confirmButtonTextTranslationKey=\"interface.save\"\n  contentTranslationKey=\"interface.jsonEditor.saveModalContent\"\n  titleTranslationKey=\"interface.save\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showCancelConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.pendingChanges.keepEditing\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.discard\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"interface.jsonEditor.cancelModal.content\"\n  optionalButtonTextTranslationKey=\"interface.save\"\n  optionalButtonType=\"secondary\"\n  titleTranslationKey=\"interface.jsonEditor.cancelModal.title\"\n  showOptionalButton=\"true\"\n  spacerAfterCancelButton=\"true\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onDiscardChanges()\"\n  (optionalEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n", styles: [".cds--toolbar-content{background-color: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 }], propDecorators: { disabled: [{
+                    ], 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=\"cds--toolbar-content\">\n  @if (isEditActive()) {\n    <button cdsButton=\"secondary\" (click)=\"onCancelClick()\">\n      {{ 'interface.cancel' | translate }}\n\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n\n    <button cdsButton=\"primary\" [disabled]=\"!isValidJson()\" (click)=\"onSaveClick()\">\n      {{ 'interface.save' | translate }}\n\n      <svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  } @else {\n    <ng-content></ng-content>\n\n    <button\n      *ngIf=\"showEditButton\"\n      cdsButton=\"primary\"\n      [disabled]=\"disableEditButton\"\n      (click)=\"onEditClick()\"\n    >\n      {{ 'interface.edit' | translate }}\n\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </button>\n  }\n</div>\n\n<valtimo-editor\n  [disabled]=\"isDisabled()\"\n  [fitPage]=\"fitPage\"\n  [fitPageExtraSpace]=\"fitPageExtraSpace\"\n  [formatOnLoad]=\"formatOnLoad\"\n  [heightPx]=\"heightPx\"\n  [heightStyle]=\"heightStyle\"\n  [jsonSchema]=\"jsonSchema\"\n  [model]=\"model\"\n  [widthPx]=\"widthPx\"\n  (validEvent)=\"onValidEvent($event)\"\n  (valueChangeEvent)=\"onValueChangeEvent($event)\"\n>\n</valtimo-editor>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showSaveConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.cancel\"\n  confirmButtonTextTranslationKey=\"interface.save\"\n  contentTranslationKey=\"interface.jsonEditor.saveModalContent\"\n  titleTranslationKey=\"interface.save\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showCancelConfirmationModal$\"\n  cancelButtonTextTranslationKey=\"interface.pendingChanges.keepEditing\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.discard\"\n  confirmButtonType=\"danger\"\n  contentTranslationKey=\"interface.jsonEditor.cancelModal.content\"\n  optionalButtonTextTranslationKey=\"interface.save\"\n  optionalButtonType=\"secondary\"\n  titleTranslationKey=\"interface.jsonEditor.cancelModal.title\"\n  showOptionalButton=\"true\"\n  spacerAfterCancelButton=\"true\"\n  (cancelEvent)=\"onKeepEditingDefinition()\"\n  (confirmEvent)=\"onDiscardChanges()\"\n  (optionalEvent)=\"onSaveChanges()\"\n></valtimo-confirmation-modal>\n", styles: [".cds--toolbar-content{background-color:var(--cds-layer)}\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.IconService }], propDecorators: { disabled: [{
                 type: Input
             }], model: [{
                 type: Input
@@ -15717,6 +15743,242 @@ 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 AutoKeyInputComponent {
+    set mode(value) {
+        this._mode$.next(value);
+    }
+    get mode$() {
+        return this._mode$.pipe(filter(mode => !!mode));
+    }
+    set usedKeys(value) {
+        this._usedKeys$.next(value || []);
+    }
+    set sourceText(value) {
+        this._sourceText$.next(value || '');
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        this.labelTranslationKey = 'Key';
+        this.placeholderTranslationKey = '';
+        this._mode$ = new BehaviorSubject(null);
+        this._usedKeys$ = new BehaviorSubject([]);
+        this._sourceText$ = new BehaviorSubject('');
+        this.submitDisabled = new EventEmitter();
+        this.$disabled = signal(false);
+        this.value = '';
+        this.editingKey$ = new BehaviorSubject(true);
+        this.duplicateInitialized = false;
+        this.idError$ = new BehaviorSubject(null);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.subscription = new Subscription();
+        this.iconService.registerAll([Edit16, Close16]);
+        this.subscription.add(this.mode$.subscribe(mode => {
+            this.editingKey$.next(mode === 'edit');
+            if (mode === 'duplicate') {
+                this.duplicateInitialized = false;
+            }
+        }));
+        this.subscription.add(combineLatest([this.mode$, this.editingKey$, this._usedKeys$, this._sourceText$]).subscribe(([mode, editingKey, usedKeys, sourceText]) => {
+            if (mode === 'add' || mode === 'duplicate') {
+                this.updateKey(mode, editingKey, usedKeys, sourceText);
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        this.duplicateInitialized = false;
+        this.idError$.next(null);
+    }
+    setDisabledState(disabled) {
+        this.$disabled.set(disabled);
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onInputChange(event) {
+        const usedKeys = this._usedKeys$.getValue();
+        if (usedKeys.includes(event.target.value)) {
+            this.idError$.next('caseManagement.statuses.keyDuplicated');
+            this.submitDisabled.emit(true);
+        }
+        else {
+            this.idError$.next(null);
+            this.submitDisabled.emit(false);
+            this.onChange((this.value = event.target.value));
+        }
+    }
+    enableKeyEditing() {
+        this.editingKey$.next(true);
+    }
+    disableKeyEditing() {
+        this.editingKey$.next(false);
+    }
+    getUniqueKey(sourceText, usedKeys) {
+        const baseKey = sourceText
+            .toLowerCase()
+            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
+            .replace(/_[-_]+/g, '_')
+            .replace(/^[^a-z]+/g, '');
+        if (!usedKeys.includes(baseKey)) {
+            return baseKey;
+        }
+        return this.getUniqueKeyWithNumber(baseKey, usedKeys);
+    }
+    updateKey(mode, editingKey, usedKeys, sourceText) {
+        if (editingKey) {
+            return;
+        }
+        let newKey = sourceText ? this.getUniqueKey(sourceText, usedKeys) : '';
+        if (mode === 'duplicate' && !this.duplicateInitialized && newKey) {
+            newKey = `${newKey}-duplicate`;
+            this.duplicateInitialized = true;
+        }
+        this.value = newKey;
+        this.onChange(newKey);
+    }
+    getUniqueKeyWithNumber(base, usedKeys, suffix = 1) {
+        const newKey = `${base}-${suffix}`;
+        if (usedKeys.includes(newKey)) {
+            return this.getUniqueKeyWithNumber(base, usedKeys, suffix + 1);
+        }
+        return newKey;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutoKeyInputComponent, deps: [{ token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AutoKeyInputComponent, isStandalone: true, selector: "valtimo-auto-key-input", inputs: { labelTranslationKey: "labelTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", mode: "mode", usedKeys: "usedKeys", sourceText: "sourceText" }, outputs: { submitDisabled: "submitDisabled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AutoKeyInputComponent),
+                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<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\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: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$2.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: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutoKeyInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-auto-key-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        TranslateModule,
+                        InputModule$1,
+                        ButtonModule,
+                        IconModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AutoKeyInputComponent),
+                            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<cds-label\n  *ngIf=\"{\n    mode: mode$ | async,\n    idError: idError$ | async,\n    editingKey: editingKey$ | async,\n  } as obs\"\n  [invalid]=\"!!obs.idError\"\n  [invalidText]=\"obs.idError | translate\"\n>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        obs.mode === 'add' && !obs.editingKey\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!obs.editingKey || obs.mode === 'edit'\"\n      [invalid]=\"!!obs.idError\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(obs.mode === 'add' || obs.mode === 'duplicate') && !obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"obs.mode === 'add' && obs.editingKey\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.IconService }], propDecorators: { labelTranslationKey: [{
+                type: Input
+            }], placeholderTranslationKey: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], usedKeys: [{
+                type: Input
+            }], sourceText: [{
+                type: Input
+            }], submitDisabled: [{
+                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 ListColumnViewComponent {
+    set availableFields(value) {
+        if (!value)
+            return;
+        this._$availableFields.set(value.map(item => ({ ...item, selected: undefined })));
+    }
+    set hiddenColumns(value) {
+        if (!value)
+            return;
+        this._$hiddenColumns.set(value);
+    }
+    constructor(iconService) {
+        this.iconService = iconService;
+        this._$availableFields = signal([]);
+        this._$hiddenColumns = signal([]);
+        this.viewUpdateEvent = new EventEmitter();
+        this.$availableFields = computed(() => this._$availableFields().map(field => ({
+            ...field,
+            selected: field.selected === undefined
+                ? !this._$hiddenColumns().find(hiddenColumn => hiddenColumn.key === field.key)
+                : field.selected,
+        })));
+        this.$checkedItemsCount = computed(() => this.$availableFields().filter(field => field.selected).length);
+        this.iconService.registerAll([ViewOff16, WarningAltFilled16]);
+    }
+    onCheckedChange(selected, fieldKey) {
+        this._$availableFields.update((fields) => fields.map((field) => fieldKey !== field.key ? field : { ...field, selected }));
+    }
+    onOpenChange(paneOpen) {
+        if (paneOpen === undefined || paneOpen)
+            return;
+        const hiddenColumns = this.$availableFields().flatMap(field => !field.selected ? [{ columnKey: field.key }] : []);
+        this.viewUpdateEvent.emit(hiddenColumns);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListColumnViewComponent, deps: [{ token: i2$2.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ListColumnViewComponent, isStandalone: true, selector: "valtimo-list-column-view", inputs: { availableFields: "availableFields", hiddenColumns: "hiddenColumns", disabled: "disabled" }, outputs: { viewUpdateEvent: "viewUpdateEvent" }, 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@if (disabled) {\n  <cds-tooltip [description]=\"'listViewColumns.disabledTooltip' | translate\">\n    <button [disabled]=\"disabled\" iconOnly=\"true\" cdsButton=\"ghost\">\n      <svg cdsIcon=\"view--off\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n} @else {\n  <cds-overflow-menu\n    [customTrigger]=\"customTrigger\"\n    [cdsOverflowMenu]=\"visibleColumns\"\n    [customPane]=\"true\"\n    [flip]=\"true\"\n    [description]=\"'listViewColumns.tooltip' | translate\"\n    [offset]=\"{x: 2, y: 64}\"\n    placement=\"bottom\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n  </cds-overflow-menu>\n}\n\n<ng-template #customTrigger>\n  <button iconOnly=\"true\" cdsButton=\"ghost\" (click)=\"onOpenChange()\">\n    <svg cdsIcon=\"view--off\" size=\"16\"></svg>\n  </button>\n\n  <cds-tag type=\"blue\" class=\"valtimo-list-column-view__tag\">\n    {{ $checkedItemsCount() }}/{{ $availableFields().length }}\n  </cds-tag>\n</ng-template>\n\n<ng-template #visibleColumns>\n  <section class=\"valtimo-list-column-view__container\" (click)=\"$event.stopImmediatePropagation()\">\n    <cds-label>{{ 'listViewColumns.label' | translate }}</cds-label>\n\n    <div class=\"valtimo-list-column-view__content\">\n      @for (field of $availableFields(); track field.key) {\n        <cds-checkbox\n          [class.valtimo-list-column-view__checkbox--disabled]=\"\n            field.selected && $checkedItemsCount() === 1\n          \"\n          [disabled]=\"field.selected && $checkedItemsCount() === 1\"\n          [checked]=\"field.selected\"\n          (checkedChange)=\"onCheckedChange($event, field.key)\"\n        >\n          {{ field.label }}\n        </cds-checkbox>\n\n        @if (field.selected && $checkedItemsCount() === 1) {\n          <div class=\"valtimo-list-column-view__warning\">\n            <svg cdsIcon=\"warning--alt--filled\" size=\"16\"></svg>\n\n            {{ 'listViewColumns.warning' | translate }}\n          </div>\n        }\n      }\n    </div>\n  </section>\n</ng-template>\n", styles: ["::ng-deep .cds--overflow-menu-options{min-width:max-content}.valtimo-list-column-view__icon{display:inline-block;position:relative}.valtimo-list-column-view__container{padding:16px;display:flex;flex-direction:column;gap:16px}.valtimo-list-column-view__tag{position:absolute;left:20px;z-index:2;top:-8px}.valtimo-list-column-view__content{display:flex;flex-direction:column;gap:4px}.valtimo-list-column-view__content ::ng-deep .cds--checkbox-label-text{color:var(--cds-text-primary)}.valtimo-list-column-view__warning{display:flex;gap:8px;margin-left:3px;align-items:center;font-size:12px}.valtimo-list-column-view__warning svg{fill:var(--warning)}.valtimo-list-column-view__warning svg ::ng-deep path[data-icon-path=inner-path]{fill:#000}\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: DialogModule }, { kind: "component", type: i2$2.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "description", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "directive", type: i2$2.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class", "skeleton"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i2$2.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: ButtonModule }, { kind: "directive", type: i2$2.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "component", type: i2$2.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "ngmodule", type: TooltipModule$1 }, { kind: "component", type: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListColumnViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-list-column-view', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        DialogModule,
+                        TagModule,
+                        CheckboxModule,
+                        ButtonModule,
+                        TranslateModule,
+                        IconModule,
+                        InputModule$1,
+                        TooltipModule$1
+                    ], 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@if (disabled) {\n  <cds-tooltip [description]=\"'listViewColumns.disabledTooltip' | translate\">\n    <button [disabled]=\"disabled\" iconOnly=\"true\" cdsButton=\"ghost\">\n      <svg cdsIcon=\"view--off\" size=\"16\"></svg>\n    </button>\n  </cds-tooltip>\n} @else {\n  <cds-overflow-menu\n    [customTrigger]=\"customTrigger\"\n    [cdsOverflowMenu]=\"visibleColumns\"\n    [customPane]=\"true\"\n    [flip]=\"true\"\n    [description]=\"'listViewColumns.tooltip' | translate\"\n    [offset]=\"{x: 2, y: 64}\"\n    placement=\"bottom\"\n    (openChange)=\"onOpenChange($event)\"\n  >\n  </cds-overflow-menu>\n}\n\n<ng-template #customTrigger>\n  <button iconOnly=\"true\" cdsButton=\"ghost\" (click)=\"onOpenChange()\">\n    <svg cdsIcon=\"view--off\" size=\"16\"></svg>\n  </button>\n\n  <cds-tag type=\"blue\" class=\"valtimo-list-column-view__tag\">\n    {{ $checkedItemsCount() }}/{{ $availableFields().length }}\n  </cds-tag>\n</ng-template>\n\n<ng-template #visibleColumns>\n  <section class=\"valtimo-list-column-view__container\" (click)=\"$event.stopImmediatePropagation()\">\n    <cds-label>{{ 'listViewColumns.label' | translate }}</cds-label>\n\n    <div class=\"valtimo-list-column-view__content\">\n      @for (field of $availableFields(); track field.key) {\n        <cds-checkbox\n          [class.valtimo-list-column-view__checkbox--disabled]=\"\n            field.selected && $checkedItemsCount() === 1\n          \"\n          [disabled]=\"field.selected && $checkedItemsCount() === 1\"\n          [checked]=\"field.selected\"\n          (checkedChange)=\"onCheckedChange($event, field.key)\"\n        >\n          {{ field.label }}\n        </cds-checkbox>\n\n        @if (field.selected && $checkedItemsCount() === 1) {\n          <div class=\"valtimo-list-column-view__warning\">\n            <svg cdsIcon=\"warning--alt--filled\" size=\"16\"></svg>\n\n            {{ 'listViewColumns.warning' | translate }}\n          </div>\n        }\n      }\n    </div>\n  </section>\n</ng-template>\n", styles: ["::ng-deep .cds--overflow-menu-options{min-width:max-content}.valtimo-list-column-view__icon{display:inline-block;position:relative}.valtimo-list-column-view__container{padding:16px;display:flex;flex-direction:column;gap:16px}.valtimo-list-column-view__tag{position:absolute;left:20px;z-index:2;top:-8px}.valtimo-list-column-view__content{display:flex;flex-direction:column;gap:4px}.valtimo-list-column-view__content ::ng-deep .cds--checkbox-label-text{color:var(--cds-text-primary)}.valtimo-list-column-view__warning{display:flex;gap:8px;margin-left:3px;align-items:center;font-size:12px}.valtimo-list-column-view__warning svg{fill:var(--warning)}.valtimo-list-column-view__warning svg ::ng-deep path[data-icon-path=inner-path]{fill:#000}\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$2.IconService }], propDecorators: { availableFields: [{
+                type: Input
+            }], hiddenColumns: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], viewUpdateEvent: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2025 Ritense BV, the Netherlands.
  *
@@ -15856,21 +16118,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * limitations under the License.
  */
 class QuickSearchModalComponent {
-    constructor(fb, quickSearchStateService) {
+    constructor(fb, iconService, quickSearchStateService) {
         this.fb = fb;
+        this.iconService = iconService;
         this.quickSearchStateService = quickSearchStateService;
+        this.existingItems = [];
         this.closeEvent = new EventEmitter();
         this.$modalOpen = this.quickSearchStateService.$modalOpen;
-        this.formGroup = this.fb.group({ title: this.fb.control('', Validators.required) });
+        this.$showDuplicateError = signal(false);
+        this.formGroup = this.fb.group({
+            title: this.fb.control('', [
+                Validators.required,
+                Validators.maxLength(50),
+                this.uniqueTitleValidator(),
+                this.noWhitespaceValidator(),
+            ]),
+        });
+        this.iconService.registerAll([WarningFilled16]);
     }
     closeModal(save = false) {
         this.closeEvent.emit(save ? this.formGroup.getRawValue().title : null);
         setTimeout(() => {
             this.formGroup.reset();
+            this.$showDuplicateError.set(false);
         }, 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 }); }
+    uniqueTitleValidator() {
+        return (control) => {
+            if (!control.value || !Array.isArray(this.existingItems))
+                return null;
+            const value = control.value.trim().toLowerCase();
+            const isDuplicate = this.existingItems
+                .map((item) => item.title)
+                .some(item => item.trim().toLowerCase() === value);
+            if (!isDuplicate) {
+                this.$showDuplicateError.set(false);
+                return null;
+            }
+            this.$showDuplicateError.set(true);
+            return { titleExists: true };
+        };
+    }
+    noWhitespaceValidator() {
+        return (control) => {
+            if (typeof control.value !== 'string')
+                return null;
+            const isOnlyWhitespace = control.value.trim().length === 0;
+            return isOnlyWhitespace ? { whitespace: true } : null;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchModalComponent, deps: [{ token: i2.FormBuilder }, { token: i2$2.IconService }, { 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", inputs: { existingItems: "existingItems" }, 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        maxlength=\"50\"\n        [placeholder]=\"'interface.title' | translate\"\n        [attr.modal-primary-focus]=\"true\"\n      />\n    </cds-text-label>\n\n    <div *ngIf=\"$showDuplicateError()\" class=\"valtimo-qiuck-search-modal__error\">\n      <svg cdsIcon=\"warning--filled\" size=\"16\"></svg>\n\n      {{ 'quickSearch.duplicateError' | translate }}\n    </div>\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}.valtimo-qiuck-search-modal__error{color:#da1e28;fill:#da1e28;display:flex;align-items:center;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: i2$2.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$2.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$2.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$2.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$2.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$2.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: i2$2.TextInputLabelComponent, selector: "cds-text-label, ibm-text-label", inputs: ["labelInputID", "disabled", "skeleton", "labelTemplate", "textInputTemplate", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel", "fluid"] }, { kind: "directive", type: i2$2.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: NotificationModule }, { kind: "component", type: i2$2.Notification, selector: "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification", inputs: ["notificationObj"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i2$2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchModalComponent, decorators: [{
             type: Component,
@@ -15883,8 +16181,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         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: [{
+                        IconModule,
+                    ], 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        maxlength=\"50\"\n        [placeholder]=\"'interface.title' | translate\"\n        [attr.modal-primary-focus]=\"true\"\n      />\n    </cds-text-label>\n\n    <div *ngIf=\"$showDuplicateError()\" class=\"valtimo-qiuck-search-modal__error\">\n      <svg cdsIcon=\"warning--filled\" size=\"16\"></svg>\n\n      {{ 'quickSearch.duplicateError' | translate }}\n    </div>\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}.valtimo-qiuck-search-modal__error{color:#da1e28;fill:#da1e28;display:flex;align-items:center;gap:8px}\n/*!\n * Copyright 2015-2025 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: i2.FormBuilder }, { type: i2$2.IconService }, { type: QuickSearchStateService }], propDecorators: { existingItems: [{
+                type: Input
+            }], closeEvent: [{
                 type: Output
             }] } });
 
@@ -15945,8 +16246,8 @@ class QuickSearchComponent {
         })
             .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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QuickSearchComponent, deps: [{ token: i2$2.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    [existingItems]=\"obs.quickSearchItems\"\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", inputs: ["existingItems"], outputs: ["closeEvent"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i2$2.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: i2$2.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: i2$2.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.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,
@@ -15961,8 +16262,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         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: [{
+                    ], 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    [existingItems]=\"obs.quickSearchItems\"\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: i2$2.IconService }, { type: QuickSearchStateService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [QUICK_SEARCH_SERVICE]
                 }] }], propDecorators: { quickSearchEvent: [{
@@ -16099,7 +16400,7 @@ class ValtimoCdsOverflowButtonDirective {
             this.renderer.setStyle(btnIconEl, 'position', 'absolute');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.OverflowMenu }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2$2.OverflowMenu }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ValtimoCdsOverflowButtonDirective, isStandalone: true, selector: "[valtimoCdsOverflowButton]", inputs: { width: "width" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, decorators: [{
@@ -16108,7 +16409,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.OverflowMenu }], propDecorators: { width: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2$2.OverflowMenu }], propDecorators: { width: [{
                 type: Input
             }] } });
 
@@ -16434,121 +16735,52 @@ 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 AutoKeyInputComponent {
-    set mode(value) {
-        this._mode$.next(value);
-    }
-    get mode$() {
-        return this._mode$.pipe(filter(mode => !!mode));
-    }
-    set usedKeys(value) {
-        this._usedKeys$.next(value || []);
-    }
-    set sourceText(value) {
-        this._sourceText$.next(value || '');
+class ObserveSizeDirective {
+    constructor(host) {
+        this.host = host;
+        this.widthChange = new EventEmitter();
+        this.heightChange = new EventEmitter();
+        this._lastWidth = -1;
+        this._lastHeight = -1;
     }
-    constructor(iconService) {
-        this.iconService = iconService;
-        this.labelTranslationKey = 'Key';
-        this.placeholderTranslationKey = '';
-        this._mode$ = new BehaviorSubject(null);
-        this._usedKeys$ = new BehaviorSubject([]);
-        this._sourceText$ = new BehaviorSubject('');
-        this.$disabled = signal(false);
-        this.value = '';
-        this.editingKey$ = new BehaviorSubject(true);
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        this.subscription = new Subscription();
-        this.iconService.registerAll([Edit16, Close16]);
-        this.subscription.add(this.mode$.subscribe(mode => {
-            this.editingKey$.next(mode === 'edit');
-        }));
-        this.subscription.add(combineLatest([this.mode$, this.editingKey$, this._usedKeys$, this._sourceText$]).subscribe(([mode, editingKey, usedKeys, sourceText]) => {
-            if (mode === 'add' && !editingKey) {
-                const newKey = sourceText ? this.getUniqueKey(sourceText, usedKeys) : '';
-                this.value = newKey;
-                this.onChange(newKey);
+    ngOnInit() {
+        const element = this.host.nativeElement;
+        const emitIfChanged = (width, height) => {
+            if (width !== this._lastWidth) {
+                this._lastWidth = width;
+                this.widthChange.emit(width);
             }
-        }));
+            if (height !== this._lastHeight) {
+                this._lastHeight = height;
+                this.heightChange.emit(height);
+            }
+        };
+        const rect = element.getBoundingClientRect();
+        emitIfChanged(Math.round(rect.width), Math.round(rect.height));
+        this._resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                emitIfChanged(Math.round(width), Math.round(height));
+            }
+        });
+        this._resizeObserver.observe(element);
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    setDisabledState(disabled) {
-        this.$disabled.set(disabled);
-    }
-    writeValue(value) {
-        this.value = value ?? '';
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    onInputChange(event) {
-        this.onChange((this.value = event.target.value));
-    }
-    enableKeyEditing() {
-        this.editingKey$.next(true);
-    }
-    disableKeyEditing() {
-        this.editingKey$.next(false);
-    }
-    getUniqueKey(sourceText, usedKeys) {
-        const baseKey = sourceText
-            .toLowerCase()
-            .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
-            .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+/g, '');
-        if (!usedKeys.includes(baseKey)) {
-            return baseKey;
-        }
-        return this.getUniqueKeyWithNumber(baseKey, usedKeys);
-    }
-    getUniqueKeyWithNumber(base, usedKeys, suffix = 1) {
-        const newKey = `${base}-${suffix}`;
-        if (usedKeys.includes(newKey)) {
-            return this.getUniqueKeyWithNumber(base, usedKeys, suffix + 1);
-        }
-        return newKey;
+        this._resizeObserver?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutoKeyInputComponent, deps: [{ token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AutoKeyInputComponent, isStandalone: true, selector: "valtimo-auto-key-input", inputs: { labelTranslationKey: "labelTranslationKey", placeholderTranslationKey: "placeholderTranslationKey", mode: "mode", usedKeys: "usedKeys", sourceText: "sourceText" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AutoKeyInputComponent),
-                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<cds-label>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        (mode$ | async) === 'add' && !(editingKey$ | async)\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!(editingKey$ | async) || (mode$ | async) === 'edit'\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(mode$ | async) === 'add' && !(editingKey$ | async)\"\n      [disabled]=\"$disabled()\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"(mode$ | async) === 'add' && (editingKey$ | async)\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\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: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { 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: "directive", type: i3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "ngmodule", type: ButtonModule }, { 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: "ngmodule", type: IconModule }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObserveSizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ObserveSizeDirective, isStandalone: true, selector: "[observeSize]", outputs: { widthChange: "widthChange", heightChange: "heightChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutoKeyInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-auto-key-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        TranslateModule,
-                        InputModule$1,
-                        ButtonModule,
-                        IconModule,
-                    ], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AutoKeyInputComponent),
-                            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<cds-label>\n  {{ labelTranslationKey | translate }}\n\n  <div class=\"edit-key-input\">\n    <input\n      cdsText\n      type=\"text\"\n      [value]=\"value\"\n      [placeholder]=\"\n        (mode$ | async) === 'add' && !(editingKey$ | async)\n          ? ('caseManagement.statuses.keyAutoGenerated' | translate)\n          : (placeholderTranslationKey | translate)\n      \"\n      [readOnly]=\"!(editingKey$ | async) || (mode$ | async) === 'edit'\"\n      (input)=\"onInputChange($event)\"\n      (blur)=\"onTouched()\"\n    />\n\n    <cds-icon-button\n      *ngIf=\"(mode$ | async) === 'add' && !(editingKey$ | async)\"\n      [disabled]=\"$disabled()\"\n      (click)=\"enableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"edit\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n\n    <cds-icon-button\n      *ngIf=\"(mode$ | async) === 'add' && (editingKey$ | async)\"\n      [disabled]=\"$disabled()\"\n      (click)=\"disableKeyEditing()\"\n      kind=\"secondary\"\n    >\n      <svg cdsIcon=\"close\" size=\"16\" class=\"cds--btn__icon\"></svg>\n    </cds-icon-button>\n  </div>\n</cds-label>\n", styles: [".edit-key-input{display:flex;align-items:center;gap:8px;width:100%}.edit-key-input input[cdsText]{flex:1 1 auto}.edit-key-input cds-icon-button{flex-shrink:0;margin-left:4px}\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: { labelTranslationKey: [{
-                type: Input
-            }], placeholderTranslationKey: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], usedKeys: [{
-                type: Input
-            }], sourceText: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ObserveSizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[observeSize]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { widthChange: [{
+                type: Output
+            }], heightChange: [{
+                type: Output
             }] } });
 
 /*
@@ -16574,5 +16806,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, 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 };
+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, ListColumnViewComponent, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, MuuriDirective, MuuriDirectiveModule, MuuriItemComponent, ObserveSizeDirective, 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