@valtimo/components 10.0.1 → 10.2.0

package/fesm2020/valtimo-components.mjs

@@ -1,6 +1,6 @@
 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 { combineLatest, map, Subject, BehaviorSubject, from, switchMap, Observable, take, timer, fromEvent, Subscription, of, filter as filter$1, startWith } from 'rxjs';
+import { combineLatest, map, Subject, BehaviorSubject, from, switchMap, Observable, timer, take as take$1, fromEvent, 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';
@@ -13,14 +13,14 @@ import User20 from '@carbon/icons/es/user/20';
 import * as i1$3 from 'keycloak-angular';
 import * as i2$1 from '@valtimo/config';
 import { HttpLoaderFactory } from '@valtimo/config';
-import * as i10 from 'carbon-components-angular';
-import { UIShellModule, IconModule, LinkModule, GridModule, TabsModule, StructuredListModule, SelectModule, ToggleModule, TagModule } from 'carbon-components-angular';
+import * as i11 from 'carbon-components-angular';
+import { UIShellModule, IconModule, LinkModule, GridModule, TabsModule, StructuredListModule, SelectModule, ToggleModule, TagModule, ButtonModule as ButtonModule$1, InputModule as InputModule$1, ModalModule as ModalModule$2 } from 'carbon-components-angular';
 import * as i5 from '@angular/platform-browser';
 import * as i1$4 from '@angular/router';
 import { RouterModule, NavigationEnd, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
 import * as i1$5 from '@valtimo/user-interface';
 import { ParagraphModule, ModalModule as ModalModule$1, TitleModule, ButtonModule, FormModule, InputModule, SelectModule as SelectModule$1, DatePickerModule, InputLabelModule } from '@valtimo/user-interface';
-import { filter, map as map$1, tap, take as take$1, debounceTime, switchMap as switchMap$1 } from 'rxjs/operators';
+import { filter, map as map$1, take, tap, debounceTime, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i2$2 from '@valtimo/document';
 import { DocumentModule, DocumentService } from '@valtimo/document';
 import * as i3 from '@valtimo/security';
@@ -36,13 +36,14 @@ import heatmap from 'heatmap.js-fixed/build/heatmap.js';
 import * as i1$7 from '@valtimo/resource';
 import { S3Resource, ResourceModule } from '@valtimo/resource';
 import * as i8 from '@formio/angular';
-import { Formio, Components, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass } from '@formio/angular';
+import { Formio, Components, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass, registerCustomFormioComponent } from '@formio/angular';
 import jwt_decode from 'jwt-decode';
 import Dropzone from 'dropzone';
 import * as i2$3 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
 import * as i2$4 from 'ng-multiselect-dropdown';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
+import { v4 } from 'uuid';
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1078,6 +1079,7 @@ class TopbarComponent {
         this.headerClass = true;
         this.userFullName$ = from(this.keyCloakService.isLoggedIn()).pipe(switchMap(() => this.keyCloakService.loadUserProfile()), map(profile => `${profile.firstName} ${profile.lastName}`));
         this.applicationTitle = this.configService.config.applicationTitle;
+        this.largeLogoMargin = this.configService.config.featureToggles?.largeLogoMargin;
         this.sideBarExpanded$ = this.shellService.sideBarExpanded$;
         this.largeScreen$ = this.shellService.largeScreen$;
         this.panelExpanded$ = this.shellService.panelExpanded$;
@@ -1109,12 +1111,12 @@ 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$1.ConfigService }, { token: i10.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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 *ngIf=\"logoBase64\" class=\"logo-link\" [routerLink]=\"['/']\" [title]=\"applicationTitle\">\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: [".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:16px;padding-bottom:16px}.logo-image{height:100%;object-fit:contain}\n"], dependencies: [{ 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: i10.Header, selector: "ibm-header", inputs: ["skipTo", "name", "brand", "href", "route", "routeExtras", "useRouter"], outputs: ["navigation"] }, { kind: "component", type: i10.HeaderGlobal, selector: "ibm-header-global" }, { kind: "component", type: i10.HeaderAction, selector: "ibm-header-action", inputs: ["description", "ariaLabel", "active"], outputs: ["activeChange", "selected"] }, { kind: "component", type: i10.Hamburger, selector: "ibm-hamburger", inputs: ["active"], outputs: ["selected"] }, { kind: "directive", type: i10.IconDirective, selector: "[ibmIcon]", inputs: ["ibmIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+TopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$3.KeycloakService }, { token: i2$1.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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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: [".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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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 *ngIf=\"logoBase64\" class=\"logo-link\" [routerLink]=\"['/']\" [title]=\"applicationTitle\">\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: [".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:16px;padding-bottom:16px}.logo-image{height:100%;object-fit:contain}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.KeycloakService }, { type: i2$1.ConfigService }, { type: i10.IconService }, { type: ShellService }, { type: i5.DomSanitizer }]; }, propDecorators: { headerClass: [{
+            args: [{ selector: 'valtimo-topbar', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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: [".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$1.ConfigService }, { type: i11.IconService }, { type: ShellService }, { type: i5.DomSanitizer }]; }, propDecorators: { headerClass: [{
                 type: HostBinding,
                 args: ['class.cds--header']
             }] } });
@@ -1178,6 +1180,7 @@ class MenuService {
         const config = configService?.config;
         this.menuConfig = config?.menu;
         this.disableCaseCount = config?.featureToggles?.disableCaseCount;
+        this.enableObjectManagement = config?.featureToggles?.enableObjectManagement;
     }
     init() {
         this.reload();
@@ -1495,7 +1498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$6.HttpClient }, { type: i2$1.ConfigService }]; } });
 
 class RightSidebarComponent {
-    constructor(translate, userProviderService, formBuilder, versionService, contextService, http, logger, shellService, elementRef) {
+    constructor(translate, userProviderService, formBuilder, versionService, contextService, http, logger, shellService, elementRef, configService) {
         this.translate = translate;
         this.userProviderService = userProviderService;
         this.formBuilder = formBuilder;
@@ -1505,6 +1508,7 @@ class RightSidebarComponent {
         this.logger = logger;
         this.shellService = shellService;
         this.elementRef = elementRef;
+        this.configService = configService;
         this.frequencies = [
             'emailNotificationOnMonday',
             'emailNotificationOnTuesday',
@@ -1543,7 +1547,7 @@ class RightSidebarComponent {
     }
     onPageClick(targetElement) {
         combineLatest([this.shellService.panelExpanded$, this.shellService.mouseOnTopBar$])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([panelExpanded, mouseOnTopBar]) => {
             const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
             if (!clickedInside && panelExpanded) {
@@ -1555,6 +1559,8 @@ class RightSidebarComponent {
         this.setLanguage();
         this.loadEmailNotificationSettings();
         this.openFormSubscription();
+        this.showPlantATreeButton =
+            this.configService.config.featureToggles?.showPlantATreeButton;
     }
     ngOnDestroy() {
         this.formSubscription?.unsubscribe();
@@ -1566,7 +1572,7 @@ class RightSidebarComponent {
     updateUserLanguage(langKey) {
         this.translate
             .use(langKey)
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(() => {
             localStorage.setItem('langKey', langKey);
         });
@@ -1621,12 +1627,12 @@ class RightSidebarComponent {
         }), {});
     }
 }
-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.FormBuilder }, { token: VersionService }, { token: i5$1.ContextService }, { token: i1$6.HttpClient }, { token: i4.NGXLogger }, { token: ShellService }, { token: i0.ElementRef }], 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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a></ibm-list-column\n        >\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></ibm-list-column\n        >\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></ibm-list-column\n        >\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\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu 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--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 .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}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:last-child{padding-right:0!important;padding-left:.5rem!important;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%;padding-right:.5rem!important}.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.Panel, selector: "ibm-panel", inputs: ["expanded", "ariaLabel"] }, { kind: "directive", type: i10.ColumnDirective, selector: "[ibmCol]", inputs: ["class", "columnNumbers", "offsets", "columnHang"] }, { kind: "directive", type: i10.GridDirective, selector: "[ibmGrid]", inputs: ["condensed", "narrow", "fullWidth", "useCssGrid"] }, { kind: "directive", type: i10.RowDirective, selector: "[ibmRow]", inputs: ["condensed", "narrow"] }, { kind: "component", type: i10.Tabs, selector: "ibm-tabs", inputs: ["position", "cacheActive", "followFocus", "isNavigation", "ariaLabel", "ariaLabelledby", "type", "theme", "skeleton"] }, { kind: "component", type: i10.Tab, selector: "ibm-tab", inputs: ["heading", "title", "context", "active", "disabled", "tabIndex", "id", "cacheActive"], outputs: ["selected"] }, { kind: "component", type: i10.StructuredList, selector: "ibm-structured-list", inputs: ["selection", "flushed", "condensed", "name", "skeleton"], outputs: ["selected"] }, { kind: "component", type: i10.ListRow, selector: "ibm-list-row", inputs: ["selected", "label", "value"], outputs: ["change"] }, { kind: "component", type: i10.ListHeader, selector: "ibm-list-header", inputs: ["skeleton"] }, { kind: "component", type: i10.ListColumn, selector: "ibm-list-column", inputs: ["skeleton", "nowrap"] }, { kind: "component", type: i10.Select, selector: "ibm-select", inputs: ["display", "label", "helperText", "invalidText", "warn", "warnText", "id", "size", "disabled", "skeleton", "invalid", "theme", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "directive", type: i10.Option, selector: "option" }, { kind: "component", type: i10.Toggle, selector: "ibm-toggle", inputs: ["offText", "onText", "label", "size", "hideLabel"] }, { kind: "component", type: i10.Tag, selector: "ibm-tag", inputs: ["type", "size", "class"] }, { kind: "directive", type: i10.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.FormBuilder }, { token: VersionService }, { token: i5$1.ContextService }, { token: i1$6.HttpClient }, { token: i4.NGXLogger }, { token: ShellService }, { token: i0.ElementRef }, { token: i2$1.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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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>\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>\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\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu 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 .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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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></ibm-list-column\n        >\n      </ibm-list-row>\n      <ibm-list-row>\n        <ibm-list-column\n          ><a href=\"https://www.valtimo.nl/feedback\" target=\"_blank\" ibmLink>{{\n            'account.links.feedback' | translate\n          }}</a></ibm-list-column\n        >\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></ibm-list-column\n        >\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></ibm-list-column\n        >\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\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu 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--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 .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}.right-sidebar-menu .information-table ibm-list-row ibm-list-column:last-child{padding-right:0!important;padding-left:.5rem!important;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-information .cds--structured-list-td{display:inline-flex;flex-direction:column;border:none;min-width:100%;padding-right:.5rem!important}.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.FormBuilder }, { type: VersionService }, { type: i5$1.ContextService }, { type: i1$6.HttpClient }, { type: i4.NGXLogger }, { type: ShellService }, { type: i0.ElementRef }]; }, propDecorators: { onPageClick: [{
+            args: [{ selector: 'valtimo-right-sidebar', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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>\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>\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\">\n      <ibm-list-header>\n        <ibm-list-column>{{ 'settings.version.title' | translate }}</ibm-list-column>\n      </ibm-list-header>\n      <ibm-list-row>\n        <ibm-list-column>\n          <div class=\"build-information\" *ngIf=\"obs.backendVersion\">\n            <span class=\"build-title\">{{\n              'interface.builds.' + obs.backendVersion.title | translate\n            }}</span>\n            <ibm-tag type=\"blue\">{{ obs.backendVersion.version }}</ibm-tag>\n          </div>\n        </ibm-list-column>\n      </ibm-list-row>\n    </ibm-structured-list>\n  </ng-container>\n</ng-template>\n", styles: [".be-scroller-settings{padding-bottom:150px!important}.version-holder{position:fixed;bottom:0;width:259px;background-color:#f8f9fa}.info-text{line-height:1em!important;padding-right:70px;margin-bottom:15px}.right-sidebar-menu .cds--tab--list{width:100%}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item{width:12rem}.right-sidebar-menu .menu-tabs .cds--tabs--scrollable__nav-item button{width:100%}.right-sidebar-menu .menu-tabs .cds--tab--overflow-nav-button{display:none}.right-sidebar-menu .cds--header-panel{width:20rem;height:calc(100% - 3rem);transition:transform .11s cubic-bezier(.2,0,1,.9);transform:translate(100%)}.right-sidebar-menu .cds--header-panel--expanded{transform:translate(0)}.right-sidebar-menu .cds--panel--overlay{padding-top:0}.right-sidebar-menu .cds--tab-content{padding:0;outline:0}.right-sidebar-menu .cds--structured-list-td{padding-left:1rem;padding-right:1rem}.right-sidebar-menu .toggle-group{display:flex;flex-direction:column}.right-sidebar-menu .toggle-group .description{margin-top:1rem}.right-sidebar-menu 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 .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.FormBuilder }, { type: VersionService }, { type: i5$1.ContextService }, { type: i1$6.HttpClient }, { type: i4.NGXLogger }, { type: ShellService }, { type: i0.ElementRef }, { type: i2$1.ConfigService }]; }, propDecorators: { onPageClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
             }] } });
@@ -1751,7 +1757,7 @@ class LeftSidebarComponent {
             this.shellService.mouseOnTopBar$,
             this.shellService.largeScreen$,
         ])
-            .pipe(take$1(1))
+            .pipe(take(1))
             .subscribe(([sideBarExpanded, mouseOnTopBar, largeScreen]) => {
             const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
             if (!clickedInside && !largeScreen && sideBarExpanded) {
@@ -1769,7 +1775,7 @@ class LeftSidebarComponent {
         event.preventDefault();
         this.router.navigate(route);
         combineLatest([this.shellService.sideBarExpanded$, this.shellService.largeScreen$])
-            .pipe(take$1(1))
+            .pipe(take(1))
             .subscribe(([sideBarExpanded, largeScreen]) => {
             if (!largeScreen && sideBarExpanded) {
                 this.shellService.setSideBarExpanded(false);
@@ -1780,7 +1786,7 @@ class LeftSidebarComponent {
         this.breakpointObserver
             .observe(['(max-width: 1055px)', '(min-width: 1056px)'])
             .subscribe(state => {
-            this.shellService.sideBarExpanded$.pipe(take$1(1)).subscribe(sideBarExpanded => {
+            this.shellService.sideBarExpanded$.pipe(take(1)).subscribe(sideBarExpanded => {
                 const breakpoints = state.breakpoints;
                 const breakpointKeys = Object.keys(breakpoints);
                 const smallScreen = breakpoints[breakpointKeys[0]];
@@ -1803,7 +1809,7 @@ class LeftSidebarComponent {
     }
 }
 LeftSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i1.TranslateService }, { token: i0.ElementRef }, { token: i2$1.ConfigService }, { token: MenuService }, { token: ShellService }, { token: i5$2.BreakpointObserver }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-LeftSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: LeftSidebarComponent, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-sidenav\n  *ngIf=\"{\n    sideBarExpanded: sideBarExpanded$ | async,\n    closestSequence: closestSequence$ | async\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngFor=\"let menuItem of menuItems$ | async\">\n    <ng-container *ngIf=\"!menuItem.children\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          topMenuItem;\n          context: {menuItem: menuItem, closestSequence: obs.closestSequence}\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.children\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          topMenuItem;\n          context: {menuItem: menuItem, closestSequence: obs.closestSequence}\n        \"\n      ></ng-container>\n      <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n      <ibm-sidenav-menu [title]=\"menuItem | menuItemTranslate | async\">\n        <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n          <ng-container\n            *ngIf=\"{count: childMenuItem?.count$ && (childMenuItem?.count$ | async)} as vars\"\n          >\n            <ibm-sidenav-item\n              [ngClass]=\"{\n                'cds--side-nav__item--empty': !childMenuItem.link\n              }\"\n              [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n              (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n              [active]=\"'' + menuItem.sequence + childMenuItem.sequence === obs.closestSequence\"\n            >\n              <valtimo-menu-item-text\n                [menuItem]=\"childMenuItem\"\n                [accent]=\"!childMenuItem.link\"\n              ></valtimo-menu-item-text>\n              <ng-container\n                *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n              ></ng-container>\n            </ibm-sidenav-item>\n          </ng-container>\n        </ng-container>\n      </ibm-sidenav-menu>\n    </ng-container>\n  </ng-container>\n</ibm-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template #topMenuItem let-menuItem=\"menuItem\" let-closestSequence=\"closestSequence\">\n  <ibm-sidenav-item\n    href=\"javascript:void(0)\"\n    (click)=\"navigateToRoute(menuItem.link, $event)\"\n    *ngIf=\"!menuItem.children\"\n    [active]=\"'' + menuItem.sequence === closestSequence\"\n    [ngClass]=\"{\n      'menu-item--hidden': menuItem.includeFunction !== undefined,\n      'menu-item--visible':\n        menuItem.includeFunction !== undefined &&\n        (includeFunctionObservables[menuItem.title] | async)\n    }\"\n  >\n    <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n  </ibm-sidenav-item>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}.resize-border{position:absolute;width:3px;height:100%;top:0;right:0;margin-right:-3px;cursor:col-resize;background-color:#ff5800;opacity:0;transition:opacity .2s ease}.resize-hover{opacity:.7}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:17px;height:0}.menu-item-icon-container i{width:16px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}\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: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent"] }, { kind: "component", type: i10.SideNav, selector: "ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems"] }, { kind: "component", type: i10.SideNavItem, selector: "ibm-sidenav-item", inputs: ["href", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i10.SideNavMenu, selector: "ibm-sidenav-menu", inputs: ["title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] });
+LeftSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: LeftSidebarComponent, selector: "valtimo-left-sidebar", host: { listeners: { "document:click": "onPageClick($event.target)" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleButton"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-sidenav\n  *ngIf=\"{\n    sideBarExpanded: sideBarExpanded$ | async,\n    closestSequence: closestSequence$ | async\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngFor=\"let menuItem of menuItems$ | async\">\n    <ng-container *ngIf=\"!menuItem.children\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          topMenuItem;\n          context: {menuItem: menuItem, closestSequence: obs.closestSequence}\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.children\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          topMenuItem;\n          context: {menuItem: menuItem, closestSequence: obs.closestSequence}\n        \"\n      ></ng-container>\n      <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n      <ibm-sidenav-menu [title]=\"menuItem | menuItemTranslate | async\">\n        <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n          <ng-container\n            *ngIf=\"{count: childMenuItem?.count$ && (childMenuItem?.count$ | async)} as vars\"\n          >\n            <ibm-sidenav-item\n              [ngClass]=\"{\n                'cds--side-nav__item--empty': !childMenuItem.link\n              }\"\n              [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n              (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n              [active]=\"'' + menuItem.sequence + childMenuItem.sequence === obs.closestSequence\"\n            >\n              <valtimo-menu-item-text\n                [menuItem]=\"childMenuItem\"\n                [accent]=\"!childMenuItem.link\"\n              ></valtimo-menu-item-text>\n              <ng-container\n                *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n              ></ng-container>\n            </ibm-sidenav-item>\n          </ng-container>\n        </ng-container>\n      </ibm-sidenav-menu>\n    </ng-container>\n  </ng-container>\n</ibm-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template #topMenuItem let-menuItem=\"menuItem\" let-closestSequence=\"closestSequence\">\n  <ibm-sidenav-item\n    href=\"javascript:void(0)\"\n    (click)=\"navigateToRoute(menuItem.link, $event)\"\n    *ngIf=\"!menuItem.children\"\n    [active]=\"'' + menuItem.sequence === closestSequence\"\n    [ngClass]=\"{\n      'menu-item--hidden': menuItem.includeFunction !== undefined,\n      'menu-item--visible':\n        menuItem.includeFunction !== undefined &&\n        (includeFunctionObservables[menuItem.title] | async)\n    }\"\n  >\n    <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n  </ibm-sidenav-item>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}.resize-border{position:absolute;width:3px;height:100%;top:0;right:0;margin-right:-3px;cursor:col-resize;background-color:#ff5800;opacity:0;transition:opacity .2s ease}.resize-hover{opacity:.7}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:17px;height:0}.menu-item-icon-container i{width:16px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}\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: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem", "accent"] }, { kind: "component", type: i11.SideNav, selector: "ibm-sidenav", inputs: ["ariaLabel", "expanded", "hidden", "rail", "allowExpansion", "navigationItems"] }, { kind: "component", type: i11.SideNavItem, selector: "ibm-sidenav-item", inputs: ["href", "active", "route", "isSubMenu", "routeExtras", "title"], outputs: ["navigation", "selected"] }, { kind: "component", type: i11.SideNavMenu, selector: "ibm-sidenav-menu", inputs: ["title", "expanded", "hasActiveChild", "menuItems"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }, { kind: "pipe", type: CaseCountPipe, name: "caseCount" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LeftSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-left-sidebar', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-sidenav\n  *ngIf=\"{\n    sideBarExpanded: sideBarExpanded$ | async,\n    closestSequence: closestSequence$ | async\n  } as obs\"\n  [allowExpansion]=\"false\"\n  [expanded]=\"obs.sideBarExpanded\"\n>\n  <ng-container *ngFor=\"let menuItem of menuItems$ | async\">\n    <ng-container *ngIf=\"!menuItem.children\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          topMenuItem;\n          context: {menuItem: menuItem, closestSequence: obs.closestSequence}\n        \"\n      ></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.children\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          topMenuItem;\n          context: {menuItem: menuItem, closestSequence: obs.closestSequence}\n        \"\n      ></ng-container>\n      <ng-container *ngTemplateOutlet=\"subMenuIcon; context: {menuItem: menuItem}\"></ng-container>\n      <ibm-sidenav-menu [title]=\"menuItem | menuItemTranslate | async\">\n        <ng-container *ngFor=\"let childMenuItem of menuItem.children\">\n          <ng-container\n            *ngIf=\"{count: childMenuItem?.count$ && (childMenuItem?.count$ | async)} as vars\"\n          >\n            <ibm-sidenav-item\n              [ngClass]=\"{\n                'cds--side-nav__item--empty': !childMenuItem.link\n              }\"\n              [href]=\"vars?.count ? 'javascript:return false;' : 'javascript:void(0);'\"\n              (click)=\"navigateToRoute(childMenuItem.link, $event)\"\n              [active]=\"'' + menuItem.sequence + childMenuItem.sequence === obs.closestSequence\"\n            >\n              <valtimo-menu-item-text\n                [menuItem]=\"childMenuItem\"\n                [accent]=\"!childMenuItem.link\"\n              ></valtimo-menu-item-text>\n              <ng-container\n                *ngTemplateOutlet=\"countTemplate; context: {count: vars.count}\"\n              ></ng-container>\n            </ibm-sidenav-item>\n          </ng-container>\n        </ng-container>\n      </ibm-sidenav-menu>\n    </ng-container>\n  </ng-container>\n</ibm-sidenav>\n\n<ng-template #subMenuIcon let-menuItem=\"menuItem\">\n  <div class=\"menu-item-icon-container\"><i class=\"{{ menuItem.iconClass }}\"></i></div>\n</ng-template>\n\n<ng-template #topMenuItem let-menuItem=\"menuItem\" let-closestSequence=\"closestSequence\">\n  <ibm-sidenav-item\n    href=\"javascript:void(0)\"\n    (click)=\"navigateToRoute(menuItem.link, $event)\"\n    *ngIf=\"!menuItem.children\"\n    [active]=\"'' + menuItem.sequence === closestSequence\"\n    [ngClass]=\"{\n      'menu-item--hidden': menuItem.includeFunction !== undefined,\n      'menu-item--visible':\n        menuItem.includeFunction !== undefined &&\n        (includeFunctionObservables[menuItem.title] | async)\n    }\"\n  >\n    <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n  </ibm-sidenav-item>\n</ng-template>\n\n<ng-template #countTemplate let-count=\"count\">\n  <ng-container *ngIf=\"count\">\n    <span class=\"case-count\">\n      {{ count | caseCount }}\n    </span>\n  </ng-container>\n</ng-template>\n", styles: ["@media screen and (max-width: 767px){.be-left-sidebar{width:100%!important}}.be-left-sidebar .left-sidebar-toggle{padding:20px}.be-left-sidebar .left-sidebar-toggle:before{font-size:1.615rem}.be-left-sidebar .sidebar-elements>li>a.be-toggle-left-sidebar{height:32px;display:flex;align-items:center}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{margin-right:7px;min-width:21px;height:auto;overflow:visible}.be-toggle-left-sidebar svg path{transition:.27s ease;fill:#696969}.resize-border{position:absolute;width:3px;height:100%;top:0;right:0;margin-right:-3px;cursor:col-resize;background-color:#ff5800;opacity:0;transition:opacity .2s ease}.resize-hover{opacity:.7}.no-transition{transition:none}.d-1{d:path(\"M3 18v-2h13v2z\")}.d-1-flipped{d:path(\"M3 18v-2h11v2z\")}.d-2{d:path(\"M3 13v-2h10v2H3\")}.d-2-flipped{d:path(\"M3 13v-2h12v2H3\")}.d-3{d:path(\"M3 6h13v2H3V6\")}.d-3-flipped{d:path(\"M3 6h11v2H3V6\")}.d-4{d:path(\"M21 15.61L19.59 17l-5.01-5 5.01-5L21 8.39 17.44 12 21 15.61\")}.d-4-flipped{d:path(\"M15.58 15.61L16.99 17 22 12l-5.01-5-1.41 1.39L19.14 12l-3.56 3.61\")}::ng-deep .cds--side-nav__menu{padding-left:0}::ng-deep .cds--side-nav__navigation{border-right:1px solid #e0e0e0;height:100%}::ng-deep .cds--side-nav--ux{width:0}::ng-deep .cds--side-nav--expanded{width:16rem}::ng-deep .cds--side-nav__header-divider{display:none!important}.menu-item-icon-container{position:relative;top:8px;left:17px;height:0}.menu-item-icon-container i{width:16px;height:16px}.menu-item--hidden{display:none}.menu-item--visible{display:block}::ng-deep .cds--side-nav__item--empty{pointer-events:none}::ng-deep .cds--side-nav__item--empty .menu-item-icon-container{display:none}::ng-deep .cds--side-nav__link[href*=\"javascript:return false;\"]{padding-right:3rem!important}.case-count{position:absolute;right:0;padding-right:1rem;height:100%;top:0;display:flex;align-items:center;justify-content:center;font-size:.875rem;letter-spacing:.1px;line-height:1.25rem;font-weight:500!important}\n"] }]
@@ -2002,11 +2008,19 @@ class BooleanTypeConverter {
         return 'boolean';
     }
     convert(value, definition) {
-        if (!definition.enum) {
-            return value ? 'Yes' : 'No';
+        const enumeration = definition?.enum;
+        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) {
+            return value
+                ? enumeration[Object.keys(enumeration)[0]] || 'Yes'
+                : enumeration[Object.keys(enumeration)[1]] || 'No';
         }
         else {
-            return value ? definition.enum[0] || 'Yes' : definition.enum[1] || 'No';
+            return value ? 'Yes' : 'No';
         }
     }
 }
@@ -2361,7 +2375,7 @@ class ListComponent {
         if (!sortable) {
             return;
         }
-        this.sort$.pipe(take$1(1)).subscribe(sort => {
+        this.sort$.pipe(take(1)).subscribe(sort => {
             let newState;
             if (sort.state.name === key) {
                 if (!sort.isSorting) {
@@ -2386,10 +2400,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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS 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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS 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: [{
@@ -3076,10 +3090,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class TimelineComponent {
 }
 TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TimelineComponent, selector: "valtimo-timeline", inputs: { items: "items" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate : item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}\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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TimelineComponent, selector: "valtimo-timeline", inputs: { items: "items" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n          <br/>\n          <span>{{ item.time }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate : item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}\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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-timeline', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-time\">{{ item.time }}</span>\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate : item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}\n"] }]
+            args: [{ selector: 'valtimo-timeline', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">No result found</div>\n  <div class=\"pb-5\" *ngIf=\"items?.length > 0\">\n    <ul class=\"timeline mb-0 py-5\">\n      <li class=\"timeline-item status-done\" *ngFor=\"let item of items\">\n        <div class=\"timeline-date\">\n          <span>{{ item.date }}</span>\n          <br/>\n          <span>{{ item.time }}</span>\n        </div>\n        <div class=\"timeline-content mt-1\">\n          <div class=\"timeline-header p-0\">\n            <span class=\"timeline-author\">{{ item.user }}</span>\n            <br />\n            <p class=\"timeline-activity\">{{ item.activity }}</p>\n            <div class=\"timeline-summary\">\n              <p>{{ item.summaryTranslationKey | translate : item.summaryTranslationParams }}</p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".timeline-activity{font-size:100%}.timeline-summary p{font-size:.8rem}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -3882,7 +3896,7 @@ class FormioComponent {
     }
     refreshToken() {
         from(this.userProviderService.updateToken(-1))
-            .pipe(switchMap$1(() => this.userProviderService.getToken()), take$1(1))
+            .pipe(switchMap$1(() => this.userProviderService.getToken()), take(1))
             .subscribe(token => {
             this.setToken(token);
         });
@@ -4012,7 +4026,7 @@ class FormIoDomService {
         this.stateService = stateService;
     }
     toggleSubmitButton(disabled) {
-        this.stateService.currentForm$.pipe(take$1(1)).subscribe(form => {
+        this.stateService.currentForm$.pipe(take(1)).subscribe(form => {
             const button = form.formioElement.nativeElement
                 .getElementsByClassName('formio-component-submit')[0]
                 .getElementsByClassName('btn-primary')[0];
@@ -4108,7 +4122,7 @@ class WebcamComponent {
         return false;
     }
     stopStream() {
-        this.stream$.pipe(take$1(1)).subscribe(mediaStream => {
+        this.stream$.pipe(take(1)).subscribe(mediaStream => {
             if (mediaStream) {
                 mediaStream.getTracks().forEach(stream => stream.stop());
             }
@@ -4338,7 +4352,7 @@ class FormIoUploaderComponent {
     fileSelected(file) {
         this.domService.toggleSubmitButton(true);
         this.uploading$.next(true);
-        this.stateService.documentDefinitionName$.pipe(take$1(1)).subscribe(name => {
+        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe(name => {
             this.uploadProviderService.uploadFile(file, name).subscribe(result => {
                 this.domService.toggleSubmitButton(false);
                 this.uploading$.next(false);
@@ -4534,7 +4548,7 @@ class DocumentenApiMetadataModalComponent {
             this.additionalDocumentDate$,
             this.translateService.stream('key'),
         ]).pipe(tap(([additionalDocumentDate]) => {
-            this.formData$.pipe(take(1)).subscribe(formData => {
+            this.formData$.pipe(take$1(1)).subscribe(formData => {
                 if (additionalDocumentDate === 'received' &&
                     (formData.status === 'in_bewerking' || formData.status === 'ter_vaststelling')) {
                     this.clearStatusSelection$.next(null);
@@ -4581,7 +4595,7 @@ class DocumentenApiMetadataModalComponent {
     }
     save() {
         combineLatest([this.valid$, this.formData$])
-            .pipe(take(1))
+            .pipe(take$1(1))
             .subscribe(([valid, formData]) => {
             if (valid) {
                 this.metadata.emit(formData);
@@ -4616,7 +4630,7 @@ class DocumentenApiMetadataModalComponent {
     }
 }
 DocumentenApiMetadataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i1$5.ModalService }, { token: i1.TranslateService }, { token: i1$4.ActivatedRoute }, { token: i2$2.DocumentService }, { token: i1$3.KeycloakService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
-DocumentenApiMetadataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: { show$: "show$", hide$: "hide$", disabled$: "disabled$", file$: "file$", documentTitle: "documentTitle", disableDocumentTitle: "disableDocumentTitle", filename: "filename", disableFilename: "disableFilename", author: "author", disableAuthor: "disableAuthor", status: "status", disableStatus: "disableStatus", language: "language", disableLanguage: "disableLanguage", documentType: "documentType", disableDocumentType: "disableDocumentType", description: "description", disableDescription: "disableDescription", confidentialityLevel: "confidentialityLevel", disableConfidentialityLevel: "disableConfidentialityLevel" }, outputs: { metadata: "metadata" }, viewQueries: [{ propertyName: "documentenApiMetadataModal", first: true, predicate: ["documentenApiMetadataModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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<v-modal\n  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">{{\n        'document.cancel' | translate\n      }}</v-button>\n      <v-button\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\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: "component", type: i1$5.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i1$5.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i1$5.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i1$5.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+DocumentenApiMetadataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: { show$: "show$", hide$: "hide$", disabled$: "disabled$", file$: "file$", documentTitle: "documentTitle", disableDocumentTitle: "disableDocumentTitle", filename: "filename", disableFilename: "disableFilename", author: "author", disableAuthor: "disableAuthor", status: "status", disableStatus: "disableStatus", language: "language", disableLanguage: "disableLanguage", documentType: "documentType", disableDocumentType: "disableDocumentType", description: "description", disableDescription: "disableDescription", confidentialityLevel: "confidentialityLevel", disableConfidentialityLevel: "disableConfidentialityLevel" }, outputs: { metadata: "metadata" }, viewQueries: [{ propertyName: "documentenApiMetadataModal", first: true, predicate: ["documentenApiMetadataModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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<v-modal\n  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">{{\n        'document.cancel' | translate\n      }}</v-button>\n      <v-button\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\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: "component", type: i1$5.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { kind: "component", type: i1$5.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { kind: "component", type: i1$5.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { kind: "component", type: i1$5.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "rows", "clear$"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.SelectComponent, selector: "v-select", inputs: ["items", "defaultSelection", "defaultSelectionId", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], outputs: ["selectedChange", "clear"] }, { 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: "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: DocumentenApiMetadataModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-documenten-api-metadata-modal', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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<v-modal\n  #documentenApiMetadataModal\n  (closeEvent)=\"hide()\"\n  *ngIf=\"{file: file$ | async, disabled: disabled$ | async, valid: valid$ | async} as obs\"\n>\n  <div role=\"header\">\n    <div class=\"edit-configuration-title\">\n      <v-title [center]=\"true\" [fullWidth]=\"true\" [margin]=\"false\" type=\"h2\">{{\n        'document.fillInMetadata' | translate\n      }}</v-title>\n    </div>\n  </div>\n  <div role=\"content\">\n    <ng-container *ngTemplateOutlet=\"metadataForm; context: {obs: obs}\"></ng-container>\n  </div>\n  <div role=\"footer\">\n    <div class=\"buttons\">\n      <v-button (clickEvent)=\"cancel()\" [disabled]=\"obs.disabled\" type=\"secondary\">{{\n        'document.cancel' | translate\n      }}</v-button>\n      <v-button\n        (clickEvent)=\"save()\"\n        [disabled]=\"obs.disabled || !obs.valid\"\n        mdiIcon=\"upload\"\n        type=\"success\"\n        >{{ 'document.upload' | translate }}</v-button\n      >\n    </div>\n  </div>\n</v-modal>\n\n<ng-template #metadataForm let-obs=\"obs\">\n  <ng-container *ngIf=\"showForm$ | async\">\n    <v-form\n      (valueChange)=\"formValueChange($event)\"\n      *ngIf=\"additionalDocumentDate$ | async as additionalDate\"\n    >\n      <v-input\n        [defaultValue]=\"filename || obs.file?.name\"\n        [disabled]=\"obs.disabled || disableFilename\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.filename' | translate\"\n        [tooltip]=\"'document.filenameTooltip' | translate\"\n        name=\"filename\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"documentTitle\"\n        [disabled]=\"obs.disabled || disableDocumentTitle\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.inputTitle' | translate\"\n        [tooltip]=\"'document.inputTitleTooltip' | translate\"\n        [widthPx]=\"400\"\n        name=\"title\"\n      >\n      </v-input>\n      <v-input\n        [defaultValue]=\"author || (userEmail$ | async)\"\n        [disabled]=\"obs.disabled || disableAuthor\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.author' | translate\"\n        [tooltip]=\"'document.authorTooltip' | translate\"\n        [widthPx]=\"300\"\n        name=\"author\"\n      >\n      </v-input>\n      <v-select\n        *ngIf=\"languageItems$ | async as languageItems\"\n        [defaultSelectionId]=\"language || languageItems[0].id\"\n        [disabled]=\"obs.disabled || disableLanguage\"\n        [items]=\"languageItems\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.language' | translate\"\n        [tooltip]=\"'document.languageTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"language\"\n      ></v-select>\n      <ng-container *ngIf=\"{documentTypeItems: documentTypeItems$ | async} as obs\">\n        <v-select\n          [defaultSelectionId]=\"documentType\"\n          [disabled]=\"obs.disabled || disableDocumentType\"\n          [items]=\"obs.documentTypeItems\"\n          [loading]=\"!obs.documentTypeItems\"\n          [margin]=\"true\"\n          [required]=\"true\"\n          [title]=\"'document.informatieobjecttype' | translate\"\n          [tooltip]=\"'document.informatieobjecttypeTooltip' | translate\"\n          [widthInPx]=\"200\"\n          name=\"informatieobjecttype\"\n        ></v-select>\n      </ng-container>\n      <v-date-picker\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.creationDate' | translate\"\n        [tooltip]=\"'document.creationDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"creationDate\"\n      ></v-date-picker>\n      <ng-container\n        *ngTemplateOutlet=\"additionalDatePicker; context: {additionalDate: additionalDate}\"\n      ></ng-container>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'received'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.receiptDate' | translate\"\n        [tooltip]=\"'document.receiptDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"receiptDate\"\n      ></v-date-picker>\n      <v-date-picker\n        *ngIf=\"additionalDate === 'sent'\"\n        [defaultDateIsToday]=\"true\"\n        [disabled]=\"obs.disabled\"\n        [margin]=\"true\"\n        [title]=\"'document.sendDate' | translate\"\n        [tooltip]=\"'document.sendDateTooltip' | translate\"\n        [widthPx]=\"100\"\n        name=\"sendDate\"\n      ></v-date-picker>\n      <v-select\n        [defaultSelectionId]=\"status\"\n        [disabled]=\"obs.disabled || disableStatus\"\n        [items]=\"statusItems$ | async\"\n        [margin]=\"true\"\n        [required]=\"true\"\n        [title]=\"'document.status' | translate\"\n        [tooltip]=\"'document.statusTooltip' | translate\"\n        [widthInPx]=\"200\"\n        [clearSelectionSubject$]=\"clearStatusSelection$\"\n        name=\"status\"\n      ></v-select>\n      <v-input\n        [defaultValue]=\"description\"\n        [disabled]=\"obs.disabled || disableDescription\"\n        [fullWidth]=\"true\"\n        [margin]=\"true\"\n        [title]=\"'document.inputDescription' | translate\"\n        [tooltip]=\"'document.inputDescriptionTooltip' | translate\"\n        name=\"description\"\n      >\n      </v-input>\n      <v-select\n        [defaultSelectionId]=\"confidentialityLevel\"\n        [disabled]=\"obs.disabled || disableConfidentialityLevel\"\n        [items]=\"confidentialityLevelItems$ | async\"\n        [margin]=\"true\"\n        [title]=\"'document.confidentialityLevel' | translate\"\n        [tooltip]=\"'document.confidentialityLevelTooltip' | translate\"\n        [widthInPx]=\"200\"\n        name=\"confidentialityLevel\"\n      ></v-select>\n    </v-form>\n  </ng-container>\n</ng-template>\n\n<ng-template #additionalDatePicker let-additionalDate=\"additionalDate\">\n  <v-input-label\n    [title]=\"'document.additionalDate' | translate\"\n    [name]=\"'additionalDate'\"\n    [tooltip]=\"'document.additionalDateTooltip' | translate\"\n    [required]=\"true\"\n  >\n  </v-input-label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1 additional-date\">\n    <label\n      class=\"custom-control custom-radio custom-control-inline\"\n      *ngFor=\"let option of ADDITONAL_DOCUMENT_DATE_OPTIONS\"\n      (click)=\"setAdditionalDate(option.value)\"\n    >\n      <input\n        class=\"custom-control-input\"\n        type=\"radio\"\n        name=\"radio-inline\"\n        [checked]=\"additionalDate === option.value\"\n      /><span class=\"custom-control-label\">{{ option.translationKey | translate }}</span>\n    </label>\n  </div>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.buttons{display:flex;flex-direction:row;width:100%;justify-content:space-between}.additional-date{padding:0;width:100%;max-width:100%;margin:0;margin-block-end:var(--v-input-margin)}.additional-date .custom-control{margin-bottom:0}\n"] }]
@@ -4733,7 +4747,7 @@ class DocumentenApiUploaderComponent {
         this.hideModal$.next(null);
         this.domService.toggleSubmitButton(true);
         this.fileToBeUploaded$
-            .pipe(take$1(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
+            .pipe(take(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
             this.domService.toggleSubmitButton(false);
             this.uploading$.next(false);
             this._value.push(result);
@@ -4860,6 +4874,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2020 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 FormIoCurrentUserComponent {
+    constructor(keycloakService) {
+        this.keycloakService = keycloakService;
+        this.valueChange = new EventEmitter();
+        this.keycloakService.loadUserProfile().then((profile) => {
+            this.value = profile;
+            this.valueChange.emit();
+        });
+    }
+}
+FormIoCurrentUserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoCurrentUserComponent, deps: [{ token: i1$3.KeycloakService }], target: i0.ɵɵFactoryTarget.Component });
+FormIoCurrentUserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormIoCurrentUserComponent, selector: "valtimo-formio-current-user", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: '{{ this.value?.firstName }} {{ this.value?.lastName }}<br />{{ this.value?.email }}', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoCurrentUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'valtimo-formio-current-user', template: '{{ this.value?.firstName }} {{ this.value?.lastName }}<br />{{ this.value?.email }}' }]
+        }], ctorParameters: function () { return [{ type: i1$3.KeycloakService }]; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -4881,7 +4933,8 @@ FormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "1
 FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FormIoModule, declarations: [FormioComponent,
         FormioBuilderComponent,
         FormIoUploaderComponent,
-        DocumentenApiUploaderComponent], imports: [CommonModule,
+        DocumentenApiUploaderComponent,
+        FormIoCurrentUserComponent], imports: [CommonModule,
         FormioModule,
         DropzoneModule,
         TranslateModule,
@@ -4892,7 +4945,8 @@ FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         DocumentenApiMetadataModalModule], exports: [FormioComponent,
         FormioBuilderComponent,
         FormIoUploaderComponent,
-        DocumentenApiUploaderComponent] });
+        DocumentenApiUploaderComponent,
+        FormIoCurrentUserComponent] });
 FormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoModule, providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }], imports: [CommonModule,
         FormioModule,
         DropzoneModule,
@@ -4921,12 +4975,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         FormioBuilderComponent,
                         FormIoUploaderComponent,
                         DocumentenApiUploaderComponent,
+                        FormIoCurrentUserComponent
                     ],
                     exports: [
                         FormioComponent,
                         FormioBuilderComponent,
                         FormIoUploaderComponent,
                         DocumentenApiUploaderComponent,
+                        FormIoCurrentUserComponent,
                     ],
                     providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }],
                 }]
@@ -5198,7 +5254,7 @@ class SearchableDropdownComponent {
             .pipe(debounceTime(50))
             .subscribe((event) => {
             combineLatest([this.mouseOnList$, this.filteredItems$, this.focusedItemId$])
-                .pipe(take$1(1))
+                .pipe(take(1))
                 .subscribe(([mouseOnList, items, focusedId]) => {
                 const length = items.length;
                 const focusedIndex = items.findIndex(item => item.id === focusedId);
@@ -5251,7 +5307,7 @@ class SearchableDropdownComponent {
     }
     openSearchSubscription() {
         this.searchSubscription = this.searchTerm.valueChanges.subscribe(searchTerm => {
-            this.focusedItemId$.pipe(take$1(1)).subscribe(focusedItemId => {
+            this.focusedItemId$.pipe(take(1)).subscribe(focusedItemId => {
                 if (!searchTerm) {
                     this.filteredItems$.next(this.items);
                 }
@@ -5272,7 +5328,7 @@ class SearchableDropdownComponent {
         });
     }
     scrollButtonIntoView(id) {
-        this.filteredItems$.pipe(take$1(1)).subscribe(items => {
+        this.filteredItems$.pipe(take(1)).subscribe(items => {
             const focusItemIndex = items.findIndex(item => item.id === id);
             const focusedButton = this.buttons.toArray()[focusItemIndex];
             if (focusedButton) {
@@ -5463,7 +5519,7 @@ const formIoUploaderEditForm = () => ({
  * limitations under the License.
  */
 const customUploaderType = 'valtimo-file';
-const COMPONENT_OPTIONS$1 = {
+const COMPONENT_OPTIONS$2 = {
     type: customUploaderType,
     selector: 'valtimo-form-io-uploader',
     title: 'Valtimo File Upload',
@@ -5474,7 +5530,7 @@ const COMPONENT_OPTIONS$1 = {
     editForm: formIoUploaderEditForm,
 };
 function registerFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$1);
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$2);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
@@ -5482,8 +5538,8 @@ function registerFormioUploadComponent(injector) {
             return true;
         }
     }
-    if (!customElements.get(COMPONENT_OPTIONS$1.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$1, FormIoUploaderComponent, UploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$2.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$2, FormIoUploaderComponent, UploaderComponent, injector);
     }
 }
 
@@ -5798,7 +5854,7 @@ const documentenApiUploaderEditForm = () => ({
  * limitations under the License.
  */
 const customDocumentApiUploaderType = 'documenten-api-file';
-const COMPONENT_OPTIONS = {
+const COMPONENT_OPTIONS$1 = {
     type: customDocumentApiUploaderType,
     selector: 'documenten-api-form-io-uploader',
     title: 'Documenten API File Upload',
@@ -5809,7 +5865,7 @@ const COMPONENT_OPTIONS = {
     editForm: documentenApiUploaderEditForm,
 };
 function registerDocumentenApiFormioUploadComponent(injector) {
-    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS);
+    const originalUploadComponent = createCustomFormioComponent(COMPONENT_OPTIONS$1);
     // override setValue function to allow for setting an array value
     class UploaderComponent extends originalUploadComponent {
         setValue(value) {
@@ -5817,9 +5873,99 @@ function registerDocumentenApiFormioUploadComponent(injector) {
             return true;
         }
     }
-    if (!customElements.get(COMPONENT_OPTIONS.selector)) {
-        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS, DocumentenApiUploaderComponent, UploaderComponent, injector);
+    if (!customElements.get(COMPONENT_OPTIONS$1.selector)) {
+        registerCustomFormioComponentWithClass(COMPONENT_OPTIONS$1, DocumentenApiUploaderComponent, UploaderComponent, injector);
+    }
+}
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const formIoCurrentUserEditForm = () => ({
+    components: [
+        {
+            key: 'type',
+            type: 'hidden'
+        }, {
+            key: 'label',
+            type: 'textfield',
+            input: true,
+            label: 'Label',
+            placeholder: 'Label',
+            defaultValue: 'Valtimo Current User',
+            validate: {
+                required: true,
+            },
+        }, {
+            key: 'key',
+            type: 'textfield',
+            input: true,
+            label: 'Property Name',
+            placeholder: 'Property Name',
+            tooltip: 'The name of this field in the API endpoint.',
+            validate: {
+                required: true,
+            },
+        }, {
+            key: 'tableView',
+            type: 'checkbox',
+            label: 'Table View',
+            tooltip: 'If checked, this value will show up in the table view of the submissions list.'
+        }, {
+            key: 'hideLabel',
+            type: 'checkbox',
+            label: 'Hide Label',
+            tooltip: 'Hide the label of this component. This setting will display the label in the form builder, but hide the label when the form is rendered.'
+        }, {
+            key: 'hidden',
+            type: 'checkbox',
+            label: 'Hidden',
+            tooltip: 'A hidden field is still a part of the form JSON, but is hidden when viewing the form is rendererd.'
+        },
+    ],
+});
+
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const COMPONENT_OPTIONS = {
+    type: 'valtimo-current-user',
+    selector: 'valtimo-form-io-current-user',
+    title: 'Valtimo Current User',
+    group: 'basic',
+    icon: 'user',
+    editForm: formIoCurrentUserEditForm,
+    schema: {
+        label: 'Valtimo Current User',
+        tableView: true,
     }
+};
+function registerFormioCurrentUserComponent(injector) {
+    registerCustomFormioComponent(COMPONENT_OPTIONS, FormIoCurrentUserComponent, injector);
 }
 
 /*
@@ -5880,7 +6026,7 @@ function registerFormioFileSelectorComponent(injector) {
         }
         getResources() {
             return stateService.documentId$
-                .pipe(take$1(1))
+                .pipe(take(1))
                 .toPromise()
                 .then(documentId => getDocumentResources(documentId));
         }
@@ -6111,7 +6257,7 @@ class SearchFieldsComponent {
         this.searchFields$.next(fields);
     }
     set documentDefinitionName(documentDefinitionName) {
-        this.documentDefinitionName$.pipe(take(1)).subscribe(currentDocumentDefinitionName => {
+        this.documentDefinitionName$.pipe(take$1(1)).subscribe(currentDocumentDefinitionName => {
             if (currentDocumentDefinitionName !== documentDefinitionName) {
                 this.documentDefinitionName$.next(documentDefinitionName);
             }
@@ -6124,7 +6270,7 @@ class SearchFieldsComponent {
         this.documentDefinitionNameSubscription?.unsubscribe();
     }
     singleValueChange(searchFieldKey, value, isDateTime) {
-        this.values$.pipe(take(1)).subscribe(values => {
+        this.values$.pipe(take$1(1)).subscribe(values => {
             if (value) {
                 this.values$.next({ ...values, [searchFieldKey]: this.getSingleValue(value, isDateTime) });
             }
@@ -6136,7 +6282,7 @@ class SearchFieldsComponent {
         });
     }
     multipleValueChange(searchFieldKey, value, isDateTime) {
-        this.values$.pipe(take(1)).subscribe(values => {
+        this.values$.pipe(take$1(1)).subscribe(values => {
             if (value.start && value.end) {
                 this.values$.next({
                     ...values,
@@ -6154,12 +6300,12 @@ class SearchFieldsComponent {
         });
     }
     toggleExpanded() {
-        this.expanded$.pipe(take(1)).subscribe(expanded => {
+        this.expanded$.pipe(take$1(1)).subscribe(expanded => {
             this.expanded$.next(!expanded);
         });
     }
     search() {
-        this.values$.pipe(take(1)).subscribe(values => {
+        this.values$.pipe(take$1(1)).subscribe(values => {
             this.doSearch.emit(values);
         });
     }
@@ -6190,10 +6336,10 @@ class SearchFieldsComponent {
     }
 }
 SearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsComponent, deps: [{ 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" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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      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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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>\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  >\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>\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  >\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>\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  ></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>\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 name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </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>\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      >\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      >\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>\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 name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\"></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>\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    ></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>\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  ></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>\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      ></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      ></v-date-picker>\n    </v-form>\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: [".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", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "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", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], 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" }, outputs: { doSearch: "doSearch" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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      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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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>\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  >\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>\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  >\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>\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  ></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>\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 name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"> </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>\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      >\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      >\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>\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 name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"></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>\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    ></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>\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  ></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>\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      ></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      ></v-date-picker>\n    </v-form>\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: [".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", "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", "clearable", "disabled", "multiple", "margin", "widthInPx", "notFoundText", "clearAllText", "name", "title", "titleTranslationKey", "clearSelectionSubject$", "tooltip", "required", "loading", "loadingText", "placeholder"], 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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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      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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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>\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  >\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>\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  >\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>\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  ></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>\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 name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\"> </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>\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      >\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      >\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>\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 name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\"></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>\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    ></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>\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  ></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>\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      ></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      ></v-date-picker>\n    </v-form>\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: [".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"] }]
+            args: [{ selector: 'valtimo-search-fields', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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      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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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        }\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>\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  >\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>\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  >\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>\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  ></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>\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 name=\"start\" [fullWidth]=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"> </v-input>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-input name=\"end\" [fullWidth]=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"> </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>\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      >\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      >\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>\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 name=\"start\" fullWidth=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"></v-date-picker>\n      <ng-container *ngTemplateOutlet=\"toText\"></ng-container>\n      <v-date-picker name=\"end\" fullWidth=\"true\" [clear$]=\"clear$\" (keyup.enter)=\"search()\"></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>\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    ></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>\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  ></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>\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      ></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      ></v-date-picker>\n    </v-form>\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: [".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"] }]
         }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { loading: [{
                 type: Input
             }], searchFields: [{
@@ -6265,6 +6411,318 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class CarbonMultiInputComponent {
+    constructor() {
+        this.name = '';
+        this.title = '';
+        this.titleTranslationKey = '';
+        this.type = 'value';
+        this.initialAmountOfRows = 1;
+        this.minimumAmountOfRows = 1;
+        this.maxRows = 20;
+        this.addRowText = '';
+        this.addRowTranslationKey = '';
+        this.deleteRowText = '';
+        this.deleteRowTranslationKey = '';
+        this.disabled = false;
+        this.margin = false;
+        this.tooltip = '';
+        this.required = false;
+        this.valueChange = new EventEmitter();
+        this.values$ = new BehaviorSubject([]);
+        this.mappedValues$ = this.values$.pipe(map$1(values => values
+            .map(value => this.getMappedValue(value))
+            .filter(value => this.type === 'value'
+            ? value
+            : value.value && value.key)));
+        this.addRowEnabled$ = this.values$.pipe(map$1(values => !!(values.length < this.maxRows)));
+    }
+    ngOnInit() {
+        this.values$.next(this.getInitialRows());
+        this.openValuesSubscription();
+    }
+    ngOnDestroy() {
+        this.valuesSubscription?.unsubscribe();
+    }
+    addRow() {
+        combineLatest([this.values$, this.addRowEnabled$])
+            .pipe(take(1))
+            .subscribe(([values, addRowEnabled]) => {
+            if (addRowEnabled) {
+                this.values$.next([...values, this.getEmptyValue()]);
+            }
+        });
+    }
+    deleteRow(uuid) {
+        this.values$.pipe(take(1)).subscribe(values => {
+            if (values.length > this.minimumAmountOfRows) {
+                this.values$.next(values.filter(value => value.uuid !== uuid));
+            }
+        });
+    }
+    trackByFn(index, value) {
+        return value.uuid;
+    }
+    onValueChange(templateValue, inputValue, change) {
+        this.values$.pipe(take(1)).subscribe(values => {
+            this.values$.next(values.map(stateValue => {
+                if (stateValue.uuid === templateValue.uuid) {
+                    if (change === 'value') {
+                        return { ...stateValue, value: inputValue };
+                    }
+                    else if (change === 'key') {
+                        return { ...stateValue, key: inputValue };
+                    }
+                }
+                return stateValue;
+            }));
+        });
+    }
+    getInitialRows() {
+        const minimumRows = this.minimumAmountOfRows;
+        const initialRows = this.initialAmountOfRows;
+        const amountOfInitalRows = minimumRows > initialRows ? minimumRows : initialRows > 1 ? initialRows : 1;
+        if (!this.defaultValues) {
+            return new Array(amountOfInitalRows).fill(this.getEmptyValue());
+        }
+        else {
+            return this.defaultValues.map(defaultValue => ({ ...defaultValue, uuid: v4() }));
+        }
+    }
+    getEmptyValue() {
+        return {
+            key: '',
+            value: '',
+            uuid: v4(),
+        };
+    }
+    getMappedValue(valueToMap) {
+        if (this.type === 'keyValue') {
+            return { key: valueToMap.key, value: valueToMap.value };
+        }
+        else {
+            return valueToMap.value;
+        }
+    }
+    openValuesSubscription() {
+        this.valuesSubscription = this.mappedValues$.subscribe(values => {
+            this.valueChange.emit(values);
+        });
+    }
+}
+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" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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\"\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 *ngTemplateOutlet=\"keyValue; context: {value: value}\"></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\">\n  <div class=\"v-multi-input__input\">\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    <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: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:center;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: "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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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\"\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 *ngTemplateOutlet=\"keyValue; context: {value: value}\"></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\">\n  <div class=\"v-multi-input__input\">\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    <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: [".v-multi-input--margin{margin-block-end:var(--v-input-margin)}.v-multi-input__row{display:flex;flex-direction:row;align-items:center;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: [{
+                type: Input
+            }], titleTranslationKey: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], initialAmountOfRows: [{
+                type: Input
+            }], minimumAmountOfRows: [{
+                type: Input
+            }], maxRows: [{
+                type: Input
+            }], addRowText: [{
+                type: Input
+            }], addRowTranslationKey: [{
+                type: Input
+            }], deleteRowText: [{
+                type: Input
+            }], deleteRowTranslationKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], defaultValues: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2020 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 CarbonMultiInputModule {
+}
+CarbonMultiInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CarbonMultiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CarbonMultiInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CarbonMultiInputModule, declarations: [CarbonMultiInputComponent], imports: [CommonModule,
+        InputLabelModule,
+        InputModule,
+        ButtonModule,
+        TranslateModule,
+        ButtonModule$1,
+        IconModule,
+        InputModule$1], exports: [CarbonMultiInputComponent] });
+CarbonMultiInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CarbonMultiInputModule, imports: [CommonModule,
+        InputLabelModule,
+        InputModule,
+        ButtonModule,
+        TranslateModule,
+        ButtonModule$1,
+        IconModule,
+        InputModule$1] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CarbonMultiInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CarbonMultiInputComponent],
+                    imports: [
+                        CommonModule,
+                        InputLabelModule,
+                        InputModule,
+                        ButtonModule,
+                        TranslateModule,
+                        ButtonModule$1,
+                        IconModule,
+                        InputModule$1,
+                    ],
+                    exports: [CarbonMultiInputComponent],
+                }]
+        }] });
+
+/*
+ * Copyright 2015-2020 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 ConfirmationModalComponent {
+    constructor() {
+        this.titleTranslationKey = '';
+        this.title = '';
+        this.content = '';
+        this.contentTranslationKey = '';
+        this.confirmButtonText = '';
+        this.confirmButtonTextTranslationKey = '';
+        this.cancelButtonText = '';
+        this.cancelButtonTextTranslationKey = '';
+        this.outputOnConfirm = {};
+        this.confirmEvent = new EventEmitter();
+        this.modalOpen$ = new BehaviorSubject(false);
+    }
+    closeModal() {
+        this.modalOpen$.next(false);
+    }
+    confirm() {
+        this.modalOpen$.next(false);
+        this.confirmEvent.emit(this.outputOnConfirm);
+    }
+    ngOnInit() {
+        if (this.showModalSubject$) {
+            this.showModalSubscription = this.showModalSubject$.subscribe(showModal => {
+                this.modalOpen$.next(showModal);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.showModalSubscription?.unsubscribe();
+    }
+}
+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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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" }] });
+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-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF 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: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], contentTranslationKey: [{
+                type: Input
+            }], confirmButtonText: [{
+                type: Input
+            }], confirmButtonTextTranslationKey: [{
+                type: Input
+            }], cancelButtonText: [{
+                type: Input
+            }], cancelButtonTextTranslationKey: [{
+                type: Input
+            }], showModalSubject$: [{
+                type: Input
+            }], outputOnConfirm: [{
+                type: Input
+            }], confirmEvent: [{
+                type: Output
+            }] } });
+
+/*
+ * Copyright 2015-2020 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 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] });
+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],
+                    exports: [ConfirmationModalComponent],
+                }]
+        }] });
+
 /*
  * Copyright 2015-2022 Ritense BV, the Netherlands.
  *
@@ -6285,5 +6743,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, CardComponent, CardModule, CaseCountPipe, ComponentsModule, ComponentsPipesModule, DataListComponent, DataListModule, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, 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, 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, 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 };
 //# sourceMappingURL=valtimo-components.mjs.map