@valtimo/components 12.5.1 → 12.7.0

package/fesm2022/valtimo-components.mjs

@@ -16,25 +16,25 @@ import { deepmerge } from 'deepmerge-ts';
 import { isEqual, isArray, isNil, clone, get } from 'lodash';
 import { Components, Utils, Formio as Formio$1 } from 'formiojs';
 import { createCustomElement } from '@angular/elements';
-import * as i10$1 from '@formio/angular';
+import * as i10 from '@formio/angular';
 import { CustomTagsService as CustomTagsService$1, Formio, FormioModule, FormioAppConfig } from '@formio/angular';
 import * as i2$1 from '@angular/forms';
 import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, FormsModule, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import moment from 'moment';
 import User20 from '@carbon/icons/es/user/20';
 import * as i1$4 from 'keycloak-angular';
-import * as i2$3 from 'carbon-components-angular';
+import * as i3 from 'carbon-components-angular';
 import { UIShellModule, IconModule, LinkModule, DialogModule, GridModule, TabsModule, StructuredListModule, ToggleModule, TagModule, DropdownModule, LayerModule, SkeletonModule, Table, TableHeaderItem, TableItem, TableModel, PaginationModule, TableModule as TableModule$1, ContentSwitcherModule, ButtonModule as ButtonModule$1, ModalModule as ModalModule$1, BreadcrumbModule, InputModule as InputModule$1, LoadingModule, CheckboxModule, ComboBoxModule, AccordionModule, ModalButtonType, TilesModule, RadioModule as RadioModule$1, ModalService as ModalService$1 } from 'carbon-components-angular';
 import * as i5 from '@angular/platform-browser';
 import * as i2$2 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import * as i2$4 from '@valtimo/document';
+import * as i2$3 from '@valtimo/document';
 import { DocumentModule, DocumentService, InternalCaseStatusUtils } from '@valtimo/document';
-import * as i2$5 from 'ngx-logger';
+import * as i4 from 'ngx-logger';
 import * as i8 from '@valtimo/security';
-import * as i10 from '@ng-bootstrap/ng-bootstrap';
+import * as i11 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i3 from '@angular/cdk/layout';
+import * as i3$1 from '@angular/cdk/layout';
 import { LayoutModule } from '@angular/cdk/layout';
 import { ArrowDown16, ArrowUp16, SettingsView16, Draggable16, ChevronDown16, ChevronUp16, Close24 } from '@carbon/icons';
 import localeNl from '@angular/common/locales/nl';
@@ -49,9 +49,10 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$6 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i2$6 from 'ngx-spinner';
+import Currency from '@tadashi/currency';
+import * as i2$4 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
-import * as i2$7 from 'ng-multiselect-dropdown';
+import * as i2$5 from 'ng-multiselect-dropdown';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
 import { v4 } from 'uuid';
 import flatpickr from 'flatpickr';
@@ -867,6 +868,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ name: 'isArray', standalone: true }]
         }] });
 
+class EllipsisPipe {
+    transform(content, limit) {
+        if (!limit)
+            return content;
+        return content.substring(0, limit) + (content.length > limit ? '...' : '');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EllipsisPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: EllipsisPipe, isStandalone: true, name: "valtimoEllipsis" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EllipsisPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'valtimoEllipsis', standalone: true }]
+        }] });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -1606,7 +1621,7 @@ class ValtimoModalService {
         return this._scrollToTop$.asObservable();
     }
     get documentDefinitionName$() {
-        return this._documentDefinitionName$.asObservable();
+        return this._documentDefinitionName$.pipe(filter(documentDefinitionName => !!documentDefinitionName));
     }
     scrollToTop() {
         this._scrollToTop$.next(null);
@@ -2038,7 +2053,7 @@ class KeyGeneratorService {
             .toLowerCase()
             .replace(/[^a-z0-9-_]+|-[^a-z0-9]+/g, '-')
             .replace(/_[-_]+/g, '_')
-            .replace(/^[^a-z]+/g, '');
+            .replace(/^[^a-z]+|[^a-z0-9]+$/g, '');
         if (!usedKeys.includes(dashCaseKey)) {
             return dashCaseKey;
         }
@@ -3261,13 +3276,13 @@ class TopbarComponent {
             base64string,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$4.KeycloakService }, { token: i2.ConfigService }, { token: i2$3.IconService }, { token: ShellService }, { token: i5.DomSanitizer }, { token: PageHeaderService }, { token: CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TopbarComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.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$3.Header, selector: "cds-header, ibm-header", inputs: ["skipTo", "name", "brand", "href", "route", "routeExtras", "useRouter"], outputs: ["navigation"] }, { kind: "component", type: i2$3.HeaderGlobal, selector: "cds-header-global, ibm-header-global" }, { kind: "component", type: i2$3.HeaderAction, selector: "cds-header-action, ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }, { kind: "component", type: i2$3.Hamburger, selector: "cds-hamburger, ibm-hamburger", inputs: ["active", "activeTitle", "inactiveTitle"], outputs: ["selected"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$4.KeycloakService }, { token: i2.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: "17.3.12", type: TopbarComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.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$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-topbar', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.KeycloakService }, { type: i2.ConfigService }, { type: i2$3.IconService }, { type: ShellService }, { type: i5.DomSanitizer }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { headerClass: [{
+        }], ctorParameters: () => [{ type: i1$4.KeycloakService }, { type: i2.ConfigService }, { type: i3.IconService }, { type: ShellService }, { type: i5.DomSanitizer }, { type: PageHeaderService }, { type: CdsThemeService }], propDecorators: { headerClass: [{
                 type: HostBinding,
                 args: ['class.cds--header']
             }], _headerVcr: [{
@@ -3595,7 +3610,7 @@ class MenuService {
     getAllObjects() {
         return this.http.get(`${this.configService.config.valtimoApi.endpointUri}v1/object/management/configuration`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuService, deps: [{ token: i2.ConfigService }, { token: i2$4.DocumentService }, { token: i1$1.HttpClient }, { token: i1$4.KeycloakService }, { token: i2$5.NGXLogger }, { token: i2.MenuIncludeService }, { token: PendingChangesService }, { token: i1$2.Router }, { token: i8.UserProviderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuService, deps: [{ token: i2.ConfigService }, { token: i2$3.DocumentService }, { token: i1$1.HttpClient }, { token: i1$4.KeycloakService }, { token: i4.NGXLogger }, { token: i2.MenuIncludeService }, { token: PendingChangesService }, { token: i1$2.Router }, { token: i8.UserProviderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuService, decorators: [{
@@ -3603,7 +3618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i2.ConfigService }, { type: i2$4.DocumentService }, { type: i1$1.HttpClient }, { type: i1$4.KeycloakService }, { type: i2$5.NGXLogger }, { type: i2.MenuIncludeService }, { type: PendingChangesService }, { type: i1$2.Router }, { type: i8.UserProviderService }] });
+        }], ctorParameters: () => [{ type: i2.ConfigService }, { type: i2$3.DocumentService }, { type: i1$1.HttpClient }, { type: i1$4.KeycloakService }, { type: i4.NGXLogger }, { type: i2.MenuIncludeService }, { type: PendingChangesService }, { type: i1$2.Router }, { type: i8.UserProviderService }] });
 
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
@@ -3665,7 +3680,7 @@ class MenuItemTextComponent {
         this.openInNewTab.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent", showOverFlowMenu: "showOverFlowMenu" }, outputs: { overflowMenuClosed: "overflowMenuClosed", openInNewTab: "openInNewTab" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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 .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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "pipe", type: i1$3.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: "17.3.12", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent", showOverFlowMenu: "showOverFlowMenu" }, outputs: { overflowMenuClosed: "overflowMenuClosed", openInNewTab: "openInNewTab" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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 .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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "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$3.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: "17.3.12", ngImport: i0, type: MenuItemTextComponent, decorators: [{
             type: Component,
@@ -4080,7 +4095,7 @@ class RightSidebarComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i8.UserProviderService }, { token: i2$1.FormBuilder }, { token: VersionService }, { token: ShellService }, { token: i0.ElementRef }, { token: i2.ConfigService }, { token: i2.UserSettingsService }, { token: PageHeaderService }, { token: CdsThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$3.Panel, selector: "cds-panel, ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i2$3.ColumnDirective, selector: "[cdsCol], [ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i2$3.GridDirective, selector: "[cdsGrid], [ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i2$3.RowDirective, selector: "[cdsRow], [ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i2$3.Tabs, selector: "cds-tabs, ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i2$3.Tab, selector: "cds-tab, ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive", "tabContent", "templateContext"], outputs: ["selected"] }, { kind: "component", type: i2$3.StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i2$3.ListRow, selector: "cds-list-row, ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.ListHeader, selector: "cds-list-header, ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i2$3.ListColumn, selector: "cds-list-column, ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i2$3.Link, selector: "[cdsLink], [ibmLink]", inputs: ["inline", "disabled"] }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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", "skeleton"] }, { kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { 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", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], 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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RightSidebarComponent, decorators: [{
             type: Component,
@@ -4327,13 +4342,13 @@ class LeftSidebarComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i0.ElementRef }, { token: MenuService }, { token: ShellService }, { token: i3.BreakpointObserver }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LeftSidebarComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngFor=\"let menuItem of menuItems$ | async\">\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</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text> </cds-sidenav-item\n  ></ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n", 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}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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$3.SideNav, selector: "cds-sidenav, ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems", "useRouter"] }, { kind: "component", type: i2$3.SideNavItem, selector: "cds-sidenav-item, ibm-sidenav-item", inputs: ["href", "useRouter", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i2$3.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: "pipe", type: i1$3.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: "17.3.12", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i0.ElementRef }, { token: MenuService }, { token: ShellService }, { token: i3$1.BreakpointObserver }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LeftSidebarComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngFor=\"let menuItem of menuItems$ | async\">\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</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text> </cds-sidenav-item\n  ></ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n", 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}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LeftSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-left-sidebar', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-sidenav\n  *ngIf=\"{\n    closestSequence: closestSequence$ | async,\n    overflowMenuSequence: overflowMenuSequence$ | async,\n    sideBarExpanded: sideBarExpanded$ | async,\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngFor=\"let menuItem of menuItems$ | async\">\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</cds-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template\n  #topMenuItem\n  let-closestSequence=\"closestSequence\"\n  let-menuItem=\"menuItem\"\n  let-overflowMenuSequence=\"overflowMenuSequence\"\n>\n  <ng-container *ngIf=\"{sequence: '' + menuItem.sequence} as vars\"\n    ><cds-sidenav-item\n      *ngIf=\"!menuItem.children\"\n      [attr.data-testid]=\"'sidenav-item-' + menuItem.title\"\n      [ngClass]=\"{\n        'menu-item--hidden': menuItem.includeFunction !== undefined,\n        'menu-item--visible':\n          menuItem.includeFunction !== undefined &&\n          (includeFunctionObservables[menuItem.title] | async),\n      }\"\n      [active]=\"vars.sequence === closestSequence\"\n      (click)=\"navigateToRoute(menuItem.link, $event)\"\n      (contextmenu)=\"onRightClick(vars.sequence)\"\n      (ctrl-click)=\"openInNewTab(menuItem.link.link)\"\n      href=\"javascript:void(0)\"\n    >\n      <valtimo-menu-item-text\n        [menuItem]=\"menuItem\"\n        [showOverFlowMenu]=\"overflowMenuSequence === vars.sequence\"\n        (openInNewTab)=\"openInNewTab(menuItem.link.link)\"\n        (overflowMenuClosed)=\"onOverflowMenuClosed(vars.sequence)\"\n      ></valtimo-menu-item-text> </cds-sidenav-item\n  ></ng-container>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n", 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}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3.BreakpointObserver }, { type: i1$2.Router }], propDecorators: { toggleButtonRef: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: MenuService }, { type: ShellService }, { type: i3$1.BreakpointObserver }, { type: i1$2.Router }], propDecorators: { toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton']
             }], onPageClick: [{
@@ -4431,13 +4446,13 @@ class PageTitleComponent {
             this.isCompact = compactMode;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i5.Title }, { token: i1.TranslateService }, { token: i2$5.NGXLogger }, { token: i2.ConfigService }, { token: PageTitleService }, { token: PageHeaderService }, { token: PageSubtitleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PageTitleComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  [ngClass]=\"{'--no-margin': hidePageTitle || isCompact, '--compact': isCompact}\"\n  class=\"page-title-container\"\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]=\"{'--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 [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\" class=\"page-title\">\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 .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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i5.Title }, { token: i1.TranslateService }, { token: i4.NGXLogger }, { token: i2.ConfigService }, { token: PageTitleService }, { token: PageHeaderService }, { token: PageSubtitleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PageTitleComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  [ngClass]=\"{'--no-margin': hidePageTitle || isCompact, '--compact': isCompact}\"\n  class=\"page-title-container\"\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]=\"{'--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 [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\" class=\"page-title\">\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 .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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-page-title', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  [ngClass]=\"{'--no-margin': hidePageTitle || isCompact, '--compact': isCompact}\"\n  class=\"page-title-container\"\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]=\"{'--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 [title]=\"obs.hasCustomPageTitle ? obs.customPageTitle : obs.title\" class=\"page-title\">\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 .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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i5.Title }, { type: i1.TranslateService }, { type: i2$5.NGXLogger }, { type: i2.ConfigService }, { type: PageTitleService }, { type: PageHeaderService }, { type: PageSubtitleService }], propDecorators: { isCompact: [{
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i5.Title }, { type: i1.TranslateService }, { type: i4.NGXLogger }, { type: i2.ConfigService }, { type: PageTitleService }, { type: PageHeaderService }, { type: PageSubtitleService }], propDecorators: { isCompact: [{
                 type: HostBinding,
                 args: ['class.valtimo-page-title--compact']
             }], _subtitleVcr: [{
@@ -4769,7 +4784,7 @@ class BooleanTypeConverter {
         return 'boolean';
     }
     convert(value, definition) {
-        if (!value)
+        if (value === null || value === undefined)
             return '-';
         const enumeration = definition?.enum;
         if (enumeration && Array.isArray(enumeration) && enumeration.length > 1) {
@@ -4849,9 +4864,9 @@ class DateTimeTypeConverter {
         if (!value)
             return '-';
         const dateValue = moment(value);
-        return (dateValue.isValid() ? dateValue : moment(value, 'DD-MM-YYYY, hh:mm:ss'))
+        return (dateValue.isValid() ? dateValue : moment(value, 'DD-MM-YYYY, HH:mm:ss'))
             .locale(localStorage.getItem('langKey') ?? 'nl')
-            .format(definition?.format || 'DD-MM-YYYY, hh:mm:ss');
+            .format(definition?.format || 'DD-MM-YYYY, HH:mm:ss');
     }
 }
 
@@ -5055,6 +5070,10 @@ class StringTypeConverter {
         return 'string';
     }
     convert(value) {
+        if (!value)
+            return '-';
+        if (Array.isArray(value) && typeof value[0] === 'string')
+            return value.reduce((acc, curr, index) => `${acc}${index < value.length && index > 0 ? ', ' : ''}${curr}`, '');
         return value;
     }
 }
@@ -5283,7 +5302,7 @@ class CarbonTagsModalComponent {
         this.closeEvent.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonTagsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: { open: "open", tags: "tags" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<cds-modal valtimoCdsModal [title]=\"'interface.tags' | translate\" size=\"xs\" [open]=\"open\">\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"], dependencies: [{ kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: { open: "open", tags: "tags" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<cds-modal valtimoCdsModal [title]=\"'interface.tags' | translate\" size=\"xs\" [open]=\"open\">\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"], dependencies: [{ kind: "component", type: i3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { 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]" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonTagsModalComponent, decorators: [{
             type: Component,
@@ -5360,7 +5379,8 @@ class CarbonListComponent {
     get model() {
         return this._table.model;
     }
-    constructor(filterPipe, iconService, logger, translateService, viewContentService, keyStateService, dragAndDropService, elementRef) {
+    constructor(ellipsisPipe, filterPipe, iconService, logger, translateService, viewContentService, keyStateService, dragAndDropService, elementRef) {
+        this.ellipsisPipe = ellipsisPipe;
         this.filterPipe = filterPipe;
         this.iconService = iconService;
         this.logger = logger;
@@ -5472,7 +5492,7 @@ class CarbonListComponent {
                         return new TableItem({
                             title: resolvedObject ?? '-',
                             data: (field.tooltipCharLimit
-                                ? this.transformContentEllipsis(resolvedObject, field.tooltipCharLimit)
+                                ? this.ellipsisPipe.transform(resolvedObject, field.tooltipCharLimit)
                                 : resolvedObject) ?? '-',
                             template: this.defaultTemplate,
                             item,
@@ -5756,23 +5776,20 @@ class CarbonListComponent {
                 template: this.tagTemplate,
             });
         const tags = itemTags.map((tag, index) => index === 0
-            ? { ...tag, ellipsisContent: this.transformContentEllipsis(tag.content, TAG_ELLIPSIS_LIMIT) }
+            ? { ...tag, ellipsisContent: this.ellipsisPipe.transform(tag.content, TAG_ELLIPSIS_LIMIT) }
             : tag);
         return new TableItem({
             data: { tags },
             template: this.tagTemplate,
         });
     }
-    transformContentEllipsis(content, limit) {
-        return content.substring(0, limit - 1) + (content.length > limit ? '...' : '');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonListComponent, deps: [{ token: CarbonListFilterPipe }, { token: i2$3.IconService }, { token: i2$5.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: "17.3.12", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<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    [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\" class=\"cds--btn__icon\"></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\" class=\"cds--btn__icon\"></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\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  <ng-container *ngIf=\"!data.tags\">-</ng-container>\n\n  <div *ngIf=\"data.tags\" class=\"tag-template\">\n    @if (data.tags.length === 0) {\n      -\n    } @else {\n      <cds-tag *ngIf=\"!!data.tags[0].content\" class=\"cds-tag--no-margin\" [type]=\"data.tags[0].type\">\n        {{ data.tags[0].ellipsisContent ?? data.tags[0].content }}\n      </cds-tag>\n\n      <cds-tag\n        *ngIf=\"data.tags.length > 1\"\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 - 1 }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n      </cds-tag>\n    }\n  </div>\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}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$3.Pagination, selector: "cds-pagination, ibm-pagination", inputs: ["skeleton", "model", "disabled", "pageInputDisabled", "showPageInput", "pagesUnknown", "pageSelectThreshold", "translations", "itemsPerPageOptions"], outputs: ["selectPage"] }, { kind: "component", type: i2$3.TableToolbar, selector: "cds-table-toolbar, ibm-table-toolbar", inputs: ["model", "batchText", "ariaLabel", "cancelText", "size"], outputs: ["cancel"] }, { kind: "component", type: i2$3.TableContainer, selector: "cds-table-container, ibm-table-container" }, { kind: "component", type: i2$3.TableHeader, selector: "cds-table-header, ibm-table-header" }, { kind: "component", type: i2$3.TableToolbarActions, selector: "cds-table-toolbar-actions, ibm-table-toolbar-actions" }, { kind: "component", type: i2$3.TableToolbarSearch, selector: "cds-table-toolbar-search, ibm-table-toolbar-search" }, { kind: "component", type: i2$3.TableToolbarContent, selector: "cds-table-toolbar-content, ibm-table-toolbar-content" }, { kind: "component", type: i2$3.Table, selector: "cds-table, ibm-table", inputs: ["ariaLabelledby", "ariaDescribedby", "model", "size", "skeleton", "isDataGrid", "sortable", "noBorder", "showSelectionColumn", "enableSingleSelect", "scrollLoadDistance", "expandButtonAriaLabel", "sortDescendingLabel", "sortAscendingLabel", "translations", "striped", "stickyHeader", "footerTemplate", "selectionLabelColumn"], outputs: ["sort", "selectAll", "deselectAll", "selectRow", "deselectRow", "rowClick", "scrollLoad"] }, { kind: "component", type: i2$3.TableBody, selector: "[cdsTableBody], [ibmTableBody]", inputs: ["model", "enableSingleSelect", "expandButtonAriaLabel", "checkboxRowLabel", "showSelectionColumn", "size", "selectionLabelColumn", "skeleton"], outputs: ["selectRow", "deselectRow", "rowClick"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i2$3.OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: ["buttonLabel", "flip", "placement", "open", "customTrigger", "offset", "wrapperClass", "triggerClass"], outputs: ["openChange"] }, { kind: "component", type: i2$3.OverflowMenuOption, selector: "cds-overflow-menu-option, ibm-overflow-menu-option", inputs: ["divider", "type", "disabled", "href", "target", "innerClass"], outputs: ["selected"] }, { kind: "directive", type: i10.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i2$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", type: CarbonListComponent, selector: "valtimo-carbon-list", inputs: { items: "items", fields: "fields", tableTranslations: "tableTranslations", paginatorConfig: "paginatorConfig", pagination: "pagination", loading: "loading", actions: "actions", actionItems: "actionItems", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<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    [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\" class=\"cds--btn__icon\"></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\" class=\"cds--btn__icon\"></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\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  <ng-container *ngIf=\"!data.tags\">-</ng-container>\n\n  <div *ngIf=\"data.tags\" class=\"tag-template\">\n    @if (data.tags.length === 0) {\n      -\n    } @else {\n      <cds-tag *ngIf=\"!!data.tags[0].content\" class=\"cds-tag--no-margin\" [type]=\"data.tags[0].type\">\n        {{ data.tags[0].ellipsisContent ?? data.tags[0].content }}\n      </cds-tag>\n\n      <cds-tag\n        *ngIf=\"data.tags.length > 1\"\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 - 1 }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n      </cds-tag>\n    }\n  </div>\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}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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", "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$1.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", "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"] }, { kind: "component", type: CarbonTagsModalComponent, selector: "valtimo-tags-modal", inputs: ["open", "tags"], outputs: ["closeEvent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-carbon-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CarbonListFilterPipe, CarbonListDragAndDropService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n<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    [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\" class=\"cds--btn__icon\"></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\" class=\"cds--btn__icon\"></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\" class=\"cds--btn__icon\"></svg>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #tagTemplate let-data=\"data\">\n  <ng-container *ngIf=\"!data.tags\">-</ng-container>\n\n  <div *ngIf=\"data.tags\" class=\"tag-template\">\n    @if (data.tags.length === 0) {\n      -\n    } @else {\n      <cds-tag *ngIf=\"!!data.tags[0].content\" class=\"cds-tag--no-margin\" [type]=\"data.tags[0].type\">\n        {{ data.tags[0].ellipsisContent ?? data.tags[0].content }}\n      </cds-tag>\n\n      <cds-tag\n        *ngIf=\"data.tags.length > 1\"\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 - 1 }} <svg cdsIcon=\"add\" size=\"16\"></svg>\n      </cds-tag>\n    }\n  </div>\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}.valtimo-carbon-list ::ng-deep .valtimo-carbon-list__draggable .cds--btn--ghost{cursor:move!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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: CarbonListFilterPipe }, { type: i2$3.IconService }, { type: i2$5.NGXLogger }, { type: i1.TranslateService }, { type: ViewContentService }, { type: KeyStateService }, { type: CarbonListDragAndDropService }, { type: i0.ElementRef }], propDecorators: { actionsMenuTemplate: [{
+        }], 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: [{
                 type: ViewChild,
                 args: ['actionsMenuTemplate']
             }], actionTemplate: [{
@@ -6082,7 +6099,7 @@ class CarbonListModule {
             ModalModule$1,
             ValtimoCdsModalDirectiveModule,
             ViewContentModule], exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonListModule, imports: [CardModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonListModule, providers: [EllipsisPipe], imports: [CardModule,
             CommonModule,
             FormsModule,
             NgbPaginationModule,
@@ -6129,6 +6146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         ViewContentModule,
                     ],
                     exports: [CarbonListComponent, CarbonListFilterPipe, CarbonNoResultsComponent],
+                    providers: [EllipsisPipe],
                 }]
         }] });
 
@@ -6314,13 +6332,13 @@ class ListComponent {
             this.sortChanged.emit(newState);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, deps: [{ token: ViewContentService }, { token: i2$5.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC',\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate,\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize,\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i10.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, deps: [{ token: ViewContentService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC',\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate,\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize,\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i11.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-list', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC',\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate,\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize,\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: ViewContentService }, { type: i2$5.NGXLogger }], propDecorators: { items: [{
+        }], ctorParameters: () => [{ type: ViewContentService }, { type: i4.NGXLogger }], propDecorators: { items: [{
                 type: Input
             }], fields: [{
                 type: Input
@@ -6560,7 +6578,7 @@ class BreadcrumbNavigationComponent {
         this._subscriptions.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation", host: { properties: { "class.valtimo-breadcrumb-navigation--compact": "this.isCompact" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.Breadcrumb, selector: "cds-breadcrumb, ibm-breadcrumb", inputs: ["items", "noTrailingSlash", "ariaLabel", "skeleton", "threshold"], outputs: ["navigation"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation", host: { properties: { "class.valtimo-breadcrumb-navigation--compact": "this.isCompact" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Breadcrumb, selector: "cds-breadcrumb, ibm-breadcrumb", inputs: ["items", "noTrailingSlash", "ariaLabel", "skeleton", "threshold"], outputs: ["navigation"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BreadcrumbNavigationComponent, decorators: [{
             type: Component,
@@ -6836,7 +6854,7 @@ class PageSubtitleComponent {
         this.compactMode$ = this.pageHeaderService.compactMode$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageSubtitleComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: PageTitleService }, { token: PageHeaderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageSubtitleComponent, isStandalone: true, selector: "valtimo-page-subtitle", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container 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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "ngmodule", type: RenderPageSubtitleDirectiveModule }, { kind: "directive", type: RenderPageSubtitleDirective, selector: "[renderPageSubtitle]" }, { kind: "ngmodule", type: RenderPageHeaderDirectiveModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageSubtitleComponent, isStandalone: true, selector: "valtimo-page-subtitle", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container 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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.SkeletonPlaceholder, selector: "cds-skeleton-placeholder, ibm-skeleton-placeholder" }, { kind: "ngmodule", type: RenderPageSubtitleDirectiveModule }, { kind: "directive", type: RenderPageSubtitleDirective, selector: "[renderPageSubtitle]" }, { kind: "ngmodule", type: RenderPageHeaderDirectiveModule }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageSubtitleComponent, decorators: [{
             type: Component,
@@ -7375,11 +7393,11 @@ class TimelineComponent {
         }) || []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TimelineComponent, selector: "valtimo-timeline", inputs: { items: "items", actions: "actions" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\"></div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n          <br />\n          <span>{{ item.time }}</span>\n        </div>\n        <div\n          class=\"timeline-content mt-1\"\n          *ngIf=\"{supportedActions: getSupportedActions(item, actions)} as vars\"\n        >\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <div class=\"dropdown actions-dropdown\" *ngIf=\"vars.supportedActions?.length > 0\">\n              <a\n                class=\"dropdown-toggle d-block\"\n                id=\"dropdownMenu\"\n                data-toggle=\"dropdown\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n              >\n                <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n              </a>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n                <a\n                  *ngFor=\"let action of vars.supportedActions\"\n                  (click)=\"action.callback(item, $event)\"\n                  class=\"dropdown-item p-2\"\n                >\n                  <ng-container *ngIf=\"action.icon !== null\">\n                    <i class=\"icon mdi\" [ngClass]=\"action.icon\"></i>\n                  </ng-container>\n                  {{ action?.label || '-' }}\n                </a>\n              </div>\n            </div>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}.actions-dropdown{position:absolute;top:12px;right:12px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TimelineComponent, selector: "valtimo-timeline", inputs: { items: "items", actions: "actions" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\"></div>\n\n<div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n  <ul class=\"timeline mb-0 py-5\">\n    <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n      <div class=\"timeline-date\">\n        <span>{{ item.date }}</span>\n\n        <br />\n\n        <span>{{ item.time }}</span>\n      </div>\n\n      <div\n        class=\"timeline-content mt-1\"\n        *ngIf=\"{supportedActions: getSupportedActions(item, actions)} as vars\"\n      >\n        <div class=\"timeline-header p-0\">\n          <span class=\"timeline-author\">{{ item.user }}</span>\n\n          <div class=\"dropdown actions-dropdown\" *ngIf=\"vars.supportedActions?.length > 0\">\n            <a\n              class=\"dropdown-toggle d-block\"\n              id=\"dropdownMenu\"\n              data-toggle=\"dropdown\"\n              aria-haspopup=\"true\"\n              aria-expanded=\"false\"\n            >\n              <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n            </a>\n\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n              <a\n                *ngFor=\"let action of vars.supportedActions\"\n                (click)=\"action.callback(item, $event)\"\n                class=\"dropdown-item p-2\"\n              >\n                <ng-container *ngIf=\"action.icon !== null\">\n                  <i class=\"icon mdi\" [ngClass]=\"action.icon\"></i>\n                </ng-container>\n\n                {{ action?.label || '-' }}\n              </a>\n            </div>\n          </div>\n\n          <br />\n\n          <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n          <div class=\"timeline-summary\">\n            <p>\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem;white-space:pre-line}.actions-dropdown{position:absolute;top:12px;right:12px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-timeline', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\"></div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n          <br />\n          <span>{{ item.time }}</span>\n        </div>\n        <div\n          class=\"timeline-content mt-1\"\n          *ngIf=\"{supportedActions: getSupportedActions(item, actions)} as vars\"\n        >\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n\n            <div class=\"dropdown actions-dropdown\" *ngIf=\"vars.supportedActions?.length > 0\">\n              <a\n                class=\"dropdown-toggle d-block\"\n                id=\"dropdownMenu\"\n                data-toggle=\"dropdown\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n              >\n                <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n              </a>\n              <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n                <a\n                  *ngFor=\"let action of vars.supportedActions\"\n                  (click)=\"action.callback(item, $event)\"\n                  class=\"dropdown-item p-2\"\n                >\n                  <ng-container *ngIf=\"action.icon !== null\">\n                    <i class=\"icon mdi\" [ngClass]=\"action.icon\"></i>\n                  </ng-container>\n                  {{ action?.label || '-' }}\n                </a>\n              </div>\n            </div>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}.actions-dropdown{position:absolute;top:12px;right:12px;cursor:pointer}\n"] }]
+            args: [{ selector: 'valtimo-timeline', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\"></div>\n\n<div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n  <ul class=\"timeline mb-0 py-5\">\n    <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n      <div class=\"timeline-date\">\n        <span>{{ item.date }}</span>\n\n        <br />\n\n        <span>{{ item.time }}</span>\n      </div>\n\n      <div\n        class=\"timeline-content mt-1\"\n        *ngIf=\"{supportedActions: getSupportedActions(item, actions)} as vars\"\n      >\n        <div class=\"timeline-header p-0\">\n          <span class=\"timeline-author\">{{ item.user }}</span>\n\n          <div class=\"dropdown actions-dropdown\" *ngIf=\"vars.supportedActions?.length > 0\">\n            <a\n              class=\"dropdown-toggle d-block\"\n              id=\"dropdownMenu\"\n              data-toggle=\"dropdown\"\n              aria-haspopup=\"true\"\n              aria-expanded=\"false\"\n            >\n              <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n            </a>\n\n            <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n              <a\n                *ngFor=\"let action of vars.supportedActions\"\n                (click)=\"action.callback(item, $event)\"\n                class=\"dropdown-item p-2\"\n              >\n                <ng-container *ngIf=\"action.icon !== null\">\n                  <i class=\"icon mdi\" [ngClass]=\"action.icon\"></i>\n                </ng-container>\n\n                {{ action?.label || '-' }}\n              </a>\n            </div>\n          </div>\n\n          <br />\n\n          <p class=\"timeline-activity\">{{ item.activity }}</p>\n\n          <div class=\"timeline-summary\">\n            <p>\n              {{ item.summaryTranslationKey | translate: item.summaryTranslationParams }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </li>\n  </ul>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem;white-space:pre-line}.actions-dropdown{position:absolute;top:12px;right:12px;cursor:pointer}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], actions: [{
@@ -8316,13 +8334,13 @@ class FormioComponent {
             return;
         this._overrideOptions$.next(config.formioOptions);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioComponent, deps: [{ token: i8.UserProviderService }, { token: i2$5.NGXLogger }, { token: FormIoStateService }, { token: i1$2.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10$1.FormioComponent, selector: "formio" }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioComponent, deps: [{ token: i8.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$2.ActivatedRoute }, { token: i1.TranslateService }, { token: FormIoLocalStorageService }, { token: ValtimoModalService }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.FormioComponent, selector: "formio" }, { kind: "directive", type: i3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-form-io', providers: [FormIoLocalStorageService], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"{\n    currentLanguage: currentLanguage$ | async,\n    formioOptions: formioOptions$ | async,\n    submission: submission$ | async,\n    readOnly: readOnly$ | async,\n    form: form$ | async,\n    errors: errors$ | async,\n    tokenSetInLocalStorage: tokenSetInLocalStorage$ | async,\n  } as obs\"\n>\n  <div *ngIf=\"obs.errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of obs.errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n\n  <formio\n    *ngIf=\"obs.formioOptions && obs.form && obs.tokenSetInLocalStorage\"\n    [form]=\"obs.form\"\n    [language]=\"languageEventEmitter\"\n    [options]=\"obs.formioOptions\"\n    [readOnly]=\"obs.readOnly\"\n    [refresh]=\"refreshForm\"\n    [submission]=\"obs.submission\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n    (ready)=\"formReady($event)\"\n    (submit)=\"onSubmit($event)\"\n    (customEvent)=\"onCustomEvent($event)\"\n  ></formio>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i8.UserProviderService }, { type: i2$5.NGXLogger }, { type: FormIoStateService }, { type: i1$2.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i2.ConfigService }], propDecorators: { options: [{
+        }], ctorParameters: () => [{ type: i8.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$2.ActivatedRoute }, { type: i1.TranslateService }, { type: FormIoLocalStorageService }, { type: ValtimoModalService }, { type: i2.ConfigService }], propDecorators: { options: [{
                 type: Input
             }], submission: [{
                 type: Input
@@ -8455,7 +8473,7 @@ class FormioBuilderComponent {
         this.change.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioBuilderComponent, deps: [{ token: i1.TranslateService }, { token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10$1.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }, { kind: "directive", type: i2$3.LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: ["ibmLayer", "cdsLayer"], exportAs: ["layer"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"formio-carbon\"\n  cdsLayer=\"1\"\n  *ngIf=\"(editFormModified$ | async) && form$ | async as formDefinition\"\n>\n  <form-builder\n    [form]=\"formDefinition\"\n    [rebuild]=\"triggerRebuild\"\n    (change)=\"onChange($event)\"\n  ></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i10.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$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormioBuilderComponent, decorators: [{
             type: Component,
@@ -9284,7 +9302,7 @@ class InputLabelComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputLabelComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputLabelComponent, selector: "v-input-label", inputs: { name: "name", tooltip: "tooltip", largeMargin: "largeMargin", small: "small", noMargin: "noMargin", title: "title", titleTranslationKey: "titleTranslationKey", required: "required", disabled: "disabled", carbonTheme: "carbonTheme" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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      <v-tooltip-icon *ngIf=\"tooltip\" [disabled]=\"disabled\" [tooltip]=\"tooltip\"></v-tooltip-icon>\n    </span>\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}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipIconComponent, selector: "v-tooltip-icon", inputs: ["tooltip", "disabled"] }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputLabelComponent, selector: "v-input-label", inputs: { name: "name", tooltip: "tooltip", largeMargin: "largeMargin", small: "small", noMargin: "noMargin", title: "title", titleTranslationKey: "titleTranslationKey", required: "required", disabled: "disabled", carbonTheme: "carbonTheme" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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      <v-tooltip-icon *ngIf=\"tooltip\" [disabled]=\"disabled\" [tooltip]=\"tooltip\"></v-tooltip-icon>\n    </span>\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}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.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$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputLabelComponent, decorators: [{
             type: Component,
@@ -9528,7 +9546,7 @@ class ValuePathSelectorComponent {
         ]).pipe(tap$1(() => this.loadingValuePathItems$.next(true)), switchMap(([documentDefinitionName, prefixes, version]) => typeof version === 'number'
             ? this.valuePathSelectorService.getResolvableKeysPerPrefix(prefixes, documentDefinitionName, version)
             : this.valuePathSelectorService.getResolvableKeysPerPrefix(prefixes, documentDefinitionName)), map(result => result.map(path => this.getFormattedPath(path)).sort((a, b) => a.localeCompare(b))), tap$1(options => (this._cachedOptions = options)), switchMap(options => combineLatest([of(options), this._selectedPath$, this.inputModeIsDropdown$])), tap$1(([options, selectedPath, inputModeIsDropdown]) => {
-            if (!options.includes(selectedPath) && selectedPath !== '' && inputModeIsDropdown)
+            if (!options.includes(selectedPath) && !!selectedPath && inputModeIsDropdown)
                 this._inputMode$.next(ValuePathSelectorInputMode.MANUAL);
         }), map(([options, selectedPath]) => options.map(option => ({ content: option, selected: option === selectedPath }))), tap$1(() => this.loadingValuePathItems$.next(false)));
         this.loadingDocumentDefinitionItems$ = new BehaviorSubject(true);
@@ -9609,14 +9627,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: "17.3.12", ngImport: i0, type: ValuePathSelectorComponent, deps: [{ token: ValuePathSelectorService }, { token: i2$1.FormBuilder }, { token: i2$4.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorComponent, deps: [{ token: ValuePathSelectorService }, { token: i2$1.FormBuilder }, { token: i2$3.DocumentService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ValuePathSelectorComponent, isStandalone: true, selector: "valtimo-value-path-selector", inputs: { name: "name", appendInline: "appendInline", margin: "margin", marginLg: "marginLg", marginXl: "marginXl", disabled: "disabled", documentDefinitionName: "documentDefinitionName", version: "version", prefixes: "prefixes", label: "label", tooltip: "tooltip", required: "required", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", notation: "notation", defaultValue: "defaultValue" }, outputs: { valueChangeEvent: "valueChangeEvent" }, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    @if (obs.inputModeIsDropdown) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"obs.disabled || obs.loadingValuePathItems || !obs.valuePathListItems\"\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\n    <cds-toggle\n      data-testid=\"value-path-selector-toggle\"\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  </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:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.value-path-selector__form ::ng-deep cds-dropdown{width:100%}.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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ToggleModule }, { kind: "component", type: i2$3.Toggle, selector: "cds-toggle, ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel", "skeleton"] }, { kind: "ngmodule", type: InputModule$1 }, { kind: "directive", type: i2$3.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", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    <cds-toggle\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) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems ||\n            (docObs.documentDefinitionListItems || []).length === 0\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\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:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.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", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.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", "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", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorComponent, decorators: [{
             type: Component,
@@ -9636,8 +9654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => ValuePathSelectorComponent),
                         },
-                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    @if (obs.inputModeIsDropdown) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\n      <cds-dropdown\n        data-testid=\"value-path-selector-valuePath\"\n        [appendInline]=\"appendInline\"\n        [disabled]=\"obs.disabled || obs.loadingValuePathItems || !obs.valuePathListItems\"\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\n    <cds-toggle\n      data-testid=\"value-path-selector-toggle\"\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  </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:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.value-path-selector__form ::ng-deep cds-dropdown{width:100%}.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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: ValuePathSelectorService }, { type: i2$1.FormBuilder }, { type: i2$4.DocumentService }], propDecorators: { _showMargin: [{
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\n  *ngIf=\"{\n    inputModeIsDropdown: inputModeIsDropdown$ | async,\n    valuePathListItems: valuePathListItems$ | async,\n    loadingValuePathItems: loadingValuePathItems$ | async,\n    disabled: disabled$ | async,\n  } as obs\"\n>\n  <v-input-label [required]=\"required\" [title]=\"label\" [tooltip]=\"tooltip\"> </v-input-label>\n\n  <form [formGroup]=\"formGroup\" class=\"value-path-selector__form\">\n    <cds-toggle\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) {\n      <ng-container\n        *ngIf=\"\n          showDocumentDefinitionSelector && {\n            loadingDocumentDefinitionItems: loadingDocumentDefinitionItems$ | async,\n            documentDefinitionListItems: documentDefinitionListItems$ | async,\n          } as docObs\n        \"\n      >\n        <cds-dropdown\n          data-testid=\"value-path-selector-documentDefinition\"\n          [appendInline]=\"appendInline\"\n          [disabled]=\"\n            obs.disabled ||\n            docObs.loadingDocumentDefinitionItems ||\n            !docObs.documentDefinitionListItems ||\n            (docObs.documentDefinitionListItems || []).length === 0\n          \"\n          (selected)=\"onDocumentDefinitionSelected($event)\"\n          [placeholder]=\"'valuePathSelector.selectDocDefPlaceholder' | translate\"\n        >\n          <cds-dropdown-list [items]=\"docObs.documentDefinitionListItems || []\"></cds-dropdown-list>\n        </cds-dropdown>\n      </ng-container>\n\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:flex;width:100%;align-items:center;gap:16px;justify-content:space-between}.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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], ctorParameters: () => [{ type: ValuePathSelectorService }, { type: i2$1.FormBuilder }, { type: i2$3.DocumentService }], propDecorators: { _showMargin: [{
                 type: HostBinding,
                 args: ['class.value-path-selector--margin-bottom']
             }], _showMarginLg: [{
@@ -9758,6 +9776,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Custom formio component for currency number.
+ */
+class FormIoCurrencyComponent {
+    constructor() {
+        this.currencyForm = new FormGroup({
+            currencyValue: new FormControl(''),
+        });
+        this._value = null;
+        this.valueChange = new EventEmitter();
+        this._subscriptions = new Subscription();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this.currencyForm.setValue({
+            currencyValue: Currency.masking(value, this._currencyInstance.opts.maskOpts),
+        });
+    }
+    set disabled(value) {
+        if (value) {
+            this.currencyForm.disable();
+        }
+        else {
+            this.currencyForm.enable();
+        }
+    }
+    ngOnInit() {
+        this._subscriptions.add(this.currencyForm.valueChanges.subscribe(() => {
+            const unmasked = this._currencyInstance.getUnmasked(this.currencyForm.value.currencyValue);
+            if (unmasked === 0 && this.allowEmptyValue) {
+                this._value = null;
+                this.valueChange.emit(null);
+            }
+            else {
+                this._value = unmasked;
+                this.valueChange.emit(unmasked);
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    ngAfterViewInit() {
+        this._currencyInstance = new Currency(this.currencyElement.nativeElement, {
+            maskOpts: {
+                empty: this.allowEmptyValue || false,
+                locales: this.currencyLocale || 'nl-NL',
+                digits: 2,
+                options: {
+                    style: 'currency',
+                    currency: this.currencyCurrency || 'EUR',
+                },
+            },
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.currencyLocale || changes.currencyCurrency || changes.allowEmptyValue) {
+            if (typeof this.currencyLocale === 'string') {
+                this._currencyInstance.opts.maskOpts.locales = this.currencyLocale;
+            }
+            if (typeof this.currencyCurrency === 'string') {
+                this._currencyInstance.opts.maskOpts.options.currency = this.currencyCurrency;
+            }
+            if (typeof this.allowEmptyValue === 'boolean') {
+                this._currencyInstance.opts.maskOpts.empty = this.allowEmptyValue;
+            }
+            this.currencyForm.setValue({
+                currencyValue: typeof this._value === 'number'
+                    ? Currency.masking(this._value, this._currencyInstance.opts.maskOpts)
+                    : '',
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormIoCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormIoCurrencyComponent, selector: "valtimo-currency", inputs: { value: "value", disabled: "disabled", currencyLocale: "currencyLocale", currencyCurrency: "currencyCurrency", allowEmptyValue: "allowEmptyValue" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "currencyElement", first: true, predicate: ["currencyElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"currencyForm-container\" [formGroup]=\"currencyForm\">\n  <div class=\"input-group\">\n    <input #currencyElement id=\"currency\" formControlName=\"currencyValue\" class=\"form-control\" />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormIoCurrencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-currency', template: "<div class=\"currencyForm-container\" [formGroup]=\"currencyForm\">\n  <div class=\"input-group\">\n    <input #currencyElement id=\"currency\" formControlName=\"currencyValue\" class=\"form-control\" />\n  </div>\n</div>\n" }]
+        }], propDecorators: { currencyElement: [{
+                type: ViewChild,
+                args: ['currencyElement']
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }], currencyLocale: [{
+                type: Input
+            }], currencyCurrency: [{
+                type: Input
+            }], allowEmptyValue: [{
+                type: Input
+            }] } });
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -9780,6 +9897,7 @@ class FormIoModule {
             FormIoUploaderComponent,
             FormIoCurrentUserComponent,
             FormIoIbanComponent,
+            FormIoCurrencyComponent,
             FormioDummyComponent], imports: [CommonModule,
             FormioModule,
             DropzoneModule,
@@ -9795,6 +9913,7 @@ class FormIoModule {
             FormIoUploaderComponent,
             FormIoCurrentUserComponent,
             FormIoIbanComponent,
+            FormIoCurrencyComponent,
             FormioDummyComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormIoModule, providers: [
             FormIoDomService,
@@ -9837,6 +9956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormIoUploaderComponent,
                         FormIoCurrentUserComponent,
                         FormIoIbanComponent,
+                        FormIoCurrencyComponent,
                         FormioDummyComponent,
                     ],
                     exports: [
@@ -9845,6 +9965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormIoUploaderComponent,
                         FormIoCurrentUserComponent,
                         FormIoIbanComponent,
+                        FormIoCurrencyComponent,
                         FormioDummyComponent,
                     ],
                     providers: [
@@ -9993,7 +10114,7 @@ class SpinnerComponent {
         this.noMarginTop = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SpinnerComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$6.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: "17.3.12", type: SpinnerComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$4.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: "17.3.12", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -10399,7 +10520,7 @@ const formIoUploaderEditForm = () => ({
  * limitations under the License.
  */
 const customUploaderType = 'valtimo-file';
-const COMPONENT_OPTIONS$4 = {
+const COMPONENT_OPTIONS$5 = {
     type: customUploaderType,
     selector: 'valtimo-form-io-uploader',
     title: 'Valtimo File Upload',
@@ -10410,7 +10531,7 @@ const COMPONENT_OPTIONS$4 = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$4);
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$5);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
@@ -10424,8 +10545,8 @@ function registerFormioUploadComponent(injector) {
             return true;
         }
     }
-    if (!customElements.get(COMPONENT_OPTIONS$4.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$4, FormIoUploaderComponent, UploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$5.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$5, FormIoUploaderComponent, UploaderComponent, injector);
     }
 }
 
@@ -10508,7 +10629,7 @@ const formIoCurrentUserEditForm = () => ({
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const COMPONENT_OPTIONS$3 = {
+const COMPONENT_OPTIONS$4 = {
     type: 'valtimo-current-user',
     selector: 'valtimo-form-io-current-user',
     title: 'Valtimo Current User',
@@ -10521,10 +10642,10 @@ const COMPONENT_OPTIONS$3 = {
     },
 };
 function registerFormioCurrentUserComponent(injector) {
-    registerCustomFormioComponent(COMPONENT_OPTIONS$3, FormIoCurrentUserComponent, injector);
+    registerCustomFormioComponent(COMPONENT_OPTIONS$4, FormIoCurrentUserComponent, injector);
 }
 
-const COMPONENT_OPTIONS$2 = {
+const COMPONENT_OPTIONS$3 = {
     type: 'iban',
     selector: 'valtimo-iban',
     title: 'Iban',
@@ -10541,7 +10662,123 @@ const COMPONENT_OPTIONS$2 = {
     },
 };
 function registerFormioIbanComponent(injector) {
-    registerCustomFormioComponent(COMPONENT_OPTIONS$2, FormIoIbanComponent, injector);
+    registerCustomFormioComponent(COMPONENT_OPTIONS$3, FormIoIbanComponent, injector);
+}
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const TextFieldEditForm = Components.components.textfield.editForm;
+const currencyEditForm = () => {
+    const editForm = TextFieldEditForm();
+    const localeSelection = {
+        type: 'select',
+        input: true,
+        key: 'customOptions.currencyLocale',
+        label: 'Currency locale',
+        tooltip: 'The locale used for the currency input',
+        weight: 20,
+        defaultValue: 'nl-NL',
+        dataSrc: 'values',
+        data: {
+            values: [
+                {
+                    label: 'Dutch (Netherlands)',
+                    value: 'nl-NL',
+                },
+                {
+                    label: 'English (US)',
+                    value: 'en-US',
+                },
+                {
+                    label: 'English (UK)',
+                    value: 'en-GB',
+                },
+                {
+                    label: 'German',
+                    value: 'de-DE',
+                },
+            ],
+        },
+    };
+    const currencySelection = {
+        type: 'select',
+        input: true,
+        key: 'customOptions.currencyCurrency',
+        label: 'Currency',
+        tooltip: 'The currency used for the currency input',
+        weight: 20,
+        defaultValue: 'EUR',
+        dataSrc: 'values',
+        data: {
+            values: [
+                {
+                    label: 'Euro',
+                    value: 'EUR',
+                },
+                {
+                    label: 'British pound',
+                    value: 'GBP',
+                },
+                {
+                    label: 'United States Dollar',
+                    value: 'USD',
+                },
+            ],
+        },
+    };
+    const allowEmptyValueCheckbox = {
+        type: 'checkbox',
+        input: true,
+        key: 'customOptions.allowEmptyValue',
+        label: 'Allow Empty Value',
+        tooltip: 'Check to allow empty values for this field',
+        weight: 10,
+        defaultValue: false, // Default to false
+    };
+    const tabsComponent = editForm.components.find(component => component.key === 'tabs');
+    if (tabsComponent) {
+        const displayTab = tabsComponent.components.find(tab => tab.key === 'display');
+        if (displayTab) {
+            displayTab.components.unshift(localeSelection);
+            displayTab.components.unshift(currencySelection);
+            displayTab.components.unshift(allowEmptyValueCheckbox);
+        }
+    }
+    return editForm;
+};
+
+const COMPONENT_OPTIONS$2 = {
+    type: 'currency',
+    selector: 'valtimo-currency',
+    title: 'Currency',
+    group: 'basic',
+    icon: 'dollar',
+    schema: {
+        label: 'Currency component',
+        key: 'currency',
+        hideLabel: false,
+        tableView: true,
+        validate: {
+            required: true,
+        },
+    },
+    editForm: currencyEditForm,
+};
+function registerFormioCurrencyComponent(injector) {
+    registerCustomFormioComponent(COMPONENT_OPTIONS$2, FormIoCurrencyComponent, injector);
 }
 
 /*
@@ -10751,7 +10988,7 @@ class MultiselectDropdownComponent {
         this.itemsSelected.emit(this.selectedItems);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: { selectedItems: "selectedItems", items: "items", placeHolder: "placeHolder", dropdownSettings: "dropdownSettings" }, outputs: { itemsSelected: "itemsSelected" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$7.MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: ["placeholder", "disabled", "settings", "data"], outputs: ["onFilterChange", "onDropDownClose", "onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll"] }, { kind: "directive", type: i2$1.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: "17.3.12", type: MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: { selectedItems: "selectedItems", items: "items", placeHolder: "placeHolder", dropdownSettings: "dropdownSettings" }, outputs: { itemsSelected: "itemsSelected" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$5.MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: ["placeholder", "disabled", "settings", "data"], outputs: ["onFilterChange", "onDropDownClose", "onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
             type: Component,
@@ -11206,6 +11443,7 @@ class InputComponent {
         this.smallLabel = false;
         this.carbonTheme = 'g10';
         this.placeholder = '';
+        this.trim = false;
         this.valueChange = new EventEmitter();
         this.inputValue$ = new BehaviorSubject(undefined);
         this.showPassword$ = new BehaviorSubject(false);
@@ -11220,6 +11458,9 @@ class InputComponent {
         this.openClearSubscription();
     }
     onValueChange(value) {
+        if (this.trim) {
+            value = value?.trim();
+        }
         this.inputValue$.next(value);
     }
     ngOnChanges(changes) {
@@ -11278,7 +11519,7 @@ class InputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, 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" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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</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,\n      'v-input--small-margin': smallMargin,\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      <div class=\"v-input__password-icon\">\n        <v-button\n          [mdiIcon]=\"obs.showPassword ? 'eye-off' : 'eye'\"\n          type=\"icon-grey-small\"\n          (clickEvent)=\"toggleShowPassword()\"\n        ></v-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", 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)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.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", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$3.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$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "directive", type: i2$3.TextArea, selector: "[cdsTextArea], [ibmTextArea]", inputs: ["theme", "invalid", "skeleton"] }, { kind: "directive", type: DigitOnlyDirective, selector: "[digitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputComponent, 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" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.full-width": "this.fullWidthClass" } }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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</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,\n      'v-input--small-margin': smallMargin,\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      <div class=\"v-input__password-icon\">\n        <v-button\n          [mdiIcon]=\"obs.showPassword ? 'eye-off' : 'eye'\"\n          type=\"icon-grey-small\"\n          (clickEvent)=\"toggleShowPassword()\"\n        ></v-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", 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)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.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", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { 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: DigitOnlyDirective, selector: "[digitOnly]", inputs: ["decimal", "decimalSeparator", "allowNegatives", "allowPaste", "negativeSign", "min", "max", "pattern"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
@@ -11330,6 +11571,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], dataTestId: [{
                 type: Input
+            }], trim: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -11467,7 +11710,7 @@ class SelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\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  <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    [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)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$3.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"], outputs: ["selected", "submit", "close", "search", "clear"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, selector: "v-select", inputs: { items: "items", defaultSelection: "defaultSelection", defaultSelectionId: "defaultSelectionId", defaultSelectionIds: "defaultSelectionIds", disabled: "disabled", dropUp: "dropUp", multiple: "multiple", margin: "margin", widthInPx: "widthInPx", notFoundText: "notFoundText", clearAllText: "clearAllText", clearText: "clearText", name: "name", title: "title", titleTranslationKey: "titleTranslationKey", clearSelectionSubject$: "clearSelectionSubject$", tooltip: "tooltip", required: "required", loading: "loading", loadingText: "loadingText", placeholder: "placeholder", smallMargin: "smallMargin", carbonTheme: "carbonTheme", appendInline: "appendInline", dataTestId: "dataTestId" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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  [ngClass]=\"{'--margin': margin, '--small-margin': smallMargin}\"\n  class=\"v-select-container\"\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  <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    [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)}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "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"], 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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -11537,92 +11780,551 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  *
  * 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.
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT 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 CarbonMultiInputComponent {
+class KeyValueComponent {
     constructor() {
-        this.name = '';
-        this.title = '';
-        this.titleTranslationKey = '';
-        this.type = 'value';
-        this.initialAmountOfRows = 1;
-        this.minimumAmountOfRows = 1;
-        this.maxRows = null;
-        this.addRowText = '';
-        this.addRowTranslationKey = '';
-        this.deleteRowText = '';
-        this.deleteRowTranslationKey = '';
-        this.disabled = false;
-        this.margin = false;
-        this.tooltip = '';
-        this.required = false;
-        this.keyColumnTitle = '';
-        this.valueColumnTitle = '';
-        this.dropdownColumnTitle = '';
-        this.hideDeleteButton = false;
-        this.hideAddButton = false;
-        this.dropdownWidth = 250;
         this.fullWidth = false;
-        this.carbonTheme = 'g10';
+        this.disabled = false;
+        this.keyColumnFlex = 1;
+        this.valueColumnFlex = 1;
         this.valueChange = new EventEmitter();
-        this.allValuesValidEvent = new EventEmitter();
-        this.amountOfArbitraryValuesArray$ = new BehaviorSubject([]);
-        this.values$ = new BehaviorSubject([]);
-        this.mappedValues$ = this.values$.pipe(map$1(values => values
-            .map(value => this.getMappedValue(value))
-            .filter(value => {
-            switch (this.type) {
-                case 'value':
-                    return value;
-                case 'keyValue':
-                    return value.value || value.key;
-                case 'keyDropdownValue':
-                    return (value.value &&
-                        value.key &&
-                        value.dropdown);
-                case 'arbitraryAmount':
-                    const objectValues = Object.values(value);
-                    const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
-                    return objectValues.length === positiveValuesAmount.length;
-            }
-        })));
-        this.addRowEnabled$ = this.values$.pipe(map$1(values => !!(this.maxRows === null || values.length < this.maxRows)));
-        this.dropdownItems$ = new BehaviorSubject([]);
-    }
-    set arbitraryValueAmount(value) {
-        this._amountOfArbitraryValues = value;
-        this.amountOfArbitraryValuesArray$.next(this.getArrayOfXLength(value));
-    }
-    set dropdownItems(value) {
-        this.dropdownItems$.next(value);
     }
-    ngOnInit() {
-        this.values$.next(this.getInitialRows());
-        this.openValuesSubscription();
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
     }
-    ngOnDestroy() {
-        this._valuesSubscription?.unsubscribe();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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.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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-key-value', standalone: true, imports: [CommonModule, InputModule$1], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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.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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class SingleValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
     }
-    addRow() {
-        combineLatest([this.values$, this.addRowEnabled$])
-            .pipe(take(1))
-            .subscribe(([values, addRowEnabled]) => {
-            if (addRowEnabled) {
-                this.values$.next([...values, this.getEmptyValue()]);
-            }
-        });
+    onInputChange(inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue });
     }
-    deleteRow(uuid) {
-        this.values$.pipe(take(1)).subscribe(values => {
-            if (values.length > this.minimumAmountOfRows) {
-                this.values$.next(values.filter(value => value.uuid !== uuid));
-            }
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-single-value', standalone: true, imports: [CommonModule, InputModule$1], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class KeyDropdownValueComponent {
+    constructor() {
+        this.dropdownWidth = 250;
+        this.fullWidth = false;
+        this.disabled = false;
+        this.keyColumnFlex = 1;
+        this.dropdownColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
     }
-    trackByFn(index, value) {
-        return value.uuid;
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyDropdownValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.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", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyDropdownValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-key-dropdown-value', standalone: true, imports: [CommonModule, InputModule$1, DropdownModule], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], dropdownColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], dropdownItems$: [{
+                type: Input
+            }], dropdownWidth: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], dropdownColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ArbitraryAmountValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+    }
+    get isFullWidth() {
+        return this.fullWidth;
+    }
+    onInputChange(arbitraryIndex, inputValue) {
+        this.valueChange.emit({
+            value: this.value,
+            inputValue,
+            type: 'arbitrary',
+            arbitraryIndex,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArbitraryAmountValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@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%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArbitraryAmountValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-arbitrary-amount-value', standalone: true, imports: [CommonModule, InputModule$1], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n@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%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], arbitraryAmountTitles: [{
+                type: Input
+            }], amountOfArbitraryValuesArray$: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], isFullWidth: [{
+                type: HostBinding,
+                args: ['class.--full-width']
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT 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 KeyValuePathSelectorComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.documentDefinitionName = '';
+        this.prefixes = [];
+        this.showDocumentDefinitionSelector = false;
+        this.notation = 'dots';
+        this.keyColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValuePathSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KeyValuePathSelectorComponent, isStandalone: true, selector: "valtimo-key-value-path-selector", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", documentDefinitionName: "documentDefinitionName", prefixes: "prefixes", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.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", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KeyValuePathSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-key-value-path-selector', standalone: true, imports: [
+                        CommonModule,
+                        InputModule$1,
+                        ValuePathSelectorComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], prefixes: [{
+                type: Input
+            }], showDocumentDefinitionSelector: [{
+                type: Input
+            }], notation: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHimport { LabelModule } from 'carbon-components-angular';
+OUT 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 ValuePathSelectorValueComponent {
+    constructor() {
+        this.fullWidth = false;
+        this.disabled = false;
+        this.documentDefinitionName = '';
+        this.prefixes = [];
+        this.showDocumentDefinitionSelector = false;
+        this.notation = 'dots';
+        this.keyColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValuePathSelectorValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", index: "index", value: "value", fullWidth: "fullWidth", disabled: "disabled", documentDefinitionName: "documentDefinitionName", prefixes: "prefixes", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", notation: "notation", keyColumnFlex: "keyColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.--full-width": "this.fullWidth" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.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", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-value-path-selector-value', standalone: true, imports: [
+                        CommonModule,
+                        InputModule$1,
+                        ValuePathSelectorComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], prefixes: [{
+                type: Input
+            }], showDocumentDefinitionSelector: [{
+                type: Input
+            }], notation: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class ValuePathSelectorDropdownValueComponent {
+    constructor() {
+        this.documentDefinitionName = '';
+        this.prefixes = [];
+        this.showDocumentDefinitionSelector = false;
+        this.notation = 'dots';
+        this.dropdownWidth = 250;
+        this.fullWidth = false;
+        this.disabled = false;
+        this.keyColumnFlex = 1;
+        this.dropdownColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+    }
+    onInputChange(type, inputValue) {
+        this.valueChange.emit({ value: this.value, inputValue, type });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorDropdownValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValuePathSelectorDropdownValueComponent, isStandalone: true, selector: "valtimo-value-path-selector-dropdown-value", inputs: { keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", index: "index", value: "value", dropdownItems$: "dropdownItems$", documentDefinitionName: "documentDefinitionName", prefixes: "prefixes", showDocumentDefinitionSelector: "showDocumentDefinitionSelector", 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\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%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.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", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], 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", "documentDefinitionName", "version", "prefixes", "label", "tooltip", "required", "showDocumentDefinitionSelector", "notation", "defaultValue"], outputs: ["valueChangeEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValuePathSelectorDropdownValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-value-path-selector-dropdown-value', standalone: true, imports: [
+                        CommonModule,
+                        InputModule$1,
+                        DropdownModule,
+                        ValuePathSelectorComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ], template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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    [documentDefinitionName]=\"documentDefinitionName\"\n    [prefixes]=\"prefixes\"\n    [showDocumentDefinitionSelector]=\"showDocumentDefinitionSelector\"\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%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { keyColumnTitle: [{
+                type: Input
+            }], valueColumnTitle: [{
+                type: Input
+            }], dropdownColumnTitle: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], dropdownItems$: [{
+                type: Input
+            }], documentDefinitionName: [{
+                type: Input
+            }], prefixes: [{
+                type: Input
+            }], showDocumentDefinitionSelector: [{
+                type: Input
+            }], notation: [{
+                type: Input
+            }], dropdownWidth: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.--full-width']
+            }], disabled: [{
+                type: Input
+            }], keyColumnFlex: [{
+                type: Input
+            }], dropdownColumnFlex: [{
+                type: Input
+            }], valueColumnFlex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class CarbonMultiInputComponent {
+    constructor() {
+        this.addRowText = '';
+        this.addRowTranslationKey = '';
+        this.deleteRowText = '';
+        this.deleteRowTranslationKey = '';
+        this.disabled = false;
+        this.dropdownColumnTitle = '';
+        this.dropdownWidth = 250;
+        this.fullWidth = false;
+        this.hideAddButton = false;
+        this.hideDeleteButton = false;
+        this.initialAmountOfRows = 1;
+        this.keyColumnTitle = '';
+        this.margin = false;
+        this.maxRows = null;
+        this.minimumAmountOfRows = 1;
+        this.name = '';
+        this.required = false;
+        this.title = '';
+        this.titleTranslationKey = '';
+        this.tooltip = '';
+        this.type = 'value';
+        this.valueColumnTitle = '';
+        this.valuePathSelectorDocumentDefinitionName = '';
+        this.valuePathSelectorPrefixes = [];
+        this.valuePathSelectorShowDocumentDefinitionSelector = false;
+        this.valuePathSelectorNotation = 'dots';
+        this.keyColumnFlex = 1;
+        this.dropdownColumnFlex = 1;
+        this.valueColumnFlex = 1;
+        this.valueChange = new EventEmitter();
+        this.allValuesValidEvent = new EventEmitter();
+        this.amountOfArbitraryValuesArray$ = new BehaviorSubject([]);
+        this.values$ = new BehaviorSubject([]);
+        this.mappedValues$ = this.values$.pipe(map$1(values => this.filterAndMapValues(values)));
+        this.addRowEnabled$ = this.values$.pipe(map$1(values => !!(this.maxRows === null || values.length < this.maxRows)));
+        this.dropdownItems$ = new BehaviorSubject([]);
+        this._subscriptions = new Subscription();
+    }
+    set arbitraryValueAmount(value) {
+        this._amountOfArbitraryValues = value;
+        this.amountOfArbitraryValuesArray$.next(this.getArrayOfXLength(value));
+    }
+    set dropdownItems(value) {
+        this.dropdownItems$.next(value);
+    }
+    ngOnInit() {
+        this.values$.next(this.getInitialRows());
+        this.openValuesSubscription();
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    addRow() {
+        combineLatest([this.values$, this.addRowEnabled$])
+            .pipe(take(1))
+            .subscribe(([values, addRowEnabled]) => {
+            if (addRowEnabled) {
+                this.values$.next([...values, this.getEmptyValue()]);
+            }
+        });
+    }
+    deleteRow(uuid) {
+        this.values$.pipe(take(1)).subscribe(values => {
+            if (values.length > this.minimumAmountOfRows) {
+                this.values$.next(values.filter(value => value.uuid !== uuid));
+            }
+        });
+    }
+    trackByFn(_, value) {
+        return value.uuid;
     }
     getDropdownItemsForRow(index) {
         return combineLatest([this.dropdownItems$, this.values$]).pipe(map$1(([dropdownItems, values]) => {
@@ -11657,9 +12359,9 @@ class CarbonMultiInputComponent {
     getInitialRows() {
         const minimumRows = this.minimumAmountOfRows;
         const initialRows = this.initialAmountOfRows;
-        const amountOfInitalRows = Math.max(minimumRows, initialRows);
+        const amountOfInitialRows = Math.max(minimumRows, initialRows);
         if (!this.defaultValues) {
-            return new Array(amountOfInitalRows).fill(this.getEmptyValue());
+            return new Array(amountOfInitialRows).fill(this.getEmptyValue());
         }
         return this.defaultValues.map(defaultValue => ({ ...defaultValue, uuid: v4() }));
     }
@@ -11681,10 +12383,10 @@ class CarbonMultiInputComponent {
         };
     }
     getMappedValue(valueToMap) {
-        if (this.type === 'keyValue') {
+        if (this.type === 'keyValue' || this.type === 'keyValuePathSelector') {
             return { key: valueToMap.key, value: valueToMap.value };
         }
-        else if (this.type === 'keyDropdownValue') {
+        else if (this.type === 'keyDropdownValue' || this.type === 'valuePathSelectorDropdownValue') {
             return { key: valueToMap.key, value: valueToMap.value, dropdown: valueToMap.dropdown };
         }
         else if (this.type === 'arbitraryAmount') {
@@ -11695,73 +12397,110 @@ class CarbonMultiInputComponent {
         return valueToMap.value;
     }
     openValuesSubscription() {
-        this._valuesSubscription = combineLatest([this.values$, this.mappedValues$]).subscribe(([values, mappedValues]) => {
+        this._subscriptions.add(combineLatest([this.values$, this.mappedValues$]).subscribe(([values, mappedValues]) => {
             this.valueChange.emit(mappedValues);
             this.allValuesValidEvent.emit(values.length === mappedValues.length);
-        });
+        }));
     }
     getArrayOfXLength(length) {
         return Array(length).fill(0);
     }
+    filterAndMapValues(values) {
+        return values
+            .map(value => this.getMappedValue(value))
+            .filter(value => this.isValueValid(value));
+    }
+    isValueValid(value) {
+        switch (this.type) {
+            case 'value':
+                return !!value;
+            case 'keyValue':
+            case 'keyValuePathSelector':
+                return !!(value.value || value.key);
+            case 'keyDropdownValue':
+            case 'valuePathSelectorDropdownValue':
+                return !!(value.value &&
+                    value.key &&
+                    value.dropdown);
+            case 'arbitraryAmount':
+                const objectValues = Object.values(value);
+                const positiveValuesAmount = objectValues.filter(objectValue => !!objectValue);
+                return objectValues.length === positiveValuesAmount.length;
+            default:
+                return false;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", arbitraryValueAmount: "arbitraryValueAmount", arbitraryAmountTitles: "arbitraryAmountTitles", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", dropdownColumnTitle: "dropdownColumnTitle", hideDeleteButton: "hideDeleteButton", hideAddButton: "hideAddButton", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", carbonTheme: "carbonTheme" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'arbitraryAmount'\">\n        <ng-container\n          *ngTemplateOutlet=\"arbitraryAmountValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\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 class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #arbitraryAmountValue let-value=\"value\" let-index=\"index\">\n  <div\n    class=\"v-multi-input__input\"\n    [ngClass]=\"{'--full-width': fullWidth}\"\n    *ngFor=\"let _ of amountOfArbitraryValuesArray$ | async; index as i\"\n  >\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)=\"onValueChange(value, $event.target.value, 'arbitrary', i)\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown\n      (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\"\n      [appendInline]=\"true\"\n    >\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\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{width:100%}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Label, selector: "cds-label, ibm-label", inputs: ["labelInputID", "disabled", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.DropdownList, selector: "cds-dropdown-list, ibm-dropdown-list", inputs: ["ariaLabel", "items", "listTpl", "type", "showTitles"], outputs: ["select", "scroll", "blurIntent"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", arbitraryAmountTitles: "arbitraryAmountTitles", arbitraryValueAmount: "arbitraryValueAmount", defaultValues: "defaultValues", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", dropdownColumnTitle: "dropdownColumnTitle", dropdownItems: "dropdownItems", dropdownWidth: "dropdownWidth", fullWidth: "fullWidth", hideAddButton: "hideAddButton", hideDeleteButton: "hideDeleteButton", initialAmountOfRows: "initialAmountOfRows", keyColumnTitle: "keyColumnTitle", margin: "margin", maxRows: "maxRows", minimumAmountOfRows: "minimumAmountOfRows", name: "name", required: "required", title: "title", titleTranslationKey: "titleTranslationKey", tooltip: "tooltip", type: "type", valueColumnTitle: "valueColumnTitle", valuePathSelectorDocumentDefinitionName: "valuePathSelectorDocumentDefinitionName", valuePathSelectorPrefixes: "valuePathSelectorPrefixes", valuePathSelectorShowDocumentDefinitionSelector: "valuePathSelectorShowDocumentDefinitionSelector", valuePathSelectorNotation: "valuePathSelectorNotation", keyColumnFlex: "keyColumnFlex", dropdownColumnFlex: "dropdownColumnFlex", valueColumnFlex: "valueColumnFlex" }, outputs: { valueChange: "valueChange", allValuesValidEvent: "allValuesValidEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\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            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\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            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\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 class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "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", "documentDefinitionName", "prefixes", "showDocumentDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorValueComponent, selector: "valtimo-value-path-selector-value", inputs: ["keyColumnTitle", "valueColumnTitle", "index", "value", "fullWidth", "disabled", "documentDefinitionName", "prefixes", "showDocumentDefinitionSelector", "notation", "keyColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "component", type: ValuePathSelectorDropdownValueComponent, selector: "valtimo-value-path-selector-dropdown-value", inputs: ["keyColumnTitle", "valueColumnTitle", "dropdownColumnTitle", "index", "value", "dropdownItems$", "documentDefinitionName", "prefixes", "showDocumentDefinitionSelector", "notation", "dropdownWidth", "fullWidth", "disabled", "keyColumnFlex", "dropdownColumnFlex", "valueColumnFlex"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-carbon-multi-input', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'keyDropdownValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyDropdownValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"type === 'arbitraryAmount'\">\n        <ng-container\n          *ngTemplateOutlet=\"arbitraryAmountValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\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 class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n\n<ng-template #singleValue let-value=\"value\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (change)=\"onValueChange(value, $event, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyValue let-value=\"value\" let-index=\"index\">\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\" [ngClass]=\"{'--full-width': fullWidth}\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</cds-label>\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #arbitraryAmountValue let-value=\"value\" let-index=\"index\">\n  <div\n    class=\"v-multi-input__input\"\n    [ngClass]=\"{'--full-width': fullWidth}\"\n    *ngFor=\"let _ of amountOfArbitraryValuesArray$ | async; index as i\"\n  >\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)=\"onValueChange(value, $event.target.value, 'arbitrary', i)\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #keyDropdownValue let-value=\"value\" let-index=\"index\">\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && keyColumnTitle\">{{ keyColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.key\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n    />\n  </div>\n\n  <div [style.minWidth.px]=\"dropdownWidth\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && dropdownColumnTitle\">{{ dropdownColumnTitle }}</cds-label>\n\n    <cds-dropdown\n      (selected)=\"onValueChange(value, $event.item.id, 'dropdown')\"\n      [appendInline]=\"true\"\n    >\n      <cds-dropdown-list\n        [items]=\"getDropdownItemsForRow(index) | async\"\n        type=\"multi\"\n      ></cds-dropdown-list>\n    </cds-dropdown>\n  </div>\n\n  <div [ngClass]=\"{'--full-width': fullWidth}\" class=\"v-multi-input__input\">\n    <cds-label *ngIf=\"index === 0 && valueColumnTitle\">{{ valueColumnTitle }}</cds-label>\n\n    <input\n      cdsText\n      [defaultValue]=\"value.value\"\n      [disabled]=\"disabled\"\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n    />\n  </div>\n</ng-template>\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{width:100%}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], title: [{
+            args: [{ selector: 'valtimo-carbon-multi-input', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\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            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\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            [documentDefinitionName]=\"valuePathSelectorDocumentDefinitionName\"\n            [prefixes]=\"valuePathSelectorPrefixes\"\n            [dropdownItems$]=\"getDropdownItemsForRow(i)\"\n            [dropdownWidth]=\"dropdownWidth\"\n            [showDocumentDefinitionSelector]=\"valuePathSelectorShowDocumentDefinitionSelector\"\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 class=\"cds--btn__icon\" cdsIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        cdsButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n        (click)=\"addRow()\"\n      >\n        {{ vars.addRowText }}\n\n        <svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:flex-end;margin-block-end:var(--v-multi-input-row-spacing-block)}.v-multi-input__input{margin-inline-end:var(--v-multi-input-input-spacing-inline)}.v-multi-input__input.--full-width{flex:1}.v-multi-input__separator{height:40px;width:12px;display:flex;justify-content:flex-start}.v-multi-input__separator:before{content:\"\";height:100%;width:1px;background-color:var(--cds-border-subtle-selected)}.v-multi-input--no-delete-button .v-multi-input__input:last-child{margin-inline-end:0}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+        }], propDecorators: { addRowText: [{
                 type: Input
-            }], titleTranslationKey: [{
+            }], addRowTranslationKey: [{
                 type: Input
-            }], type: [{
+            }], arbitraryAmountTitles: [{
                 type: Input
             }], arbitraryValueAmount: [{
                 type: Input
-            }], arbitraryAmountTitles: [{
+            }], defaultValues: [{
                 type: Input
-            }], initialAmountOfRows: [{
+            }], deleteRowText: [{
                 type: Input
-            }], minimumAmountOfRows: [{
+            }], deleteRowTranslationKey: [{
                 type: Input
-            }], maxRows: [{
+            }], disabled: [{
                 type: Input
-            }], addRowText: [{
+            }], dropdownColumnTitle: [{
                 type: Input
-            }], addRowTranslationKey: [{
+            }], dropdownItems: [{
                 type: Input
-            }], deleteRowText: [{
+            }], dropdownWidth: [{
                 type: Input
-            }], deleteRowTranslationKey: [{
+            }], fullWidth: [{
                 type: Input
-            }], disabled: [{
+            }], hideAddButton: [{
                 type: Input
-            }], defaultValues: [{
+            }], hideDeleteButton: [{
+                type: Input
+            }], initialAmountOfRows: [{
+                type: Input
+            }], keyColumnTitle: [{
                 type: Input
             }], margin: [{
                 type: Input
-            }], tooltip: [{
+            }], maxRows: [{
+                type: Input
+            }], minimumAmountOfRows: [{
+                type: Input
+            }], name: [{
                 type: Input
             }], required: [{
                 type: Input
-            }], keyColumnTitle: [{
+            }], title: [{
+                type: Input
+            }], titleTranslationKey: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], type: [{
                 type: Input
             }], valueColumnTitle: [{
                 type: Input
-            }], dropdownColumnTitle: [{
+            }], valuePathSelectorDocumentDefinitionName: [{
                 type: Input
-            }], hideDeleteButton: [{
+            }], valuePathSelectorPrefixes: [{
                 type: Input
-            }], hideAddButton: [{
+            }], valuePathSelectorShowDocumentDefinitionSelector: [{
                 type: Input
-            }], dropdownItems: [{
+            }], valuePathSelectorNotation: [{
                 type: Input
-            }], dropdownWidth: [{
+            }], keyColumnFlex: [{
                 type: Input
-            }], fullWidth: [{
+            }], dropdownColumnFlex: [{
                 type: Input
-            }], carbonTheme: [{
+            }], valueColumnFlex: [{
                 type: Input
             }], valueChange: [{
                 type: Output
@@ -11878,7 +12617,7 @@ class DatePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatePickerComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.TextInput, selector: "[cdsText], [ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatePickerComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputLabelComponent, selector: "v-input-label", inputs: ["name", "tooltip", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -12212,7 +12951,7 @@ class RadioComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "largeMargin", "small", "noMargin", "title", "titleTranslationKey", "required", "disabled", "carbonTheme"] }, { kind: "component", type: i2$3.Radio, selector: "cds-radio, ibm-radio", inputs: ["checked", "name", "disabled", "labelPlacement", "ariaLabelledby", "ariaLabel", "required", "value", "skeleton", "id"], outputs: ["change"] }, { kind: "component", type: i2$3.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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RadioComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.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", "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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -12586,13 +13325,13 @@ class SearchFieldsComponent {
             this.expand();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i2$4.DocumentService }, { token: i1.TranslateService }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchFieldsComponent, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", documentDefinitionName: "documentDefinitionName", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\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      >\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    [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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"], 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", "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$3.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", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "component", type: i2$3.Accordion, selector: "cds-accordion, ibm-accordion", inputs: ["align", "size", "skeleton"] }, { kind: "component", type: i2$3.AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: ["title", "context", "id", "skeleton", "expanded", "disabled"], outputs: ["selected"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i2$3.Loading, selector: "cds-loading, ibm-loading", inputs: ["title", "isActive", "size", "overlay"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i2$3.DocumentService }, { token: i1.TranslateService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SearchFieldsComponent, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", documentDefinitionName: "documentDefinitionName", setValuesSubject$: "setValuesSubject$", clearValuesSubject$: "clearValuesSubject$", defaultValues: "defaultValues", inputDisabled: "inputDisabled", externalSearchField: "externalSearchField" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\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      >\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    [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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"], 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", "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", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "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.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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-search-fields', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"loading\">\n  <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n</ng-container>\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      >\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    [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\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    [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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        [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\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      [carbonTheme]=\"carbonTheme\"\n      [appendInline]=\"false\"\n    ></v-select>\n  </ng-container>\n</ng-template>\n\n<ng-template #toText>\n  <div class=\"to-text\">\n    <v-paragraph>{{ 'searchFields.to' | translate }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonsTemplate let-noSearchFields=\"noSearchFields\">\n  <ng-container\n    *ngTemplateOutlet=\"noSearchFieldsTemplate; context: {noSearchFields: noSearchFields}\"\n  ></ng-container>\n\n  <div class=\"buttons-container\" *ngIf=\"!noSearchFields && {expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"tertiary\"\n        data-testid=\"search-fields-clear-button\"\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields || inputDisabled\"\n        type=\"button\"\n        id=\"clear\"\n      >\n        <svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n\n      <button\n        *ngIf=\"obs.expanded\"\n        cdsButton=\"primary\"\n        data-testid=\"search-fields-search-button\"\n        (click)=\"search()\"\n        [disabled]=\"\n          loading || noSearchFields || (hasValidValues$ | async) === false || inputDisabled\n        \"\n        type=\"button\"\n        id=\"search\"\n      >\n        <svg cdsIcon=\"search\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\n        {{ 'searchFields.searchButtonText' | translate }}\n      </button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #noSearchFieldsTemplate let-noSearchFields=\"noSearchFields\">\n  <div class=\"no-search-fields-message\" *ngIf=\"noSearchFields\">\n    <v-paragraph dataTestId=\"search-fields-no-fields\" [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .multiple-search-fields{display:flex!important;flex-direction:row!important;align-items:center}.to-text{margin-inline-start:8px;margin-inline-end:8px}.buttons-container{width:100%;display:flex;justify-content:flex-end}.right-buttons{display:flex;flex-direction:row;gap:16px}.search-fields-container{padding-bottom:16px;padding-top:16px;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}.search-fields-container--hidden{display:none}.meta-container{width:100%;padding-bottom:16px}.loading-container{display:flex;width:100%;justify-content:center}.no-search-fields-message{display:flex;width:100%;justify-content:center;margin-top:16px}.search-fields-tile{padding:0}::ng-deep .cds--accordion{background-color:var(--cds-layer)}::ng-deep .cds--accordion__item{border-inline-start:1px solid var(--cds-border-subtle);border-inline-end:1px solid var(--cds-border-subtle)}::ng-deep .cds--accordion__content{padding:0 16px}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i2$4.DocumentService }, { type: i1.TranslateService }, { type: i2$3.IconService }], propDecorators: { loading: [{
+        }], ctorParameters: () => [{ type: i2$3.DocumentService }, { type: i1.TranslateService }, { type: i3.IconService }], propDecorators: { loading: [{
                 type: Input
             }], searchFields: [{
                 type: Input
@@ -12859,6 +13598,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Copyright 2015-2024 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 /*
  * Copyright 2015-2024 Ritense BV, the Netherlands.
  *
@@ -12884,7 +13751,14 @@ class CarbonMultiInputModule {
             ButtonModule$1,
             IconModule,
             InputModule$1,
-            DropdownModule], exports: [CarbonMultiInputComponent] }); }
+            DropdownModule,
+            KeyValueComponent,
+            SingleValueComponent,
+            KeyDropdownValueComponent,
+            ArbitraryAmountValueComponent,
+            KeyValuePathSelectorComponent,
+            ValuePathSelectorValueComponent,
+            ValuePathSelectorDropdownValueComponent], exports: [CarbonMultiInputComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputModule, imports: [CommonModule,
             InputLabelModule,
             InputModule,
@@ -12893,7 +13767,14 @@ class CarbonMultiInputModule {
             ButtonModule$1,
             IconModule,
             InputModule$1,
-            DropdownModule] }); }
+            DropdownModule,
+            KeyValueComponent,
+            SingleValueComponent,
+            KeyDropdownValueComponent,
+            ArbitraryAmountValueComponent,
+            KeyValuePathSelectorComponent,
+            ValuePathSelectorValueComponent,
+            ValuePathSelectorDropdownValueComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CarbonMultiInputModule, decorators: [{
             type: NgModule,
@@ -12909,6 +13790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         IconModule,
                         InputModule$1,
                         DropdownModule,
+                        KeyValueComponent,
+                        SingleValueComponent,
+                        KeyDropdownValueComponent,
+                        ArbitraryAmountValueComponent,
+                        KeyValuePathSelectorComponent,
+                        ValuePathSelectorValueComponent,
+                        ValuePathSelectorDropdownValueComponent,
                     ],
                     exports: [CarbonMultiInputComponent],
                 }]
@@ -12976,7 +13864,7 @@ class ConfirmationModalComponent {
         this.optionalEvent.emit(this.outputOnOptional);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmationModalComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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>\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  <section cdsModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n  </section>\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%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i2$3.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i2$3.ModalFooter, selector: "cds-modal-footer, ibm-modal-footer" }, { kind: "directive", type: i2$3.ModalContent, selector: "[cdsModalContent], [ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i2$3.ModalHeaderHeading, selector: "[cdsModalHeaderHeading], [ibmModalHeaderHeading]" }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoCdsModalDirective, selector: "[valtimoCdsModal]" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ConfirmationModalComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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>\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  <section cdsModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n  </section>\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%}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.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]" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
@@ -13092,7 +13980,7 @@ class ExpansionPanelComponent {
         this.open$.next(!this.open$.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ExpansionPanelComponent, selector: "valtimo-expansion-panel-component", inputs: { hideAboveFoldWhenExpanded: "hideAboveFoldWhenExpanded" }, host: { listeners: { "click": "clickInside()" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i2$3.ExpandableTile, selector: "cds-expandable-tile, ibm-expandable-tile", inputs: ["theme", "expanded", "interactive", "translations"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ExpansionPanelComponent, selector: "valtimo-expansion-panel-component", inputs: { hideAboveFoldWhenExpanded: "hideAboveFoldWhenExpanded" }, host: { listeners: { "click": "clickInside()" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "component", type: i3.ExpandableTile, selector: "cds-expandable-tile, ibm-expandable-tile", inputs: ["theme", "expanded", "interactive", "translations"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
@@ -13627,13 +14515,13 @@ class TableComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i3$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{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      <v-button type=\"secondary\" (clickEvent)=\"editButtonClicked.emit(item)\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-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      <v-button type=\"secondary\" [disabled]=\"true\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-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      <v-button (clickEvent)=\"setPage('previous')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.previous' | translate\n      }}</v-button>\n    </span>\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <v-button (clickEvent)=\"setPage('next')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.nextArrow' | translate\n      }}</v-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i2$2.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", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "clearText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin", "carbonTheme", "appendInline", "dataTestId"], outputs: ["selectedChange"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-table', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container *ngIf=\"{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      <v-button type=\"secondary\" (clickEvent)=\"editButtonClicked.emit(item)\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-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      <v-button type=\"secondary\" [disabled]=\"true\">{{\n        editButtonTranslationKey || 'interface.edit' | translate\n      }}</v-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      <v-button (clickEvent)=\"setPage('previous')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.previous' | translate\n      }}</v-button>\n    </span>\n    <span *ngIf=\"paginationObject.page * paginationObject.size < paginationObject.collectionSize\">\n      <v-button (clickEvent)=\"setPage('next')\" type=\"text\" [disabled]=\"loading\">{{\n        'interface.nextArrow' | translate\n      }}</v-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: i3.BreakpointObserver }], propDecorators: { items: [{
+        }], ctorParameters: () => [{ type: i3$1.BreakpointObserver }], propDecorators: { items: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -13762,13 +14650,13 @@ class VModalComponent {
     setAppearingDelayInService() {
         this.modalService.setAppearingDelay(this.appearingDelayMs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VModalComponent, deps: [{ token: ModalService }, { token: i2$3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VModalComponent, selector: "v-modal", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx", hideFooter: "hideFooter", parentId: "parentId" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\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      <cds-icon-button (click)=\"closeModal()\" kind=\"ghost\" size=\"sm\">\n        <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"24\"></svg>\n      </cds-icon-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);-webkit-backdrop-filter:blur(0);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);-webkit-backdrop-filter:var(--v-modal-backdrop-filter);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);-webkit-backdrop-filter:var(--v-modal-backdrop-filter-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2$3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VModalComponent, deps: [{ token: ModalService }, { token: i3.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: VModalComponent, selector: "v-modal", inputs: { appearingDelayMs: "appearingDelayMs", maxWidthPx: "maxWidthPx", hideFooter: "hideFooter", parentId: "parentId" }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\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      <cds-icon-button (click)=\"closeModal()\" kind=\"ghost\" size=\"sm\">\n        <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"24\"></svg>\n      </cds-icon-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);-webkit-backdrop-filter:blur(0);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);-webkit-backdrop-filter:var(--v-modal-backdrop-filter);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);-webkit-backdrop-filter:var(--v-modal-backdrop-filter-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'v-modal', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-container\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      <cds-icon-button (click)=\"closeModal()\" kind=\"ghost\" size=\"sm\">\n        <svg class=\"cds--btn__icon\" cdsIcon=\"close\" size=\"24\"></svg>\n      </cds-icon-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);-webkit-backdrop-filter:blur(0);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);-webkit-backdrop-filter:var(--v-modal-backdrop-filter);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);-webkit-backdrop-filter:var(--v-modal-backdrop-filter-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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
-        }], ctorParameters: () => [{ type: ModalService }, { type: i2$3.IconService }], propDecorators: { appearingDelayMs: [{
+        }], ctorParameters: () => [{ type: ModalService }, { type: i3.IconService }], propDecorators: { appearingDelayMs: [{
                 type: Input
             }], maxWidthPx: [{
                 type: Input
@@ -14024,7 +14912,7 @@ class StepperFooterStepComponent {
         this.stepperService.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperFooterStepComponent, deps: [{ token: StepperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StepperFooterStepComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StepperFooterStepComponent, 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-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"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-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.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$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StepperFooterStepComponent, decorators: [{
             type: Component,
@@ -14980,7 +15868,7 @@ class ValtimoCdsOverflowButtonDirective {
             this.renderer.setStyle(element, 'width', `${this.width}px`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2$3.OverflowMenu }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i3.OverflowMenu }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ValtimoCdsOverflowButtonDirective, selector: "[valtimoCdsOverflowButton]", inputs: { width: "width" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValtimoCdsOverflowButtonDirective, decorators: [{
@@ -14989,7 +15877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2$3.OverflowMenu }], propDecorators: { width: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i3.OverflowMenu }], propDecorators: { width: [{
                 type: Input
             }] } });
 
@@ -15077,7 +15965,7 @@ class StatusSelectorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StatusSelectorComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StatusSelectorComponent, isStandalone: true, selector: "valtimo-status-selector", inputs: { statuses: "statuses", selectedStatuses: "selectedStatuses", carbonTheme: "carbonTheme", disabled: "disabled" }, outputs: { selectedStatusesChangeEvent: "selectedStatusesChangeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label class=\"status-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'dossierManagement.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    >\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}::ng-deep .status-selector-dropdown-template .generic-span{display:flex;align-items:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i2$3.Dropdown, selector: "cds-dropdown, ibm-dropdown", inputs: ["id", "label", "hideLabel", "helperText", "placeholder", "displayValue", "clearText", "size", "type", "theme", "disabled", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], outputs: ["selected", "onClose", "close"] }, { kind: "component", type: i2$3.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$3.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$3.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$3.Tag, selector: "cds-tag, ibm-tag", inputs: ["type", "size", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StatusSelectorComponent, isStandalone: true, selector: "valtimo-status-selector", inputs: { statuses: "statuses", selectedStatuses: "selectedStatuses", carbonTheme: "carbonTheme", disabled: "disabled" }, outputs: { selectedStatusesChangeEvent: "selectedStatusesChangeEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<cds-label class=\"status-selector\" *ngIf=\"listItems$ | async as listItems\">\n  {{ 'dossierManagement.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    >\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}::ng-deep .status-selector-dropdown-template .generic-span{display:flex;align-items:center}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.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", "skeleton", "inline", "disableArrowKeys", "invalid", "invalidText", "warn", "warnText", "appendInline", "scrollableContainer", "itemValueKey", "selectionFeedback", "menuButtonLabel", "selectedLabel", "dropUp"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StatusSelectorComponent, decorators: [{
             type: Component,
@@ -15193,5 +16081,5 @@ function enableCustomFormioComponents(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, ButtonComponent, ButtonModule, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CardComponent, CardModule, CaseCountPipe, CdsThemeService, ChoiceFieldService, CommandClickDirectiveModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, CurrentCarbonTheme, CustomTagsService, DEFAULT_LIST_TRANSLATIONS, DEFAULT_PAGINATION, DEFAULT_PAGINATOR_CONFIG, DataListComponent, DataListModule, DatePickerComponent, DatePickerModule, DigitOnlyDirective, DropzoneComponent, DropzoneModule, EditorComponent, EditorModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FitPageDirective, FitPageDirectiveModule, FormComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageContainerComponent, PageContentComponent, PageHeaderActionsComponent, PageHeaderComponent, PageHeaderIntroductionComponent, PageHeaderModule, PageHeaderService, PageModule, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, RenderInPageHeaderDirective, RenderInPageHeaderDirectiveModule, RenderPageHeaderDirective, RenderPageHeaderDirectiveModule, 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, TitleComponent, TitleModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VCardComponent, VCardModule, VModalComponent, VModalModule, VPageHeaderComponent, ValtimoCdsModalDirective, ValtimoCdsModalDirectiveModule, ValtimoCdsOverflowButtonDirective, ValtimoCdsOverflowButtonDirectiveModule, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomFormioComponentWithClass, registerCustomTag, registerCustomTags, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BOOLEAN_CONVERTER_VALUES, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, BreadcrumbService, ButtonComponent, ButtonModule, CARBON_CONSTANTS, CARBON_THEME, CASES_WITHOUT_STATUS_KEY, CamundaFormComponent, CamundaFormModule, CarbonListComponent, CarbonListFilterPipe, CarbonListModule, CarbonMultiInputComponent, CarbonMultiInputModule, CarbonNoResultsComponent, CardComponent, CardModule, CaseCountPipe, CdsThemeService, ChoiceFieldService, CommandClickDirectiveModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, CtrlClickDirective, CurrentCarbonTheme, CustomTagsService, 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, FitPageDirectiveModule, FormComponent, FormIoCurrencyComponent, FormIoCurrentUserComponent, FormIoDomService, FormIoIbanComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormModule, FormioBuilderComponent, FormioComponent, FormioDummyComponent, FormioOptionsImpl, FormioValueResolverSelectorComponent, InputComponent, InputLabelComponent, InputLabelModule, InputModule, IsArrayPipe, KeyGeneratorService, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, ModalService, MonacoTheme, MoveRowDirection, MultiInputFormComponent, MultiInputFormModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageContainerComponent, PageContentComponent, PageHeaderActionsComponent, PageHeaderComponent, PageHeaderIntroductionComponent, PageHeaderModule, PageHeaderService, PageModule, PageSubtitleService, PageTitleComponent, PageTitleModule, PageTitleService, ParagraphComponent, ParagraphModule, PendingChangesComponent, PendingChangesService, ProgressBarComponent, ProgressBarModule, PromptComponent, PromptModule, PromptService, RadioComponent, RadioModule, RenderInPageHeaderDirective, RenderInPageHeaderDirectiveModule, RenderPageHeaderDirective, RenderPageHeaderDirectiveModule, 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, TitleComponent, TitleModule, TooltipComponent, TooltipDirective, TooltipIconComponent, TooltipIconModule, TooltipModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, UserInterfaceService, VCardComponent, VCardModule, VModalComponent, VModalModule, VPageHeaderComponent, ValtimoCdsModalDirective, ValtimoCdsModalDirectiveModule, ValtimoCdsOverflowButtonDirective, ValtimoCdsOverflowButtonDirectiveModule, ValtimoModalService, ValuePathSelectorComponent, ValuePathSelectorInputMode, ValuePathSelectorPrefix, ValuePathSelectorService, ViewContentService, ViewType, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, createCustomFormioComponent, customUploaderType, enableCustomFormioComponents, menuInitializer, pendingChangesGuard, registerCustomFormioComponent, registerCustomFormioComponentWithClass, registerCustomTag, registerCustomTags, registerFormioCurrencyComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioIbanComponent, registerFormioUploadComponent, registerFormioValueResolverSelectorComponent };
 //# sourceMappingURL=valtimo-components.mjs.map