@valtimo/components 5.14.0 → 10.0.0

package/fesm2020/valtimo-components.mjs

@@ -1,43 +1,47 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, NgModule, Pipe, HostListener, ViewChildren } from '@angular/core';
-import { Subject, BehaviorSubject, from, switchMap, map, Observable, combineLatest, fromEvent, Subscription, timer, take as take$1, of, filter as filter$1, startWith } from 'rxjs';
-import * as i3 from '@angular/forms';
-import { Validators, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import moment from 'moment';
-import * as i1 from '@angular/common';
+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 * as i1 from '@ngx-translate/core';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@valtimo/choicefield';
-import * as i1$2 from 'keycloak-angular';
-import * as i1$3 from '@valtimo/config';
+import * as i2 from '@angular/forms';
+import { Validators, UntypedFormControl, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
+import moment from 'moment';
+import * as i1$2 from '@valtimo/choicefield';
+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 i1$4 from '@valtimo/user-interface';
-import { ParagraphModule, ModalModule as ModalModule$1, TitleModule, ButtonModule, FormModule, InputModule, SelectModule, DatePickerModule, InputLabelModule } from '@valtimo/user-interface';
-import * as i1$5 from '@angular/router';
+import * as i10 from 'carbon-components-angular';
+import { UIShellModule, IconModule, LinkModule, GridModule, TabsModule, StructuredListModule, SelectModule, ToggleModule, TagModule } 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 i2 from '@valtimo/document';
+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 * as i2$2 from '@valtimo/document';
 import { DocumentModule, DocumentService } from '@valtimo/document';
-import * as i1$6 from '@valtimo/security';
+import * as i3 from '@valtimo/security';
 import * as i4 from 'ngx-logger';
-import * as i1$7 from '@ng-bootstrap/ng-bootstrap';
+import * as i4$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i1$8 from '@ngx-translate/core';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import * as i1$9 from '@angular/common/http';
+import * as i1$6 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
-import * as i5 from '@valtimo/context';
-import { map as map$1, debounceTime, take, filter, switchMap as switchMap$1, tap } from 'rxjs/operators';
-import * as i2$1 from '@angular/platform-browser';
+import * as i5$1 from '@valtimo/context';
+import * as i5$2 from '@angular/cdk/layout';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import heatmap from 'heatmap.js-fixed/build/heatmap.js';
-import * as i1$a from '@valtimo/resource';
+import * as i1$7 from '@valtimo/resource';
 import { S3Resource, ResourceModule } from '@valtimo/resource';
-import * as i7 from '@formio/angular';
+import * as i8 from '@formio/angular';
 import { Formio, Components, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass } from '@formio/angular';
 import jwt_decode from 'jwt-decode';
 import Dropzone from 'dropzone';
-import * as i1$b from 'ngx-spinner';
+import * as i2$3 from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
-import * as i1$c from 'ng-multiselect-dropdown';
+import * as i2$4 from 'ng-multiselect-dropdown';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
 
 /*
@@ -240,6 +244,69 @@ class TimelineItemImpl {
  * limitations under the License.
  */
 
+class MenuItemTranslationPipe {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    transform(menuItem) {
+        const pageTranslationKey = 'pages.' + menuItem.title.toLowerCase() + '.title';
+        const titleTranslationKey = menuItem.title;
+        return combineLatest([
+            this.translateService.stream(pageTranslationKey),
+            this.translateService.stream(titleTranslationKey),
+        ]).pipe(map(([pageTranslation, menuItemTitleTranslation]) => {
+            if (pageTranslation !== pageTranslationKey) {
+                return pageTranslation;
+            }
+            else if (menuItemTitleTranslation !== titleTranslationKey) {
+                return menuItemTitleTranslation;
+            }
+            else {
+                return menuItem.title;
+            }
+        }));
+    }
+}
+MenuItemTranslationPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuItemTranslationPipe, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe });
+MenuItemTranslationPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MenuItemTranslationPipe, name: "menuItemTranslate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuItemTranslationPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'menuItemTranslate' }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; } });
+
+class ComponentsPipesModule {
+}
+ComponentsPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponentsPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ComponentsPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ComponentsPipesModule, declarations: [MenuItemTranslationPipe], exports: [MenuItemTranslationPipe] });
+ComponentsPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponentsPipesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponentsPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MenuItemTranslationPipe],
+                    exports: [MenuItemTranslationPipe],
+                }]
+        }] });
+
+class CaseCountPipe {
+    transform(caseCount) {
+        if (typeof caseCount === 'number') {
+            if (caseCount > 99) {
+                return '99+';
+            }
+            else {
+                return `${caseCount}`;
+            }
+        }
+        return '';
+    }
+}
+CaseCountPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CaseCountPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CaseCountPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CaseCountPipe, name: "caseCount" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CaseCountPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'caseCount' }]
+        }] });
+
 class ValtimoModalService {
     constructor() {
         this._scrollToTop$ = new Subject();
@@ -258,9 +325,58 @@ class ValtimoModalService {
         this._documentDefinitionName$.next(documentDefinitionName);
     }
 }
-ValtimoModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValtimoModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ValtimoModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValtimoModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ValtimoModalService, decorators: [{
+ValtimoModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ValtimoModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ValtimoModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ShellService {
+    constructor() {
+        this._sideBarExpanded$ = new BehaviorSubject(true);
+        this._panelExpanded$ = new BehaviorSubject(false);
+        this._largeScreen$ = new BehaviorSubject(true);
+        this._mouseOnTopBar$ = new BehaviorSubject(false);
+    }
+    get sideBarExpanded$() {
+        return this._sideBarExpanded$.asObservable();
+    }
+    get panelExpanded$() {
+        return this._panelExpanded$.asObservable();
+    }
+    get largeScreen$() {
+        return this._largeScreen$.asObservable();
+    }
+    get mouseOnTopBar$() {
+        return this._mouseOnTopBar$.asObservable();
+    }
+    toggleSideBar() {
+        const isExpanded = this._sideBarExpanded$.getValue();
+        this._sideBarExpanded$.next(!isExpanded);
+    }
+    togglePanel() {
+        const isExpanded = this._panelExpanded$.getValue();
+        this._panelExpanded$.next(!isExpanded);
+    }
+    setPanelExpanded(isExpanded) {
+        this._panelExpanded$.next(isExpanded);
+    }
+    setSideBarExpanded(isExpanded) {
+        this._sideBarExpanded$.next(isExpanded);
+    }
+    setLargeScreen(isLarge) {
+        this._largeScreen$.next(isLarge);
+    }
+    setMouseOnTopBar(mouseOnTopBar) {
+        this._mouseOnTopBar$.next(mouseOnTopBar);
+    }
+}
+ShellService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShellService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ShellService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShellService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShellService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -379,9 +495,9 @@ class CamundaFormfieldService {
         return validatorTypes;
     }
 }
-CamundaFormfieldService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CamundaFormfieldService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldService, decorators: [{
+CamundaFormfieldService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CamundaFormfieldService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -409,9 +525,9 @@ class CamundaFormfieldValidationComponent {
         this.formControl = this.formGroup.get(this.formField.id);
     }
 }
-CamundaFormfieldValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaFormfieldValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: { formGroup: "formGroup", formField: "formField" }, 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<ul\n  class=\"parsley-errors-list filled\"\n  *ngIf=\"formControl.invalid && (formControl.dirty || formControl.touched)\"\n>\n  <li *ngIf=\"formControl.errors.required\">This field is required.</li>\n  <li *ngIf=\"formControl.errors.minlength\">\n    This field should be more than {{ formControl.errors.minlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.maxlength\">\n    This field cannot be more than {{ formControl.errors.maxlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.min\">\n    This field should be more than {{ formControl.errors.min.min }}.\n  </li>\n  <li *ngIf=\"formControl.errors.max\">\n    This field should be less or equal to {{ formControl.errors.max.max }}.\n  </li>\n  <li *ngIf=\"formControl.errors.minDate\">\n    This field should be more than {{ formControl.errors.minDate.minDate }}.\n  </li>\n  <li *ngIf=\"formControl.errors.maxDate\">\n    This field should be less or equal to {{ formControl.errors.maxDate.maxDate }}.\n  </li>\n</ul>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldValidationComponent, decorators: [{
+CamundaFormfieldValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaFormfieldValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: { formGroup: "formGroup", formField: "formField" }, 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<ul\n  class=\"parsley-errors-list filled\"\n  *ngIf=\"formControl.invalid && (formControl.dirty || formControl.touched)\"\n>\n  <li *ngIf=\"formControl.errors.required\">This field is required.</li>\n  <li *ngIf=\"formControl.errors.minlength\">\n    This field should be more than {{ formControl.errors.minlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.maxlength\">\n    This field cannot be more than {{ formControl.errors.maxlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.min\">\n    This field should be more than {{ formControl.errors.min.min }}.\n  </li>\n  <li *ngIf=\"formControl.errors.max\">\n    This field should be less or equal to {{ formControl.errors.max.max }}.\n  </li>\n  <li *ngIf=\"formControl.errors.minDate\">\n    This field should be more than {{ formControl.errors.minDate.minDate }}.\n  </li>\n  <li *ngIf=\"formControl.errors.maxDate\">\n    This field should be less or equal to {{ formControl.errors.maxDate.maxDate }}.\n  </li>\n</ul>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldValidationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-formfield-validation', 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<ul\n  class=\"parsley-errors-list filled\"\n  *ngIf=\"formControl.invalid && (formControl.dirty || formControl.touched)\"\n>\n  <li *ngIf=\"formControl.errors.required\">This field is required.</li>\n  <li *ngIf=\"formControl.errors.minlength\">\n    This field should be more than {{ formControl.errors.minlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.maxlength\">\n    This field cannot be more than {{ formControl.errors.maxlength.requiredLength }} characters.\n  </li>\n  <li *ngIf=\"formControl.errors.min\">\n    This field should be more than {{ formControl.errors.min.min }}.\n  </li>\n  <li *ngIf=\"formControl.errors.max\">\n    This field should be less or equal to {{ formControl.errors.max.max }}.\n  </li>\n  <li *ngIf=\"formControl.errors.minDate\">\n    This field should be more than {{ formControl.errors.minDate.minDate }}.\n  </li>\n  <li *ngIf=\"formControl.errors.maxDate\">\n    This field should be less or equal to {{ formControl.errors.maxDate.maxDate }}.\n  </li>\n</ul>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { formGroup: [{
@@ -438,9 +554,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class CamundaStringFormfieldComponent {
     constructor() { }
 }
-CamundaStringFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaStringFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaStringFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaStringFormfieldComponent, selector: "valtimo-camunda-string-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      type=\"text\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaStringFormfieldComponent, decorators: [{
+CamundaStringFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaStringFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaStringFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaStringFormfieldComponent, selector: "valtimo-camunda-string-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      type=\"text\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaStringFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-string-formfield', 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      type=\"text\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; } });
@@ -463,9 +579,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class CamundaBooleanFormfieldComponent {
     constructor() { }
 }
-CamundaBooleanFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaBooleanFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBooleanFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaBooleanFormfieldComponent, selector: "valtimo-camunda-boolean-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1\">\n    <label for=\"yes_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"yes_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"true\"\n        [formControlName]=\"formField.id\"\n      />\n      <span class=\"custom-control-label custom-control-color\">Yes</span>\n    </label>\n    <label for=\"no_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"no_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"false\"\n        [formControlName]=\"formField.id\"\n      />\n      <span class=\"custom-control-label custom-control-color\">No</span>\n    </label>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaBooleanFormfieldComponent, decorators: [{
+CamundaBooleanFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaBooleanFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaBooleanFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaBooleanFormfieldComponent, selector: "valtimo-camunda-boolean-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1\">\n    <label for=\"yes_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"yes_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"true\"\n        [formControlName]=\"formField.id\"\n      />\n      <span class=\"custom-control-label custom-control-color\">Yes</span>\n    </label>\n    <label for=\"no_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"no_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"false\"\n        [formControlName]=\"formField.id\"\n      />\n      <span class=\"custom-control-label custom-control-color\">No</span>\n    </label>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "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.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: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaBooleanFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-boolean-formfield', 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 form-check mt-1\">\n    <label for=\"yes_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"yes_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"true\"\n        [formControlName]=\"formField.id\"\n      />\n      <span class=\"custom-control-label custom-control-color\">Yes</span>\n    </label>\n    <label for=\"no_{{ formField.id }}\" class=\"custom-control custom-radio custom-control-inline\">\n      <input\n        class=\"custom-control-input\"\n        id=\"no_{{ formField.id }}\"\n        type=\"radio\"\n        [value]=\"false\"\n        [formControlName]=\"formField.id\"\n      />\n      <span class=\"custom-control-label custom-control-color\">No</span>\n    </label>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; } });
@@ -522,9 +638,9 @@ class CamundaDateFormfieldComponent {
         });
     }
 }
-CamundaDateFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaDateFormfieldComponent, deps: [{ token: CamundaFormfieldService }], target: i0.ɵɵFactoryTarget.Component });
-CamundaDateFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaDateFormfieldComponent, selector: "valtimo-camunda-date-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 pt1\">\n    <input\n      type=\"input\"\n      class=\"form-control\"\n      data-min-view=\"2\"\n      id=\"{{ formField.id }}\"\n      autocomplete=\"off\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaDateFormfieldComponent, decorators: [{
+CamundaDateFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaDateFormfieldComponent, deps: [{ token: CamundaFormfieldService }], target: i0.ɵɵFactoryTarget.Component });
+CamundaDateFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaDateFormfieldComponent, selector: "valtimo-camunda-date-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 pt1\">\n    <input\n      type=\"input\"\n      class=\"form-control\"\n      data-min-view=\"2\"\n      id=\"{{ formField.id }}\"\n      autocomplete=\"off\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaDateFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-date-formfield', 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6 pt1\">\n    <input\n      type=\"input\"\n      class=\"form-control\"\n      data-min-view=\"2\"\n      id=\"{{ formField.id }}\"\n      autocomplete=\"off\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: CamundaFormfieldService }]; } });
@@ -547,9 +663,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class CamundaLongFormfieldComponent {
     constructor() { }
 }
-CamundaLongFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaLongFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaLongFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaLongFormfieldComponent, selector: "valtimo-camunda-long-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      type=\"number\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaLongFormfieldComponent, decorators: [{
+CamundaLongFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaLongFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaLongFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaLongFormfieldComponent, selector: "valtimo-camunda-long-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      type=\"number\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaLongFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-long-formfield', 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <input\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      type=\"number\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    />\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; } });
@@ -575,9 +691,9 @@ class CamundaEnumFormfieldComponent {
         this.valueKeys = Object.keys(this.formField.type.values);
     }
 }
-CamundaEnumFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaEnumFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaEnumFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaEnumFormfieldComponent, selector: "valtimo-camunda-enum-formfield", 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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <option *ngFor=\"let key of valueKeys\" [value]=\"key\" id=\"option_{{ key }}\">\n        {{ formField.type.values[key] }}\n      </option>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaEnumFormfieldComponent, decorators: [{
+CamundaEnumFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaEnumFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaEnumFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaEnumFormfieldComponent, selector: "valtimo-camunda-enum-formfield", 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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <option *ngFor=\"let key of valueKeys\" [value]=\"key\" id=\"option_{{ key }}\">\n        {{ formField.type.values[key] }}\n      </option>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaEnumFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-enum-formfield', 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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <option *ngFor=\"let key of valueKeys\" [value]=\"key\" id=\"option_{{ key }}\">\n        {{ formField.type.values[key] }}\n      </option>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; } });
@@ -600,9 +716,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class CamundaTextareaFormfieldComponent {
     constructor() { }
 }
-CamundaTextareaFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaTextareaFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaTextareaFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaTextareaFormfieldComponent, selector: "valtimo-camunda-textarea-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <textarea\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    ></textarea>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaTextareaFormfieldComponent, decorators: [{
+CamundaTextareaFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaTextareaFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaTextareaFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaTextareaFormfieldComponent, selector: "valtimo-camunda-textarea-formfield", 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <textarea\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    ></textarea>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaTextareaFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-textarea-formfield', 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=\"form-group row\" *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <textarea\n      id=\"{{ formField.id }}\"\n      class=\"form-control\"\n      [attr.placeholder]=\"formField.defaultValue\"\n      [formControlName]=\"formField.id\"\n    ></textarea>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; } });
@@ -635,12 +751,12 @@ class CamundaChoicefieldFormfieldComponent {
         });
     }
 }
-CamundaChoicefieldFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, deps: [{ token: i1$1.ChoicefieldService }], target: i0.ɵɵFactoryTarget.Component });
-CamundaChoicefieldFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaChoicefieldFormfieldComponent, selector: "valtimo-camunda-choicefield-formfield", 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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option\n          *ngIf=\"!choicefieldValue.deprecated\"\n          [value]=\"choicefieldValue.value\"\n          id=\"option_{{ choicefieldValue.value }}\"\n        >\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n", components: [{ type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }], directives: [{ type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, decorators: [{
+CamundaChoicefieldFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, deps: [{ token: i1$2.ChoicefieldService }], target: i0.ɵɵFactoryTarget.Component });
+CamundaChoicefieldFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaChoicefieldFormfieldComponent, selector: "valtimo-camunda-choicefield-formfield", 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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option\n          *ngIf=\"!choicefieldValue.deprecated\"\n          [value]=\"choicefieldValue.value\"\n          id=\"option_{{ choicefieldValue.value }}\"\n        >\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\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: 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CamundaFormfieldValidationComponent, selector: "valtimo-camunda-formfield-validation", inputs: ["formGroup", "formField"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-choicefield-formfield', 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=\"form-group row\" [formGroup]=\"formGroup\">\n  <label for=\"{{ formField.id }}\" class=\"col-12 col-sm-3 col-form-label text-sm-right\">\n    {{ formField.label }}\n  </label>\n  <div class=\"col-12 col-sm-8 col-lg-6\">\n    <select class=\"form-control\" id=\"{{ formField.id }}\" [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option\n          *ngIf=\"!choicefieldValue.deprecated\"\n          [value]=\"choicefieldValue.value\"\n          id=\"option_{{ choicefieldValue.value }}\"\n        >\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation [formGroup]=\"formGroup\" [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.ChoicefieldService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.ChoicefieldService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -683,9 +799,9 @@ class CamundaFormfieldGeneratorDirective {
         this.component.instance.formField = this.formField;
     }
 }
-CamundaFormfieldGeneratorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldGeneratorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
-CamundaFormfieldGeneratorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: CamundaFormfieldGeneratorDirective, selector: "[valtimoCamundaFormfieldGenerator]", inputs: { formField: "formField", formGroup: "formGroup" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormfieldGeneratorDirective, decorators: [{
+CamundaFormfieldGeneratorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldGeneratorDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive });
+CamundaFormfieldGeneratorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: CamundaFormfieldGeneratorDirective, selector: "[valtimoCamundaFormfieldGenerator]", inputs: { formField: "formField", formGroup: "formGroup" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormfieldGeneratorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[valtimoCamundaFormfieldGenerator]',
@@ -725,7 +841,7 @@ class CamundaGeneratedFormComponent {
     createFormGroup() {
         const group = this.formBuilder.group({});
         this.formFields.forEach(formField => {
-            const control = new FormControl({
+            const control = new UntypedFormControl({
                 value: formField.defaultValue,
                 disabled: this.camundaFormFieldService.isFormFieldDisabled(formField),
             }, this.camundaFormFieldService.getValidatorTypes(formField));
@@ -745,12 +861,12 @@ class CamundaGeneratedFormComponent {
         this.submitted.emit(this.formGroup.value);
     }
 }
-CamundaGeneratedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaGeneratedFormComponent, deps: [{ token: i3.FormBuilder }, { token: CamundaFormfieldService }, { token: i1.Location }], target: i0.ɵɵFactoryTarget.Component });
-CamundaGeneratedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaGeneratedFormComponent, selector: "valtimo-camunda-generated-form", inputs: { formFields: "formFields" }, outputs: { submitted: "submitted" }, 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<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSubmit($event)\">\n  <ng-container\n    *ngFor=\"let formField of formFields\"\n    valtimoCamundaFormfieldGenerator\n    [formGroup]=\"formGroup\"\n    [formField]=\"formField\"\n  >\n    <ng-content></ng-content>\n  </ng-container>\n  <div class=\"row pt-3 mt-1\">\n    <div class=\"col-sm-12\">\n      <div class=\"text-right\">\n        <button\n          class=\"btn btn-space btn-default float-left\"\n          type=\"button\"\n          (click)=\"back()\"\n          id=\"back-button\"\n        >\n          Back\n        </button>\n        <button\n          class=\"btn btn-space btn-secondary\"\n          type=\"button\"\n          (click)=\"reset()\"\n          id=\"reset-button\"\n        >\n          Reset\n        </button>\n        <button\n          class=\"btn btn-space btn-primary\"\n          [disabled]=\"!formGroup.disabled && !formGroup.valid\"\n          type=\"submit\"\n          id=\"submit-button\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CamundaFormfieldGeneratorDirective, selector: "[valtimoCamundaFormfieldGenerator]", inputs: ["formField", "formGroup"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaGeneratedFormComponent, decorators: [{
+CamundaGeneratedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaGeneratedFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: CamundaFormfieldService }, { token: i1$1.Location }], target: i0.ɵɵFactoryTarget.Component });
+CamundaGeneratedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaGeneratedFormComponent, selector: "valtimo-camunda-generated-form", inputs: { formFields: "formFields" }, outputs: { submitted: "submitted" }, 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<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSubmit($event)\">\n  <ng-container\n    *ngFor=\"let formField of formFields\"\n    valtimoCamundaFormfieldGenerator\n    [formGroup]=\"formGroup\"\n    [formField]=\"formField\"\n  >\n    <ng-content></ng-content>\n  </ng-container>\n  <div class=\"row pt-3 mt-1\">\n    <div class=\"col-sm-12\">\n      <div class=\"text-right\">\n        <button\n          class=\"btn btn-space btn-default float-left\"\n          type=\"button\"\n          (click)=\"back()\"\n          id=\"back-button\"\n        >\n          Back\n        </button>\n        <button\n          class=\"btn btn-space btn-secondary\"\n          type=\"button\"\n          (click)=\"reset()\"\n          id=\"reset-button\"\n        >\n          Reset\n        </button>\n        <button\n          class=\"btn btn-space btn-primary\"\n          [disabled]=\"!formGroup.disabled && !formGroup.valid\"\n          type=\"submit\"\n          id=\"submit-button\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CamundaFormfieldGeneratorDirective, selector: "[valtimoCamundaFormfieldGenerator]", inputs: ["formField", "formGroup"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaGeneratedFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-generated-form', 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<form [formGroup]=\"formGroup\" (ngSubmit)=\"handleSubmit($event)\">\n  <ng-container\n    *ngFor=\"let formField of formFields\"\n    valtimoCamundaFormfieldGenerator\n    [formGroup]=\"formGroup\"\n    [formField]=\"formField\"\n  >\n    <ng-content></ng-content>\n  </ng-container>\n  <div class=\"row pt-3 mt-1\">\n    <div class=\"col-sm-12\">\n      <div class=\"text-right\">\n        <button\n          class=\"btn btn-space btn-default float-left\"\n          type=\"button\"\n          (click)=\"back()\"\n          id=\"back-button\"\n        >\n          Back\n        </button>\n        <button\n          class=\"btn btn-space btn-secondary\"\n          type=\"button\"\n          (click)=\"reset()\"\n          id=\"reset-button\"\n        >\n          Reset\n        </button>\n        <button\n          class=\"btn btn-space btn-primary\"\n          [disabled]=\"!formGroup.disabled && !formGroup.valid\"\n          type=\"submit\"\n          id=\"submit-button\"\n        >\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n" }]
-        }], ctorParameters: function () { return [{ type: i3.FormBuilder }, { type: CamundaFormfieldService }, { type: i1.Location }]; }, propDecorators: { submitted: [{
+        }], ctorParameters: function () { return [{ type: i2.UntypedFormBuilder }, { type: CamundaFormfieldService }, { type: i1$1.Location }]; }, propDecorators: { submitted: [{
                 type: Output
             }], formFields: [{
                 type: Input
@@ -782,11 +898,11 @@ class CamundaCustomFormComponent {
         this.viewContainerRef.createComponent(cmpFactory);
     }
 }
-CamundaCustomFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaCustomFormComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-CamundaCustomFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaCustomFormComponent, selector: "valtimo-custom-form", inputs: { componentName: "componentName" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["customFormContainer"], descendants: true, read: ViewContainerRef, static: 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<ng-template #customFormContainer></ng-template>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaCustomFormComponent, decorators: [{
+CamundaCustomFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaCustomFormComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+CamundaCustomFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaCustomFormComponent, selector: "valtimo-custom-form", inputs: { componentName: "componentName" }, viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["customFormContainer"], descendants: true, read: ViewContainerRef, static: 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<ng-template #customFormContainer></ng-template>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaCustomFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-custom-form', 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<ng-template #customFormContainer></ng-template>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-custom-form', 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<ng-template #customFormContainer></ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { componentName: [{
                 type: Input
             }], viewContainerRef: [{
@@ -817,9 +933,9 @@ class CamundaFormComponent {
         this.submitted.emit(event);
     }
 }
-CamundaFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CamundaFormComponent, selector: "valtimo-camunda-form", inputs: { componentName: "componentName", formFields: "formFields" }, outputs: { submitted: "submitted" }, 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<ng-container *ngIf=\"!componentName && submitted\">\n  <valtimo-camunda-generated-form\n    *ngIf=\"formFields\"\n    [formFields]=\"formFields\"\n    (submitted)=\"onSubmitted($event)\"\n  >\n  </valtimo-camunda-generated-form>\n</ng-container>\n<ng-container *ngIf=\"componentName\">\n  <valtimo-custom-form [componentName]=\"componentName\"></valtimo-custom-form>\n</ng-container>\n", components: [{ type: CamundaGeneratedFormComponent, selector: "valtimo-camunda-generated-form", inputs: ["formFields"], outputs: ["submitted"] }, { type: CamundaCustomFormComponent, selector: "valtimo-custom-form", inputs: ["componentName"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormComponent, decorators: [{
+CamundaFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CamundaFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CamundaFormComponent, selector: "valtimo-camunda-form", inputs: { componentName: "componentName", formFields: "formFields" }, outputs: { submitted: "submitted" }, 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<ng-container *ngIf=\"!componentName && submitted\">\n  <valtimo-camunda-generated-form\n    *ngIf=\"formFields\"\n    [formFields]=\"formFields\"\n    (submitted)=\"onSubmitted($event)\"\n  >\n  </valtimo-camunda-generated-form>\n</ng-container>\n<ng-container *ngIf=\"componentName\">\n  <valtimo-custom-form [componentName]=\"componentName\"></valtimo-custom-form>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CamundaGeneratedFormComponent, selector: "valtimo-camunda-generated-form", inputs: ["formFields"], outputs: ["submitted"] }, { kind: "component", type: CamundaCustomFormComponent, selector: "valtimo-custom-form", inputs: ["componentName"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-camunda-form', 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<ng-container *ngIf=\"!componentName && submitted\">\n  <valtimo-camunda-generated-form\n    *ngIf=\"formFields\"\n    [formFields]=\"formFields\"\n    (submitted)=\"onSubmitted($event)\"\n  >\n  </valtimo-camunda-generated-form>\n</ng-container>\n<ng-container *ngIf=\"componentName\">\n  <valtimo-custom-form [componentName]=\"componentName\"></valtimo-custom-form>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { componentName: [{
@@ -847,10 +963,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class CamundaCustomFormModule {
 }
-CamundaCustomFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaCustomFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CamundaCustomFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaCustomFormModule, declarations: [CamundaCustomFormComponent], imports: [CommonModule], exports: [CamundaCustomFormComponent] });
-CamundaCustomFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaCustomFormModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaCustomFormModule, decorators: [{
+CamundaCustomFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaCustomFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CamundaCustomFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CamundaCustomFormModule, declarations: [CamundaCustomFormComponent], imports: [CommonModule], exports: [CamundaCustomFormComponent] });
+CamundaCustomFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaCustomFormModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaCustomFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CamundaCustomFormComponent],
@@ -876,8 +992,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class CamundaGeneratedFormModule {
 }
-CamundaGeneratedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaGeneratedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CamundaGeneratedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaGeneratedFormModule, declarations: [CamundaStringFormfieldComponent,
+CamundaGeneratedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaGeneratedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CamundaGeneratedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CamundaGeneratedFormModule, declarations: [CamundaStringFormfieldComponent,
         CamundaBooleanFormfieldComponent,
         CamundaDateFormfieldComponent,
         CamundaFormfieldGeneratorDirective,
@@ -887,8 +1003,8 @@ CamundaGeneratedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.
         CamundaChoicefieldFormfieldComponent,
         CamundaFormfieldValidationComponent,
         CamundaGeneratedFormComponent], imports: [CommonModule, ReactiveFormsModule], exports: [CamundaGeneratedFormComponent] });
-CamundaGeneratedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaGeneratedFormModule, imports: [[CommonModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaGeneratedFormModule, decorators: [{
+CamundaGeneratedFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaGeneratedFormModule, imports: [CommonModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaGeneratedFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -925,10 +1041,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class CamundaFormModule {
 }
-CamundaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CamundaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormModule, declarations: [CamundaFormComponent], imports: [CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule], exports: [CamundaFormComponent] });
-CamundaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormModule, imports: [[CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CamundaFormModule, decorators: [{
+CamundaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CamundaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormModule, declarations: [CamundaFormComponent], imports: [CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule], exports: [CamundaFormComponent] });
+CamundaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormModule, imports: [CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CamundaFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CamundaFormComponent],
@@ -953,21 +1069,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class TopbarComponent {
-    constructor(keyCloakService, configService) {
+    constructor(keyCloakService, configService, iconService, shellService, sanitizer) {
         this.keyCloakService = keyCloakService;
         this.configService = configService;
+        this.iconService = iconService;
+        this.shellService = shellService;
+        this.sanitizer = sanitizer;
+        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.sideBarExpanded$ = this.shellService.sideBarExpanded$;
+        this.largeScreen$ = this.shellService.largeScreen$;
+        this.panelExpanded$ = this.shellService.panelExpanded$;
     }
     ngOnInit() {
+        this.iconService.registerAll([User20]);
         this.showUserNameInTopBar = this.configService.config.featureToggles?.showUserNameInTopBar;
+        this.setLogo();
+    }
+    toggleSideBar() {
+        this.shellService.toggleSideBar();
+    }
+    setPanelExpanded(expanded) {
+        this.shellService.setPanelExpanded(expanded);
+    }
+    mouseEnter() {
+        this.shellService.setMouseOnTopBar(true);
+    }
+    mouseLeave() {
+        this.shellService.setMouseOnTopBar(false);
+    }
+    setLogo() {
+        const config = this.configService.config;
+        if (config.logoSvgBase64) {
+            this.logoBase64 = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/svg+xml;base64, ${config.logoSvgBase64}`);
+        }
+        else if (config.logoPngBase64) {
+            this.logoBase64 = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${config.logoPngBase64}`);
+        }
     }
 }
-TopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TopbarComponent, deps: [{ token: i1$2.KeycloakService }, { token: i1$3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-TopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TopbarComponent, selector: "valtimo-topbar", 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<nav class=\"navbar navbar-expand fixed-top be-top-header\">\n  <div class=\"container-fluid\">\n    <div class=\"be-navbar-header\">\n      <a class=\"navbar-brand\" [routerLink]=\"['/']\"></a>\n    </div>\n    <div class=\"be-right-navbar\">\n      <!-- important empty div: in order to made float-right element works on mobile  -->\n      <div></div>\n      <ul class=\"nav navbar-nav be-user-nav float-right be-icons-nav\">\n        <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n        <li class=\"nav-item dropdown special\">\n          <a class=\"nav-link be-toggle-right-sidebar\" href=\"#\" role=\"button\" aria-expanded=\"false\">\n            <i class=\"mdi mdi-account-circle user-icon\"></i>\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</nav>\n\n<ng-template #userFullName>\n  <li class=\"nav-item\" *ngIf=\"showUserNameInTopBar\">\n    <div class=\"user-full-name\" *ngIf=\"{userFullName: userFullName$ | async} as obs\">\n      <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n    </div>\n  </li>\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)}\n"], components: [{ type: i1$4.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }], directives: [{ type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TopbarComponent, decorators: [{
+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" }] });
+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<nav class=\"navbar navbar-expand fixed-top be-top-header\">\n  <div class=\"container-fluid\">\n    <div class=\"be-navbar-header\">\n      <a class=\"navbar-brand\" [routerLink]=\"['/']\"></a>\n    </div>\n    <div class=\"be-right-navbar\">\n      <!-- important empty div: in order to made float-right element works on mobile  -->\n      <div></div>\n      <ul class=\"nav navbar-nav be-user-nav float-right be-icons-nav\">\n        <ng-container *ngTemplateOutlet=\"userFullName\"></ng-container>\n        <li class=\"nav-item dropdown special\">\n          <a class=\"nav-link be-toggle-right-sidebar\" href=\"#\" role=\"button\" aria-expanded=\"false\">\n            <i class=\"mdi mdi-account-circle user-icon\"></i>\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</nav>\n\n<ng-template #userFullName>\n  <li class=\"nav-item\" *ngIf=\"showUserNameInTopBar\">\n    <div class=\"user-full-name\" *ngIf=\"{userFullName: userFullName$ | async} as obs\">\n      <v-paragraph [loading]=\"!obs.userFullName\">{{ obs.userFullName }}</v-paragraph>\n    </div>\n  </li>\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)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.KeycloakService }, { type: i1$3.ConfigService }]; } });
+            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: [{
+                type: HostBinding,
+                args: ['class.cds--header']
+            }] } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -986,14 +1136,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class TopbarModule {
 }
-TopbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TopbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TopbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TopbarModule, declarations: [TopbarComponent], imports: [CommonModule, RouterModule, ParagraphModule], exports: [TopbarComponent] });
-TopbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TopbarModule, imports: [[CommonModule, RouterModule, ParagraphModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TopbarModule, decorators: [{
+TopbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TopbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TopbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TopbarModule, declarations: [TopbarComponent], imports: [CommonModule, RouterModule, ParagraphModule, UIShellModule, IconModule], exports: [TopbarComponent] });
+TopbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TopbarModule, imports: [CommonModule, RouterModule, ParagraphModule, UIShellModule, IconModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TopbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TopbarComponent],
-                    imports: [CommonModule, RouterModule, ParagraphModule],
+                    imports: [CommonModule, RouterModule, ParagraphModule, UIShellModule, IconModule],
                     exports: [TopbarComponent],
                 }]
         }] });
@@ -1014,20 +1164,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class MenuService {
-    constructor(configService, documentService, userProviderService, logger, menuIncludeService) {
+    constructor(configService, documentService, userProviderService, logger, menuIncludeService, router) {
         this.configService = configService;
         this.documentService = documentService;
         this.userProviderService = userProviderService;
         this.logger = logger;
         this.menuIncludeService = menuIncludeService;
+        this.router = router;
         this.includeFunctionObservables = {};
         this._menuItems$ = new BehaviorSubject(undefined);
-        this.menuConfig = configService.config.menu;
+        this.currentRoute$ = this.router.events.pipe(filter(event => event instanceof NavigationEnd), map$1(event => event?.url));
+        this.dossierItemsAppended$ = new BehaviorSubject(false);
+        const config = configService?.config;
+        this.menuConfig = config?.menu;
+        this.disableCaseCount = config?.featureToggles?.disableCaseCount;
     }
     init() {
         this.reload();
         this.logger.debug('Menu initialized');
     }
+    // Find out which menu item sequence number matches the current url the closest
+    get closestSequence$() {
+        return combineLatest([this.dossierItemsAppended$, this.currentRoute$, this.menuItems$]).pipe(filter(([dossierItemsAppended]) => dossierItemsAppended), map$1(([dossierItemsAppended, currentRoute, menuItems]) => {
+            let closestSequence = '0';
+            let highestDifference = 0;
+            // recursive function to check how closely each item matches to the current url
+            const checkItemMatch = (stringUrl, sequence) => {
+                // length of the current full url
+                const currentRouteUrlLength = currentRoute.length;
+                // length of the current full url with the item's url substracted
+                const currentRouteSubstractLength = currentRoute.replace(stringUrl, '').length;
+                // the amount of characters that could be substracted
+                const difference = currentRouteUrlLength - currentRouteSubstractLength;
+                // the larger the amount of characters that could be substracted, the more closely the menu item url matches the current url
+                if (difference > highestDifference) {
+                    highestDifference = difference;
+                    closestSequence = sequence;
+                }
+            };
+            // check how closely each menu item (and child menu item) matches the current url using a recursive function
+            menuItems.forEach(item => {
+                checkItemMatch(item.link?.join('') || '', `${item.sequence}`);
+                if (item.children) {
+                    item.children.forEach(childItem => {
+                        if (Array.isArray(childItem.link)) {
+                            checkItemMatch(Array.isArray(item.link)
+                                ? [...item.link, ...childItem.link].join('')
+                                : childItem.link.join(''), `${item.sequence}${childItem.sequence}`);
+                        }
+                    });
+                }
+            });
+            // returns the closest sequence number (each menu item has a sequence number)
+            return closestSequence;
+        }));
+    }
     get menuItems$() {
         return this._menuItems$.asObservable();
     }
@@ -1055,25 +1246,52 @@ class MenuService {
         return new Observable(subscriber => {
             this.logger.debug('appendDossierSubMenuItems');
             this.documentService.getAllDefinitions().subscribe(definitions => {
-                const dossierMenuItems = definitions.content.map((definition, index) => ({
-                    link: ['/dossiers/' + definition.id.name],
-                    title: definition.schema.title,
-                    iconClass: 'icon mdi mdi-dot-circle',
-                    sequence: index,
-                    show: true,
-                }));
-                this.logger.debug('found dossierMenuItems', dossierMenuItems);
-                const menuItemIndex = menuItems.findIndex(({ title }) => title === 'Dossiers');
-                if (menuItemIndex > 0) {
-                    const dossierMenu = menuItems[menuItemIndex];
-                    this.logger.debug('updating dossierMenu', dossierMenu);
-                    dossierMenu.children = dossierMenuItems;
-                    menuItems[menuItemIndex] = dossierMenu;
-                }
-                subscriber.next(menuItems);
-                this.logger.debug('appendDossierSubMenuItems finished');
+                combineLatest([
+                    ...definitions.content.map(definition => this.documentService.getCaseSettings(definition?.id?.name)),
+                ])
+                    .pipe(take(1))
+                    .subscribe(allCaseSettings => {
+                    const openDocumentCountMap = !this.disableCaseCount && this.getOpenDocumentCountMap(definitions);
+                    const dossierMenuItems = definitions.content.map((definition, index) => {
+                        const caseSettings = allCaseSettings?.find(setting => setting.name === definition.id.name);
+                        return {
+                            link: ['/dossiers/' + definition.id.name],
+                            title: definition.schema.title,
+                            iconClass: 'icon mdi mdi-dot-circle',
+                            sequence: index,
+                            show: true,
+                            ...(!this.disableCaseCount &&
+                                caseSettings?.canHaveAssignee && {
+                                count$: openDocumentCountMap.get(definition.id.name),
+                            }),
+                        };
+                    });
+                    this.logger.debug('found dossierMenuItems', dossierMenuItems);
+                    const menuItemIndex = menuItems.findIndex(({ title }) => title === 'Dossiers');
+                    if (menuItemIndex > 0) {
+                        const dossierMenu = menuItems[menuItemIndex];
+                        this.logger.debug('updating dossierMenu', dossierMenu);
+                        dossierMenu.children = dossierMenuItems;
+                        menuItems[menuItemIndex] = dossierMenu;
+                    }
+                    subscriber.next(menuItems);
+                    this.dossierItemsAppended$.next(true);
+                    this.logger.debug('appendDossierSubMenuItems finished');
+                });
+            });
+        });
+    }
+    getOpenDocumentCountMap(definitions) {
+        const countMap = new Map();
+        definitions.content.forEach(definition => countMap.set(definition.id.name, new Subject()));
+        timer(0, 5000).subscribe(() => {
+            this.documentService.getOpenDocumentCount().subscribe(openDocumentCountList => {
+                openDocumentCountList.forEach(openDocumentCount => countMap
+                    .get(openDocumentCount.documentDefinitionName)
+                    .next(openDocumentCount.openDocumentCount));
             });
         });
+        return countMap;
     }
     applyMenuRoleSecurity(menuItems) {
         this.userProviderService.getUserSubject().subscribe(user => {
@@ -1093,25 +1311,17 @@ class MenuService {
         return menuItems;
     }
     determineRoleAccess(menuItem, roles) {
-        if (!menuItem.roles) {
-            return true;
-        }
-        else if (menuItem.roles.some(role => roles.includes(role))) {
-            return true;
-        }
-        else {
-            return false;
-        }
+        return !menuItem.roles || menuItem.roles.some(role => roles.includes(role));
     }
 }
-MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuService, deps: [{ token: i1$3.ConfigService }, { token: i2.DocumentService }, { token: i1$6.UserProviderService }, { token: i4.NGXLogger }, { token: i1$3.MenuIncludeService }], target: i0.ɵɵFactoryTarget.Injectable });
-MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuService, decorators: [{
+MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuService, deps: [{ token: i2$1.ConfigService }, { token: i2$2.DocumentService }, { token: i3.UserProviderService }, { token: i4.NGXLogger }, { token: i2$1.MenuIncludeService }, { token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }, { type: i2.DocumentService }, { type: i1$6.UserProviderService }, { type: i4.NGXLogger }, { type: i1$3.MenuIncludeService }]; } });
+        }], ctorParameters: function () { return [{ type: i2$1.ConfigService }, { type: i2$2.DocumentService }, { type: i3.UserProviderService }, { type: i4.NGXLogger }, { type: i2$1.MenuIncludeService }, { type: i1$4.Router }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1131,10 +1341,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 const routes = [];
 class MenuRoutingModule {
 }
-MenuRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MenuRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuRoutingModule, imports: [i1$5.RouterModule], exports: [RouterModule] });
-MenuRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuRoutingModule, imports: [[RouterModule.forChild(routes)], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuRoutingModule, decorators: [{
+MenuRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MenuRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MenuRoutingModule, imports: [i1$4.RouterModule], exports: [RouterModule] });
+MenuRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -1158,183 +1368,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class MenuItemTextComponent {
+    constructor() {
+        this.accent = false;
+    }
 }
-MenuItemTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem" }, ngImport: i0, template: `
-    <i
-      class="{{ menuItem.iconClass }}"
-      container="body"
-      placement="right"
-      ngbTooltip="{{ menuItem.title | translate }}"
-      autoClose="true"
-    >
-    </i>
-    <span
-      *ngIf="{
-        translation: menuItem.title | translate,
-        pageTranslation: 'pages.' + menuItem.title.toLowerCase() + '.title' | translate
-      } as obs"
-      >{{
-        (obs.pageTranslation !== 'pages.' + menuItem.title.toLowerCase() + '.title'
-          ? obs.pageTranslation
-          : '') ||
-          (obs.translation !== menuItem.title ? obs.translation : '') ||
-          menuItem.title
-      }}</span
-    >
-  `, isInline: true, directives: [{ type: i1$7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemTextComponent, decorators: [{
+MenuItemTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem", accent: "accent" }, ngImport: i0, template: "<ng-container *ngIf=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\">\n  <span [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n</ng-container>\n", styles: [".menu-item-icon-container{position:absolute;margin-left:-1.5rem;transform:translate(-100%)}.empty-menu-icon-text{font-weight:600!important}\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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MenuItemTranslationPipe, name: "menuItemTranslate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuItemTextComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'valtimo-menu-item-text',
-                    template: `
-    <i
-      class="{{ menuItem.iconClass }}"
-      container="body"
-      placement="right"
-      ngbTooltip="{{ menuItem.title | translate }}"
-      autoClose="true"
-    >
-    </i>
-    <span
-      *ngIf="{
-        translation: menuItem.title | translate,
-        pageTranslation: 'pages.' + menuItem.title.toLowerCase() + '.title' | translate
-      } as obs"
-      >{{
-        (obs.pageTranslation !== 'pages.' + menuItem.title.toLowerCase() + '.title'
-          ? obs.pageTranslation
-          : '') ||
-          (obs.translation !== menuItem.title ? obs.translation : '') ||
-          menuItem.title
-      }}</span
-    >
-  `,
-                }]
+            args: [{ selector: 'valtimo-menu-item-text', template: "<ng-container *ngIf=\"{titleTranslation: menuItem | menuItemTranslate | async} as obs\">\n  <span [ngClass]=\"{'cds--link empty-menu-icon-text': accent}\">\n    <div class=\"menu-item-icon-container\">\n      <i class=\"{{ menuItem.iconClass }}\"></i>\n    </div>\n    {{ obs.titleTranslation + (accent ? ' >' : '') }}\n  </span>\n</ng-container>\n", styles: [".menu-item-icon-container{position:absolute;margin-left:-1.5rem;transform:translate(-100%)}.empty-menu-icon-text{font-weight:600!important}\n"] }]
         }], propDecorators: { menuItem: [{
                 type: Input
-            }] } });
-
-/*
- * 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 SubmenuItemTextComponent {
-}
-SubmenuItemTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SubmenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SubmenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SubmenuItemTextComponent, selector: "valtimo-submenu-item-text", inputs: { submenuItem: "submenuItem" }, ngImport: i0, template: `
-    <span
-      [ngClass]="submenuItem.textClass"
-      *ngIf="{
-        translation: submenuItem.title | translate,
-        pageTranslation: 'pages.' + submenuItem.title.toLowerCase() + '.title' | translate
-      } as obs"
-    >
-      {{
-        (obs.pageTranslation !== 'pages.' + submenuItem.title.toLowerCase() + '.title'
-          ? obs.pageTranslation
-          : '') ||
-          (obs.translation !== submenuItem.title ? obs.translation : '') ||
-          submenuItem.title
-      }}
-      <ng-container *ngIf="!submenuItem.link">&gt;</ng-container>
-    </span>
-  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SubmenuItemTextComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'valtimo-submenu-item-text',
-                    template: `
-    <span
-      [ngClass]="submenuItem.textClass"
-      *ngIf="{
-        translation: submenuItem.title | translate,
-        pageTranslation: 'pages.' + submenuItem.title.toLowerCase() + '.title' | translate
-      } as obs"
-    >
-      {{
-        (obs.pageTranslation !== 'pages.' + submenuItem.title.toLowerCase() + '.title'
-          ? obs.pageTranslation
-          : '') ||
-          (obs.translation !== submenuItem.title ? obs.translation : '') ||
-          submenuItem.title
-      }}
-      <ng-container *ngIf="!submenuItem.link">&gt;</ng-container>
-    </span>
-  `,
-                }]
-        }], propDecorators: { submenuItem: [{
+            }], accent: [{
                 type: Input
             }] } });
 
-/*
- * 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 MenuComponent {
-    constructor(menuService, elRef, renderer, router) {
-        this.menuService = menuService;
-        this.elRef = elRef;
-        this.renderer = renderer;
-        this.router = router;
-        this.includeFunctionObservables = {};
-        this.includeFunctionObservables = this.menuService.includeFunctionObservables;
-    }
-    ngOnInit() {
-        this.openRouterSubscription();
-        this.menuItemSubscription = this.menuService.menuItems$.subscribe(value => (this.menuItems = value));
-    }
-    ngOnDestroy() {
-        this.routerSubscription.unsubscribe();
-        this.menuItemSubscription.unsubscribe();
-    }
-    openRouterSubscription() {
-        this.routerSubscription = this.router.events.subscribe((event) => {
-            if (event instanceof NavigationEnd) {
-                this.closeSubMenu();
-            }
-        });
-    }
-    closeSubMenu() {
-        const visibleSubMenuElm = this.elRef.nativeElement.querySelector('.sub-menu.visible');
-        if (visibleSubMenuElm) {
-            this.renderer.removeClass(visibleSubMenuElm, 'visible');
-            const topLevelMenuItem = this.elRef.nativeElement.querySelector('li.parent.open');
-            if (topLevelMenuItem) {
-                this.renderer.removeClass(topLevelMenuItem, 'open');
-            }
-        }
-    }
-}
-MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuComponent, deps: [{ token: MenuService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuComponent, selector: "valtimo-menu", 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<ul class=\"sidebar-elements\">\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <li\n      [class.parent]=\"menuItem.children\"\n      [hidden]=\"!menuItem.show\"\n      [routerLinkActive]=\"'active'\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\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      <a *ngIf=\"menuItem.link\" [routerLink]=\"menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <a *ngIf=\"!menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <ng-container *ngIf=\"menuItem.children\">\n        <ul class=\"sub-menu\">\n          <li class=\"title\">{{ menuItem.title | translate }}</li>\n          <li\n            *ngFor=\"let subMenuItem of menuItem.children\"\n            [routerLinkActive]=\"'active'\"\n            [routerLinkActiveOptions]=\"{exact: true}\"\n          >\n            <a *ngIf=\"subMenuItem.link\" [routerLink]=\"subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n            <a *ngIf=\"!subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n          </li>\n        </ul>\n      </ng-container>\n    </li>\n  </ng-container>\n</ul>\n", styles: [".c-default{cursor:default}.sub-item{cursor:pointer}.menu-item--hidden{display:none}.menu-item--visible{display:block}\n"], components: [{ type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: ["menuItem"] }, { type: SubmenuItemTextComponent, selector: "valtimo-submenu-item-text", inputs: ["submenuItem"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-menu', 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<ul class=\"sidebar-elements\">\n  <ng-container *ngFor=\"let menuItem of menuItems\">\n    <li\n      [class.parent]=\"menuItem.children\"\n      [hidden]=\"!menuItem.show\"\n      [routerLinkActive]=\"'active'\"\n      [routerLinkActiveOptions]=\"{exact: true}\"\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      <a *ngIf=\"menuItem.link\" [routerLink]=\"menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <a *ngIf=\"!menuItem.link\" class=\"sub-item\">\n        <valtimo-menu-item-text [menuItem]=\"menuItem\"></valtimo-menu-item-text>\n      </a>\n      <ng-container *ngIf=\"menuItem.children\">\n        <ul class=\"sub-menu\">\n          <li class=\"title\">{{ menuItem.title | translate }}</li>\n          <li\n            *ngFor=\"let subMenuItem of menuItem.children\"\n            [routerLinkActive]=\"'active'\"\n            [routerLinkActiveOptions]=\"{exact: true}\"\n          >\n            <a *ngIf=\"subMenuItem.link\" [routerLink]=\"subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n            <a *ngIf=\"!subMenuItem.link\">\n              <valtimo-submenu-item-text [submenuItem]=\"subMenuItem\"></valtimo-submenu-item-text>\n            </a>\n          </li>\n        </ul>\n      </ng-container>\n    </li>\n  </ng-container>\n</ul>\n", styles: [".c-default{cursor:default}.sub-item{cursor:pointer}.menu-item--hidden{display:none}.menu-item--visible{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: MenuService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.Router }]; } });
-
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -1352,16 +1400,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class MenuModule {
 }
-MenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, declarations: [MenuComponent, MenuItemTextComponent, SubmenuItemTextComponent], imports: [CommonModule, RouterModule, NgbTooltipModule, TranslateModule], exports: [MenuComponent] });
-MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, providers: [], imports: [[CommonModule, RouterModule, NgbTooltipModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, decorators: [{
+MenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MenuModule, declarations: [MenuItemTextComponent], imports: [CommonModule,
+        RouterModule,
+        NgbTooltipModule,
+        TranslateModule,
+        ComponentsPipesModule,
+        LinkModule], exports: [MenuItemTextComponent] });
+MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuModule, imports: [CommonModule,
+        RouterModule,
+        NgbTooltipModule,
+        TranslateModule,
+        ComponentsPipesModule,
+        LinkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MenuComponent, MenuItemTextComponent, SubmenuItemTextComponent],
-                    imports: [CommonModule, RouterModule, NgbTooltipModule, TranslateModule],
-                    exports: [MenuComponent],
-                    providers: [],
+                    declarations: [MenuItemTextComponent],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        NgbTooltipModule,
+                        TranslateModule,
+                        ComponentsPipesModule,
+                        LinkModule,
+                    ],
+                    exports: [MenuItemTextComponent],
                 }]
         }] });
 
@@ -1412,34 +1476,35 @@ function menuInitializer(injector, logger) {
  * limitations under the License.
  */
 class VersionService {
-    constructor(http) {
+    constructor(http, configService) {
         this.http = http;
+        this.configService = configService;
+        this.valtimoEndpointUri = configService.config.valtimoApi.endpointUri;
     }
     getVersion() {
-        // TODO: this hardcoded string should be taken care of with the introduction of a config service
-        return this.http.get(`/api/valtimo/version`);
+        return this.http.get(`${this.valtimoEndpointUri}v1/valtimo/version`);
     }
 }
-VersionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VersionService, deps: [{ token: i1$9.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-VersionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VersionService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VersionService, decorators: [{
+VersionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: VersionService, deps: [{ token: i1$6.HttpClient }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Injectable });
+VersionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: VersionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: VersionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$9.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.HttpClient }, { type: i2$1.ConfigService }]; } });
 
 class RightSidebarComponent {
-    constructor(userProviderService, formBuilder, versionService, translate, contextService, http, logger) {
+    constructor(translate, userProviderService, formBuilder, versionService, contextService, http, logger, shellService, elementRef) {
+        this.translate = translate;
         this.userProviderService = userProviderService;
         this.formBuilder = formBuilder;
         this.versionService = versionService;
-        this.translate = translate;
         this.contextService = contextService;
         this.http = http;
         this.logger = logger;
-    }
-    ngOnInit() {
+        this.shellService = shellService;
+        this.elementRef = elementRef;
         this.frequencies = [
             'emailNotificationOnMonday',
             'emailNotificationOnTuesday',
@@ -1460,73 +1525,111 @@ class RightSidebarComponent {
             emailNotificationOnSaturday: new FormControl(false),
             emailNotificationOnSunday: new FormControl(false),
         });
-        this.getUserSettings();
-    }
-    loadContextSwitch() {
-        combineLatest([
-            this.contextService.getUserContexts(),
-            this.contextService.getUserContextActive(),
-        ]).subscribe(([userContexts, userContextActive]) => {
-            this.userContextActive = userContextActive;
-            this.userContexts = userContexts;
-        });
-    }
-    setUserContext(contextId) {
-        this.contextService.setUserContext(contextId).subscribe();
-        location.href = '/';
-    }
-    loadUserSettingsTab() {
-        this.userProviderService.getEmailNotificationSettings().subscribe(results => {
-            if (results !== null) {
-                this.settingsForm.controls.taskNotifications.setValue(results.taskNotifications);
-                this.settingsForm.controls.emailNotifications.setValue(results.emailNotifications);
-                this.settingsForm.controls.emailNotificationOnMonday.setValue(results.emailNotificationOnMonday);
-                this.settingsForm.controls.emailNotificationOnTuesday.setValue(results.emailNotificationOnTuesday);
-                this.settingsForm.controls.emailNotificationOnWednesday.setValue(results.emailNotificationOnWednesday);
-                this.settingsForm.controls.emailNotificationOnThursday.setValue(results.emailNotificationOnThursday);
-                this.settingsForm.controls.emailNotificationOnFriday.setValue(results.emailNotificationOnFriday);
-                this.settingsForm.controls.emailNotificationOnSaturday.setValue(results.emailNotificationOnSaturday);
-                this.settingsForm.controls.emailNotificationOnSunday.setValue(results.emailNotificationOnSunday);
+        this.panelExpanded$ = this.shellService.panelExpanded$;
+        this.selectedLanguage$ = new BehaviorSubject('');
+        this.languageOptions$ = new BehaviorSubject([]);
+        this.backendVersion$ = this.versionService.getVersion();
+        this.userSubject$ = this.userProviderService.getUserSubject();
+        this.updatingSettings$ = new BehaviorSubject(true);
+        this.emailNotificationSettings$ = new BehaviorSubject(undefined);
+        this.emailNotificationSettingsWithSideEffects$ = this.emailNotificationSettings$.pipe(tap(results => {
+            if (results) {
+                this.settingsForm.setValue(results);
+                this.updatingSettings$.next(false);
             }
-            else {
-                // default is true in the database, even if api returns no content
-                this.settingsForm.controls.taskNotifications.setValue(true);
+        }));
+        this.userContexts$ = this.contextService.getUserContexts();
+        this.activeContext$ = this.contextService.getUserContextActive();
+    }
+    onPageClick(targetElement) {
+        combineLatest([this.shellService.panelExpanded$, this.shellService.mouseOnTopBar$])
+            .pipe(take(1))
+            .subscribe(([panelExpanded, mouseOnTopBar]) => {
+            const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
+            if (!clickedInside && panelExpanded) {
+                this.shellService.setPanelExpanded(false);
             }
         });
-        this.getVersion();
     }
-    getUserSettings() {
-        this.userProviderService.getUserSubject().subscribe(userIdentity => {
-            this.logger.debug('user', userIdentity);
-            this.userIdentity = userIdentity;
-            this.loadContextSwitch();
-        });
+    ngOnInit() {
+        this.setLanguage();
+        this.loadEmailNotificationSettings();
+        this.openFormSubscription();
     }
-    getVersion() {
-        this.versionService.getVersion().subscribe((build) => {
-            this.build = build;
-        });
+    ngOnDestroy() {
+        this.formSubscription?.unsubscribe();
     }
-    onSettingsSubmit() {
-        if (!this.settingsForm.pristine) {
-            this.userProviderService.updateEmailNotificationSettings(this.settingsForm.value).subscribe();
-        }
+    setUserContext(contextId) {
+        this.contextService.setUserContext(contextId).subscribe();
+        location.href = '/';
     }
     updateUserLanguage(langKey) {
-        this.translate.use(langKey).subscribe(() => {
+        this.translate
+            .use(langKey)
+            .pipe(take(1))
+            .subscribe(() => {
             localStorage.setItem('langKey', langKey);
         });
     }
     logout() {
         this.userProviderService.logout();
     }
+    openFormSubscription() {
+        this.formSubscription = combineLatest([
+            this.emailNotificationSettings$,
+            this.settingsForm.valueChanges,
+            this.updatingSettings$,
+        ])
+            .pipe(tap(([settings, formValue, updatingSettings]) => {
+            if (settings && formValue) {
+                const settingsStringified = JSON.stringify(this.sortObjectAlphabetically(settings));
+                const formStringified = JSON.stringify(this.sortObjectAlphabetically(formValue));
+                if (settingsStringified !== formStringified && !updatingSettings) {
+                    this.updatingSettings$.next(true);
+                    this.userProviderService.updateEmailNotificationSettings(formValue).subscribe(results => {
+                        this.emailNotificationSettings$.next(results);
+                        this.updatingSettings$.next(false);
+                    }, () => {
+                        this.emailNotificationSettings$.next(settings);
+                        this.updatingSettings$.next(false);
+                    });
+                }
+            }
+        }))
+            .subscribe();
+    }
+    loadEmailNotificationSettings() {
+        this.userProviderService.getEmailNotificationSettings().subscribe(results => {
+            if (results) {
+                this.emailNotificationSettings$.next(results);
+            }
+            else {
+                this.emailNotificationSettings$.next(this.settingsForm.value);
+            }
+        });
+    }
+    setLanguage() {
+        this.selectedLanguage$.next(this.translate.currentLang);
+        this.languageOptions$.next(this.translate.langs);
+    }
+    sortObjectAlphabetically(jsObject) {
+        return Object.keys(jsObject)
+            .sort()
+            .reduce((acc, key) => ({
+            ...acc,
+            [key]: jsObject[key],
+        }), {});
+    }
 }
-RightSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1$6.UserProviderService }, { token: i3.FormBuilder }, { token: VersionService }, { token: i1$8.TranslateService }, { token: i5.ContextService }, { token: i1$9.HttpClient }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-RightSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RightSidebarComponent, selector: "valtimo-right-sidebar", 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<nav class=\"be-right-sidebar\">\n  <div class=\"sb-content\">\n    <div class=\"tab-navigation\">\n      <ul class=\"nav nav-tabs nav-justified\" role=\"tablist\">\n        <li class=\"nav-item\" role=\"presentation\">\n          <a\n            class=\"nav-link active\"\n            href=\"#account\"\n            aria-controls=\"account\"\n            role=\"tab\"\n            data-toggle=\"tab\"\n            translate=\"account.title\"\n          ></a>\n        </li>\n        <li class=\"nav-item\" role=\"presentation\">\n          <a\n            class=\"nav-link\"\n            (click)=\"loadUserSettingsTab()\"\n            href=\"#settings\"\n            aria-controls=\"settings\"\n            role=\"tab\"\n            data-toggle=\"tab\"\n            translate=\"settings.title\"\n          ></a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"tab-panel\">\n      <div class=\"tab-content\">\n        <!-- account -->\n        <div class=\"tab-pane tab-account active\" id=\"account\" role=\"tabpanel\">\n          <div class=\"p-3 be-scroller-settings\" *ngIf=\"userIdentity\">\n            <div class=\"content\">\n              <div class=\"category-title border-0 m-0\">\n                <div class=\"p-0 text-muted\">\n                  <dl class=\"row mb-0\">\n                    <dt class=\"col-sm-3\">Email</dt>\n                    <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.email }}</dd>\n                    <ng-container *ngIf=\"userIdentity.username\">\n                      <dt class=\"col-sm-3\">Username</dt>\n                      <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.username }}</dd>\n                    </ng-container>\n                    <dt class=\"col-sm-3\">Name</dt>\n                    <dd class=\"col-sm-9 mb-0 text-bold\">\n                      {{ userIdentity.firstName + ' ' + userIdentity.lastName }}\n                    </dd>\n                  </dl>\n                </div>\n              </div>\n              <!-- context switch -->\n              <ul class=\"settings-list\" *ngIf=\"userContexts?.length > 1\">\n                <li ngbTooltip=\"{{ 'settings.context.title' | translate }}\">\n                  <select\n                    class=\"form-control\"\n                    #contextSelect\n                    (change)=\"setUserContext(+contextSelect.value)\"\n                  >\n                    <option\n                      *ngFor=\"let context of userContexts\"\n                      [value]=\"context.id\"\n                      [selected]=\"context.id === userContextActive.id\"\n                    >\n                      {{ context.name }}\n                    </option>\n                  </select>\n                </li>\n              </ul>\n              <ul class=\"list-group list-group-flush m-0\">\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"https://docs.valtimo.nl\"\n                    target=\"_blank\"\n                    class=\"d-block\"\n                    translate=\"account.links.help\"\n                  ></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"https://www.valtimo.nl/feedback/\"\n                    target=\"_blank\"\n                    class=\"d-block\"\n                    translate=\"account.links.feedback\"\n                  ></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"https://forum.valtimo.nl\"\n                    target=\"_blank\"\n                    class=\"d-block\"\n                    translate=\"account.links.forum\"\n                  ></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    class=\"d-block\"\n                    (click)=\"logout()\"\n                    translate=\"account.links.signOut\"\n                  ></a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <!-- settings -->\n        <div class=\"tab-pane tab-settings\" id=\"settings\" role=\"tabpanel\">\n          <div class=\"p-3 be-scroller-settings\">\n            <div class=\"content\">\n              <span class=\"category-title\" translate=\"settings.language.title\"></span>\n              <ul class=\"settings-list\">\n                <li>\n                  <select\n                    class=\"form-control\"\n                    #langSelect\n                    (change)=\"updateUserLanguage(langSelect.value)\"\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                </li>\n              </ul>\n\n              <form [formGroup]=\"settingsForm\">\n                <span class=\"category-title\" translate=\"settings.notification.title\"></span>\n                <ul class=\"settings-list m-0\">\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input\n                        type=\"checkbox\"\n                        formControlName=\"taskNotifications\"\n                        id=\"taskNotifications\"\n                        (ngModelChange)=\"onSettingsSubmit()\"\n                      /><span> <label for=\"taskNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.taskNotifications\"></span>\n                    <div\n                      class=\"text-muted info-text\"\n                      translate=\"settings.notification.taskNotificationsIntro\"\n                    ></div>\n                  </li>\n\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input\n                        type=\"checkbox\"\n                        formControlName=\"emailNotifications\"\n                        id=\"emailNotifications\"\n                        (ngModelChange)=\"onSettingsSubmit()\"\n                      /><span> <label for=\"emailNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.emailNotifications\"></span>\n                    <div\n                      class=\"text-muted info-text\"\n                      translate=\"settings.notification.emailNotificationsIntro\"\n                    ></div>\n                  </li>\n                </ul>\n\n                <div *ngIf=\"settingsForm.value.emailNotifications\">\n                  <ul class=\"settings-list\">\n                    <li *ngFor=\"let frequency of frequencies\">\n                      <div class=\"switch-button switch-button-sm switch-button-success\">\n                        <input\n                          type=\"checkbox\"\n                          formControlName=\"{{ frequency }}\"\n                          id=\"{{ frequency }}\"\n                          (ngModelChange)=\"onSettingsSubmit()\"\n                        /><span> <label for=\"{{ frequency }}\"></label></span>\n                      </div>\n                      <span class=\"name\">{{\n                        'settings.notification.' + frequency | translate\n                      }}</span>\n                    </li>\n                  </ul>\n                </div>\n              </form>\n\n              <div class=\"version-holder\">\n                <span class=\"category-title\" translate=\"settings.version.title\"></span>\n                <ul class=\"settings-list\">\n                  <li *ngIf=\"build\">\n                    <div class=\"name\">{{ build.title }}</div>\n                    <div class=\"text-muted\">{{ build.version }}</div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</nav>\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}\n"], directives: [{ type: i1$8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarComponent, decorators: [{
+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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-right-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<nav class=\"be-right-sidebar\">\n  <div class=\"sb-content\">\n    <div class=\"tab-navigation\">\n      <ul class=\"nav nav-tabs nav-justified\" role=\"tablist\">\n        <li class=\"nav-item\" role=\"presentation\">\n          <a\n            class=\"nav-link active\"\n            href=\"#account\"\n            aria-controls=\"account\"\n            role=\"tab\"\n            data-toggle=\"tab\"\n            translate=\"account.title\"\n          ></a>\n        </li>\n        <li class=\"nav-item\" role=\"presentation\">\n          <a\n            class=\"nav-link\"\n            (click)=\"loadUserSettingsTab()\"\n            href=\"#settings\"\n            aria-controls=\"settings\"\n            role=\"tab\"\n            data-toggle=\"tab\"\n            translate=\"settings.title\"\n          ></a>\n        </li>\n      </ul>\n    </div>\n    <div class=\"tab-panel\">\n      <div class=\"tab-content\">\n        <!-- account -->\n        <div class=\"tab-pane tab-account active\" id=\"account\" role=\"tabpanel\">\n          <div class=\"p-3 be-scroller-settings\" *ngIf=\"userIdentity\">\n            <div class=\"content\">\n              <div class=\"category-title border-0 m-0\">\n                <div class=\"p-0 text-muted\">\n                  <dl class=\"row mb-0\">\n                    <dt class=\"col-sm-3\">Email</dt>\n                    <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.email }}</dd>\n                    <ng-container *ngIf=\"userIdentity.username\">\n                      <dt class=\"col-sm-3\">Username</dt>\n                      <dd class=\"col-sm-9 mb-0 text-bold\">{{ userIdentity.username }}</dd>\n                    </ng-container>\n                    <dt class=\"col-sm-3\">Name</dt>\n                    <dd class=\"col-sm-9 mb-0 text-bold\">\n                      {{ userIdentity.firstName + ' ' + userIdentity.lastName }}\n                    </dd>\n                  </dl>\n                </div>\n              </div>\n              <!-- context switch -->\n              <ul class=\"settings-list\" *ngIf=\"userContexts?.length > 1\">\n                <li ngbTooltip=\"{{ 'settings.context.title' | translate }}\">\n                  <select\n                    class=\"form-control\"\n                    #contextSelect\n                    (change)=\"setUserContext(+contextSelect.value)\"\n                  >\n                    <option\n                      *ngFor=\"let context of userContexts\"\n                      [value]=\"context.id\"\n                      [selected]=\"context.id === userContextActive.id\"\n                    >\n                      {{ context.name }}\n                    </option>\n                  </select>\n                </li>\n              </ul>\n              <ul class=\"list-group list-group-flush m-0\">\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"https://docs.valtimo.nl\"\n                    target=\"_blank\"\n                    class=\"d-block\"\n                    translate=\"account.links.help\"\n                  ></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"https://www.valtimo.nl/feedback/\"\n                    target=\"_blank\"\n                    class=\"d-block\"\n                    translate=\"account.links.feedback\"\n                  ></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"https://forum.valtimo.nl\"\n                    target=\"_blank\"\n                    class=\"d-block\"\n                    translate=\"account.links.forum\"\n                  ></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    class=\"d-block\"\n                    (click)=\"logout()\"\n                    translate=\"account.links.signOut\"\n                  ></a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        <!-- settings -->\n        <div class=\"tab-pane tab-settings\" id=\"settings\" role=\"tabpanel\">\n          <div class=\"p-3 be-scroller-settings\">\n            <div class=\"content\">\n              <span class=\"category-title\" translate=\"settings.language.title\"></span>\n              <ul class=\"settings-list\">\n                <li>\n                  <select\n                    class=\"form-control\"\n                    #langSelect\n                    (change)=\"updateUserLanguage(langSelect.value)\"\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                </li>\n              </ul>\n\n              <form [formGroup]=\"settingsForm\">\n                <span class=\"category-title\" translate=\"settings.notification.title\"></span>\n                <ul class=\"settings-list m-0\">\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input\n                        type=\"checkbox\"\n                        formControlName=\"taskNotifications\"\n                        id=\"taskNotifications\"\n                        (ngModelChange)=\"onSettingsSubmit()\"\n                      /><span> <label for=\"taskNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.taskNotifications\"></span>\n                    <div\n                      class=\"text-muted info-text\"\n                      translate=\"settings.notification.taskNotificationsIntro\"\n                    ></div>\n                  </li>\n\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input\n                        type=\"checkbox\"\n                        formControlName=\"emailNotifications\"\n                        id=\"emailNotifications\"\n                        (ngModelChange)=\"onSettingsSubmit()\"\n                      /><span> <label for=\"emailNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.emailNotifications\"></span>\n                    <div\n                      class=\"text-muted info-text\"\n                      translate=\"settings.notification.emailNotificationsIntro\"\n                    ></div>\n                  </li>\n                </ul>\n\n                <div *ngIf=\"settingsForm.value.emailNotifications\">\n                  <ul class=\"settings-list\">\n                    <li *ngFor=\"let frequency of frequencies\">\n                      <div class=\"switch-button switch-button-sm switch-button-success\">\n                        <input\n                          type=\"checkbox\"\n                          formControlName=\"{{ frequency }}\"\n                          id=\"{{ frequency }}\"\n                          (ngModelChange)=\"onSettingsSubmit()\"\n                        /><span> <label for=\"{{ frequency }}\"></label></span>\n                      </div>\n                      <span class=\"name\">{{\n                        'settings.notification.' + frequency | translate\n                      }}</span>\n                    </li>\n                  </ul>\n                </div>\n              </form>\n\n              <div class=\"version-holder\">\n                <span class=\"category-title\" translate=\"settings.version.title\"></span>\n                <ul class=\"settings-list\">\n                  <li *ngIf=\"build\">\n                    <div class=\"name\">{{ build.title }}</div>\n                    <div class=\"text-muted\">{{ build.version }}</div>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</nav>\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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$6.UserProviderService }, { type: i3.FormBuilder }, { type: VersionService }, { type: i1$8.TranslateService }, { type: i5.ContextService }, { type: i1$9.HttpClient }, { type: i4.NGXLogger }]; } });
+            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: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1545,26 +1648,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class RightSidebarModule {
 }
-RightSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RightSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarModule, declarations: [RightSidebarComponent], imports: [CommonModule,
+RightSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RightSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarModule, declarations: [RightSidebarComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
-        RouterModule, i1$8.TranslateModule, NgbTooltipModule], exports: [RightSidebarComponent] });
-RightSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarModule, imports: [[
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            RouterModule,
-            TranslateModule.forRoot({
-                loader: {
-                    provide: TranslateLoader,
-                    useFactory: HttpLoaderFactory,
-                    deps: [HttpClient],
-                },
-            }),
-            NgbTooltipModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarModule, decorators: [{
+        RouterModule, i1.TranslateModule, NgbTooltipModule,
+        UIShellModule,
+        IconModule,
+        GridModule,
+        TabsModule,
+        StructuredListModule,
+        SelectModule,
+        ToggleModule,
+        TagModule,
+        LinkModule], exports: [RightSidebarComponent] });
+RightSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient],
+            },
+        }),
+        NgbTooltipModule,
+        UIShellModule,
+        IconModule,
+        GridModule,
+        TabsModule,
+        StructuredListModule,
+        SelectModule,
+        ToggleModule,
+        TagModule,
+        LinkModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RightSidebarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RightSidebarComponent],
@@ -1581,11 +1700,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                             },
                         }),
                         NgbTooltipModule,
+                        UIShellModule,
+                        IconModule,
+                        GridModule,
+                        TabsModule,
+                        StructuredListModule,
+                        SelectModule,
+                        ToggleModule,
+                        TagModule,
+                        LinkModule,
                     ],
                     exports: [RightSidebarComponent],
                 }]
         }] });
 
+/*
+ * 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 LeftSidebarComponent {
+    constructor(translateService, elementRef, configService, menuService, shellService, breakpointObserver, router) {
+        this.translateService = translateService;
+        this.elementRef = elementRef;
+        this.configService = configService;
+        this.menuService = menuService;
+        this.shellService = shellService;
+        this.breakpointObserver = breakpointObserver;
+        this.router = router;
+        this.includeFunctionObservables = {};
+        this.menuItems$ = this.menuService.menuItems$;
+        this.sideBarExpanded$ = this.shellService.sideBarExpanded$;
+        this.breakpointsInitialized = false;
+        this.closestSequence$ = this.menuService.closestSequence$;
+        this.includeFunctionObservables = this.menuService.includeFunctionObservables;
+    }
+    onPageClick(targetElement) {
+        combineLatest([
+            this.shellService.sideBarExpanded$,
+            this.shellService.mouseOnTopBar$,
+            this.shellService.largeScreen$,
+        ])
+            .pipe(take$1(1))
+            .subscribe(([sideBarExpanded, mouseOnTopBar, largeScreen]) => {
+            const clickedInside = this.elementRef.nativeElement.contains(targetElement) || mouseOnTopBar;
+            if (!clickedInside && !largeScreen && sideBarExpanded) {
+                this.shellService.setSideBarExpanded(false);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.openBreakpointSubscription();
+    }
+    ngOnDestroy() {
+        this.breakpointSubscription?.unsubscribe();
+    }
+    navigateToRoute(route, event) {
+        event.preventDefault();
+        this.router.navigate(route);
+        combineLatest([this.shellService.sideBarExpanded$, this.shellService.largeScreen$])
+            .pipe(take$1(1))
+            .subscribe(([sideBarExpanded, largeScreen]) => {
+            if (!largeScreen && sideBarExpanded) {
+                this.shellService.setSideBarExpanded(false);
+            }
+        });
+    }
+    openBreakpointSubscription() {
+        this.breakpointObserver
+            .observe(['(max-width: 1055px)', '(min-width: 1056px)'])
+            .subscribe(state => {
+            this.shellService.sideBarExpanded$.pipe(take$1(1)).subscribe(sideBarExpanded => {
+                const breakpoints = state.breakpoints;
+                const breakpointKeys = Object.keys(breakpoints);
+                const smallScreen = breakpoints[breakpointKeys[0]];
+                const largeScreen = breakpoints[breakpointKeys[1]];
+                if (!this.breakpointsInitialized) {
+                    if (smallScreen) {
+                        this.shellService.toggleSideBar();
+                    }
+                    this.breakpointsInitialized = true;
+                }
+                if ((this.lastSmallScreen && largeScreen && !sideBarExpanded) ||
+                    (this.lastLargeScreen && smallScreen && sideBarExpanded)) {
+                    this.shellService.toggleSideBar();
+                }
+                this.lastSmallScreen = smallScreen;
+                this.lastLargeScreen = largeScreen;
+                this.shellService.setLargeScreen(largeScreen);
+            });
+        });
+    }
+}
+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" }] });
+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"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }, { type: i0.ElementRef }, { type: i2$1.ConfigService }, { type: MenuService }, { type: ShellService }, { type: i5$2.BreakpointObserver }, { type: i1$4.Router }]; }, propDecorators: { toggleButtonRef: [{
+                type: ViewChild,
+                args: ['toggleButton']
+            }], onPageClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event.target']]
+            }] } });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -1602,13 +1831,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class PageTitleComponent {
-    constructor(router, activatedRoute, titleService, translateService, logger) {
+    constructor(router, activatedRoute, titleService, translateService, logger, configService) {
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.titleService = titleService;
         this.translateService = translateService;
         this.logger = logger;
-        this.appTitle = 'Valtimo';
+        this.configService = configService;
+        this.appTitle = this.configService?.config?.applicationTitle || 'Valtimo';
         this.translatedTitle$ = new BehaviorSubject('');
     }
     ngOnInit() {
@@ -1646,127 +1876,12 @@ class PageTitleComponent {
         });
     }
 }
-PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$5.Router }, { token: i1$5.ActivatedRoute }, { token: i2$1.Title }, { token: i1$8.TranslateService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PageTitleComponent, selector: "valtimo-page-title", 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<ng-container *ngIf=\"{title: translatedTitle$ | async} as obs\">\n  <h2 class=\"page-head-title\" *ngIf=\"obs.title !== ''\"><span [innerHTML]=\"obs.title\"></span></h2>\n</ng-container>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageTitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'valtimo-page-title', 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<ng-container *ngIf=\"{title: translatedTitle$ | async} as obs\">\n  <h2 class=\"page-head-title\" *ngIf=\"obs.title !== ''\"><span [innerHTML]=\"obs.title\"></span></h2>\n</ng-container>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$5.Router }, { type: i1$5.ActivatedRoute }, { type: i2$1.Title }, { type: i1$8.TranslateService }, { type: i4.NGXLogger }]; } });
-
-/*
- * 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 LeftSidebarComponent {
-    constructor(translateService, elementRef, configService) {
-        this.translateService = translateService;
-        this.elementRef = elementRef;
-        this.configService = configService;
-        this.menuWidthChanged = new EventEmitter();
-        this.menuTooltipText$ = this.translateService.stream('interface.mainMenu');
-        this.toggleMenuText$ = this.translateService.stream('interface.toggleMenu');
-        this.mouseIsOnResizeBorder$ = new BehaviorSubject(false);
-        this.menuWidth$ = new BehaviorSubject(undefined);
-        this.isResizing$ = new BehaviorSubject(false);
-        this.mouseX$ = fromEvent(document.body, 'mousemove').pipe(map$1((e) => e.pageX));
-        this.bodyStyle = elementRef.nativeElement.ownerDocument.body.style;
-    }
-    ngOnInit() {
-        const customLeftSidebar = this.configService.config.customLeftSidebar;
-        this.setInitialWidth(customLeftSidebar);
-    }
-    ngAfterViewInit() {
-        this.mouseXSubscription = combineLatest([this.mouseX$, this.isResizing$])
-            .pipe(debounceTime(3))
-            .subscribe(([x, isResizing]) => {
-            const menuOpen = this.menuIsOpen;
-            if (isResizing) {
-                const offSetWidth = this.xOnClick - x;
-                const newMenuWidth = this.menuWidthOnClick - offSetWidth;
-                const snapMargin = 35;
-                const snapInside = newMenuWidth < this.minMenuWidth - snapMargin;
-                const snapOutside = !menuOpen && offSetWidth < -snapMargin;
-                if (menuOpen && newMenuWidth <= this.maxMenuWidth && newMenuWidth >= this.minMenuWidth) {
-                    this.setMenuWidth(newMenuWidth);
-                }
-                else if (snapInside || snapOutside) {
-                    this.snapMenu(snapInside ? this.menuWidthOnClick : this.defaultMenuWidth);
-                }
-            }
-        });
-        this.mouseUpSubscription = fromEvent(document, 'mouseup').subscribe(() => {
-            this.stopResizing();
-        });
-    }
-    ngOnDestroy() {
-        this.mouseXSubscription.unsubscribe();
-        this.mouseUpSubscription.unsubscribe();
-    }
-    enterBorder() {
-        this.mouseIsOnResizeBorder$.next(true);
-    }
-    leaveBorder() {
-        this.mouseIsOnResizeBorder$.next(false);
-    }
-    resizeBorderClick(e) {
-        this.menuWidth$.pipe(take(1)).subscribe(menuWidth => {
-            this.menuWidthOnClick = menuWidth;
-            this.xOnClick = e.pageX;
-            this.bodyStyle.userSelect = 'none';
-            this.bodyStyle.cursor = 'col-resize';
-            this.isResizing$.next(true);
-        });
-    }
-    setInitialWidth(customLeftSidebar) {
-        const localMenuWidth = localStorage.getItem('menuWidth');
-        const localMenuWidthNumber = localMenuWidth ? Number(localMenuWidth) : undefined;
-        this.defaultMenuWidth = localMenuWidthNumber || customLeftSidebar?.defaultMenuWidth || 230;
-        this.maxMenuWidth = customLeftSidebar?.maxMenuWidth || 330;
-        this.minMenuWidth = customLeftSidebar?.minMenuWidth || 120;
-        this.setMenuWidth(this.defaultMenuWidth);
-    }
-    snapMenu(snapTo) {
-        this.stopResizing();
-        this.setMenuWidth(snapTo);
-        setTimeout(() => {
-            this.toggleButtonRef.nativeElement.click();
-        });
-    }
-    stopResizing() {
-        this.bodyStyle.cursor = 'auto';
-        this.bodyStyle.userSelect = 'auto';
-        this.isResizing$.next(false);
-        localStorage.setItem('menuWidth', this.menuWidth$.getValue().toString());
-    }
-    setMenuWidth(width) {
-        this.menuWidth$.next(width);
-        this.menuWidthChanged.emit(width);
-    }
-}
-LeftSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i1$8.TranslateService }, { token: i0.ElementRef }, { token: i1$3.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
-LeftSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LeftSidebarComponent, selector: "valtimo-left-sidebar", inputs: { menuIsOpen: "menuIsOpen" }, outputs: { menuWidthChanged: "menuWidthChanged" }, 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<ng-container *ngIf=\"{isResizing: isResizing$ | async} as obs\">\n  <div\n    class=\"be-left-sidebar\"\n    [style.width.px]=\"menuIsOpen ? (menuWidth$ | async) : null\"\n    [ngClass]=\"{'no-transition': obs.isResizing}\"\n  >\n    <div class=\"left-sidebar-wrapper\">\n      <a class=\"left-sidebar-toggle\" href=\"javascript:void(0);\"\n        ><valtimo-page-title></valtimo-page-title\n      ></a>\n      <div class=\"progress-widget\" style=\"padding: 20px 0\">\n        <ul class=\"sidebar-elements\">\n          <li>\n            <a\n              #toggleButton\n              class=\"be-toggle-left-sidebar\"\n              href=\"javascript:void(0);\"\n              [title]=\"menuTooltipText$ | async\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                width=\"1em\"\n                height=\"1em\"\n                style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg)\"\n                viewBox=\"0 0 24 24\"\n                transform=\"rotate(360)\"\n              >\n                <path [ngClass]=\"menuIsOpen ? 'd-1' : 'd-1-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-2' : 'd-2-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-3' : 'd-3-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-4' : 'd-4-flipped'\" />\n              </svg>\n              <span>{{ toggleMenuText$ | async }}</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"left-sidebar-spacer\">\n        <div class=\"left-sidebar-scroll\">\n          <div class=\"left-sidebar-content\">\n            <valtimo-menu></valtimo-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"resize-border\"\n      (mouseenter)=\"enterBorder()\"\n      (mouseleave)=\"leaveBorder()\"\n      (mousedown)=\"resizeBorderClick($event)\"\n      [ngClass]=\"{'resize-hover': (mouseIsOnResizeBorder$ | async) || obs.isResizing}\"\n    ></div>\n  </div>\n</ng-container>\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\")}\n"], components: [{ type: PageTitleComponent, selector: "valtimo-page-title" }, { type: MenuComponent, selector: "valtimo-menu" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LeftSidebarComponent, decorators: [{
+PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: i5.Title }, { token: i1.TranslateService }, { token: i4.NGXLogger }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PageTitleComponent, selector: "valtimo-page-title", 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<ng-container *ngIf=\"{title: translatedTitle$ | async} as obs\">\n  <h2 class=\"page-head-title\" *ngIf=\"obs.title !== ''\"><span [innerHTML]=\"obs.title\"></span></h2>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageTitleComponent, 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<ng-container *ngIf=\"{isResizing: isResizing$ | async} as obs\">\n  <div\n    class=\"be-left-sidebar\"\n    [style.width.px]=\"menuIsOpen ? (menuWidth$ | async) : null\"\n    [ngClass]=\"{'no-transition': obs.isResizing}\"\n  >\n    <div class=\"left-sidebar-wrapper\">\n      <a class=\"left-sidebar-toggle\" href=\"javascript:void(0);\"\n        ><valtimo-page-title></valtimo-page-title\n      ></a>\n      <div class=\"progress-widget\" style=\"padding: 20px 0\">\n        <ul class=\"sidebar-elements\">\n          <li>\n            <a\n              #toggleButton\n              class=\"be-toggle-left-sidebar\"\n              href=\"javascript:void(0);\"\n              [title]=\"menuTooltipText$ | async\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n                width=\"1em\"\n                height=\"1em\"\n                style=\"-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg)\"\n                viewBox=\"0 0 24 24\"\n                transform=\"rotate(360)\"\n              >\n                <path [ngClass]=\"menuIsOpen ? 'd-1' : 'd-1-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-2' : 'd-2-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-3' : 'd-3-flipped'\" />\n                <path [ngClass]=\"menuIsOpen ? 'd-4' : 'd-4-flipped'\" />\n              </svg>\n              <span>{{ toggleMenuText$ | async }}</span>\n            </a>\n          </li>\n        </ul>\n      </div>\n      <div class=\"left-sidebar-spacer\">\n        <div class=\"left-sidebar-scroll\">\n          <div class=\"left-sidebar-content\">\n            <valtimo-menu></valtimo-menu>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"resize-border\"\n      (mouseenter)=\"enterBorder()\"\n      (mouseleave)=\"leaveBorder()\"\n      (mousedown)=\"resizeBorderClick($event)\"\n      [ngClass]=\"{'resize-hover': (mouseIsOnResizeBorder$ | async) || obs.isResizing}\"\n    ></div>\n  </div>\n</ng-container>\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\")}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$8.TranslateService }, { type: i0.ElementRef }, { type: i1$3.ConfigService }]; }, propDecorators: { toggleButtonRef: [{
-                type: ViewChild,
-                args: ['toggleButton']
-            }], menuIsOpen: [{
-                type: Input
-            }], menuWidthChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'valtimo-page-title', 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<ng-container *ngIf=\"{title: translatedTitle$ | async} as obs\">\n  <h2 class=\"page-head-title\" *ngIf=\"obs.title !== ''\"><span [innerHTML]=\"obs.title\"></span></h2>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }, { type: i5.Title }, { type: i1.TranslateService }, { type: i4.NGXLogger }, { type: i2$1.ConfigService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1785,10 +1900,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class PageTitleModule {
 }
-PageTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PageTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageTitleModule, declarations: [PageTitleComponent], imports: [CommonModule, TranslateModule], exports: [PageTitleComponent] });
-PageTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageTitleModule, imports: [[CommonModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageTitleModule, decorators: [{
+PageTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PageTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PageTitleModule, declarations: [PageTitleComponent], imports: [CommonModule, TranslateModule], exports: [PageTitleComponent] });
+PageTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageTitleModule, imports: [CommonModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageTitleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PageTitleComponent],
@@ -1814,14 +1929,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class LeftSidebarModule {
 }
-LeftSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LeftSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LeftSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LeftSidebarModule, declarations: [LeftSidebarComponent], imports: [CommonModule, MenuModule, PageTitleModule], exports: [LeftSidebarComponent] });
-LeftSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LeftSidebarModule, imports: [[CommonModule, MenuModule, PageTitleModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LeftSidebarModule, decorators: [{
+LeftSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LeftSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LeftSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: LeftSidebarModule, declarations: [LeftSidebarComponent, CaseCountPipe], imports: [CommonModule,
+        MenuModule,
+        PageTitleModule,
+        IconModule,
+        UIShellModule,
+        ComponentsPipesModule], exports: [LeftSidebarComponent] });
+LeftSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LeftSidebarModule, imports: [CommonModule,
+        MenuModule,
+        PageTitleModule,
+        IconModule,
+        UIShellModule,
+        ComponentsPipesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: LeftSidebarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [LeftSidebarComponent],
-                    imports: [CommonModule, MenuModule, PageTitleModule],
+                    declarations: [LeftSidebarComponent, CaseCountPipe],
+                    imports: [
+                        CommonModule,
+                        MenuModule,
+                        PageTitleModule,
+                        IconModule,
+                        UIShellModule,
+                        ComponentsPipesModule,
+                    ],
                     exports: [LeftSidebarComponent],
                 }]
         }] });
@@ -2062,9 +2194,9 @@ class ViewContentService {
         return definition.viewType.indexOf(separator);
     }
 }
-ViewContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ViewContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewContentService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewContentService, decorators: [{
+ViewContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ViewContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewContentService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ViewContentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2095,9 +2227,9 @@ class ListFilterPipe {
         return list.filter(item => Object.keys(item).some(k => item[k] != null && item[k].toString().toLowerCase().includes(filterText.toLowerCase())));
     }
 }
-ListFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ListFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListFilterPipe, name: "listFilter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListFilterPipe, decorators: [{
+ListFilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ListFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ListFilterPipe, name: "listFilter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListFilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'listFilter',
@@ -2229,7 +2361,7 @@ class ListComponent {
         if (!sortable) {
             return;
         }
-        this.sort$.pipe(take(1)).subscribe(sort => {
+        this.sort$.pipe(take$1(1)).subscribe(sort => {
             let newState;
             if (sort.state.name === key) {
                 if (!sort.isSorting) {
@@ -2253,11 +2385,11 @@ class ListComponent {
     }
 }
 ListComponent.PAGINATION_SIZE = 'PaginationSize';
-ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, deps: [{ token: ViewContentService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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      <br />\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}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"], components: [{ type: i1$7.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i1$8.TranslatePipe, "async": i1.AsyncPipe, "listFilter": ListFilterPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
+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" }] });
+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      <br />\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}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: [{
@@ -2315,11 +2447,11 @@ class CardComponent {
     constructor() { }
     ngOnInit() { }
 }
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CardComponent, selector: "valtimo-card", inputs: { title: "title", subtitle: "subtitle" }, 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=\"card card-border-color card-border-color-primary\">\n  <div *ngIf=\"title || subtitle\" class=\"card-header card-header-divider\">\n    <span *ngIf=\"title\">{{ title }}</span>\n    <span *ngIf=\"subtitle\" class=\"card-subtitle\">{{ subtitle }}</span>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponent, decorators: [{
+CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CardComponent, selector: "valtimo-card", inputs: { title: "title", subtitle: "subtitle" }, 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=\"card card-border-color card-border-color-primary\">\n  <div *ngIf=\"title || subtitle\" class=\"card-header card-header-divider\">\n    <span *ngIf=\"title\">{{ title }}</span>\n    <span *ngIf=\"subtitle\" class=\"card-subtitle\">{{ subtitle }}</span>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-card', 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=\"card card-border-color card-border-color-primary\">\n  <div *ngIf=\"title || subtitle\" class=\"card-header card-header-divider\">\n    <span *ngIf=\"title\">{{ title }}</span>\n    <span *ngIf=\"subtitle\" class=\"card-subtitle\">{{ subtitle }}</span>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-card', 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=\"card card-border-color card-border-color-primary\">\n  <div *ngIf=\"title || subtitle\" class=\"card-header card-header-divider\">\n    <span *ngIf=\"title\">{{ title }}</span>\n    <span *ngIf=\"subtitle\" class=\"card-subtitle\">{{ subtitle }}</span>\n  </div>\n  <div class=\"card-body\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -2343,10 +2475,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class CardModule {
 }
-CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] });
-CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardModule, decorators: [{
+CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] });
+CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CardComponent],
@@ -2372,10 +2504,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class ListModule {
 }
-ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, declarations: [ListComponent, ListFilterPipe], imports: [CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule], exports: [ListComponent, ListFilterPipe] });
-ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, imports: [[CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, decorators: [{
+ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ListModule, declarations: [ListComponent, ListFilterPipe], imports: [CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule], exports: [ListComponent, ListFilterPipe] });
+ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListModule, imports: [CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ListComponent, ListFilterPipe],
@@ -2400,11 +2532,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * limitations under the License.
  */
 class BreadcrumbNavigationComponent {
-    constructor(router, route) {
+    constructor(router, route, configService) {
         this.router = router;
         this.route = route;
+        this.configService = configService;
         this.breadcrumbs = [];
-        this.appTitle = 'Valtimo';
+        this.appTitle = this.configService?.config?.applicationTitle || 'Valtimo';
         this.routerSub = Subscription.EMPTY;
     }
     ngOnInit() {
@@ -2461,12 +2594,12 @@ class BreadcrumbNavigationComponent {
         this.routerSub.unsubscribe();
     }
 }
-BreadcrumbNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadcrumbNavigationComponent, deps: [{ token: i1$5.Router }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation", 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<nav aria-label=\"breadcrumb\" role=\"navigation\">\n  <ol class=\"breadcrumb page-head-nav\">\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"['/']\">{{ appTitle }}</a>\n    </li>\n    <li class=\"breadcrumb-item\" *ngFor=\"let item of breadcrumbs\">\n      <a [routerLink]=\"[item.url]\">{{ item.label | translate }}</a>\n    </li>\n  </ol>\n</nav>\n", styles: [""], directives: [{ type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadcrumbNavigationComponent, decorators: [{
+BreadcrumbNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbNavigationComponent, deps: [{ token: i1$4.Router }, { token: i1$4.ActivatedRoute }, { token: i2$1.ConfigService }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation", 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<nav aria-label=\"breadcrumb\" role=\"navigation\">\n  <ol class=\"breadcrumb page-head-nav\">\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"['/']\">{{ appTitle }}</a>\n    </li>\n    <li class=\"breadcrumb-item\" *ngFor=\"let item of breadcrumbs\">\n      <a [routerLink]=\"[item.url]\">{{ item.label | translate }}</a>\n    </li>\n  </ol>\n</nav>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-breadcrumb-navigation', 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<nav aria-label=\"breadcrumb\" role=\"navigation\">\n  <ol class=\"breadcrumb page-head-nav\">\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"['/']\">{{ appTitle }}</a>\n    </li>\n    <li class=\"breadcrumb-item\" *ngFor=\"let item of breadcrumbs\">\n      <a [routerLink]=\"[item.url]\">{{ item.label | translate }}</a>\n    </li>\n  </ol>\n</nav>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$5.Router }, { type: i1$5.ActivatedRoute }]; } });
+            args: [{ selector: 'valtimo-breadcrumb-navigation', 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<nav aria-label=\"breadcrumb\" role=\"navigation\">\n  <ol class=\"breadcrumb page-head-nav\">\n    <li class=\"breadcrumb-item\">\n      <a [routerLink]=\"['/']\">{{ appTitle }}</a>\n    </li>\n    <li class=\"breadcrumb-item\" *ngFor=\"let item of breadcrumbs\">\n      <a [routerLink]=\"[item.url]\">{{ item.label | translate }}</a>\n    </li>\n  </ol>\n</nav>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$4.Router }, { type: i1$4.ActivatedRoute }, { type: i2$1.ConfigService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -2490,12 +2623,12 @@ class PageHeaderComponent {
     }
     ngOnInit() { }
 }
-PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageHeaderComponent, deps: [{ token: i1$4.UserInterfaceService }], target: i0.ɵɵFactoryTarget.Component });
-PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PageHeaderComponent, selector: "valtimo-page-header", 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=\"page-head\" [ngClass]=\"{'page-head--hidden': (showPageHeader$ | async) === false}\">\n  <valtimo-page-title></valtimo-page-title>\n  <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n</div>\n", styles: [".page-head--hidden{display:none}\n"], components: [{ type: PageTitleComponent, selector: "valtimo-page-title" }, { type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation" }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageHeaderComponent, decorators: [{
+PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageHeaderComponent, deps: [{ token: i1$5.UserInterfaceService }], target: i0.ɵɵFactoryTarget.Component });
+PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: PageHeaderComponent, selector: "valtimo-page-header", 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=\"page-head\" [ngClass]=\"{'page-head--hidden': (showPageHeader$ | async) === false}\">\n  <valtimo-page-title></valtimo-page-title>\n  <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n</div>\n", styles: [".page-head--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PageTitleComponent, selector: "valtimo-page-title" }, { kind: "component", type: BreadcrumbNavigationComponent, selector: "valtimo-breadcrumb-navigation" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-page-header', 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=\"page-head\" [ngClass]=\"{'page-head--hidden': (showPageHeader$ | async) === false}\">\n  <valtimo-page-title></valtimo-page-title>\n  <valtimo-breadcrumb-navigation></valtimo-breadcrumb-navigation>\n</div>\n", styles: [".page-head--hidden{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.UserInterfaceService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.UserInterfaceService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -2514,10 +2647,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class BreadcrumbNavigationModule {
 }
-BreadcrumbNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadcrumbNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BreadcrumbNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadcrumbNavigationModule, declarations: [BreadcrumbNavigationComponent], imports: [CommonModule, RouterModule, TranslateModule], exports: [BreadcrumbNavigationComponent] });
-BreadcrumbNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadcrumbNavigationModule, imports: [[CommonModule, RouterModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadcrumbNavigationModule, decorators: [{
+BreadcrumbNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BreadcrumbNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbNavigationModule, declarations: [BreadcrumbNavigationComponent], imports: [CommonModule, RouterModule, TranslateModule], exports: [BreadcrumbNavigationComponent] });
+BreadcrumbNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbNavigationModule, imports: [CommonModule, RouterModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [BreadcrumbNavigationComponent],
@@ -2543,10 +2676,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class PageHeaderModule {
 }
-PageHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PageHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageHeaderModule, declarations: [PageHeaderComponent], imports: [CommonModule, PageTitleModule, BreadcrumbNavigationModule], exports: [PageHeaderComponent] });
-PageHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageHeaderModule, imports: [[CommonModule, PageTitleModule, BreadcrumbNavigationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PageHeaderModule, decorators: [{
+PageHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PageHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: PageHeaderModule, declarations: [PageHeaderComponent], imports: [CommonModule, PageTitleModule, BreadcrumbNavigationModule], exports: [PageHeaderComponent] });
+PageHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageHeaderModule, imports: [CommonModule, PageTitleModule, BreadcrumbNavigationModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: PageHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PageHeaderComponent],
@@ -2614,9 +2747,9 @@ class WidgetComponent {
         this.isCollapsed = !(this.collapseAble && this.collapse === 'hide');
     }
 }
-WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WidgetComponent, selector: "valtimo-widget", inputs: { type: "type", name: "name", icon: "icon", contrast: "contrast", divider: "divider", title: "title", subtitle: "subtitle", collapseAble: "collapseAble", collapse: "collapse", additionalClasses: "additionalClasses" }, 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=\"card card-border card-contrast {{ cardClassName }}\">\n  <div class=\"card-header {{ contrastClass }} {{ dividerClass }}\" *ngIf=\"title || subtitle\">\n    <div class=\"row\">\n      <div class=\"col-7\" [ngClass]=\"{clickable: collapseAble}\" (click)=\"toggleContent()\">\n        <!-- Title -->\n        <div *ngIf=\"title\" class=\"text-truncate\">{{ title }}</div>\n        <!-- Sub title -->\n        <div *ngIf=\"subtitle\" class=\"card-subtitle text-truncate\">{{ subtitle }}</div>\n      </div>\n\n      <!-- Tools-->\n      <div class=\"tools col-5 text-right\">\n        <!-- Collapse content -->\n        <a\n          class=\"icon mdi\"\n          *ngIf=\"collapseAble\"\n          [ngClass]=\"{'mdi-chevron-up': isCollapsed, 'mdi-chevron-down': !isCollapsed}\"\n          (click)=\"toggleContent()\"\n        ></a>\n      </div>\n    </div>\n  </div>\n  <!-- content -->\n  <div [hidden]=\"!isCollapsed\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card-contrast .card-header{padding:20px!important}.card-subtitle{margin-bottom:0}.card-full,.card-full .tools .icon,.card-full .card-subtitle{color:#6b6b6b!important}.card-full-warning,.card-full-warning .tools .icon,.card-full-warning .card-subtitle{color:#343a40!important}.card-full-info,.card-full-danger,.card-full-success,.card-full-primary,.card-full-dark,.card-full-info .tools .icon,.card-full-danger .tools .icon,.card-full-success .tools .icon,.card-full-primary .tools .icon,.card-full-dark .tools .icon,.card-full-info .card-subtitle,.card-full-danger .card-subtitle,.card-full-success .card-subtitle,.card-full-primary .card-subtitle,.card-full-dark .card-subtitle{color:#fff!important}.card-contrast .card-body{padding-top:15px}.card-body{padding:15px 20px}.pie-label{font-size:16px!important}.widget.widget-tile svg.ngx-charts{margin-left:-1.5rem!important}svg.ngx-charts{margin:0;padding:0}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WidgetComponent, decorators: [{
+WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: WidgetComponent, selector: "valtimo-widget", inputs: { type: "type", name: "name", icon: "icon", contrast: "contrast", divider: "divider", title: "title", subtitle: "subtitle", collapseAble: "collapseAble", collapse: "collapse", additionalClasses: "additionalClasses" }, 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=\"card card-border card-contrast {{ cardClassName }}\">\n  <div class=\"card-header {{ contrastClass }} {{ dividerClass }}\" *ngIf=\"title || subtitle\">\n    <div class=\"row\">\n      <div class=\"col-7\" [ngClass]=\"{clickable: collapseAble}\" (click)=\"toggleContent()\">\n        <!-- Title -->\n        <div *ngIf=\"title\" class=\"text-truncate\">{{ title }}</div>\n        <!-- Sub title -->\n        <div *ngIf=\"subtitle\" class=\"card-subtitle text-truncate\">{{ subtitle }}</div>\n      </div>\n\n      <!-- Tools-->\n      <div class=\"tools col-5 text-right\">\n        <!-- Collapse content -->\n        <a\n          class=\"icon mdi\"\n          *ngIf=\"collapseAble\"\n          [ngClass]=\"{'mdi-chevron-up': isCollapsed, 'mdi-chevron-down': !isCollapsed}\"\n          (click)=\"toggleContent()\"\n        ></a>\n      </div>\n    </div>\n  </div>\n  <!-- content -->\n  <div [hidden]=\"!isCollapsed\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card-contrast .card-header{padding:20px!important}.card-subtitle{margin-bottom:0}.card-full,.card-full .tools .icon,.card-full .card-subtitle{color:#6b6b6b!important}.card-full-warning,.card-full-warning .tools .icon,.card-full-warning .card-subtitle{color:#343a40!important}.card-full-info,.card-full-danger,.card-full-success,.card-full-primary,.card-full-dark,.card-full-info .tools .icon,.card-full-danger .tools .icon,.card-full-success .tools .icon,.card-full-primary .tools .icon,.card-full-dark .tools .icon,.card-full-info .card-subtitle,.card-full-danger .card-subtitle,.card-full-success .card-subtitle,.card-full-primary .card-subtitle,.card-full-dark .card-subtitle{color:#fff!important}.card-contrast .card-body{padding-top:15px}.card-body{padding:15px 20px}.pie-label{font-size:16px!important}.widget.widget-tile svg.ngx-charts{margin-left:-1.5rem!important}svg.ngx-charts{margin:0;padding:0}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WidgetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-widget', 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=\"card card-border card-contrast {{ cardClassName }}\">\n  <div class=\"card-header {{ contrastClass }} {{ dividerClass }}\" *ngIf=\"title || subtitle\">\n    <div class=\"row\">\n      <div class=\"col-7\" [ngClass]=\"{clickable: collapseAble}\" (click)=\"toggleContent()\">\n        <!-- Title -->\n        <div *ngIf=\"title\" class=\"text-truncate\">{{ title }}</div>\n        <!-- Sub title -->\n        <div *ngIf=\"subtitle\" class=\"card-subtitle text-truncate\">{{ subtitle }}</div>\n      </div>\n\n      <!-- Tools-->\n      <div class=\"tools col-5 text-right\">\n        <!-- Collapse content -->\n        <a\n          class=\"icon mdi\"\n          *ngIf=\"collapseAble\"\n          [ngClass]=\"{'mdi-chevron-up': isCollapsed, 'mdi-chevron-down': !isCollapsed}\"\n          (click)=\"toggleContent()\"\n        ></a>\n      </div>\n    </div>\n  </div>\n  <!-- content -->\n  <div [hidden]=\"!isCollapsed\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".card-contrast .card-header{padding:20px!important}.card-subtitle{margin-bottom:0}.card-full,.card-full .tools .icon,.card-full .card-subtitle{color:#6b6b6b!important}.card-full-warning,.card-full-warning .tools .icon,.card-full-warning .card-subtitle{color:#343a40!important}.card-full-info,.card-full-danger,.card-full-success,.card-full-primary,.card-full-dark,.card-full-info .tools .icon,.card-full-danger .tools .icon,.card-full-success .tools .icon,.card-full-primary .tools .icon,.card-full-dark .tools .icon,.card-full-info .card-subtitle,.card-full-danger .card-subtitle,.card-full-success .card-subtitle,.card-full-primary .card-subtitle,.card-full-dark .card-subtitle{color:#fff!important}.card-contrast .card-body{padding-top:15px}.card-body{padding:15px 20px}.pie-label{font-size:16px!important}.widget.widget-tile svg.ngx-charts{margin-left:-1.5rem!important}svg.ngx-charts{margin:0;padding:0}\n"] }]
         }], propDecorators: { type: [{
@@ -2658,10 +2791,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class WidgetModule {
 }
-WidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WidgetModule, declarations: [WidgetComponent], imports: [CommonModule], exports: [WidgetComponent] });
-WidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WidgetModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WidgetModule, decorators: [{
+WidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: WidgetModule, declarations: [WidgetComponent], imports: [CommonModule], exports: [WidgetComponent] });
+WidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WidgetModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WidgetModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WidgetComponent],
@@ -2695,9 +2828,9 @@ class FieldAutoFocusDirective {
         }, 300);
     }
 }
-FieldAutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldAutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FieldAutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldAutoFocusDirective, decorators: [{
+FieldAutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FieldAutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FieldAutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FieldAutoFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[valtimoFieldAutoFocus]',
@@ -2721,10 +2854,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class FieldAutoFocusModule {
 }
-FieldAutoFocusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldAutoFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FieldAutoFocusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldAutoFocusModule, declarations: [FieldAutoFocusDirective], imports: [CommonModule], exports: [FieldAutoFocusDirective] });
-FieldAutoFocusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldAutoFocusModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldAutoFocusModule, decorators: [{
+FieldAutoFocusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FieldAutoFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FieldAutoFocusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FieldAutoFocusModule, declarations: [FieldAutoFocusDirective], imports: [CommonModule], exports: [FieldAutoFocusDirective] });
+FieldAutoFocusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FieldAutoFocusModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FieldAutoFocusModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FieldAutoFocusDirective],
@@ -2876,11 +3009,11 @@ class BpmnJsDiagramComponent {
         this.bpmnJS.destroy();
     }
 }
-BpmnJsDiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BpmnJsDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BpmnJsDiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BpmnJsDiagramComponent, selector: "valtimo-bpmn-js-diagram", inputs: { bpmn20Xml: "bpmn20Xml", heatmapDuration: "heatmapDuration", heatmapCount: "heatmapCount", historicActivityInstances: "historicActivityInstances" }, outputs: { importDone: "importDone" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["ref"], descendants: true, static: 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 class=\"p-4\" *ngIf=\"heatmapDuration || heatmapCount\">\n  <div class=\"switch-button switch-button-sm switch-button-success\">\n    <input\n      type=\"checkbox\"\n      id=\"toggleHeatmap\"\n      [checked]=\"heatmapMode\"\n      (click)=\"toggleHeatmap()\"\n    /><span> <label for=\"toggleHeatmap\"></label></span>\n  </div>\n</div>\n\n<div #ref class=\"diagram-container\"></div>\n\n<div *ngIf=\"historicActivityInstances\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><div class=\"legenda highlight-overlay-past\"></div>\n    Executed tasks</span\n  >\n  <span class=\"ml-3\"\n    ><div class=\"legenda highlight-overlay-current\"></div>\n    Current tasks</span\n  >\n</div>\n\n<div *ngIf=\"heatmapDuration || heatmapCount\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n    instances of this task.</span\n  >\n  <span\n    >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n    comparison to the other tasks.</span\n  >\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BpmnJsDiagramComponent, decorators: [{
+BpmnJsDiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BpmnJsDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BpmnJsDiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BpmnJsDiagramComponent, selector: "valtimo-bpmn-js-diagram", inputs: { bpmn20Xml: "bpmn20Xml", heatmapDuration: "heatmapDuration", heatmapCount: "heatmapCount", historicActivityInstances: "historicActivityInstances" }, outputs: { importDone: "importDone" }, viewQueries: [{ propertyName: "el", first: true, predicate: ["ref"], descendants: true, static: 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 class=\"p-4\" *ngIf=\"heatmapDuration || heatmapCount\">\n  <div class=\"switch-button switch-button-sm switch-button-success\">\n    <input\n      type=\"checkbox\"\n      id=\"toggleHeatmap\"\n      [checked]=\"heatmapMode\"\n      (click)=\"toggleHeatmap()\"\n    /><span> <label for=\"toggleHeatmap\"></label></span>\n  </div>\n</div>\n\n<div #ref class=\"diagram-container\"></div>\n\n<div *ngIf=\"historicActivityInstances\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><div class=\"legenda highlight-overlay-past\"></div>\n    Executed tasks</span\n  >\n  <span class=\"ml-3\"\n    ><div class=\"legenda highlight-overlay-current\"></div>\n    Current tasks</span\n  >\n</div>\n\n<div *ngIf=\"heatmapDuration || heatmapCount\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n    instances of this task.</span\n  >\n  <span\n    >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n    comparison to the other tasks.</span\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BpmnJsDiagramComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-bpmn-js-diagram', 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=\"p-4\" *ngIf=\"heatmapDuration || heatmapCount\">\n  <div class=\"switch-button switch-button-sm switch-button-success\">\n    <input\n      type=\"checkbox\"\n      id=\"toggleHeatmap\"\n      [checked]=\"heatmapMode\"\n      (click)=\"toggleHeatmap()\"\n    /><span> <label for=\"toggleHeatmap\"></label></span>\n  </div>\n</div>\n\n<div #ref class=\"diagram-container\"></div>\n\n<div *ngIf=\"historicActivityInstances\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><div class=\"legenda highlight-overlay-past\"></div>\n    Executed tasks</span\n  >\n  <span class=\"ml-3\"\n    ><div class=\"legenda highlight-overlay-current\"></div>\n    Current tasks</span\n  >\n</div>\n\n<div *ngIf=\"heatmapDuration || heatmapCount\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n    instances of this task.</span\n  >\n  <span\n    >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n    comparison to the other tasks.</span\n  >\n</div>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-bpmn-js-diagram', 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=\"p-4\" *ngIf=\"heatmapDuration || heatmapCount\">\n  <div class=\"switch-button switch-button-sm switch-button-success\">\n    <input\n      type=\"checkbox\"\n      id=\"toggleHeatmap\"\n      [checked]=\"heatmapMode\"\n      (click)=\"toggleHeatmap()\"\n    /><span> <label for=\"toggleHeatmap\"></label></span>\n  </div>\n</div>\n\n<div #ref class=\"diagram-container\"></div>\n\n<div *ngIf=\"historicActivityInstances\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><div class=\"legenda highlight-overlay-past\"></div>\n    Executed tasks</span\n  >\n  <span class=\"ml-3\"\n    ><div class=\"legenda highlight-overlay-current\"></div>\n    Current tasks</span\n  >\n</div>\n\n<div *ngIf=\"heatmapDuration || heatmapCount\" class=\"p-4 text-center legenda-holder\">\n  <span\n    ><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active\n    instances of this task.</span\n  >\n  <span\n    >&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in\n    comparison to the other tasks.</span\n  >\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { el: [{
                 type: ViewChild,
                 args: ['ref', { static: true }]
@@ -2913,10 +3046,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class BpmnJsDiagramModule {
 }
-BpmnJsDiagramModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BpmnJsDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BpmnJsDiagramModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BpmnJsDiagramModule, declarations: [BpmnJsDiagramComponent], imports: [CommonModule], exports: [BpmnJsDiagramComponent] });
-BpmnJsDiagramModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BpmnJsDiagramModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BpmnJsDiagramModule, decorators: [{
+BpmnJsDiagramModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BpmnJsDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BpmnJsDiagramModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BpmnJsDiagramModule, declarations: [BpmnJsDiagramComponent], imports: [CommonModule], exports: [BpmnJsDiagramComponent] });
+BpmnJsDiagramModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BpmnJsDiagramModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BpmnJsDiagramModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [BpmnJsDiagramComponent],
@@ -2942,11 +3075,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class TimelineComponent {
 }
-TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineComponent, decorators: [{
+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" }] });
+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: [""] }]
+            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"] }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -2968,10 +3101,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class TimelineModule {
 }
-TimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineModule, declarations: [TimelineComponent], imports: [CommonModule, TranslateModule], exports: [TimelineComponent] });
-TimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineModule, imports: [[CommonModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimelineModule, decorators: [{
+TimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TimelineModule, declarations: [TimelineComponent], imports: [CommonModule, TranslateModule], exports: [TimelineComponent] });
+TimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineModule, imports: [CommonModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TimelineComponent],
@@ -2997,10 +3130,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class ComponentsModule {
 }
-ComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComponentsModule });
-ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComponentsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComponentsModule, decorators: [{
+ComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ComponentsModule });
+ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponentsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule
         }] });
 
@@ -3040,9 +3173,9 @@ class FilterSidebarComponent {
         localStorage.setItem('filterSidebar', this.filterSidebar);
     }
 }
-FilterSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FilterSidebarComponent, selector: "valtimo-filter-sidebar", 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  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width: 768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterSidebarComponent, decorators: [{
+FilterSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FilterSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FilterSidebarComponent, selector: "valtimo-filter-sidebar", 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  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width: 768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-filter-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<div>\n  <a\n    class=\"toggle-filter-sidebar\"\n    data-toggle=\"tooltip\"\n    data-trigger=\"hover\"\n    data-placement=\"right\"\n    title=\"Show / hide\"\n    href=\"javascript:void(0)\"\n    (click)=\"toggleFilterSidebar()\"\n    [ngClass]=\"this.filterSidebar === 'show' && 'toggle-expanded'\"\n  >\n    <div class=\"icon-container p-0 bg-transparent\">\n      <i class=\"click-able icon shadow mdi mdi-filter-variant\"></i>\n    </div>\n  </a>\n  <aside class=\"page-aside p-4 mb-4 bg-light filter-holder\" *ngIf=\"this.filterSidebar === 'show'\">\n    <ng-content></ng-content>\n  </aside>\n</div>\n", styles: [".filter-holder{border:0px solid transparent}.toggle-filter-sidebar{position:absolute;top:25px;margin-left:-50px;z-index:1;font-size:2rem;cursor:pointer}.icon-container .icon{background-color:#fff;color:#6b6b6b;line-height:2rem;cursor:pointer}.toggle-filter-sidebar:hover .icon-container .icon{color:#ff5800}@media screen and (min-width: 768px){.toggle-filter-sidebar{margin-left:-25px}.page-aside{position:absolute;left:0;margin-top:0;height:calc(100vh - 61px)}.toggle-expanded{margin-left:255px}}\n"] }]
         }], ctorParameters: function () { return []; } });
@@ -3064,10 +3197,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class FilterSidebarModule {
 }
-FilterSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FilterSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterSidebarModule, declarations: [FilterSidebarComponent], imports: [CommonModule], exports: [FilterSidebarComponent] });
-FilterSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterSidebarModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterSidebarModule, decorators: [{
+FilterSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilterSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FilterSidebarModule, declarations: [FilterSidebarComponent], imports: [CommonModule], exports: [FilterSidebarComponent] });
+FilterSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterSidebarModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FilterSidebarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FilterSidebarComponent],
@@ -3112,9 +3245,9 @@ class UploaderDragDropDirective {
         }
     }
 }
-UploaderDragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-UploaderDragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: UploaderDragDropDirective, selector: "[valtimoUploaderDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderDragDropDirective, decorators: [{
+UploaderDragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+UploaderDragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: UploaderDragDropDirective, selector: "[valtimoUploaderDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderDragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[valtimoUploaderDragDrop]',
@@ -3163,9 +3296,9 @@ class FileSizePipe {
         return bytes.toFixed(+precision) + ' ' + this.units[unit];
     }
 }
-FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizePipe, name: "filesize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizePipe, decorators: [{
+FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FileSizePipe, name: "filesize" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filesize',
@@ -3222,12 +3355,12 @@ class UploaderComponent {
         });
     }
 }
-UploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderComponent, deps: [{ token: i1$a.S3Service }], target: i0.ɵɵFactoryTarget.Component });
-UploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploaderComponent, selector: "valtimo-uploader", inputs: { showFileList: "showFileList" }, outputs: { resourcesChanged: "resourcesChanged", resourceRegistered: "resourceRegistered" }, 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#ffffff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\n"], directives: [{ type: UploaderDragDropDirective, selector: "[valtimoUploaderDragDrop]", outputs: ["fileDropped"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "filesize": FileSizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderComponent, decorators: [{
+UploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderComponent, deps: [{ token: i1$7.S3Service }], target: i0.ɵɵFactoryTarget.Component });
+UploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: UploaderComponent, selector: "valtimo-uploader", inputs: { showFileList: "showFileList" }, outputs: { resourcesChanged: "resourcesChanged", resourceRegistered: "resourceRegistered" }, 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#ffffff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\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: UploaderDragDropDirective, selector: "[valtimoUploaderDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-uploader', 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=\"upload-file-container p-5\"\n  (click)=\"fileInput.click()\"\n  valtimoUploaderDragDrop\n  (fileDropped)=\"onFileFieldChange($event)\"\n>\n  <span class=\"align-middle\"><i class=\"mdi mdi-cloud-upload\"></i></span>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileFieldChange($event.target.files)\" multiple />\n</div>\n<div *ngIf=\"showFileList\">\n  <div class=\"files-list px-3 py-2\" *ngFor=\"let resource of resources\">\n    <p class=\"m-0\">\n      <strong>{{ resource.name }}</strong\n      ><br />\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"icon mdi mdi-delete text-danger\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".upload-file-container{background-repeat:no-repeat;background-size:100px;background-position:center;margin:0 0 1rem;border:2px dashed #d5d8de;text-align:center;color:#d5d8de;background-color:#fff}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{display:flex;justify-content:space-between;margin:1rem auto;background:#ffffff;border:1px solid #bdc0c7;padding:5px;font-size:1em}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$a.S3Service }]; }, propDecorators: { resourcesChanged: [{
+        }], ctorParameters: function () { return [{ type: i1$7.S3Service }]; }, propDecorators: { resourcesChanged: [{
                 type: Output
             }], resourceRegistered: [{
                 type: Output
@@ -3252,10 +3385,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class FileSizeModule {
 }
-FileSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizeModule, declarations: [FileSizePipe], imports: [CommonModule], exports: [FileSizePipe] });
-FileSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizeModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSizeModule, decorators: [{
+FileSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FileSizeModule, declarations: [FileSizePipe], imports: [CommonModule], exports: [FileSizePipe] });
+FileSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSizeModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FileSizeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FileSizePipe],
@@ -3281,10 +3414,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class UploaderModule {
 }
-UploaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderModule, declarations: [UploaderComponent, UploaderDragDropDirective], imports: [CommonModule, FileSizeModule], exports: [UploaderComponent, UploaderDragDropDirective] });
-UploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderModule, imports: [[CommonModule, FileSizeModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploaderModule, decorators: [{
+UploaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UploaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: UploaderModule, declarations: [UploaderComponent, UploaderDragDropDirective], imports: [CommonModule, FileSizeModule], exports: [UploaderComponent, UploaderDragDropDirective] });
+UploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderModule, imports: [CommonModule, FileSizeModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UploaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [UploaderComponent, UploaderDragDropDirective],
@@ -3360,12 +3493,12 @@ class AlertService {
         return this.confirmed;
     }
 }
-AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertService, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertService, decorators: [{
+AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertService, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$5.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.Router }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -3493,9 +3626,9 @@ class AlertComponent {
         }
     }
 }
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AlertComponent, selector: "valtimo-alert", 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 *ngFor=\"let alert of alerts\" class=\"{{ cssClass(alert) }} rounded-0 m-0 alert-dismissable\">\n  <div *ngIf=\"inModal(alert)\">\n    <!-- Modal -->\n    <div class=\"modal fade\" id=\"modalNotification\" tabindex=\"-1\" role=\"dialog\">\n      <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n          <div class=\"modal-body p-0\">\n            <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\">\n              <span class=\"mdi mdi-close\" aria-hidden=\"true\"></span>\n            </button>\n            <div class=\"icon\">\n              <span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span>\n            </div>\n            <div class=\"message\">\n              <div [innerHTML]=\"alert.message\"></div>\n            </div>\n          </div>\n          <div class=\"modal-footer pt-0\" *ngIf=\"alert.confirmations?.length\">\n            <button\n              class=\"{{ confirmation.class }} mr-2\"\n              *ngFor=\"let confirmation of alert.confirmations\"\n              (click)=\"alertConfirm(alert, confirmation.value)\"\n            >\n              {{ confirmation.label }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!inModal(alert)\" class=\"alert-block\">\n    <div class=\"icon\"><span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span></div>\n    <div class=\"message\">\n      <div [innerHTML]=\"alert.message\"></div>\n      <div class=\"mt-3\" *ngIf=\"alert.confirmations?.length\">\n        <button\n          class=\"{{ confirmation.class }} mr-2\"\n          *ngFor=\"let confirmation of alert.confirmations\"\n          (click)=\"alertConfirm(alert, confirmation.value)\"\n        >\n          {{ confirmation.label }}\n        </button>\n      </div>\n    </div>\n    <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\">\n      <span class=\"mdi mdi-close\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n", styles: [".alert-block{display:flex;flex-direction:row;justify-content:space-between}.alert-block .message{width:100%}.alert-block .icon{display:flex;align-items:center}.alert .message{padding:2rem 5rem 2rem 2rem!important;font-size:1.1rem!important;line-height:1.5rem!important}.alert .close{padding:2rem 2rem 0 0!important;right:0!important;color:#fff!important;opacity:1!important}.alert .icon{padding-left:2rem!important}.alert-warning{color:#404040!important}.alert-warning .close,.alert-light .close{color:#404040!important;opacity:1!important}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertComponent, decorators: [{
+AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AlertComponent, selector: "valtimo-alert", 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 *ngFor=\"let alert of alerts\" class=\"{{ cssClass(alert) }} rounded-0 m-0 alert-dismissable\">\n  <div *ngIf=\"inModal(alert)\">\n    <!-- Modal -->\n    <div class=\"modal fade\" id=\"modalNotification\" tabindex=\"-1\" role=\"dialog\">\n      <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n          <div class=\"modal-body p-0\">\n            <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\">\n              <span class=\"mdi mdi-close\" aria-hidden=\"true\"></span>\n            </button>\n            <div class=\"icon\">\n              <span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span>\n            </div>\n            <div class=\"message\">\n              <div [innerHTML]=\"alert.message\"></div>\n            </div>\n          </div>\n          <div class=\"modal-footer pt-0\" *ngIf=\"alert.confirmations?.length\">\n            <button\n              class=\"{{ confirmation.class }} mr-2\"\n              *ngFor=\"let confirmation of alert.confirmations\"\n              (click)=\"alertConfirm(alert, confirmation.value)\"\n            >\n              {{ confirmation.label }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!inModal(alert)\" class=\"alert-block\">\n    <div class=\"icon\"><span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span></div>\n    <div class=\"message\">\n      <div [innerHTML]=\"alert.message\"></div>\n      <div class=\"mt-3\" *ngIf=\"alert.confirmations?.length\">\n        <button\n          class=\"{{ confirmation.class }} mr-2\"\n          *ngFor=\"let confirmation of alert.confirmations\"\n          (click)=\"alertConfirm(alert, confirmation.value)\"\n        >\n          {{ confirmation.label }}\n        </button>\n      </div>\n    </div>\n    <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\">\n      <span class=\"mdi mdi-close\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n", styles: [".alert-block{display:flex;flex-direction:row;justify-content:space-between}.alert-block .message{width:100%}.alert-block .icon{display:flex;align-items:center}.alert .message{padding:2rem 5rem 2rem 2rem!important;font-size:1.1rem!important;line-height:1.5rem!important}.alert .close{padding:2rem 2rem 0 0!important;right:0!important;color:#fff!important;opacity:1!important}.alert .icon{padding-left:2rem!important}.alert-warning{color:#404040!important}.alert-warning .close,.alert-light .close{color:#404040!important;opacity:1!important}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-alert', 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 *ngFor=\"let alert of alerts\" class=\"{{ cssClass(alert) }} rounded-0 m-0 alert-dismissable\">\n  <div *ngIf=\"inModal(alert)\">\n    <!-- Modal -->\n    <div class=\"modal fade\" id=\"modalNotification\" tabindex=\"-1\" role=\"dialog\">\n      <div class=\"modal-dialog\" role=\"document\">\n        <div class=\"modal-content\">\n          <div class=\"modal-body p-0\">\n            <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\">\n              <span class=\"mdi mdi-close\" aria-hidden=\"true\"></span>\n            </button>\n            <div class=\"icon\">\n              <span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span>\n            </div>\n            <div class=\"message\">\n              <div [innerHTML]=\"alert.message\"></div>\n            </div>\n          </div>\n          <div class=\"modal-footer pt-0\" *ngIf=\"alert.confirmations?.length\">\n            <button\n              class=\"{{ confirmation.class }} mr-2\"\n              *ngFor=\"let confirmation of alert.confirmations\"\n              (click)=\"alertConfirm(alert, confirmation.value)\"\n            >\n              {{ confirmation.label }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"!inModal(alert)\" class=\"alert-block\">\n    <div class=\"icon\"><span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span></div>\n    <div class=\"message\">\n      <div [innerHTML]=\"alert.message\"></div>\n      <div class=\"mt-3\" *ngIf=\"alert.confirmations?.length\">\n        <button\n          class=\"{{ confirmation.class }} mr-2\"\n          *ngFor=\"let confirmation of alert.confirmations\"\n          (click)=\"alertConfirm(alert, confirmation.value)\"\n        >\n          {{ confirmation.label }}\n        </button>\n      </div>\n    </div>\n    <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\">\n      <span class=\"mdi mdi-close\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n", styles: [".alert-block{display:flex;flex-direction:row;justify-content:space-between}.alert-block .message{width:100%}.alert-block .icon{display:flex;align-items:center}.alert .message{padding:2rem 5rem 2rem 2rem!important;font-size:1.1rem!important;line-height:1.5rem!important}.alert .close{padding:2rem 2rem 0 0!important;right:0!important;color:#fff!important;opacity:1!important}.alert .icon{padding-left:2rem!important}.alert-warning{color:#404040!important}.alert-warning .close,.alert-light .close{color:#404040!important;opacity:1!important}\n"] }]
         }], ctorParameters: function () { return [{ type: AlertService }]; } });
@@ -3517,10 +3650,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class AlertModule {
 }
-AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
-AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AlertModule, decorators: [{
+AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
+AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -3548,11 +3681,11 @@ class DataListComponent {
     constructor() { }
     ngOnInit() { }
 }
-DataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DataListComponent, selector: "valtimo-data-list", inputs: { collection: "collection", object: "object" }, 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 *ngIf=\"collection\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of collection\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.label }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n\n<div *ngIf=\"object\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of object | keyvalue\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.key }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i1.KeyValuePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataListComponent, decorators: [{
+DataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DataListComponent, selector: "valtimo-data-list", inputs: { collection: "collection", object: "object" }, 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 *ngIf=\"collection\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of collection\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.label }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n\n<div *ngIf=\"object\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of object | keyvalue\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.key }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n", styles: [""], 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$1.KeyValuePipe, name: "keyvalue" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-data-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 *ngIf=\"collection\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of collection\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.label }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n\n<div *ngIf=\"object\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of object | keyvalue\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.key }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-data-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 *ngIf=\"collection\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of collection\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.label }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n\n<div *ngIf=\"object\">\n  <dl class=\"row mb-0\" *ngFor=\"let item of object | keyvalue\">\n    <dd class=\"col-12 col-md-4 col-lg-3\">{{ item.key }}</dd>\n    <dt class=\"col-12 col-md-8 col-lg-9\" [innerHTML]=\"item.value || '-'\"></dt>\n  </dl>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { collection: [{
                 type: Input
             }], object: [{
@@ -3576,10 +3709,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class DataListModule {
 }
-DataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataListModule, declarations: [DataListComponent], imports: [CommonModule], exports: [DataListComponent] });
-DataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataListModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataListModule, decorators: [{
+DataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DataListModule, declarations: [DataListComponent], imports: [CommonModule], exports: [DataListComponent] });
+DataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DataListComponent],
@@ -3628,9 +3761,9 @@ class FormIoStateService {
         this._currentForm$.next(form);
     }
 }
-FormIoStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormIoStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoStateService, decorators: [{
+FormIoStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FormIoStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoStateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3749,7 +3882,7 @@ class FormioComponent {
     }
     refreshToken() {
         from(this.userProviderService.updateToken(-1))
-            .pipe(switchMap$1(() => this.userProviderService.getToken()), take(1))
+            .pipe(switchMap$1(() => this.userProviderService.getToken()), take$1(1))
             .subscribe(token => {
             this.setToken(token);
         });
@@ -3769,17 +3902,19 @@ class FormioComponent {
         }
     }
 }
-FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormioComponent, deps: [{ token: i1$6.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$5.ActivatedRoute }, { token: i1$8.TranslateService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
-FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormioComponent, selector: "valtimo-form-io", inputs: { form: "form", options: "options", submission: "submission", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change" }, 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=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"currentLanguage$ | async as currentLanguage\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [language]=\"currentLanguage\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""], components: [{ type: i7.FormioComponent, selector: "formio" }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormioComponent, decorators: [{
+FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormioComponent, deps: [{ token: i3.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$4.ActivatedRoute }, { token: i1.TranslateService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
+FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormioComponent, selector: "valtimo-form-io", inputs: { form: "form", options: "options", submission: "submission", readOnly: "readOnly", formRefresh$: "formRefresh$" }, outputs: { submit: "submit", change: "change" }, 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=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"currentLanguage$ | async as currentLanguage\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [readOnly]=\"readOnly\"\n    [language]=\"currentLanguage\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""], 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: "component", type: i8.FormioComponent, selector: "formio" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io', 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=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"currentLanguage$ | async as currentLanguage\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [language]=\"currentLanguage\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$6.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$5.ActivatedRoute }, { type: i1$8.TranslateService }, { type: ValtimoModalService }]; }, propDecorators: { form: [{
+            args: [{ selector: 'valtimo-form-io', 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=\"errors.length > 0\" class=\"alert alert-danger pt-5 pb-5 mb-2\">\n    <ol>\n      <li *ngFor=\"let error of errors\">\n        {{ error }}\n      </li>\n    </ol>\n  </div>\n  <formio\n    *ngIf=\"currentLanguage$ | async as currentLanguage\"\n    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [readOnly]=\"readOnly\"\n    [language]=\"currentLanguage\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n    (nextPage)=\"nextPage()\"\n    (prevPage)=\"prevPage()\"\n  ></formio>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i3.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$4.ActivatedRoute }, { type: i1.TranslateService }, { type: ValtimoModalService }]; }, propDecorators: { form: [{
                 type: Input
             }], options: [{
                 type: Input
             }], submission: [{
                 type: Input
+            }], readOnly: [{
+                type: Input
             }], formRefresh$: [{
                 type: Input
             }], submit: [{
@@ -3824,11 +3959,11 @@ class FormioBuilderComponent {
         this.change.emit(event);
     }
 }
-FormioBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormioBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormioBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, 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  <form-builder [form]=\"form\" (change)=\"onChange($event)\"></form-builder>\n</div>\n", styles: [""], components: [{ type: i7.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormioBuilderComponent, decorators: [{
+FormioBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormioBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormioBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormioBuilderComponent, selector: "valtimo-form-io-builder", inputs: { form: "form" }, outputs: { change: "change" }, 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  <form-builder [form]=\"form\" (change)=\"onChange($event)\"></form-builder>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i8.FormBuilderComponent, selector: "form-builder", inputs: ["form", "options", "formbuilder", "noeval", "refresh", "rebuild"], outputs: ["change"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormioBuilderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-form-io-builder', 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  <form-builder [form]=\"form\" (change)=\"onChange($event)\"></form-builder>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-form-io-builder', 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  <form-builder [form]=\"form\" (change)=\"onChange($event)\"></form-builder>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { form: [{
                 type: Input
             }], change: [{
@@ -3877,7 +4012,7 @@ class FormIoDomService {
         this.stateService = stateService;
     }
     toggleSubmitButton(disabled) {
-        this.stateService.currentForm$.pipe(take(1)).subscribe(form => {
+        this.stateService.currentForm$.pipe(take$1(1)).subscribe(form => {
             const button = form.formioElement.nativeElement
                 .getElementsByClassName('formio-component-submit')[0]
                 .getElementsByClassName('btn-primary')[0];
@@ -3885,9 +4020,9 @@ class FormIoDomService {
         });
     }
 }
-FormIoDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoDomService, deps: [{ token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Injectable });
-FormIoDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoDomService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoDomService, decorators: [{
+FormIoDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoDomService, deps: [{ token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+FormIoDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoDomService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoDomService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: FormIoStateService }]; } });
 
@@ -3908,9 +4043,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class ProgressBarComponent {
 }
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "valtimo-progress-bar", 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=\"progress\" style=\"position: relative\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\"></div>\n</div>\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 */.progress-bar.indeterminate{position:relative;animation:progress-indeterminate 3s linear infinite}@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
+ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ProgressBarComponent, selector: "valtimo-progress-bar", 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=\"progress\" style=\"position: relative\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\"></div>\n</div>\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 */.progress-bar.indeterminate{position:relative;animation:progress-indeterminate 3s linear infinite}@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-progress-bar', 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=\"progress\" style=\"position: relative\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\"></div>\n</div>\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 */.progress-bar.indeterminate{position:relative;animation:progress-indeterminate 3s linear infinite}@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}\n"] }]
         }] });
@@ -3973,7 +4108,7 @@ class WebcamComponent {
         return false;
     }
     stopStream() {
-        this.stream$.pipe(take(1)).subscribe(mediaStream => {
+        this.stream$.pipe(take$1(1)).subscribe(mediaStream => {
             if (mediaStream) {
                 mediaStream.getTracks().forEach(stream => stream.stop());
             }
@@ -4002,9 +4137,9 @@ class WebcamComponent {
         return new File([blob], imgFileName);
     }
 }
-WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WebcamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: WebcamComponent, selector: "valtimo-webcam", outputs: { imageSaved: "imageSaved" }, 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  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"icon mdi mdi-camera mr-1\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-redo mr-1\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-save mr-1\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\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 */.webcam-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;display:flex;align-items:center;justify-content:center;transition:opacity .15s linear;opacity:0;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;justify-content:space-evenly;margin-top:20px;margin-bottom:10px;height:30px}.button-container i{margin-right:5px}.picture-btn,.new-btn,.save-btn{position:absolute;display:flex;justify-content:center}.picture-btn .icon,.new-btn .icon,.save-btn .icon{background-color:unset;border-radius:unset;display:inline-block;height:unset;width:unset;margin-bottom:0;padding:0}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{width:100%;left:0}.new-btn{left:0}.save-btn{right:0}.modal-header{position:absolute;top:0;right:-18px;margin-top:35px;padding:0;color:gray}.close{color:gray}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container video,.video-container img{width:660px;height:495px;position:absolute}.video-container img{object-fit:cover}#canvas{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WebcamComponent, decorators: [{
+WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WebcamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: WebcamComponent, selector: "valtimo-webcam", outputs: { imageSaved: "imageSaved" }, 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  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"icon mdi mdi-camera mr-1\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-redo mr-1\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-save mr-1\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\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 */.webcam-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;display:flex;align-items:center;justify-content:center;transition:opacity .15s linear;opacity:0;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;justify-content:space-evenly;margin-top:20px;margin-bottom:10px;height:30px}.button-container i{margin-right:5px}.picture-btn,.new-btn,.save-btn{position:absolute;display:flex;justify-content:center}.picture-btn .icon,.new-btn .icon,.save-btn .icon{background-color:unset;border-radius:unset;display:inline-block;height:unset;width:unset;margin-bottom:0;padding:0}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{width:100%;left:0}.new-btn{left:0}.save-btn{right:0}.modal-header{position:absolute;top:0;right:-18px;margin-top:35px;padding:0;color:gray}.close{color:gray}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container video,.video-container img{width:660px;height:495px;position:absolute}.video-container img{object-fit:cover}#canvas{display:none}\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: "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: WebcamComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-webcam', 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  (click)=\"close(false)\"\n  *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n  [ngClass]=\"{showing: showing$ | async}\"\n  class=\"webcam-overlay\"\n>\n  <div (click)=\"(false); $event.stopPropagation()\" class=\"inner-container\">\n    <div class=\"webcam-container modal-content\">\n      <div class=\"video-container\">\n        <video autoplay=\"true\" id=\"videoElement\"></video>\n        <canvas id=\"canvas\"></canvas>\n        <img *ngIf=\"obs.picture?.uri\" [src]=\"obs.picture?.uri\" />\n      </div>\n      <div class=\"button-container\">\n        <div class=\"picture-btn\">\n          <button\n            (click)=\"captureImage()\"\n            [disabled]=\"obs.picture?.file || !obs.stream\"\n            class=\"btn btn-primary btn-lg\"\n          >\n            <i class=\"icon mdi mdi-camera mr-1\"></i>{{ 'webcam.takePicture' | translate }}\n          </button>\n        </div>\n        <div class=\"new-btn\">\n          <button (click)=\"clearImage()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-redo mr-1\"></i>{{ 'webcam.redo' | translate }}\n          </button>\n        </div>\n        <div class=\"save-btn\">\n          <button (click)=\"close()\" [disabled]=\"!obs.picture?.file\" class=\"btn btn-primary\">\n            <i class=\"icon mdi mdi-save mr-1\"></i>{{ 'webcam.save' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"modal-header\">\n      <button (click)=\"close(false)\" aria-label=\"Close\" class=\"close\"><span>\u00D7</span></button>\n    </div>\n  </div>\n</div>\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 */.webcam-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000a6;display:flex;align-items:center;justify-content:center;transition:opacity .15s linear;opacity:0;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;justify-content:space-evenly;margin-top:20px;margin-bottom:10px;height:30px}.button-container i{margin-right:5px}.picture-btn,.new-btn,.save-btn{position:absolute;display:flex;justify-content:center}.picture-btn .icon,.new-btn .icon,.save-btn .icon{background-color:unset;border-radius:unset;display:inline-block;height:unset;width:unset;margin-bottom:0;padding:0}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{width:100%;left:0}.new-btn{left:0}.save-btn{right:0}.modal-header{position:absolute;top:0;right:-18px;margin-top:35px;padding:0;color:gray}.close{color:gray}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container video,.video-container img{width:660px;height:495px;position:absolute}.video-container img{object-fit:cover}#canvas{display:none}\n"] }]
         }], propDecorators: { imageSaved: [{
@@ -4122,12 +4257,12 @@ class DropzoneComponent {
         this.fileSelected.emit(file);
     }
 }
-DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1$8.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", maxFileSize: "maxFileSize", showMaxFileSize: "showMaxFileSize", acceptedFiles: "acceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera", maxFiles: "maxFiles" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\n"], components: [{ type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe, "filesize": FileSizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneComponent, decorators: [{
+DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: { title: "title", hideTitle: "hideTitle", subtitle: "subtitle", externalError$: "externalError$", maxFileSize: "maxFileSize", showMaxFileSize: "showMaxFileSize", acceptedFiles: "acceptedFiles", clear$: "clear$", disabled: "disabled", hideFilePreview: "hideFilePreview", uploading: "uploading", camera: "camera", maxFiles: "maxFiles" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize : 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\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: "component", type: ProgressBarComponent, selector: "valtimo-progress-bar" }, { kind: "component", type: WebcamComponent, selector: "valtimo-webcam", outputs: ["imageSaved"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-dropzone', 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize: 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$8.TranslateService }]; }, propDecorators: { dropzoneRef: [{
+            args: [{ selector: 'valtimo-dropzone', 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<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"icon large-icon\"><span class=\"mdi mdi-cloud-upload\"></span></div>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n    <ng-container *ngIf=\"uploading\">\n      <ng-container *ngTemplateOutlet=\"progressBar\"></ng-container>\n    </ng-container>\n    <div class=\"dropzone-mobile-trigger needsclick\"></div>\n  </div>\n  <button\n    (click)=\"showCamera()\"\n    *ngIf=\"camera\"\n    type=\"button\"\n    class=\"btn btn-primary px-3 webcam-button\"\n  >\n    <i class=\"icon mdi mdi-camera\" aria-hidden=\"true\"></i>\n  </button>\n  <ng-container *ngIf=\"showingCamera$ | async\">\n    <ng-container *ngTemplateOutlet=\"webcam\"></ng-container>\n  </ng-container>\n</form>\n\n<ng-template #body>\n  <h2 *ngIf=\"!hideTitle\" class=\"mb-4 mt-2\">{{ title || ('dropzone.drop' | translate) }}</h2>\n  <span *ngIf=\"subtitle\" class=\"note mb-3\">{{ subtitle }}</span>\n  <span *ngIf=\"showMaxFileSize\" class=\"note mb-3 small-font\"\n    >{{ 'dropzone.maxFileSize' | translate }}<b>{{ maxFileSize }}mb</b></span\n  >\n  <ng-container *ngTemplateOutlet=\"preview\"></ng-container>\n</ng-template>\n\n<ng-template #preview>\n  <ng-container\n    *ngIf=\"{\n      errorMessage: errorMessage$ | async,\n      externalError: externalError$ | async,\n      file: file$ | async\n    } as obs\"\n  >\n    <ng-container *ngIf=\"obs.externalError || obs.errorMessage\">\n      <div class=\"alert alert-danger mt-2 mb-0\">\n        <div class=\"message\">\n          {{ obs.externalError || obs.errorMessage }}\n        </div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideFilePreview && obs.file && !obs.externalError && !obs.errorMessage\">\n      <div class=\"file\">\n        <i class=\"icon mdi mdi-file-text mr-2\"></i>\n        <span class=\"note\">{{ obs.file.name }}</span>\n        <span class=\"note file-size\">- {{ obs.file.size | filesize : 2 }}</span>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #progressBar>\n  <div class=\"progress-bar-container\">\n    <valtimo-progress-bar></valtimo-progress-bar>\n  </div>\n</ng-template>\n\n<ng-template #webcam>\n  <valtimo-webcam (imageSaved)=\"webcamImageSaved($event)\"></valtimo-webcam>\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 */form.dropzone{padding:30px 20px}form.dropzone h2{text-align:center;font-size:2rem}form.dropzone.disabled{opacity:.7;pointer-events:none;cursor:default}form.dropzone.preview{padding:15px 20px;border:none}.dz-message{display:flex;flex-direction:column;align-items:center}.dropzone-mobile-trigger{cursor:pointer}.alert-light{display:flex;align-items:center}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;width:auto;margin-bottom:0;padding:0}form.dropzone .message{padding:1.385rem 2.1542rem}.file{font-size:1.5rem;display:flex;flex-direction:row;align-items:center}.small-font{font-size:1rem;color:#959595}.file-size{margin-left:5px}.progress-bar-container{height:auto;width:100%;position:absolute;bottom:0}.webcam-button{position:absolute;top:10px;right:10px}.large-icon{line-height:4.615rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { dropzoneRef: [{
                 type: ViewChild,
                 args: ['dropzone']
             }], title: [{
@@ -4203,7 +4338,7 @@ class FormIoUploaderComponent {
     fileSelected(file) {
         this.domService.toggleSubmitButton(true);
         this.uploading$.next(true);
-        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe(name => {
+        this.stateService.documentDefinitionName$.pipe(take$1(1)).subscribe(name => {
             this.uploadProviderService.uploadFile(file, name).subscribe(result => {
                 this.domService.toggleSubmitButton(false);
                 this.uploading$.next(false);
@@ -4218,12 +4353,12 @@ class FormIoUploaderComponent {
         this.valueChange.emit(this._value);
     }
 }
-FormIoUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoUploaderComponent, deps: [{ token: i1$a.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$a.DownloadService }], target: i0.ɵɵFactoryTarget.Component });
-FormIoUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FormIoUploaderComponent, selector: "valtimo-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", value: "value" }, 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<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"], components: [{ type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe, "filesize": FileSizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoUploaderComponent, decorators: [{
+FormIoUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoUploaderComponent, deps: [{ token: i1$7.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$7.DownloadService }], target: i0.ɵɵFactoryTarget.Component });
+FormIoUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: FormIoUploaderComponent, selector: "valtimo-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", value: "value" }, 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<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\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: "component", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-formio-uploader', 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<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [disabled]=\"disabled\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"hideTitle\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"!hideMaxFileSize\"\n  [subtitle]=\"subtitle\"\n  [title]=\"title\"\n  [camera]=\"camera\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<div class=\"file-preview\" *ngFor=\"let resource of _value\">\n  <div class=\"file-preview-name\">\n    <a href=\"#\" (click)=\"downloadFile(resource)\">\n      {{ resource.originalName }}\n    </a>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.size | filesize }}\n    </span>\n  </div>\n  <div class=\"file-preview-delete\" *ngIf=\"!disabled\">\n    <a (click)=\"deleteFile(resource.data.resourceId)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$a.UploadProviderService }, { type: FormIoStateService }, { type: FormIoDomService }, { type: i1$a.DownloadService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1$7.UploadProviderService }, { type: FormIoStateService }, { type: FormIoDomService }, { type: i1$7.DownloadService }]; }, propDecorators: { disabled: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -4260,10 +4395,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class ProgressBarModule {
 }
-ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent] });
-ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarModule, decorators: [{
+ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent] });
+ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProgressBarComponent],
@@ -4289,10 +4424,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class WebcamModule {
 }
-WebcamModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WebcamModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WebcamModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WebcamModule, declarations: [WebcamComponent], imports: [CommonModule, TranslateModule], exports: [WebcamComponent] });
-WebcamModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WebcamModule, imports: [[CommonModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: WebcamModule, decorators: [{
+WebcamModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WebcamModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+WebcamModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: WebcamModule, declarations: [WebcamComponent], imports: [CommonModule, TranslateModule], exports: [WebcamComponent] });
+WebcamModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WebcamModule, imports: [CommonModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: WebcamModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [WebcamComponent],
@@ -4318,10 +4453,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class DropzoneModule {
 }
-DropzoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropzoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneModule, declarations: [DropzoneComponent], imports: [CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule], exports: [DropzoneComponent] });
-DropzoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneModule, imports: [[CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropzoneModule, decorators: [{
+DropzoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropzoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DropzoneModule, declarations: [DropzoneComponent], imports: [CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule], exports: [DropzoneComponent] });
+DropzoneModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneModule, imports: [CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DropzoneModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DropzoneComponent],
@@ -4399,7 +4534,7 @@ class DocumentenApiMetadataModalComponent {
             this.additionalDocumentDate$,
             this.translateService.stream('key'),
         ]).pipe(tap(([additionalDocumentDate]) => {
-            this.formData$.pipe(take$1(1)).subscribe(formData => {
+            this.formData$.pipe(take(1)).subscribe(formData => {
                 if (additionalDocumentDate === 'received' &&
                     (formData.status === 'in_bewerking' || formData.status === 'ter_vaststelling')) {
                     this.clearStatusSelection$.next(null);
@@ -4446,7 +4581,7 @@ class DocumentenApiMetadataModalComponent {
     }
     save() {
         combineLatest([this.valid$, this.formData$])
-            .pipe(take$1(1))
+            .pipe(take(1))
             .subscribe(([valid, formData]) => {
             if (valid) {
                 this.metadata.emit(formData);
@@ -4480,12 +4615,12 @@ class DocumentenApiMetadataModalComponent {
         });
     }
 }
-DocumentenApiMetadataModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalComponent, deps: [{ token: i1$4.ModalService }, { token: i1$8.TranslateService }, { token: i1$5.ActivatedRoute }, { token: i2.DocumentService }, { token: i1$2.KeycloakService }, { token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
-DocumentenApiMetadataModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: i1$4.ModalComponent, selector: "v-modal", inputs: ["appearingDelayMs", "maxWidthPx", "hideFooter"], outputs: ["closeEvent"] }, { type: i1$4.TitleComponent, selector: "v-title", inputs: ["type", "margin", "fullWidth", "center"] }, { type: i1$4.ButtonComponent, selector: "v-button", inputs: ["type", "mdiIcon", "disabled", "title", "titleTranslationKey"], outputs: ["clickEvent"] }, { type: i1$4.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { type: i1$4.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "clear$"], outputs: ["valueChange"] }, { type: i1$4.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"] }, { type: i1$4.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime"], outputs: ["valueChange"] }, { type: i1$4.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalComponent, decorators: [{
+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" }] });
+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"] }]
-        }], ctorParameters: function () { return [{ type: i1$4.ModalService }, { type: i1$8.TranslateService }, { type: i1$5.ActivatedRoute }, { type: i2.DocumentService }, { type: i1$2.KeycloakService }, { type: ValtimoModalService }]; }, propDecorators: { documentenApiMetadataModal: [{
+        }], ctorParameters: function () { return [{ type: i1$5.ModalService }, { type: i1.TranslateService }, { type: i1$4.ActivatedRoute }, { type: i2$2.DocumentService }, { type: i1$3.KeycloakService }, { type: ValtimoModalService }]; }, propDecorators: { documentenApiMetadataModal: [{
                 type: ViewChild,
                 args: ['documentenApiMetadataModal']
             }], show$: [{
@@ -4598,7 +4733,7 @@ class DocumentenApiUploaderComponent {
         this.hideModal$.next(null);
         this.domService.toggleSubmitButton(true);
         this.fileToBeUploaded$
-            .pipe(take(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
+            .pipe(take$1(1), switchMap(file => this.uploadProviderService.uploadTempFileWithMetadata(file, metadata)), tap(result => {
             this.domService.toggleSubmitButton(false);
             this.uploading$.next(false);
             this._value.push(result);
@@ -4607,12 +4742,12 @@ class DocumentenApiUploaderComponent {
             .subscribe();
     }
 }
-DocumentenApiUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i1$a.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$a.DownloadService }, { token: ValtimoModalService }, { token: i1$6.UserProviderService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-DocumentenApiUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DocumentenApiUploaderComponent, selector: "valtimo-documenten-api-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", 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", value: "value" }, 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<ng-container *ngIf=\"{linked: uploadProcessLinked$ | async, isAdmin: isAdmin$ | async} as obs\">\n  <div *ngIf=\"obs.linked === false\">\n    <div\n      *ngIf=\"obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <valtimo-dropzone\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"null\"\n    [camera]=\"camera\"\n    [disabled]=\"disabled || obs.linked === false || obs.linked === 'loading'\"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"hideTitle\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"!hideMaxFileSize\"\n    [subtitle]=\"subtitle\"\n    [title]=\"title\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n</ng-container>\n\n<div *ngFor=\"let resource of _value\" class=\"file-preview\">\n  <div class=\"file-preview-name\">\n    <span>\n      {{ resource.filename }}\n    </span>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.sizeInBytes | filesize }}\n    </span>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"file-preview-delete\">\n    <a (click)=\"deleteFile(resource.id)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"], components: [{ type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel"], outputs: ["metadata"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$8.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "filesize": FileSizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiUploaderComponent, decorators: [{
+DocumentenApiUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiUploaderComponent, deps: [{ token: i1$7.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$7.DownloadService }, { token: ValtimoModalService }, { token: i3.UserProviderService }, { token: i1$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+DocumentenApiUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DocumentenApiUploaderComponent, selector: "valtimo-documenten-api-formio-uploader", inputs: { disabled: "disabled", title: "title", hideTitle: "hideTitle", subtitle: "subtitle", maxFileSize: "maxFileSize", hideMaxFileSize: "hideMaxFileSize", camera: "camera", 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", value: "value" }, 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<ng-container *ngIf=\"{linked: uploadProcessLinked$ | async, isAdmin: isAdmin$ | async} as obs\">\n  <div *ngIf=\"obs.linked === false\">\n    <div\n      *ngIf=\"obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <valtimo-dropzone\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"null\"\n    [camera]=\"camera\"\n    [disabled]=\"disabled || obs.linked === false || obs.linked === 'loading'\"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"hideTitle\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"!hideMaxFileSize\"\n    [subtitle]=\"subtitle\"\n    [title]=\"title\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n</ng-container>\n\n<div *ngFor=\"let resource of _value\" class=\"file-preview\">\n  <div class=\"file-preview-name\">\n    <span>\n      {{ resource.filename }}\n    </span>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.sizeInBytes | filesize }}\n    </span>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"file-preview-delete\">\n    <a (click)=\"deleteFile(resource.id)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\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: "component", type: DropzoneComponent, selector: "valtimo-dropzone", inputs: ["title", "hideTitle", "subtitle", "externalError$", "maxFileSize", "showMaxFileSize", "acceptedFiles", "clear$", "disabled", "hideFilePreview", "uploading", "camera", "maxFiles"], outputs: ["fileSelected"] }, { kind: "directive", type: i1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DocumentenApiMetadataModalComponent, selector: "valtimo-documenten-api-metadata-modal", inputs: ["show$", "hide$", "disabled$", "file$", "documentTitle", "disableDocumentTitle", "filename", "disableFilename", "author", "disableAuthor", "status", "disableStatus", "language", "disableLanguage", "documentType", "disableDocumentType", "description", "disableDescription", "confidentialityLevel", "disableConfidentialityLevel"], outputs: ["metadata"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiUploaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-documenten-api-formio-uploader', 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<ng-container *ngIf=\"{linked: uploadProcessLinked$ | async, isAdmin: isAdmin$ | async} as obs\">\n  <div *ngIf=\"obs.linked === false\">\n    <div\n      *ngIf=\"obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.adminRole'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n    <div\n      *ngIf=\"!obs.isAdmin\"\n      [translate]=\"'dossier.documenten.noProcessLinked.regularUser'\"\n      class=\"bg-warning text-black mb-2 p-3 text-center\"\n    ></div>\n  </div>\n  <valtimo-dropzone\n    (fileSelected)=\"fileSelected($event)\"\n    [acceptedFiles]=\"null\"\n    [camera]=\"camera\"\n    [disabled]=\"disabled || obs.linked === false || obs.linked === 'loading'\"\n    [hideFilePreview]=\"true\"\n    [hideTitle]=\"hideTitle\"\n    [maxFileSize]=\"maxFileSize\"\n    [maxFiles]=\"1\"\n    [showMaxFileSize]=\"!hideMaxFileSize\"\n    [subtitle]=\"subtitle\"\n    [title]=\"title\"\n    [uploading]=\"uploading$ | async\"\n  ></valtimo-dropzone>\n</ng-container>\n\n<div *ngFor=\"let resource of _value\" class=\"file-preview\">\n  <div class=\"file-preview-name\">\n    <span>\n      {{ resource.filename }}\n    </span>\n  </div>\n  <div class=\"file-preview-size\">\n    <span>\n      {{ resource.sizeInBytes | filesize }}\n    </span>\n  </div>\n  <div *ngIf=\"!disabled\" class=\"file-preview-delete\">\n    <a (click)=\"deleteFile(resource.id)\">\n      <i class=\"icon mdi mdi-delete\"></i>\n    </a>\n  </div>\n</div>\n\n<valtimo-documenten-api-metadata-modal\n  (metadata)=\"metadataSet($event)\"\n  [author]=\"author\"\n  [confidentialityLevel]=\"confidentialityLevel\"\n  [description]=\"description\"\n  [disableAuthor]=\"disableAuthor\"\n  [disableConfidentialityLevel]=\"disableConfidentialityLevel\"\n  [disableDescription]=\"disableDescription\"\n  [disableDocumentTitle]=\"disableDocumentTitle\"\n  [disableDocumentType]=\"disableDocumentType\"\n  [disableFilename]=\"disableFilename\"\n  [disableLanguage]=\"disableLanguage\"\n  [disableStatus]=\"disableStatus\"\n  [disabled$]=\"modalDisabled$\"\n  [documentTitle]=\"documentTitle\"\n  [documentType]=\"documentType\"\n  [file$]=\"fileToBeUploaded$\"\n  [filename]=\"filename\"\n  [hide$]=\"hideModal$\"\n  [language]=\"language\"\n  [show$]=\"showModal$\"\n  [status]=\"status\"\n></valtimo-documenten-api-metadata-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 */.progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .formio-button-add-another,::ng-deep .formio-component-valtimo-file .btn-secondary{display:none}::ng-deep .formio-component-valtimo-file td{padding:0!important;border:none}::ng-deep .formio-component-valtimo-file .table{border-collapse:collapse;border:none;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{margin-top:-1px;display:flex;border:1px solid #dee2e6}.file-preview div{padding:12px 10px}.file-preview .file-preview-name{width:65%}.file-preview .file-preview-size{width:35%}.file-preview .icon{color:#a1a1a1;font-size:1.3846rem;line-height:18px;cursor:pointer}.file-preview .icon:hover{color:gray}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$a.UploadProviderService }, { type: FormIoStateService }, { type: FormIoDomService }, { type: i1$a.DownloadService }, { type: ValtimoModalService }, { type: i1$6.UserProviderService }, { type: i1$5.ActivatedRoute }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1$7.UploadProviderService }, { type: FormIoStateService }, { type: FormIoDomService }, { type: i1$7.DownloadService }, { type: ValtimoModalService }, { type: i3.UserProviderService }, { type: i1$4.ActivatedRoute }]; }, propDecorators: { disabled: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -4681,8 +4816,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class DocumentenApiMetadataModalModule {
 }
-DocumentenApiMetadataModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DocumentenApiMetadataModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, declarations: [DocumentenApiMetadataModalComponent], imports: [CommonModule,
+DocumentenApiMetadataModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiMetadataModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DocumentenApiMetadataModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiMetadataModalModule, declarations: [DocumentenApiMetadataModalComponent], imports: [CommonModule,
         TranslateModule,
         ModalModule$1,
         TitleModule,
@@ -4690,23 +4825,21 @@ DocumentenApiMetadataModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion:
         TranslateModule,
         FormModule,
         InputModule,
-        SelectModule,
+        SelectModule$1,
         DatePickerModule,
         InputLabelModule], exports: [DocumentenApiMetadataModalComponent] });
-DocumentenApiMetadataModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, imports: [[
-            CommonModule,
-            TranslateModule,
-            ModalModule$1,
-            TitleModule,
-            ButtonModule,
-            TranslateModule,
-            FormModule,
-            InputModule,
-            SelectModule,
-            DatePickerModule,
-            InputLabelModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DocumentenApiMetadataModalModule, decorators: [{
+DocumentenApiMetadataModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiMetadataModalModule, imports: [CommonModule,
+        TranslateModule,
+        ModalModule$1,
+        TitleModule,
+        ButtonModule,
+        TranslateModule,
+        FormModule,
+        InputModule,
+        SelectModule$1,
+        DatePickerModule,
+        InputLabelModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DocumentenApiMetadataModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DocumentenApiMetadataModalComponent],
@@ -4720,7 +4853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         TranslateModule,
                         FormModule,
                         InputModule,
-                        SelectModule,
+                        SelectModule$1,
                         DatePickerModule,
                         InputLabelModule,
                     ],
@@ -4744,8 +4877,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class FormIoModule {
 }
-FormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, declarations: [FormioComponent,
+FormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: FormIoModule, declarations: [FormioComponent,
         FormioBuilderComponent,
         FormIoUploaderComponent,
         DocumentenApiUploaderComponent], imports: [CommonModule,
@@ -4760,18 +4893,16 @@ FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FormioBuilderComponent,
         FormIoUploaderComponent,
         DocumentenApiUploaderComponent] });
-FormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }], imports: [[
-            CommonModule,
-            FormioModule,
-            DropzoneModule,
-            TranslateModule,
-            DocumentModule,
-            FileSizeModule,
-            ResourceModule,
-            RouterModule,
-            DocumentenApiMetadataModalModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, decorators: [{
+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,
+        TranslateModule,
+        DocumentModule,
+        FileSizeModule,
+        ResourceModule,
+        RouterModule,
+        DocumentenApiMetadataModalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: FormIoModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4861,9 +4992,9 @@ class ModalComponent {
         this.observer.observe(this.scrollModal.nativeElement, config);
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalComponent, deps: [{ token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ModalComponent, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, viewQueries: [{ propertyName: "scrollModal", first: true, predicate: ["scrollModal"], 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<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\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 */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalComponent, decorators: [{
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, deps: [{ token: ValtimoModalService }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ModalComponent, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, viewQueries: [{ propertyName: "scrollModal", first: true, predicate: ["scrollModal"], 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<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\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 */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-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<div class=\"modal fade custom-width\" [id]=\"elementId\" role=\"dialog\" aria-modal=\"true\" #scrollModal>\n  <div class=\"modal-dialog modal-lg\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header modal-header-colored colored-header-grey\">\n        <div class=\"modal-title\">\n          <h4 class=\"title-text mb-2\">{{ title }}</h4>\n          <h5 class=\"subtitle-text\">{{ subtitle }}</h5>\n          <ng-container *ngIf=\"templateBelowSubtitle\">\n            <ng-container *ngTemplateOutlet=\"templateBelowSubtitle\"></ng-container>\n          </ng-container>\n        </div>\n        <div class=\"text-right\">\n          <img src=\"assets/modal/header-image.png\" class=\"modal-header-image\" />\n          <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n            <span aria-hidden=\"true\">&times;</span>\n          </button>\n        </div>\n      </div>\n      <div class=\"modal-body\">\n        <ng-content select=\"[body]\"></ng-content>\n      </div>\n      <div class=\"modal-footer\" *ngIf=\"showFooter\">\n        <ng-content select=\"[footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\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 */.colored-header-grey{background-color:#f3f4f7}.title-text{color:#585555}.subtitle-text{color:#959595}.modal-header-image{height:auto;width:50%}.modal-header{padding-bottom:.66rem;border-bottom:1px solid #c5c6c9}@media (min-width: 768px){.close{position:relative;left:25px;padding:0!important;margin-top:-20px!important}.close span{color:#fff}.modal-content{overflow:visible}}\n"] }]
         }], ctorParameters: function () { return [{ type: ValtimoModalService }]; }, propDecorators: { elementId: [{
@@ -4898,10 +5029,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class ModalModule {
 }
-ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ModalModule, decorators: [{
+ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
+ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ModalComponent],
@@ -4936,9 +5067,9 @@ class SpinnerComponent {
         this.noMarginTop = false;
     }
 }
-SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SpinnerComponent, selector: "valtimo-spinner", inputs: { useBootstrapSpinner: "useBootstrapSpinner", name: "name", type: "type", size: "size", color: "color", bdColor: "bdColor", fullScreen: "fullScreen", noMarginTop: "noMarginTop" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-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<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: ["/*!\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 */.spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top:0}\n"], components: [{ type: i1$b.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerComponent, decorators: [{
+SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SpinnerComponent, selector: "valtimo-spinner", inputs: { useBootstrapSpinner: "useBootstrapSpinner", name: "name", type: "type", size: "size", color: "color", bdColor: "bdColor", fullScreen: "fullScreen", noMarginTop: "noMarginTop" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-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<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: ["/*!\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 */.spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top:0}\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: "component", type: i2$3.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-spinner', 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<ng-container *ngIf=\"useBootstrapSpinner; else ngxSpinner\">\n  <div class=\"spinner-container\" [ngClass]=\"{'no-margin-top': noMarginTop}\">\n    <div class=\"spinner-border text-primary\" role=\"status\">\n      <span class=\"sr-only\">{{ 'interface.loading' | translate }}</span>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #ngxSpinner>\n  <ngx-spinner\n    [bdColor]=\"bdColor\"\n    [fullScreen]=\"fullScreen\"\n    [name]=\"name\"\n    [color]=\"color\"\n    [size]=\"size\"\n    [type]=\"type\"\n  >\n  </ngx-spinner>\n</ng-template>\n", styles: ["/*!\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 */.spinner-container{display:flex;justify-content:center;width:100%;margin-top:30px}.spinner-container.no-margin-top{margin-top:0}\n"] }]
         }], propDecorators: { useBootstrapSpinner: [{
@@ -4976,10 +5107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class SpinnerModule {
 }
-SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule, NgxSpinnerModule, TranslateModule], exports: [SpinnerComponent] });
-SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, imports: [[CommonModule, NgxSpinnerModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, decorators: [{
+SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule, NgxSpinnerModule, TranslateModule], exports: [SpinnerComponent] });
+SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, imports: [CommonModule, NgxSpinnerModule, TranslateModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SpinnerComponent],
@@ -5067,7 +5198,7 @@ class SearchableDropdownComponent {
             .pipe(debounceTime(50))
             .subscribe((event) => {
             combineLatest([this.mouseOnList$, this.filteredItems$, this.focusedItemId$])
-                .pipe(take(1))
+                .pipe(take$1(1))
                 .subscribe(([mouseOnList, items, focusedId]) => {
                 const length = items.length;
                 const focusedIndex = items.findIndex(item => item.id === focusedId);
@@ -5120,7 +5251,7 @@ class SearchableDropdownComponent {
     }
     openSearchSubscription() {
         this.searchSubscription = this.searchTerm.valueChanges.subscribe(searchTerm => {
-            this.focusedItemId$.pipe(take(1)).subscribe(focusedItemId => {
+            this.focusedItemId$.pipe(take$1(1)).subscribe(focusedItemId => {
                 if (!searchTerm) {
                     this.filteredItems$.next(this.items);
                 }
@@ -5141,7 +5272,7 @@ class SearchableDropdownComponent {
         });
     }
     scrollButtonIntoView(id) {
-        this.filteredItems$.pipe(take(1)).subscribe(items => {
+        this.filteredItems$.pipe(take$1(1)).subscribe(items => {
             const focusItemIndex = items.findIndex(item => item.id === id);
             const focusedButton = this.buttons.toArray()[focusItemIndex];
             if (focusedButton) {
@@ -5150,9 +5281,9 @@ class SearchableDropdownComponent {
         });
     }
 }
-SearchableDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchableDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", width: "width" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "click": "clickInside()", "document:click": "clickout()" } }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], 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<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button\n      class=\"btn btn-primary btn-sm searchable-dropdown__size\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5\n      class=\"searchable-dropdown__underline-button\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"searchable-dropdown__container\" [style.width.px]=\"width\">\n    <div class=\"searchable-dropdown__size searchable-dropdown__search\" [style.width.px]=\"width\">\n      <input\n        #search\n        [ngClass]=\"{disabled: disabled}\"\n        [placeholder]=\"searchText\"\n        [formControl]=\"searchTerm\"\n      />\n      {{ search.focus() }}\n    </div>\n    <div\n      class=\"searchable-dropdown__list\"\n      (mouseenter)=\"mouseEnterList()\"\n      (mouseleave)=\"mouseLeaveList()\"\n    >\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container\n          *ngIf=\"\n            filteredItems.length > 0 && focusedItemId$ | async as focusedItemId;\n            else noResults\n          \"\n        >\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{focus: focusedItemId === item.id, disabled: disabled}\"\n            class=\"searchable-dropdown__button searchable-dropdown__size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"searchable-dropdown__button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div\n    class=\"searchable-dropdown__button searchable-dropdown__size disabled\"\n    [style.width.px]=\"width\"\n  >\n    <span class=\"searchable-dropdown__button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div\n    *ngIf=\"style === 'button' || !style\"\n    class=\"searchable-dropdown__size\"\n    [style.width.px]=\"width\"\n  ></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"searchable-dropdown__underline-button\"><b>-</b></h5>\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 */.searchable-dropdown__size{width:250px;height:34px}.searchable-dropdown__underline-button{text-decoration:underline;width:250px;cursor:pointer}.searchable-dropdown__container{background-color:#fff;position:fixed;z-index:999;border:1px solid #e3e3e3;box-shadow:0 0 6px #0000001f;border-radius:3px;padding:7px 0;overflow:hidden;display:flex;flex-direction:column;width:250px;max-height:300px}.searchable-dropdown__list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.searchable-dropdown__search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.searchable-dropdown__search input{width:100%;border:none;outline:none;padding:0}.searchable-dropdown__search input:focus{border:none;outline:none}.searchable-dropdown__button{font-weight:400;color:#504e4e;padding:8px 24px;background-color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;border:none;outline:none}.searchable-dropdown__button.focus{background-color:#f5f5f5}.searchable-dropdown__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
+SearchableDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchableDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", width: "width" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "click": "clickInside()", "document:click": "clickout()" } }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], 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<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button\n      class=\"btn btn-primary btn-sm searchable-dropdown__size\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5\n      class=\"searchable-dropdown__underline-button\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"searchable-dropdown__container\" [style.width.px]=\"width\">\n    <div class=\"searchable-dropdown__size searchable-dropdown__search\" [style.width.px]=\"width\">\n      <input\n        #search\n        [ngClass]=\"{disabled: disabled}\"\n        [placeholder]=\"searchText\"\n        [formControl]=\"searchTerm\"\n      />\n      {{ search.focus() }}\n    </div>\n    <div\n      class=\"searchable-dropdown__list\"\n      (mouseenter)=\"mouseEnterList()\"\n      (mouseleave)=\"mouseLeaveList()\"\n    >\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container\n          *ngIf=\"\n            filteredItems.length > 0 && focusedItemId$ | async as focusedItemId;\n            else noResults\n          \"\n        >\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{focus: focusedItemId === item.id, disabled: disabled}\"\n            class=\"searchable-dropdown__button searchable-dropdown__size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"searchable-dropdown__button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div\n    class=\"searchable-dropdown__button searchable-dropdown__size disabled\"\n    [style.width.px]=\"width\"\n  >\n    <span class=\"searchable-dropdown__button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div\n    *ngIf=\"style === 'button' || !style\"\n    class=\"searchable-dropdown__size\"\n    [style.width.px]=\"width\"\n  ></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"searchable-dropdown__underline-button\"><b>-</b></h5>\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 */.searchable-dropdown__size{width:250px;height:34px}.searchable-dropdown__underline-button{text-decoration:underline;width:250px;cursor:pointer}.searchable-dropdown__container{background-color:#fff;position:fixed;z-index:999;border:1px solid #e3e3e3;box-shadow:0 0 6px #0000001f;border-radius:3px;padding:7px 0;overflow:hidden;display:flex;flex-direction:column;width:250px;max-height:300px}.searchable-dropdown__list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.searchable-dropdown__search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.searchable-dropdown__search input{width:100%;border:none;outline:none;padding:0}.searchable-dropdown__search input:focus{border:none;outline:none}.searchable-dropdown__button{font-weight:400;color:#504e4e;padding:8px 24px;background-color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;border:none;outline:none}.searchable-dropdown__button.focus{background-color:#f5f5f5}.searchable-dropdown__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\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: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-searchable-dropdown', 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<ng-container *ngIf=\"buttonText && items\">\n  <ng-container [ngTemplateOutlet]=\"(open$ | async) ? opened : closed\"> </ng-container>\n</ng-container>\n\n<ng-template #closed>\n  <ng-container *ngIf=\"style === 'button' || !style\">\n    <button\n      class=\"btn btn-primary btn-sm searchable-dropdown__size\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      {{ buttonText }}\n    </button>\n  </ng-container>\n  <ng-container *ngIf=\"style === 'underlinedText'\">\n    <h5\n      class=\"searchable-dropdown__underline-button\"\n      (click)=\"openDropdown()\"\n      [style.width.px]=\"width\"\n    >\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"searchable-dropdown__container\" [style.width.px]=\"width\">\n    <div class=\"searchable-dropdown__size searchable-dropdown__search\" [style.width.px]=\"width\">\n      <input\n        #search\n        [ngClass]=\"{disabled: disabled}\"\n        [placeholder]=\"searchText\"\n        [formControl]=\"searchTerm\"\n      />\n      {{ search.focus() }}\n    </div>\n    <div\n      class=\"searchable-dropdown__list\"\n      (mouseenter)=\"mouseEnterList()\"\n      (mouseleave)=\"mouseLeaveList()\"\n    >\n      <ng-container *ngIf=\"filteredItems$ | async as filteredItems\">\n        <ng-container\n          *ngIf=\"\n            filteredItems.length > 0 && focusedItemId$ | async as focusedItemId;\n            else noResults\n          \"\n        >\n          <button\n            #button\n            *ngFor=\"let item of filteredItems\"\n            [ngClass]=\"{focus: focusedItemId === item.id, disabled: disabled}\"\n            class=\"searchable-dropdown__button searchable-dropdown__size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"searchable-dropdown__button-text\">\n              {{ item.text }}\n            </span>\n          </button>\n        </ng-container>\n      </ng-container>\n    </div>\n  </div>\n  <ng-container [ngTemplateOutlet]=\"space\"> </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n  <div\n    class=\"searchable-dropdown__button searchable-dropdown__size disabled\"\n    [style.width.px]=\"width\"\n  >\n    <span class=\"searchable-dropdown__button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div\n    *ngIf=\"style === 'button' || !style\"\n    class=\"searchable-dropdown__size\"\n    [style.width.px]=\"width\"\n  ></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"searchable-dropdown__underline-button\"><b>-</b></h5>\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 */.searchable-dropdown__size{width:250px;height:34px}.searchable-dropdown__underline-button{text-decoration:underline;width:250px;cursor:pointer}.searchable-dropdown__container{background-color:#fff;position:fixed;z-index:999;border:1px solid #e3e3e3;box-shadow:0 0 6px #0000001f;border-radius:3px;padding:7px 0;overflow:hidden;display:flex;flex-direction:column;width:250px;max-height:300px}.searchable-dropdown__list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.searchable-dropdown__search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.searchable-dropdown__search input{width:100%;border:none;outline:none;padding:0}.searchable-dropdown__search input:focus{border:none;outline:none}.searchable-dropdown__button{font-weight:400;color:#504e4e;padding:8px 24px;background-color:#fff;cursor:pointer;font-size:1rem;display:flex;align-items:center;border:none;outline:none}.searchable-dropdown__button.focus{background-color:#f5f5f5}.searchable-dropdown__button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\n"] }]
         }], propDecorators: { style: [{
@@ -5199,10 +5330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class SearchableDropdownModule {
 }
-SearchableDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchableDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownModule, declarations: [SearchableDropdownComponent], imports: [CommonModule, ReactiveFormsModule], exports: [SearchableDropdownComponent] });
-SearchableDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownModule, imports: [[CommonModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownModule, decorators: [{
+SearchableDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchableDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, declarations: [SearchableDropdownComponent], imports: [CommonModule, ReactiveFormsModule], exports: [SearchableDropdownComponent] });
+SearchableDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, imports: [CommonModule, ReactiveFormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchableDropdownComponent],
@@ -5749,7 +5880,7 @@ function registerFormioFileSelectorComponent(injector) {
         }
         getResources() {
             return stateService.documentId$
-                .pipe(take(1))
+                .pipe(take$1(1))
                 .toPromise()
                 .then(documentId => getDocumentResources(documentId));
         }
@@ -5799,9 +5930,9 @@ class SearchableDropdownSelectComponent {
         this.clearSelection.emit();
     }
 }
-SearchableDropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchableDropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", selectedText: "selectedText", selectedTextValue: "selectedTextValue", clearSelectionButtonTitle: "clearSelectionButtonTitle", hasSelection: "hasSelection", width: "width" }, outputs: { itemSelected: "itemSelected", clearSelection: "clearSelection" }, 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<valtimo-searchable-dropdown\n  *ngIf=\"!hasSelection; else selection\"\n  [style]=\"style\"\n  [items]=\"items\"\n  [buttonText]=\"buttonText\"\n  [searchText]=\"searchText\"\n  [noResultsText]=\"noResultsText\"\n  [disabled]=\"disabled\"\n  [width]=\"width\"\n  (itemSelected)=\"onSelect($event)\"\n>\n</valtimo-searchable-dropdown>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      type=\"button\"\n      class=\"close p-0 m-0 ml-2 d-flex text-danger\"\n      aria-label=\"Close\"\n      (click)=\"onClearSelection()\"\n      [title]=\"clearSelectionButtonTitle\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\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 */.selected-text{margin:0}.clear-icon{font-size:16px}\n"], components: [{ type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "width"], outputs: ["itemSelected"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownSelectComponent, decorators: [{
+SearchableDropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchableDropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: { style: "style", items: "items", buttonText: "buttonText", searchText: "searchText", noResultsText: "noResultsText", disabled: "disabled", selectedText: "selectedText", selectedTextValue: "selectedTextValue", clearSelectionButtonTitle: "clearSelectionButtonTitle", hasSelection: "hasSelection", width: "width" }, outputs: { itemSelected: "itemSelected", clearSelection: "clearSelection" }, 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<valtimo-searchable-dropdown\n  *ngIf=\"!hasSelection; else selection\"\n  [style]=\"style\"\n  [items]=\"items\"\n  [buttonText]=\"buttonText\"\n  [searchText]=\"searchText\"\n  [noResultsText]=\"noResultsText\"\n  [disabled]=\"disabled\"\n  [width]=\"width\"\n  (itemSelected)=\"onSelect($event)\"\n>\n</valtimo-searchable-dropdown>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      type=\"button\"\n      class=\"close p-0 m-0 ml-2 d-flex text-danger\"\n      aria-label=\"Close\"\n      (click)=\"onClearSelection()\"\n      [title]=\"clearSelectionButtonTitle\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\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 */.selected-text{margin:0}.clear-icon{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchableDropdownComponent, selector: "valtimo-searchable-dropdown", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "width"], outputs: ["itemSelected"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-searchable-dropdown-select', 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<valtimo-searchable-dropdown\n  *ngIf=\"!hasSelection; else selection\"\n  [style]=\"style\"\n  [items]=\"items\"\n  [buttonText]=\"buttonText\"\n  [searchText]=\"searchText\"\n  [noResultsText]=\"noResultsText\"\n  [disabled]=\"disabled\"\n  [width]=\"width\"\n  (itemSelected)=\"onSelect($event)\"\n>\n</valtimo-searchable-dropdown>\n\n<ng-template #selection>\n  <div\n    class=\"d-flex flex-row align-items-center\"\n    [style.height.px]=\"style === 'button' ? 34 : null\"\n  >\n    <h5 class=\"selected-text\">\n      {{ selectedText }} <b>{{ selectedTextValue }}</b>\n    </h5>\n    <button\n      type=\"button\"\n      class=\"close p-0 m-0 ml-2 d-flex text-danger\"\n      aria-label=\"Close\"\n      (click)=\"onClearSelection()\"\n      [title]=\"clearSelectionButtonTitle\"\n    >\n      <i class=\"clear-icon mdi mdi-close text-danger\"></i>\n    </button>\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 */.selected-text{margin:0}.clear-icon{font-size:16px}\n"] }]
         }], propDecorators: { style: [{
@@ -5849,10 +5980,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class SearchableDropdownSelectModule {
 }
-SearchableDropdownSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchableDropdownSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownSelectModule, declarations: [SearchableDropdownSelectComponent], imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule], exports: [SearchableDropdownSelectComponent] });
-SearchableDropdownSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownSelectModule, imports: [[CommonModule, ReactiveFormsModule, SearchableDropdownModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchableDropdownSelectModule, decorators: [{
+SearchableDropdownSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchableDropdownSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, declarations: [SearchableDropdownSelectComponent], imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule], exports: [SearchableDropdownSelectComponent] });
+SearchableDropdownSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchableDropdownSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchableDropdownSelectComponent],
@@ -5892,11 +6023,11 @@ class MultiselectDropdownComponent {
         this.itemsSelected.emit(this.selectedItems);
     }
 }
-MultiselectDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiselectDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: { selectedItems: "selectedItems", items: "items", placeHolder: "placeHolder", dropdownSettings: "dropdownSettings" }, outputs: { itemsSelected: "itemsSelected" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n", styles: [""], components: [{ type: i1$c.MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: ["disabled", "placeholder", "settings", "data"], outputs: ["onFilterChange", "onDropDownClose", "onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll"] }], directives: [{ type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
+MultiselectDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MultiselectDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: MultiselectDropdownComponent, selector: "valtimo-multiselect-dropdown", inputs: { selectedItems: "selectedItems", items: "items", placeHolder: "placeHolder", dropdownSettings: "dropdownSettings" }, outputs: { itemsSelected: "itemsSelected" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2022 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i2$4.MultiSelectComponent, selector: "ng-multiselect-dropdown", inputs: ["placeholder", "disabled", "settings", "data"], outputs: ["onFilterChange", "onDropDownClose", "onSelect", "onDeSelect", "onSelectAll", "onDeSelectAll"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-multiselect-dropdown', template: "<!--\n  ~ Copyright 2015-2022 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n", styles: [""] }]
+            args: [{ selector: 'valtimo-multiselect-dropdown', template: "<!--\n  ~ Copyright 2015-2022 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<ng-multiselect-dropdown\n  [placeholder]=\"placeHolder\"\n  [data]=\"items\"\n  [(ngModel)]=\"selectedItems\"\n  [settings]=\"dropdownSettings\"\n  (onDropDownClose)=\"onItemsSelected()\"\n></ng-multiselect-dropdown>\n" }]
         }], propDecorators: { selectedItems: [{
                 type: Input
             }], items: [{
@@ -5926,10 +6057,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class MultiselectDropdownModule {
 }
-MultiselectDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiselectDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiselectDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiselectDropdownModule, declarations: [MultiselectDropdownComponent], imports: [CommonModule, ReactiveFormsModule, NgMultiSelectDropDownModule, FormsModule], exports: [MultiselectDropdownComponent] });
-MultiselectDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiselectDropdownModule, imports: [[CommonModule, ReactiveFormsModule, NgMultiSelectDropDownModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiselectDropdownModule, decorators: [{
+MultiselectDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiselectDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MultiselectDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: MultiselectDropdownModule, declarations: [MultiselectDropdownComponent], imports: [CommonModule, ReactiveFormsModule, NgMultiSelectDropDownModule, FormsModule], exports: [MultiselectDropdownComponent] });
+MultiselectDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiselectDropdownModule, imports: [CommonModule, ReactiveFormsModule, NgMultiSelectDropDownModule, FormsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: MultiselectDropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MultiselectDropdownComponent],
@@ -5980,7 +6111,7 @@ class SearchFieldsComponent {
         this.searchFields$.next(fields);
     }
     set documentDefinitionName(documentDefinitionName) {
-        this.documentDefinitionName$.pipe(take$1(1)).subscribe(currentDocumentDefinitionName => {
+        this.documentDefinitionName$.pipe(take(1)).subscribe(currentDocumentDefinitionName => {
             if (currentDocumentDefinitionName !== documentDefinitionName) {
                 this.documentDefinitionName$.next(documentDefinitionName);
             }
@@ -5993,7 +6124,7 @@ class SearchFieldsComponent {
         this.documentDefinitionNameSubscription?.unsubscribe();
     }
     singleValueChange(searchFieldKey, value, isDateTime) {
-        this.values$.pipe(take$1(1)).subscribe(values => {
+        this.values$.pipe(take(1)).subscribe(values => {
             if (value) {
                 this.values$.next({ ...values, [searchFieldKey]: this.getSingleValue(value, isDateTime) });
             }
@@ -6005,7 +6136,7 @@ class SearchFieldsComponent {
         });
     }
     multipleValueChange(searchFieldKey, value, isDateTime) {
-        this.values$.pipe(take$1(1)).subscribe(values => {
+        this.values$.pipe(take(1)).subscribe(values => {
             if (value.start && value.end) {
                 this.values$.next({
                     ...values,
@@ -6023,12 +6154,12 @@ class SearchFieldsComponent {
         });
     }
     toggleExpanded() {
-        this.expanded$.pipe(take$1(1)).subscribe(expanded => {
+        this.expanded$.pipe(take(1)).subscribe(expanded => {
             this.expanded$.next(!expanded);
         });
     }
     search() {
-        this.values$.pipe(take$1(1)).subscribe(values => {
+        this.values$.pipe(take(1)).subscribe(values => {
             this.doSearch.emit(values);
         });
     }
@@ -6058,12 +6189,12 @@ class SearchFieldsComponent {
         this.expanded$.next(false);
     }
 }
-SearchFieldsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchFieldsComponent, deps: [{ token: i1$8.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-SearchFieldsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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"], components: [{ type: SpinnerComponent, selector: "valtimo-spinner", inputs: ["useBootstrapSpinner", "name", "type", "size", "color", "bdColor", "fullScreen", "noMarginTop"] }, { type: WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }, { type: i1$4.InputComponent, selector: "v-input", inputs: ["name", "type", "title", "titleTranslationKey", "defaultValue", "widthPx", "fullWidth", "margin", "disabled", "step", "min", "maxLength", "tooltip", "required", "hideNumberSpinBox", "smallLabel", "clear$"], outputs: ["valueChange"] }, { type: i1$4.DatePickerComponent, selector: "v-date-picker", inputs: ["name", "title", "titleTranslationKey", "widthPx", "fullWidth", "margin", "disabled", "tooltip", "required", "defaultDate", "defaultDateIsToday", "smallLabel", "clear$", "enableTime"], outputs: ["valueChange"] }, { type: i1$4.InputLabelComponent, selector: "v-input-label", inputs: ["name", "title", "titleTranslationKey", "tooltip", "required", "largeMargin", "small"] }, { type: i1$4.FormComponent, selector: "v-form", inputs: ["className"], outputs: ["valueChange"] }, { type: i1$4.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"] }, { type: i1$4.ParagraphComponent, selector: "v-paragraph", inputs: ["center", "fullWidth", "margin", "italic", "loading"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$8.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchFieldsComponent, decorators: [{
+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" }] });
+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"] }]
-        }], ctorParameters: function () { return [{ type: i1$8.TranslateService }]; }, propDecorators: { loading: [{
+        }], ctorParameters: function () { return [{ type: i1.TranslateService }]; }, propDecorators: { loading: [{
                 type: Input
             }], searchFields: [{
                 type: Input
@@ -6090,8 +6221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class SearchFieldsModule {
 }
-SearchFieldsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchFieldsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchFieldsModule, declarations: [SearchFieldsComponent], imports: [CommonModule,
+SearchFieldsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SearchFieldsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, declarations: [SearchFieldsComponent], imports: [CommonModule,
         SpinnerModule,
         WidgetModule,
         TranslateModule,
@@ -6101,21 +6232,19 @@ SearchFieldsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputLabelModule,
         ParagraphModule,
         ButtonModule,
-        SelectModule], exports: [SearchFieldsComponent] });
-SearchFieldsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchFieldsModule, imports: [[
-            CommonModule,
-            SpinnerModule,
-            WidgetModule,
-            TranslateModule,
-            InputModule,
-            FormModule,
-            DatePickerModule,
-            InputLabelModule,
-            ParagraphModule,
-            ButtonModule,
-            SelectModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchFieldsModule, decorators: [{
+        SelectModule$1], exports: [SearchFieldsComponent] });
+SearchFieldsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, imports: [CommonModule,
+        SpinnerModule,
+        WidgetModule,
+        TranslateModule,
+        InputModule,
+        FormModule,
+        DatePickerModule,
+        InputLabelModule,
+        ParagraphModule,
+        ButtonModule,
+        SelectModule$1] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: SearchFieldsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SearchFieldsComponent],
@@ -6130,7 +6259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         InputLabelModule,
                         ParagraphModule,
                         ButtonModule,
-                        SelectModule,
+                        SelectModule$1,
                     ],
                     exports: [SearchFieldsComponent],
                 }]
@@ -6156,5 +6285,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, DocumentenApiMetadataModalComponent, DocumentenApiMetadataModalModule, DocumentenApiUploaderComponent, DropzoneComponent, DropzoneModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoModule, FormIoStateService, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuComponent, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, MultiselectDropdownComponent, MultiselectDropdownModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchFieldsComponent, SearchFieldsModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, 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, 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 };
 //# sourceMappingURL=valtimo-components.mjs.map