@valtimo/components 10.5.1 → 10.6.0

package/fesm2015/valtimo-components.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, Injectable, Component, Input, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, ViewChildren } from '@angular/core';
+import { Pipe, NgModule, RendererStyleFlags2, Directive, Inject, Injectable, Component, Input, EventEmitter, Output, ViewContainerRef, ViewChild, HostBinding, ViewEncapsulation, HostListener, ViewChildren } from '@angular/core';
 import { combineLatest, map, Subject, BehaviorSubject, fromEvent, from, switchMap, Observable, timer, take as take$1, Subscription, of, filter as filter$1, startWith } from 'rxjs';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { take, debounceTime, filter, map as map$1, tap, distinctUntilChanged, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i2 from '@valtimo/config';
 import { VERSIONS, HttpLoaderFactory } from '@valtimo/config';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
 import moment from 'moment';
@@ -31,6 +31,7 @@ import * as i4$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i5$1 from '@valtimo/context';
 import * as i5$2 from '@angular/cdk/layout';
+import { get } from 'lodash';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import heatmap from 'heatmap.js-fixed/build/heatmap.js';
 import * as i1$6 from '@valtimo/resource';
@@ -289,6 +290,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * limitations under the License.
  */
 
+/*
+ * Copyright 2015-2023 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 ValtimoIbmModalDirective {
+    constructor(document, elementRef, renderer) {
+        this.document = document;
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.attributeMutation = (mutation) => {
+            const OPEN_ATTRIBUTE_NAME = 'ng-reflect-open';
+            if (mutation.attributeName === OPEN_ATTRIBUTE_NAME) {
+                const open = this.elementRef.nativeElement.getAttribute(OPEN_ATTRIBUTE_NAME);
+                if (typeof open === 'string') {
+                    if (open === 'true') {
+                        this.setStyle();
+                    }
+                    else if (open === 'false') {
+                        this.removeStyle();
+                    }
+                }
+            }
+        };
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => this.attributeMutation(mutation));
+        });
+    }
+    ngAfterViewInit() {
+        this._mutationObserver.observe(this.elementRef.nativeElement, {
+            attributes: true,
+        });
+    }
+    ngOnDestroy() {
+        this._mutationObserver.disconnect();
+    }
+    setStyle() {
+        this.renderer.setStyle(this.document.body, 'overflow', 'hidden', RendererStyleFlags2.Important);
+        this.renderer.setStyle(this.document.documentElement, 'overflow', 'hidden', RendererStyleFlags2.Important);
+    }
+    removeStyle() {
+        this.renderer.removeStyle(this.document.body, 'overflow');
+        this.renderer.removeStyle(this.document.documentElement, 'overflow');
+    }
+}
+ValtimoIbmModalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoIbmModalDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ValtimoIbmModalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ValtimoIbmModalDirective, selector: "[valtimoIbmModal]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoIbmModalDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[valtimoIbmModal]' }]
+        }], ctorParameters: function () {
+        return [{ type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }];
+    } });
+
+/*
+ * Copyright 2015-2023 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 ValtimoIbmModalDirectiveModule {
+}
+ValtimoIbmModalDirectiveModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoIbmModalDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ValtimoIbmModalDirectiveModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ValtimoIbmModalDirectiveModule, declarations: [ValtimoIbmModalDirective], imports: [CommonModule], exports: [ValtimoIbmModalDirective] });
+ValtimoIbmModalDirectiveModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoIbmModalDirectiveModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoIbmModalDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ValtimoIbmModalDirective],
+                    imports: [CommonModule],
+                    exports: [ValtimoIbmModalDirective],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2023 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-2023 Ritense BV, the Netherlands.
  *
@@ -360,6 +473,7 @@ class ShellService {
         this._resizeBorderElement$ = new BehaviorSubject(undefined);
         this._mouseX$ = fromEvent(document.body, 'mousemove').pipe(map((e) => e.pageX));
         this._isResizing$ = new BehaviorSubject(false);
+        this._collapsibleWidescreenMenu$ = new BehaviorSubject(false);
         this.renderer = rendererFactory2.createRenderer(null, null);
         this.openSidenavSizeSubscription();
         this.openMouseSubscriptions();
@@ -380,6 +494,9 @@ class ShellService {
     get sidenavWidth$() {
         return this._sidenavWidth$.asObservable();
     }
+    get collapsibleWidescreenMenu$() {
+        return this._collapsibleWidescreenMenu$.asObservable();
+    }
     ngOnDestroy() {
         this.sidenavSizeSubscription.unsubscribe();
     }
@@ -387,6 +504,9 @@ class ShellService {
         const isExpanded = this._sideBarExpanded$.getValue();
         this._sideBarExpanded$.next(!isExpanded);
     }
+    collapseSideBar() {
+        this._sideBarExpanded$.next(false);
+    }
     togglePanel() {
         const isExpanded = this._panelExpanded$.getValue();
         this._panelExpanded$.next(!isExpanded);
@@ -410,6 +530,12 @@ class ShellService {
     setContentElement(element) {
         this._contentElement$.next(element);
     }
+    setCollapsibleWidescreenMenu(collapsible) {
+        this._collapsibleWidescreenMenu$.next(collapsible);
+        if (collapsible) {
+            this.collapseSideBar();
+        }
+    }
     createResizeBorderElement(sidenavElement) {
         const borderElement = this.renderer.createElement('div');
         this.renderer.addClass(borderElement, 'resize-border');
@@ -444,8 +570,12 @@ class ShellService {
             this._sidenavElement$,
             this._contentElement$,
             this._resizeBorderElement$,
-        ]).subscribe(([largeScreen, sidenavWidth, sidenavElement, contentElement, resizeBorderElement]) => {
-            if (!largeScreen && sidenavElement && contentElement && resizeBorderElement) {
+            this._collapsibleWidescreenMenu$,
+        ]).subscribe(([largeScreen, sidenavWidth, sidenavElement, contentElement, resizeBorderElement, collapsibleWidescreenMenu,]) => {
+            if ((!largeScreen || collapsibleWidescreenMenu) &&
+                sidenavElement &&
+                contentElement &&
+                resizeBorderElement) {
                 this.renderer.removeStyle(sidenavElement, 'min-width');
                 this.renderer.removeStyle(sidenavElement, 'width');
                 this.renderer.removeStyle(sidenavElement, 'transition');
@@ -1215,6 +1345,7 @@ class TopbarComponent {
         this.sideBarExpanded$ = this.shellService.sideBarExpanded$;
         this.largeScreen$ = this.shellService.largeScreen$;
         this.panelExpanded$ = this.shellService.panelExpanded$;
+        this.collapsibleWidescreenMenu$ = this.shellService.collapsibleWidescreenMenu$;
     }
     ngOnInit() {
         var _a;
@@ -1245,10 +1376,10 @@ class TopbarComponent {
     }
 }
 TopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$3.KeycloakService }, { token: i2.ConfigService }, { token: i11.IconService }, { token: ShellService }, { token: i5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TopbarComponent, selector: "valtimo-topbar", host: { properties: { "class.cds--header": "this.headerClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-header [useRouter]=\"false\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <a\n    *ngIf=\"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  <ibm-hamburger\n    *ngIf=\"(largeScreen$ | async) === false\"\n    [active]=\"sideBarExpanded$ | async\"\n    (selected)=\"toggleSideBar()\"\n  ></ibm-hamburger>\n  <ibm-header-global>\n    <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n    <ibm-header-action\n      title=\"action\"\n      [active]=\"panelExpanded$ | async\"\n      (activeChange)=\"setPanelExpanded($event)\"\n    >\n      <svg ibmIcon=\"user\" size=\"20\"></svg>\n    </ibm-header-action>\n  </ibm-header-global>\n</ibm-header>\n\n<ng-template #userFullName>\n  <div\n    class=\"user-full-name\"\n    *ngIf=\"showUserNameInTopBar && {userFullName: userFullName$ | async} as obs\"\n  >\n    <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}::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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i11.Header, selector: "ibm-header", inputs: ["skipTo", "name", "brand", "href", "route", "routeExtras", "useRouter"], outputs: ["navigation"] }, { kind: "component", type: i11.HeaderGlobal, selector: "ibm-header-global" }, { kind: "component", type: i11.HeaderAction, selector: "ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }, { kind: "component", type: i11.Hamburger, selector: "ibm-hamburger", inputs: ["active"], outputs: ["selected"] }, { kind: "directive", type: i11.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+TopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TopbarComponent, selector: "valtimo-topbar", host: { properties: { "class.cds--header": "this.headerClass" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-header [useRouter]=\"false\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <a\n    *ngIf=\"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  <ibm-hamburger\n    *ngIf=\"(largeScreen$ | async) === false || (collapsibleWidescreenMenu$ | async)\"\n    [active]=\"sideBarExpanded$ | async\"\n    (selected)=\"toggleSideBar()\"\n  ></ibm-hamburger>\n  <ibm-header-global>\n    <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n    <ibm-header-action\n      title=\"action\"\n      [active]=\"panelExpanded$ | async\"\n      (activeChange)=\"setPanelExpanded($event)\"\n    >\n      <svg ibmIcon=\"user\" size=\"20\"></svg>\n    </ibm-header-action>\n  </ibm-header-global>\n</ibm-header>\n\n<ng-template #userFullName>\n  <div\n    class=\"user-full-name\"\n    *ngIf=\"showUserNameInTopBar && {userFullName: userFullName$ | async} as obs\"\n  >\n    <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}::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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1$5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i11.Header, selector: "ibm-header", inputs: ["skipTo", "name", "brand", "href", "route", "routeExtras", "useRouter"], outputs: ["navigation"] }, { kind: "component", type: i11.HeaderGlobal, selector: "ibm-header-global" }, { kind: "component", type: i11.HeaderAction, selector: "ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }, { kind: "component", type: i11.Hamburger, selector: "ibm-hamburger", inputs: ["active"], outputs: ["selected"] }, { kind: "directive", type: i11.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-topbar', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-header [useRouter]=\"false\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <a\n    *ngIf=\"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  <ibm-hamburger\n    *ngIf=\"(largeScreen$ | async) === false\"\n    [active]=\"sideBarExpanded$ | async\"\n    (selected)=\"toggleSideBar()\"\n  ></ibm-hamburger>\n  <ibm-header-global>\n    <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n    <ibm-header-action\n      title=\"action\"\n      [active]=\"panelExpanded$ | async\"\n      (activeChange)=\"setPanelExpanded($event)\"\n    >\n      <svg ibmIcon=\"user\" size=\"20\"></svg>\n    </ibm-header-action>\n  </ibm-header-global>\n</ibm-header>\n\n<ng-template #userFullName>\n  <div\n    class=\"user-full-name\"\n    *ngIf=\"showUserNameInTopBar && {userFullName: userFullName$ | async} as obs\"\n  >\n    <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}::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"] }]
+            args: [{ selector: 'valtimo-topbar', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-header [useRouter]=\"false\" (mouseenter)=\"mouseEnter()\" (mouseleave)=\"mouseLeave()\">\n  <a\n    *ngIf=\"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  <ibm-hamburger\n    *ngIf=\"(largeScreen$ | async) === false || (collapsibleWidescreenMenu$ | async)\"\n    [active]=\"sideBarExpanded$ | async\"\n    (selected)=\"toggleSideBar()\"\n  ></ibm-hamburger>\n  <ibm-header-global>\n    <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n    <ibm-header-action\n      title=\"action\"\n      [active]=\"panelExpanded$ | async\"\n      (activeChange)=\"setPanelExpanded($event)\"\n    >\n      <svg ibmIcon=\"user\" size=\"20\"></svg>\n    </ibm-header-action>\n  </ibm-header-global>\n</ibm-header>\n\n<ng-template #userFullName>\n  <div\n    class=\"user-full-name\"\n    *ngIf=\"showUserNameInTopBar && {userFullName: userFullName$ | async} as obs\"\n  >\n    <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}::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"] }]
         }], ctorParameters: function () { return [{ type: i1$3.KeycloakService }, { type: i2.ConfigService }, { type: i11.IconService }, { type: ShellService }, { type: i5.DomSanitizer }]; }, propDecorators: { headerClass: [{
                 type: HostBinding,
                 args: ['class.cds--header']
@@ -1673,7 +1804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i7.HttpClient }, { type: i2.ConfigService }]; } });
 
 class RightSidebarComponent {
-    constructor(translate, userProviderService, formBuilder, versionService, contextService, http, logger, shellService, elementRef, configService) {
+    constructor(translate, userProviderService, formBuilder, versionService, contextService, http, logger, shellService, elementRef, configService, userSettingsService) {
         this.translate = translate;
         this.userProviderService = userProviderService;
         this.formBuilder = formBuilder;
@@ -1684,6 +1815,7 @@ class RightSidebarComponent {
         this.shellService = shellService;
         this.elementRef = elementRef;
         this.configService = configService;
+        this.userSettingsService = userSettingsService;
         this.frequencies = [
             'emailNotificationOnMonday',
             'emailNotificationOnTuesday',
@@ -1710,6 +1842,7 @@ class RightSidebarComponent {
         this.backendVersion$ = this.versionService.getVersion();
         this.userSubject$ = this.userProviderService.getUserSubject();
         this.updatingSettings$ = new BehaviorSubject(true);
+        this.updatingUserSettings$ = new BehaviorSubject(true);
         this.emailNotificationSettings$ = new BehaviorSubject(undefined);
         this.emailNotificationSettingsWithSideEffects$ = this.emailNotificationSettings$.pipe(tap(results => {
             if (results) {
@@ -1719,6 +1852,7 @@ class RightSidebarComponent {
         }));
         this.userContexts$ = this.contextService.getUserContexts();
         this.activeContext$ = this.contextService.getUserContextActive();
+        this.collapsibleWidescreenMenu$ = this.shellService.collapsibleWidescreenMenu$;
         this.frontendVersion = VERSIONS === null || VERSIONS === void 0 ? void 0 : VERSIONS.frontendLibraries;
     }
     onPageClick(targetElement) {
@@ -1740,6 +1874,7 @@ class RightSidebarComponent {
         this.resetUrl = (_b = this.configService.config.changePasswordUrl) === null || _b === void 0 ? void 0 : _b.endpointUri;
         this.overrideFeedbackMenuItemToMailTo =
             (_c = this.configService.config) === null || _c === void 0 ? void 0 : _c.overrideFeedbackMenuItemToMailTo;
+        this.getUserSettings();
     }
     ngOnDestroy() {
         var _a;
@@ -1749,14 +1884,24 @@ class RightSidebarComponent {
         this.contextService.setUserContext(contextId).subscribe();
         location.href = '/';
     }
-    updateUserLanguage(langKey) {
+    updateUserLanguage(langKey, saveSettings = true) {
         this.translate
             .use(langKey)
             .pipe(take$1(1))
             .subscribe(() => {
             localStorage.setItem('langKey', langKey);
+            this.selectedLanguage$.next(langKey);
+            if (saveSettings) {
+                this.saveUserSettings();
+            }
         });
     }
+    setCollapsibleWidescreenMenu(collapsible, saveSettings = true) {
+        this.shellService.setCollapsibleWidescreenMenu(collapsible);
+        if (saveSettings) {
+            this.saveUserSettings();
+        }
+    }
     logout() {
         this.userProviderService.logout();
     }
@@ -1803,13 +1948,40 @@ class RightSidebarComponent {
             .sort()
             .reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [key]: jsObject[key] })), {});
     }
+    getUserSettings() {
+        this.userSettingsService.getUserSettings().subscribe(settings => {
+            this.updatingUserSettings$.next(false);
+            if (!(settings === null || settings === void 0 ? void 0 : settings.languageCode)) {
+                this.saveUserSettings();
+            }
+            else {
+                this.setUserSettings(settings);
+            }
+        });
+    }
+    saveUserSettings() {
+        this.updatingUserSettings$.next(true);
+        combineLatest([this.selectedLanguage$, this.collapsibleWidescreenMenu$])
+            .pipe(take$1(1), switchMap(([languageCode, collapsibleWidescreenMenu]) => this.userSettingsService.saveUserSettings({
+            collapsibleWidescreenMenu,
+            languageCode,
+        })))
+            .subscribe(() => {
+            this.updatingUserSettings$.next(false);
+        });
+    }
+    setUserSettings(settings) {
+        this.selectedLanguage$.next(settings.languageCode);
+        this.updateUserLanguage(settings.languageCode, false);
+        this.setCollapsibleWidescreenMenu(settings.collapsibleWidescreenMenu, false);
+    }
 }
-RightSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i3.UserProviderService }, { token: i2$1.FormBuilder }, { token: VersionService }, { token: i5$1.ContextService }, { token: i7.HttpClient }, { token: i4.NGXLogger }, { token: ShellService }, { token: i0.ElementRef }, { token: i2.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-RightSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"resetUrl\">\n        <ibm-list-column>\n          <a [href]=\"resetUrl\" ibmLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"showPlantATreeButton\">\n        <ibm-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            ibmLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row *ngIf=\"obs.backendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"frontendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ frontendVersion }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <ibm-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      ibmLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </ibm-list-column>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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 ibm-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 ibm-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 ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-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:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: i11.Panel, selector: "ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i11.ColumnDirective, selector: "[ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i11.GridDirective, selector: "[ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i11.RowDirective, selector: "[ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i11.Tabs, selector: "ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i11.Tab, selector: "ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i11.StructuredList, selector: "ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i11.ListRow, selector: "ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i11.ListHeader, selector: "ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i11.ListColumn, selector: "ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i11.Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i11.Option, selector: "option" }, { kind: "component", type: i11.Toggle, selector: "ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel"] }, { kind: "component", type: i11.Tag, selector: "ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i11.Link, selector: "[ibmLink]", inputs: ["inline", "disabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+RightSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i3.UserProviderService }, { token: i2$1.FormBuilder }, { token: VersionService }, { token: i5$1.ContextService }, { token: i7.HttpClient }, { token: i4.NGXLogger }, { token: ShellService }, { token: i0.ElementRef }, { token: i2.ConfigService }, { token: i2.UserSettingsService }], target: i0.ɵɵFactoryTarget.Component });
+RightSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: RightSidebarComponent, selector: "valtimo-right-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"interfaceSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"resetUrl\">\n        <ibm-list-column>\n          <a [href]=\"resetUrl\" ibmLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"showPlantATreeButton\">\n        <ibm-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            ibmLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #interfaceSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.interface.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-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        </ibm-toggle>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row *ngIf=\"obs.backendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"frontendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ frontendVersion }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <ibm-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      ibmLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </ibm-list-column>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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 ibm-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 ibm-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 ibm-list-row:first-child{border-top:0}.right-sidebar-menu .information-table ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-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:-moz-fit-content;width:fit-content}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: i11.Panel, selector: "ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i11.ColumnDirective, selector: "[ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i11.GridDirective, selector: "[ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i11.RowDirective, selector: "[ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i11.Tabs, selector: "ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i11.Tab, selector: "ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i11.StructuredList, selector: "ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i11.ListRow, selector: "ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i11.ListHeader, selector: "ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i11.ListColumn, selector: "ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i11.Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i11.Option, selector: "option" }, { kind: "component", type: i11.Toggle, selector: "ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel"] }, { kind: "component", type: i11.Tag, selector: "ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i11.Link, selector: "[ibmLink]", inputs: ["inline", "disabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-right-sidebar', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"resetUrl\">\n        <ibm-list-column>\n          <a [href]=\"resetUrl\" ibmLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"showPlantATreeButton\">\n        <ibm-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            ibmLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row *ngIf=\"obs.backendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"frontendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ frontendVersion }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <ibm-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      ibmLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </ibm-list-column>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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 ibm-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 ibm-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 ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-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:-moz-fit-content;width:fit-content}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i3.UserProviderService }, { type: i2$1.FormBuilder }, { type: VersionService }, { type: i5$1.ContextService }, { type: i7.HttpClient }, { type: i4.NGXLogger }, { type: ShellService }, { type: i0.ElementRef }, { type: i2.ConfigService }]; }, propDecorators: { onPageClick: [{
+            args: [{ selector: 'valtimo-right-sidebar', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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  <ibm-panel [expanded]=\"panelExpanded$ | async\">\n    <div ibmGrid [condensed]=\"true\">\n      <div ibmRow>\n        <div ibmCol [columnNumbers]=\"{lg: 16}\" class=\"menu-tabs\">\n          <ibm-tabs class=\"cds--tab--list--full-width\">\n            <ibm-tab [heading]=\"'account.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"accountTabTemplate\"></ng-container>\n            </ibm-tab>\n            <ibm-tab [heading]=\"'settings.title' | translate\">\n              <ng-container *ngTemplateOutlet=\"settingsTabTemplate\"></ng-container>\n            </ibm-tab>\n          </ibm-tabs>\n        </div>\n      </div>\n    </div>\n  </ibm-panel>\n</div>\n\n<ng-template #accountTabTemplate>\n  <ng-container *ngTemplateOutlet=\"accountInformationTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"contextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"linksTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #settingsTabTemplate>\n  <ng-container *ngTemplateOutlet=\"languageSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"interfaceSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"notificationSettingsTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"versionTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #accountInformationTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.informationTitle' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"accountInformationTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #accountInformationTableTemplate>\n  <div class=\"information-table account-information\">\n    <ibm-structured-list *ngIf=\"userSubject$ | async as userSubject\">\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.email' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.email }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.username' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.username }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          >{{ 'interface.name' | translate }}\n          <ibm-tag type=\"blue\">{{ userSubject.firstName + ' ' + userSubject.lastName }}</ibm-tag>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #contextTemplate>\n  <ng-container\n    *ngIf=\"{userContexts: userContexts$ | async, activeContext: activeContext$ | async} as obs\"\n  >\n    <ibm-structured-list *ngIf=\"obs.userContexts?.length > 1 && obs.activeContext?.id\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.context.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <ibm-select [ngModel]=\"obs.activeContext?.id\" (ngModelChange)=\"setUserContext($event)\">\n            <option *ngFor=\"let context of obs.userContexts\" [value]=\"context.id\">\n              {{ context.name }}\n            </option>\n          </ibm-select>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #linksTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'account.quickLinks' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ng-container *ngTemplateOutlet=\"linksTableTemplate\"></ng-container>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #linksTableTemplate>\n  <div class=\"information-table\">\n    <ibm-structured-list>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://docs.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.help' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column *ngIf=\"!overrideFeedbackMenuItemToMailTo; else feedbackMailTo\">\n          <a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"https://forum.valtimo.nl\" target=\"_blank\" ibmLink>{{\n            'account.links.forum' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"resetUrl\">\n        <ibm-list-column>\n          <a [href]=\"resetUrl\" ibmLink>{{ 'account.links.resetPassword' | translate }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column>\n          <a href=\"javascript:void(0)\" ibmLink (click)=\"logout()\">{{\n            'account.links.signOut' | translate\n          }}</a>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"showPlantATreeButton\">\n        <ibm-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            ibmLink\n          >\n            {{ 'account.links.plantATree' | translate }}\n          </a>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </div>\n</ng-template>\n\n<ng-template #languageSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.language.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-select\n          [disabled]=\"updatingUserSettings$ | async\"\n          [ngModel]=\"selectedLanguage$ | async\"\n          (ngModelChange)=\"updateUserLanguage($event)\"\n        >\n          <option *ngFor=\"let lang of languageOptions$ | async\" [value]=\"lang\">\n            {{ 'settings.language.options.' + lang | translate }}\n          </option>\n        </ibm-select>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #notificationSettingsTemplate>\n  <ibm-structured-list *ngIf=\"emailNotificationSettingsWithSideEffects$ | async\">\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.notification.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.emailNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n    <ibm-list-row>\n      <ibm-list-column>\n        <form [formGroup]=\"settingsForm\" class=\"toggle-group\">\n          <ibm-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          </ibm-toggle>\n          <span class=\"description\">{{\n            'settings.notification.taskNotificationsIntro' | translate\n          }}</span>\n        </form>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #interfaceSettingsTemplate>\n  <ibm-structured-list>\n    <ibm-list-header>\n      <ibm-list-column>{{ 'settings.interface.title' | translate }}</ibm-list-column>\n    </ibm-list-header>\n    <ibm-list-row>\n      <ibm-list-column>\n        <ibm-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        </ibm-toggle>\n      </ibm-list-column>\n    </ibm-list-row>\n  </ibm-structured-list>\n</ng-template>\n\n<ng-template #versionTemplate>\n  <ng-container *ngIf=\"{backendVersion: backendVersion$ | async} as obs\">\n    <ibm-structured-list *ngIf=\"obs.backendVersion || frontendVersion\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row *ngIf=\"obs.backendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n      <ibm-list-row *ngIf=\"frontendVersion\">\n        <ibm-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              <ibm-tag type=\"blue\">{{ frontendVersion }}</ibm-tag>\n            </div>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n\n<ng-template #feedbackMailTo>\n  <ibm-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      ibmLink\n    >\n      {{ 'account.links.feedback' | translate }}\n    </a>\n  </ibm-list-column>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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 ibm-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 ibm-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 ibm-list-row:first-child{border-top:0}.right-sidebar-menu .information-table ibm-list-row:first-child ibm-list-column{border-top:0;padding-top:0}.right-sidebar-menu .information-table ibm-list-row:last-child ibm-list-column{padding-bottom:0}.right-sidebar-menu .information-table ibm-list-row ibm-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:-moz-fit-content;width:fit-content}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i3.UserProviderService }, { type: i2$1.FormBuilder }, { type: VersionService }, { type: i5$1.ContextService }, { type: i7.HttpClient }, { type: i4.NGXLogger }, { type: ShellService }, { type: i0.ElementRef }, { type: i2.ConfigService }, { type: i2.UserSettingsService }]; }, propDecorators: { onPageClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
             }] } });
@@ -1933,11 +2105,12 @@ class LeftSidebarComponent {
             this.shellService.sideBarExpanded$,
             this.shellService.mouseOnTopBar$,
             this.shellService.largeScreen$,
+            this.shellService.collapsibleWidescreenMenu$,
         ])
             .pipe(take(1))
-            .subscribe(([sideBarExpanded, mouseOnTopBar, largeScreen]) => {
+            .subscribe(([sideBarExpanded, mouseOnTopBar, largeScreen, collapsibleWidescreenMenu]) => {
             const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
-            if (!clickedInside && !largeScreen && sideBarExpanded) {
+            if (!clickedInside && (!largeScreen || collapsibleWidescreenMenu) && sideBarExpanded) {
                 this.shellService.setSideBarExpanded(false);
             }
         });
@@ -1953,10 +2126,14 @@ class LeftSidebarComponent {
     navigateToRoute(route, event) {
         event.preventDefault();
         this.router.navigate(route);
-        combineLatest([this.shellService.sideBarExpanded$, this.shellService.largeScreen$])
+        combineLatest([
+            this.shellService.sideBarExpanded$,
+            this.shellService.largeScreen$,
+            this.shellService.collapsibleWidescreenMenu$,
+        ])
             .pipe(take(1))
-            .subscribe(([sideBarExpanded, largeScreen]) => {
-            if (!largeScreen && sideBarExpanded) {
+            .subscribe(([sideBarExpanded, largeScreen, collapsibleWidescreenMenu]) => {
+            if ((!largeScreen || collapsibleWidescreenMenu) && sideBarExpanded) {
                 this.shellService.setSideBarExpanded(false);
             }
         });
@@ -1965,20 +2142,27 @@ class LeftSidebarComponent {
         this.breakpointObserver
             .observe(['(max-width: 1055px)', '(min-width: 1056px)'])
             .subscribe(state => {
-            this.shellService.sideBarExpanded$.pipe(take(1)).subscribe(sideBarExpanded => {
+            combineLatest([
+                this.shellService.sideBarExpanded$,
+                this.shellService.collapsibleWidescreenMenu$,
+            ])
+                .pipe(take(1))
+                .subscribe(([sideBarExpanded, collapsibleWidescreenMenu]) => {
                 const breakpoints = state.breakpoints;
                 const breakpointKeys = Object.keys(breakpoints);
                 const smallScreen = breakpoints[breakpointKeys[0]];
                 const largeScreen = breakpoints[breakpointKeys[1]];
                 if (!this.breakpointsInitialized) {
-                    if (smallScreen) {
-                        this.shellService.toggleSideBar();
+                    if (smallScreen || collapsibleWidescreenMenu) {
+                        this.shellService.collapseSideBar();
                     }
                     this.breakpointsInitialized = true;
                 }
-                if ((this.lastSmallScreen && largeScreen && !sideBarExpanded) ||
-                    (this.lastLargeScreen && smallScreen && sideBarExpanded)) {
-                    this.shellService.toggleSideBar();
+                if (!collapsibleWidescreenMenu) {
+                    if ((this.lastSmallScreen && largeScreen && !sideBarExpanded) ||
+                        (this.lastLargeScreen && smallScreen && sideBarExpanded)) {
+                        this.shellService.toggleSideBar();
+                    }
                 }
                 this.lastSmallScreen = smallScreen;
                 this.lastLargeScreen = largeScreen;
@@ -2017,7 +2201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  */
 class PageTitleComponent {
     constructor(router, activatedRoute, titleService, translateService, logger, configService) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.titleService = titleService;
@@ -2026,6 +2210,7 @@ class PageTitleComponent {
         this.configService = configService;
         this.appTitle = ((_b = (_a = this.configService) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.applicationTitle) || 'Valtimo';
         this.translatedTitle$ = new BehaviorSubject('');
+        this.appTitleAsSuffix = ((_e = (_d = (_c = this.configService) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.featureToggles) === null || _e === void 0 ? void 0 : _e.applicationTitleAsSuffix) || false;
     }
     ngOnInit() {
         this.openRouterTranslateSubscription();
@@ -2054,7 +2239,12 @@ class PageTitleComponent {
             if (translatedRouteTitle) {
                 this.logger.debug('PageTitle: setTitle translated async', translatedRouteTitle);
                 this.translatedTitle$.next(translatedRouteTitle);
-                this.titleService.setTitle(this.appTitle + ' - ' + translatedRouteTitle);
+                if (this.appTitleAsSuffix) {
+                    this.titleService.setTitle(translatedRouteTitle + ' - ' + this.appTitle);
+                }
+                else {
+                    this.titleService.setTitle(this.appTitle + ' - ' + translatedRouteTitle);
+                }
             }
             else {
                 this.logger.debug('PageTitle: setTitle default', this.appTitle);
@@ -2194,12 +2384,10 @@ class BooleanTypeConverter {
         if (enumeration && Array.isArray(enumeration) && enumeration.length > 1) {
             return value ? enumeration[0] || 'Yes' : enumeration[1] || 'No';
         }
-        else if (enumeration &&
-            typeof enumeration === 'object' &&
-            Object.keys(enumeration).length > 1) {
+        else if (enumeration && typeof enumeration === 'object') {
             return value
-                ? enumeration[Object.keys(enumeration)[0]] || 'Yes'
-                : enumeration[Object.keys(enumeration)[1]] || 'No';
+                ? Object.keys(enumeration)[0] || 'Yes'
+                : enumeration[Object.keys(enumeration)[0]] || 'No';
         }
         else {
             return value ? 'Yes' : 'No';
@@ -2306,7 +2494,7 @@ class RelatedFilesTypeConverter {
         return 'relatedFiles';
     }
     convert(value, definition) {
-        return value.length || '-';
+        return (value === null || value === void 0 ? void 0 : value.length) || '-';
     }
 }
 
@@ -2537,11 +2725,7 @@ class ListComponent {
         const key = definitionKey.includes(customPropString)
             ? definitionKey.split(customPropString)[1]
             : definitionKey;
-        const resolvedObjValue = obj[key] != null
-            ? obj[key]
-            : key.split('.').reduce(function (prev, curr) {
-                return prev ? prev[curr] : null;
-            }, obj || self);
+        const resolvedObjValue = get(obj, key, null);
         return this.viewContentService.get(resolvedObjValue, definition);
     }
     switchView(type) {
@@ -2585,10 +2769,10 @@ class ListComponent {
 }
 ListComponent.PAGINATION_SIZE = 'PaginationSize';
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListComponent, deps: [{ token: ViewContentService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.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-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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 *ngIf=\"listItemField.type === ''\">\n                {{ listItemField.value || '-' }}\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=\"lastColumnTemplate; context: {index: i, length: items.length}\"\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' | translate : {current: pagination.page, 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        [maxSize]=\"pagination.maxPaginationItemSize\"\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: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.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-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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        [maxSize]=\"pagination.maxPaginationItemSize\"\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: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListFilterPipe, name: "listFilter" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-list', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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 *ngIf=\"listItemField.type === ''\">\n                {{ listItemField.value || '-' }}\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=\"lastColumnTemplate; context: {index: i, length: items.length}\"\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' | translate : {current: pagination.page, 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        [maxSize]=\"pagination.maxPaginationItemSize\"\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: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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"] }]
+            args: [{ selector: 'valtimo-list', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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        [maxSize]=\"pagination.maxPaginationItemSize\"\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: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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"] }]
         }], ctorParameters: function () { return [{ type: ViewContentService }, { type: i4.NGXLogger }]; }, propDecorators: { items: [{
                 type: Input
             }], fields: [{
@@ -6497,6 +6681,7 @@ class SearchFieldsComponent {
         this.openDocumentDefinitionNameSubscription();
         this.openValuesSubjectSubscription();
         this.openDropdownSubscription();
+        this.setDefaultValues();
     }
     ngOnDestroy() {
         var _a, _b, _c;
@@ -6610,9 +6795,18 @@ class SearchFieldsComponent {
     expand() {
         this.expanded$.next(true);
     }
+    setDefaultValues() {
+        if (this.defaultValues &&
+            typeof this.defaultValues === 'object' &&
+            Object.keys(this.defaultValues).length > 0) {
+            this.values$.next(this.defaultValues);
+            this.search();
+            this.expand();
+        }
+    }
 }
 SearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i2$2.DocumentService }, { token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-SearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchFieldsComponent, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", documentDefinitionName: "documentDefinitionName", setValuesSubject$: "setValuesSubject$" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"search fields\">\n  <ng-container *ngIf=\"loading\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <valtimo-widget>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"buttonAccordion\"></ng-container>\n      </div>\n    </div>\n    <div\n      class=\"row p-3\"\n      [ngClass]=\"{'row--hidden': (expanded$ | async) === false}\"\n      *ngIf=\"searchFields$ | async as searchFields\"\n    >\n      <ng-container *ngFor=\"let searchField of searchFields; let i = index\">\n        <div class=\"col-4\">\n          <ng-container\n            *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n          ></ng-container>\n        </div>\n        <div class=\"w-100\" *ngIf=\"(i + 1) % 3 === 0\"></div>\n      </ng-container>\n      <div class=\"col-12\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            buttonsTemplate;\n            context: {noSearchFields: !searchFields || searchFields.length === 0}\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </valtimo-widget>\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    [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  >\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    [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  >\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  ></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        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\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        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\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      ></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      ></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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\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  ></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      ></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      ></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=\"searchField.dataType === 'text' && searchField.fieldType === 'single-select-dropdown'\"\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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\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=\"searchField.dataType === 'text' && searchField.fieldType === 'multi-select-dropdown'\"\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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\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  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields\"\n        type=\"button\"\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n      <button\n        (click)=\"search()\"\n        [disabled]=\"loading || noSearchFields || (hasValidValues$ | async) === false\"\n        type=\"button\"\n        class=\"btn btn-space btn-primary\"\n        *ngIf=\"obs.expanded\"\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=\"w-100 mb-3\" *ngIf=\"noSearchFields\">\n    <v-paragraph [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonAccordion>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <button\n      [disabled]=\"loading\"\n      type=\"button\"\n      class=\"accordion-button\"\n      (click)=\"toggleExpanded()\"\n      [ngClass]=\"\n        obs.expanded ? 'mdi mdi-chevron-right accordion-button--active' : 'mdi mdi-chevron-down'\n      \"\n    >\n      {{ 'searchFields.searchButtonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.w-100{height:15px}.w-100:last-child{display:none}::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;flex-direction:row;justify-content:end}.right-buttons{display:flex;flex-direction:row}.right-buttons v-button:last-child{margin-left:8px}.row--hidden{display:none}.accordion-button{display:block;width:100%;padding:15px;border:none;outline:none;cursor:pointer;background:#f8f9f9;text-align:left;transition:background .2s;font-size:1.2rem;color:#404040}.accordion-button--active{background:#f1f1f1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i1$5.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { kind: "component", type: i1$5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i1$5.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin"], outputs: ["selectedChange", "clear"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+SearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchFieldsComponent, selector: "valtimo-search-fields", inputs: { loading: "loading", searchFields: "searchFields", documentDefinitionName: "documentDefinitionName", setValuesSubject$: "setValuesSubject$", defaultValues: "defaultValues" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"search fields\">\n  <ng-container *ngIf=\"loading\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <valtimo-widget>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"buttonAccordion\"></ng-container>\n      </div>\n    </div>\n    <div\n      class=\"row p-3\"\n      [ngClass]=\"{'row--hidden': (expanded$ | async) === false}\"\n      *ngIf=\"searchFields$ | async as searchFields\"\n    >\n      <ng-container *ngFor=\"let searchField of searchFields; let i = index\">\n        <div class=\"col-4\">\n          <ng-container\n            *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n          ></ng-container>\n        </div>\n        <div class=\"w-100\" *ngIf=\"(i + 1) % 3 === 0\"></div>\n      </ng-container>\n      <div class=\"col-12\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            buttonsTemplate;\n            context: {noSearchFields: !searchFields || searchFields.length === 0}\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </valtimo-widget>\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    [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  >\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    [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  >\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  ></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        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\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        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\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      ></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      ></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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\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  ></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      ></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      ></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=\"searchField.dataType === 'text' && searchField.fieldType === 'single-select-dropdown'\"\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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\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=\"searchField.dataType === 'text' && searchField.fieldType === 'multi-select-dropdown'\"\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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\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  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields\"\n        type=\"button\"\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n      <button\n        (click)=\"search()\"\n        [disabled]=\"loading || noSearchFields || (hasValidValues$ | async) === false\"\n        type=\"button\"\n        class=\"btn btn-space btn-primary\"\n        *ngIf=\"obs.expanded\"\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=\"w-100 mb-3\" *ngIf=\"noSearchFields\">\n    <v-paragraph [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonAccordion>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <button\n      [disabled]=\"loading\"\n      type=\"button\"\n      class=\"accordion-button\"\n      (click)=\"toggleExpanded()\"\n      [ngClass]=\"\n        obs.expanded ? 'mdi mdi-chevron-right accordion-button--active' : 'mdi mdi-chevron-down'\n      \"\n    >\n      {{ 'searchFields.searchButtonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.w-100{height:15px}.w-100:last-child{display:none}::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;flex-direction:row;justify-content:end}.right-buttons{display:flex;flex-direction:row}.right-buttons v-button:last-child{margin-left:8px}.row--hidden{display:none}.accordion-button{display:block;width:100%;padding:15px;border:none;outline:none;cursor:pointer;background:#f8f9f9;text-align:left;transition:background .2s;font-size:1.2rem;color:#404040}.accordion-button--active{background:#f1f1f1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { kind: "component", type: WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { kind: "component", type: i1$5.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "smallMargin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { kind: "component", type: i1$5.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }, { kind: "component", type: i1$5.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "defaultSelectionIds", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder", "smallMargin"], outputs: ["selectedChange", "clear"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-search-fields', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"search fields\">\n  <ng-container *ngIf=\"loading\">\n    <ng-container *ngTemplateOutlet=\"loadingTemplate\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"!loading\">\n    <ng-container *ngTemplateOutlet=\"searchFieldsTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #loadingTemplate>\n  <valtimo-spinner></valtimo-spinner>\n</ng-template>\n\n<ng-template #searchFieldsTemplate>\n  <valtimo-widget>\n    <div class=\"row\">\n      <div class=\"col-12\">\n        <ng-container *ngTemplateOutlet=\"buttonAccordion\"></ng-container>\n      </div>\n    </div>\n    <div\n      class=\"row p-3\"\n      [ngClass]=\"{'row--hidden': (expanded$ | async) === false}\"\n      *ngIf=\"searchFields$ | async as searchFields\"\n    >\n      <ng-container *ngFor=\"let searchField of searchFields; let i = index\">\n        <div class=\"col-4\">\n          <ng-container\n            *ngTemplateOutlet=\"searchFieldTemplate; context: {searchField: searchField}\"\n          ></ng-container>\n        </div>\n        <div class=\"w-100\" *ngIf=\"(i + 1) % 3 === 0\"></div>\n      </ng-container>\n      <div class=\"col-12\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            buttonsTemplate;\n            context: {noSearchFields: !searchFields || searchFields.length === 0}\n          \"\n        ></ng-container>\n      </div>\n    </div>\n  </valtimo-widget>\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    [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  >\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    [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  >\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  ></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        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\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        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.start\"\n      >\n      </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input\n        name=\"end\"\n        [fullWidth]=\"true\"\n        type=\"number\"\n        [hideNumberSpinBox]=\"true\"\n        [clear$]=\"clear$\"\n        (keyup.enter)=\"search()\"\n        [defaultValue]=\"values[searchField.key]?.end\"\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      ></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      ></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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"getDefaultBooleanSelectionId(values, searchField.key)\"\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  ></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      ></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      ></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=\"searchField.dataType === 'text' && searchField.fieldType === 'single-select-dropdown'\"\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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"singleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionId]=\"values[searchField.key]\"\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=\"searchField.dataType === 'text' && searchField.fieldType === 'multi-select-dropdown'\"\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      [widthInPx]=\"200\"\n      [name]=\"searchField.key\"\n      [clearSelectionSubject$]=\"clear$\"\n      (selectedChange)=\"multipleValueChange(searchField.key, $event)\"\n      (keyup.enter)=\"search()\"\n      [defaultSelectionIds]=\"values[searchField.key]\"\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  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <div class=\"right-buttons\">\n      <button\n        (click)=\"clear()\"\n        [disabled]=\"loading || noSearchFields\"\n        type=\"button\"\n        class=\"btn btn-space btn-secondary\"\n        *ngIf=\"obs.expanded\"\n      >\n        {{ 'searchFields.clearButtonText' | translate }}\n      </button>\n      <button\n        (click)=\"search()\"\n        [disabled]=\"loading || noSearchFields || (hasValidValues$ | async) === false\"\n        type=\"button\"\n        class=\"btn btn-space btn-primary\"\n        *ngIf=\"obs.expanded\"\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=\"w-100 mb-3\" *ngIf=\"noSearchFields\">\n    <v-paragraph [fullWidth]=\"true\" [center]=\"true\">{{\n      'searchFields.noneConfigured' | translate\n    }}</v-paragraph>\n  </div>\n</ng-template>\n\n<ng-template #buttonAccordion>\n  <div class=\"buttons-container\" *ngIf=\"{expanded: expanded$ | async} as obs\">\n    <button\n      [disabled]=\"loading\"\n      type=\"button\"\n      class=\"accordion-button\"\n      (click)=\"toggleExpanded()\"\n      [ngClass]=\"\n        obs.expanded ? 'mdi mdi-chevron-right accordion-button--active' : 'mdi mdi-chevron-down'\n      \"\n    >\n      {{ 'searchFields.searchButtonText' | translate }}\n    </button>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.w-100{height:15px}.w-100:last-child{display:none}::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;flex-direction:row;justify-content:end}.right-buttons{display:flex;flex-direction:row}.right-buttons v-button:last-child{margin-left:8px}.row--hidden{display:none}.accordion-button{display:block;width:100%;padding:15px;border:none;outline:none;cursor:pointer;background:#f8f9f9;text-align:left;transition:background .2s;font-size:1.2rem;color:#404040}.accordion-button--active{background:#f1f1f1}\n"] }]
@@ -6624,6 +6818,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], setValuesSubject$: [{
                 type: Input
+            }], defaultValues: [{
+                type: Input
             }], doSearch: [{
                 type: Output
             }] } });
@@ -6723,6 +6919,8 @@ class CarbonMultiInputComponent {
         this.required = false;
         this.keyColumnTitle = '';
         this.valueColumnTitle = '';
+        this.hideDeleteButton = false;
+        this.hideAddButton = false;
         this.valueChange = new EventEmitter();
         this.values$ = new BehaviorSubject([]);
         this.mappedValues$ = this.values$.pipe(map$1(values => values
@@ -6807,10 +7005,10 @@ class CarbonMultiInputComponent {
     }
 }
 CarbonMultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CarbonMultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CarbonMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\">\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n      <button\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        ibmButton=\"danger\"\n        size=\"md\"\n        [iconOnly]=\"true\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        (click)=\"addRow()\"\n        ibmButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        {{ vars.addRowText }}\n        <svg class=\"cds--btn__icon\" ibmIcon=\"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\">\n    <input\n      ibmText\n      (change)=\"onValueChange(value, $event, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.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\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.key\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.value\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { kind: "directive", type: i11.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i11.Label, selector: "ibm-label", inputs: ["labelInputID", "disabled", "labelState", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i11.TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+CarbonMultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CarbonMultiInputComponent, selector: "valtimo-carbon-multi-input", inputs: { name: "name", title: "title", titleTranslationKey: "titleTranslationKey", type: "type", initialAmountOfRows: "initialAmountOfRows", minimumAmountOfRows: "minimumAmountOfRows", maxRows: "maxRows", addRowText: "addRowText", addRowTranslationKey: "addRowTranslationKey", deleteRowText: "deleteRowText", deleteRowTranslationKey: "deleteRowTranslationKey", disabled: "disabled", defaultValues: "defaultValues", margin: "margin", tooltip: "tooltip", required: "required", keyColumnTitle: "keyColumnTitle", valueColumnTitle: "valueColumnTitle", hideDeleteButton: "hideDeleteButton", hideAddButton: "hideAddButton" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\">\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        ibmButton=\"danger\"\n        size=\"md\"\n        [iconOnly]=\"true\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        (click)=\"addRow()\"\n        ibmButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        {{ vars.addRowText }}\n        <svg class=\"cds--btn__icon\" ibmIcon=\"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\">\n    <input\n      ibmText\n      (change)=\"onValueChange(value, $event, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.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\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.key\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.value\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$5.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { kind: "directive", type: i11.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: i11.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i11.Label, selector: "ibm-label", inputs: ["labelInputID", "disabled", "labelState", "skeleton", "helperText", "invalidText", "invalid", "warn", "warnText", "ariaLabel"] }, { kind: "directive", type: i11.TextInput, selector: "[ibmText]", inputs: ["theme", "size", "invalid", "warn", "skeleton"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CarbonMultiInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-carbon-multi-input', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\">\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n      <button\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        ibmButton=\"danger\"\n        size=\"md\"\n        [iconOnly]=\"true\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        (click)=\"addRow()\"\n        ibmButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        {{ vars.addRowText }}\n        <svg class=\"cds--btn__icon\" ibmIcon=\"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\">\n    <input\n      ibmText\n      (change)=\"onValueChange(value, $event, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.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\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.key\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.value\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}\n"] }]
+            args: [{ selector: 'valtimo-carbon-multi-input', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div\n  class=\"v-multi-input\"\n  [ngClass]=\"{'v-multi-input--margin': margin}\"\n  *ngIf=\"{\n    addRowText:\n      addRowText || addRowTranslationKey\n        ? addRowTranslationKey\n          ? (addRowTranslationKey | translate)\n          : addRowText\n        : ('interface.addRow' | translate),\n    deleteRowText:\n      deleteRowText || deleteRowTranslationKey\n        ? deleteRowTranslationKey\n          ? (deleteRowTranslationKey | translate)\n          : deleteRowText\n        : ('interface.deleteRow' | translate)\n  } as vars\"\n>\n  <v-input-label\n    *ngIf=\"title || titleTranslationKey\"\n    [title]=\"title\"\n    [titleTranslationKey]=\"titleTranslationKey\"\n    [name]=\"name\"\n    [tooltip]=\"tooltip\"\n    [required]=\"required\"\n  >\n  </v-input-label>\n  <div class=\"v-multi-input__rows\">\n    <div\n      class=\"v-multi-input__row\"\n      *ngFor=\"let value of values$ | async as values; trackBy: trackByFn; index as i\"\n    >\n      <ng-container *ngIf=\"type === 'value'\">\n        <ng-container *ngTemplateOutlet=\"singleValue; context: {value: value}\"></ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"type === 'keyValue'\">\n        <ng-container\n          *ngTemplateOutlet=\"keyValue; context: {value: value, index: i}\"\n        ></ng-container>\n      </ng-container>\n      <button\n        *ngIf=\"!hideDeleteButton\"\n        [disabled]=\"values?.length <= this.minimumAmountOfRows || disabled\"\n        ibmButton=\"danger\"\n        size=\"md\"\n        [iconOnly]=\"true\"\n        (click)=\"deleteRow(value.uuid)\"\n        [title]=\"vars.deleteRowText\"\n      >\n        <svg class=\"cds--btn__icon\" ibmIcon=\"trash-can\" size=\"16\"></svg>\n      </button>\n    </div>\n    <div class=\"v-multi-input__add-button\">\n      <button\n        *ngIf=\"!hideAddButton\"\n        (click)=\"addRow()\"\n        ibmButton=\"primary\"\n        size=\"md\"\n        [disabled]=\"(addRowEnabled$ | async) === false || disabled\"\n      >\n        {{ vars.addRowText }}\n        <svg class=\"cds--btn__icon\" ibmIcon=\"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\">\n    <input\n      ibmText\n      (change)=\"onValueChange(value, $event, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.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\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      keyColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'key')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.key\"\n    />\n  </div>\n  <div class=\"v-multi-input__input\">\n    <ibm-label *ngIf=\"index === 0 && keyColumnTitle && valueColumnTitle\">{{\n      valueColumnTitle\n    }}</ibm-label>\n    <input\n      ibmText\n      (input)=\"onValueChange(value, $event.target.value, 'value')\"\n      [disabled]=\"disabled\"\n      [defaultValue]=\"value.value\"\n    />\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.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)}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], title: [{
@@ -6847,6 +7045,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], valueColumnTitle: [{
                 type: Input
+            }], hideDeleteButton: [{
+                type: Input
+            }], hideAddButton: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -6952,10 +7154,10 @@ class ConfirmationModalComponent {
     }
 }
 ConfirmationModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: { titleTranslationKey: "titleTranslationKey", title: "title", content: "content", contentTranslationKey: "contentTranslationKey", confirmButtonText: "confirmButtonText", confirmButtonTextTranslationKey: "confirmButtonTextTranslationKey", cancelButtonText: "cancelButtonText", cancelButtonTextTranslationKey: "cancelButtonTextTranslationKey", showModalSubject$: "showModalSubject$", outputOnConfirm: "outputOnConfirm" }, outputs: { confirmEvent: "confirmEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-modal\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  } as obs\"\n>\n  <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 ibmModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </ibm-modal-header>\n  <section ibmModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n  </section>\n  <ibm-modal-footer>\n    <ng-container>\n      <button ibmButton=\"secondary\" [attr.modal-primary-focus]=\"true\" (click)=\"closeModal()\">\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <button ibmButton=\"primary\" [attr.modal-primary-focus]=\"true\" (click)=\"confirm()\">\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ibm-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i11.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i11.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i11.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i11.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "directive", type: i11.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+ConfirmationModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: { titleTranslationKey: "titleTranslationKey", title: "title", content: "content", contentTranslationKey: "contentTranslationKey", confirmButtonText: "confirmButtonText", confirmButtonTextTranslationKey: "confirmButtonTextTranslationKey", cancelButtonText: "cancelButtonText", cancelButtonTextTranslationKey: "cancelButtonTextTranslationKey", showModalSubject$: "showModalSubject$", outputOnConfirm: "outputOnConfirm" }, outputs: { confirmEvent: "confirmEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-modal\n  valtimoIbmModal\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  } as obs\"\n>\n  <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 ibmModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </ibm-modal-header>\n  <section ibmModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n  </section>\n  <ibm-modal-footer>\n    <ng-container>\n      <button ibmButton=\"secondary\" [attr.modal-primary-focus]=\"true\" (click)=\"closeModal()\">\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <button ibmButton=\"primary\" [attr.modal-primary-focus]=\"true\" (click)=\"confirm()\">\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ibm-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.Modal, selector: "ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i11.ModalHeader, selector: "ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i11.ModalFooter, selector: "ibm-modal-footer" }, { kind: "directive", type: i11.ModalContent, selector: "[ibmModalContent]", inputs: ["hasForm"] }, { kind: "directive", type: i11.ModalHeaderHeading, selector: "[ibmModalHeaderHeading]" }, { kind: "directive", type: i11.Button, selector: "[ibmButton]", inputs: ["ibmButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "directive", type: ValtimoIbmModalDirective, selector: "[valtimoIbmModal]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-confirmation-modal', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-modal\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  } as obs\"\n>\n  <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 ibmModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </ibm-modal-header>\n  <section ibmModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n  </section>\n  <ibm-modal-footer>\n    <ng-container>\n      <button ibmButton=\"secondary\" [attr.modal-primary-focus]=\"true\" (click)=\"closeModal()\">\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <button ibmButton=\"primary\" [attr.modal-primary-focus]=\"true\" (click)=\"confirm()\">\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ibm-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
+            args: [{ selector: 'valtimo-confirmation-modal', template: "<!--\n  ~ Copyright 2015-2023 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ibm-modal\n  valtimoIbmModal\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  } as obs\"\n>\n  <ibm-modal-header [showCloseButton]=\"true\" (closeSelect)=\"closeModal()\">\n    <h3 ibmModalHeaderHeading>\n      {{\n        (titleTranslationKey !== obs.titleTranslation ? obs.titleTranslation : '') ||\n          title ||\n          obs.deleteTranslation\n      }}\n    </h3>\n  </ibm-modal-header>\n  <section ibmModalContent>\n    {{\n      (contentTranslationKey !== obs.contentTranslation ? obs.contentTranslation : '') ||\n        content ||\n        obs.deleteConfirmationTranslation\n    }}\n  </section>\n  <ibm-modal-footer>\n    <ng-container>\n      <button ibmButton=\"secondary\" [attr.modal-primary-focus]=\"true\" (click)=\"closeModal()\">\n        {{\n          (cancelButtonTextTranslationKey !== obs.cancelButtonTranslation\n            ? obs.cancelButtonTranslation\n            : '') ||\n            cancelButtonText ||\n            obs.cancelTranslation\n        }}\n      </button>\n      <button ibmButton=\"primary\" [attr.modal-primary-focus]=\"true\" (click)=\"confirm()\">\n        {{\n          (confirmButtonTextTranslationKey !== obs.confirmButtonTranslation\n            ? obs.confirmButtonTranslation\n            : '') ||\n            confirmButtonText ||\n            obs.deleteTranslation\n        }}\n      </button>\n    </ng-container>\n  </ibm-modal-footer>\n</ibm-modal>\n", styles: ["/*!\n * Copyright 2015-2023 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: { titleTranslationKey: [{
                 type: Input
             }], title: [{
@@ -6998,13 +7200,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class ConfirmationModalModule {
 }
 ConfirmationModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ConfirmationModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalModule, declarations: [ConfirmationModalComponent], imports: [CommonModule, ModalModule$2, TranslateModule, ButtonModule$1], exports: [ConfirmationModalComponent] });
-ConfirmationModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalModule, imports: [CommonModule, ModalModule$2, TranslateModule, ButtonModule$1] });
+ConfirmationModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalModule, declarations: [ConfirmationModalComponent], imports: [CommonModule,
+        ModalModule$2,
+        TranslateModule,
+        ButtonModule$1,
+        ValtimoIbmModalDirectiveModule], exports: [ConfirmationModalComponent] });
+ConfirmationModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalModule, imports: [CommonModule,
+        ModalModule$2,
+        TranslateModule,
+        ButtonModule$1,
+        ValtimoIbmModalDirectiveModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ConfirmationModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ConfirmationModalComponent],
-                    imports: [CommonModule, ModalModule$2, TranslateModule, ButtonModule$1],
+                    imports: [
+                        CommonModule,
+                        ModalModule$2,
+                        TranslateModule,
+                        ButtonModule$1,
+                        ValtimoIbmModalDirectiveModule,
+                    ],
                     exports: [ConfirmationModalComponent],
                 }]
         }] });
@@ -7094,5 +7310,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CarbonMultiInputComponent, CarbonMultiInputModule, CardComponent, CardModule, CaseCountPipe, ComponentsModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, DataListComponent, DataListModule, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoCurrentUserComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, ShellService, SpinnerComponent, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ValtimoModalService, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, registerDocumentenApiFormioUploadComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioUploadComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CarbonMultiInputComponent, CarbonMultiInputModule, CardComponent, CardModule, CaseCountPipe, ComponentsModule, ComponentsPipesModule, ConfirmationModalComponent, ConfirmationModalModule, DataListComponent, DataListModule, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, ExpansionPanelComponent, ExpansionPanelModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoCurrentUserComponent, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuItemTextComponent, MenuItemTranslationPipe, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, ShellService, SpinnerComponent, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ValtimoIbmModalDirective, ValtimoIbmModalDirectiveModule, ValtimoModalService, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customDocumentApiUploaderType, customUploaderType, menuInitializer, registerDocumentenApiFormioUploadComponent, registerFormioCurrentUserComponent, registerFormioFileSelectorComponent, registerFormioUploadComponent };
 //# sourceMappingURL=valtimo-components.mjs.map