@valtimo/components 5.3.0 → 5.7.0

package/fesm2020/valtimo-components.mjs

@@ -1,41 +1,43 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, Directive, EventEmitter, Output, ViewContainerRef, ViewChild, NgModule, Pipe, HostListener, ViewChildren } from '@angular/core';
+import { Subject, from, switchMap, map, BehaviorSubject, Observable, combineLatest, fromEvent, Subscription, timer } 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 { CommonModule } from '@angular/common';
 import * as i1$1 from '@valtimo/choicefield';
-import * as i1$2 from '@angular/router';
-import { RouterModule, NavigationEnd, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
-import { BehaviorSubject, Observable, combineLatest, fromEvent, Subscription, Subject, timer, from } from 'rxjs';
+import * as i1$2 from 'keycloak-angular';
 import * as i1$3 from '@valtimo/config';
 import { HttpLoaderFactory } from '@valtimo/config';
+import * as i1$4 from '@valtimo/user-interface';
+import { ParagraphModule } from '@valtimo/user-interface';
+import * as i1$5 from '@angular/router';
+import { RouterModule, NavigationEnd, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
 import * as i2 from '@valtimo/document';
 import { DocumentModule, DocumentService } from '@valtimo/document';
-import * as i1$4 from '@valtimo/security';
+import * as i1$6 from '@valtimo/security';
 import * as i4 from 'ngx-logger';
-import * as i1$5 from '@ng-bootstrap/ng-bootstrap';
+import * as i1$7 from '@ng-bootstrap/ng-bootstrap';
 import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i1$6 from '@ngx-translate/core';
+import * as i1$8 from '@ngx-translate/core';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import * as i1$7 from '@angular/common/http';
+import * as i1$9 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i5 from '@valtimo/context';
-import { map, debounceTime, take, filter, switchMap } from 'rxjs/operators';
+import { map as map$1, debounceTime, take, filter, switchMap as switchMap$1 } from 'rxjs/operators';
 import * as i2$1 from '@angular/platform-browser';
-import * as i1$8 from '@valtimo/user-interface';
 import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import heatmap from 'heatmap.js-fixed/build/heatmap.js';
-import * as i1$9 from '@valtimo/resource';
+import * as i1$a from '@valtimo/resource';
 import { S3Resource, ResourceModule } from '@valtimo/resource';
-import * as i6 from 'angular-formio';
-import { Formio, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass, Components } from 'angular-formio';
+import * as i7 from '@formio/angular';
+import { Formio, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass, Components } from '@formio/angular';
 import jwt_decode from 'jwt-decode';
 import Dropzone from 'dropzone';
-import * as i1$a from 'ngx-spinner';
+import * as i1$b from 'ngx-spinner';
 import { NgxSpinnerModule } from 'ngx-spinner';
-import * as i1$b from 'ng-multiselect-dropdown';
+import * as i1$c from 'ng-multiselect-dropdown';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
 
 /*
@@ -98,6 +100,38 @@ class FormioOptionsImpl {
     }
 }
 
+/*
+ * 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.
+ */
+
+/*
+ * 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.
+ */
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -159,23 +193,57 @@ class TimelineItemImpl {
  */
 
 /*
+ * 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.
+ */
+
+/*
+ * 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
  *
- *  * 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.
+ * 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 ValtimoModalService {
+    constructor() {
+        this._scrollToTop$ = new Subject();
+    }
+    get scrollToTop$() {
+        return this._scrollToTop$.asObservable();
+    }
+    scrollToTop() {
+        this._scrollToTop$.next(null);
+    }
+}
+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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
  *
@@ -288,9 +356,9 @@ class CamundaFormfieldService {
         return validatorTypes;
     }
 }
-CamundaFormfieldService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormfieldService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-CamundaFormfieldService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormfieldService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormfieldService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -318,9 +386,9 @@ class CamundaFormfieldValidationComponent {
         this.formControl = this.formGroup.get(this.formField.id);
     }
 }
-CamundaFormfieldValidationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormfieldValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaFormfieldValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaFormfieldValidationComponent, decorators: [{
+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: [{
             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: [{
@@ -347,9 +415,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 class CamundaStringFormfieldComponent {
     constructor() { }
 }
-CamundaStringFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaStringFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaStringFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaStringFormfieldComponent, decorators: [{
+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: [{
             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 []; } });
@@ -372,9 +440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 class CamundaBooleanFormfieldComponent {
     constructor() { }
 }
-CamundaBooleanFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaBooleanFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaBooleanFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaBooleanFormfieldComponent, decorators: [{
+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: [{
             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 []; } });
@@ -431,9 +499,9 @@ class CamundaDateFormfieldComponent {
         });
     }
 }
-CamundaDateFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaDateFormfieldComponent, deps: [{ token: CamundaFormfieldService }], target: i0.ɵɵFactoryTarget.Component });
-CamundaDateFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaDateFormfieldComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -456,9 +524,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 class CamundaLongFormfieldComponent {
     constructor() { }
 }
-CamundaLongFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaLongFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaLongFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaLongFormfieldComponent, decorators: [{
+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: [{
             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 []; } });
@@ -484,9 +552,9 @@ class CamundaEnumFormfieldComponent {
         this.valueKeys = Object.keys(this.formField.type.values);
     }
 }
-CamundaEnumFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaEnumFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaEnumFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaEnumFormfieldComponent, decorators: [{
+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: [{
             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 []; } });
@@ -509,9 +577,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 class CamundaTextareaFormfieldComponent {
     constructor() { }
 }
-CamundaTextareaFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaTextareaFormfieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaTextareaFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaTextareaFormfieldComponent, decorators: [{
+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: [{
             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 []; } });
@@ -544,9 +612,9 @@ class CamundaChoicefieldFormfieldComponent {
         });
     }
 }
-CamundaChoicefieldFormfieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, deps: [{ token: i1$1.ChoicefieldService }], target: i0.ɵɵFactoryTarget.Component });
-CamundaChoicefieldFormfieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaChoicefieldFormfieldComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -592,9 +660,9 @@ class CamundaFormfieldGeneratorDirective {
         this.component.instance.formField = this.formField;
     }
 }
-CamundaFormfieldGeneratorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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.9", type: CamundaFormfieldGeneratorDirective, selector: "[valtimoCamundaFormfieldGenerator]", inputs: { formField: "formField", formGroup: "formGroup" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormfieldGeneratorDirective, decorators: [{
+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: [{
             type: Directive,
             args: [{
                     selector: '[valtimoCamundaFormfieldGenerator]',
@@ -654,9 +722,9 @@ class CamundaGeneratedFormComponent {
         this.submitted.emit(this.formGroup.value);
     }
 }
-CamundaGeneratedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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.9", 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.9", ngImport: i0, type: CamundaGeneratedFormComponent, decorators: [{
+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: [{
             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: [{
@@ -691,9 +759,9 @@ class CamundaCustomFormComponent {
         this.viewContainerRef.createComponent(cmpFactory);
     }
 }
-CamundaCustomFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaCustomFormComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-CamundaCustomFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaCustomFormComponent, decorators: [{
+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: [{
             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: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }]; }, propDecorators: { componentName: [{
@@ -726,9 +794,9 @@ class CamundaFormComponent {
         this.submitted.emit(event);
     }
 }
-CamundaFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CamundaFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CamundaFormComponent, decorators: [{
+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: [{
             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: [{
@@ -756,10 +824,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class CamundaCustomFormModule {
 }
-CamundaCustomFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaCustomFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CamundaCustomFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaCustomFormModule, declarations: [CamundaCustomFormComponent], imports: [CommonModule], exports: [CamundaCustomFormComponent] });
-CamundaCustomFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaCustomFormModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaCustomFormModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [CamundaCustomFormComponent],
@@ -785,8 +853,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class CamundaGeneratedFormModule {
 }
-CamundaGeneratedFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaGeneratedFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CamundaGeneratedFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaGeneratedFormModule, declarations: [CamundaStringFormfieldComponent,
+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,
         CamundaBooleanFormfieldComponent,
         CamundaDateFormfieldComponent,
         CamundaFormfieldGeneratorDirective,
@@ -796,8 +864,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.9", ngImport: i0, type: CamundaGeneratedFormModule, imports: [[CommonModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaGeneratedFormModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -834,10 +902,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class CamundaFormModule {
 }
-CamundaFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CamundaFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormModule, declarations: [CamundaFormComponent], imports: [CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule], exports: [CamundaFormComponent] });
-CamundaFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormModule, imports: [[CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CamundaFormModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [CamundaFormComponent],
@@ -862,14 +930,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * limitations under the License.
  */
 class TopbarComponent {
-    constructor() { }
+    constructor(keyCloakService, configService) {
+        this.keyCloakService = keyCloakService;
+        this.configService = configService;
+        this.userFullName$ = from(this.keyCloakService.isLoggedIn()).pipe(switchMap(() => this.keyCloakService.loadUserProfile()), map(profile => `${profile.firstName} ${profile.lastName}`));
+    }
+    ngOnInit() {
+        this.showUserNameInTopBar = this.configService.config.featureToggles?.showUserNameInTopBar;
+    }
 }
-TopbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TopbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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        <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", styles: [".user-icon{font-size:30px}.be-toggle-right-sidebar{display:flex}\n"], directives: [{ type: i1$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TopbarComponent, decorators: [{
+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: [{
             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        <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", styles: [".user-icon{font-size:30px}.be-toggle-right-sidebar{display:flex}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            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 }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -888,14 +963,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class TopbarModule {
 }
-TopbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TopbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TopbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TopbarModule, declarations: [TopbarComponent], imports: [CommonModule, RouterModule], exports: [TopbarComponent] });
-TopbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TopbarModule, imports: [[CommonModule, RouterModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TopbarModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [TopbarComponent],
-                    imports: [CommonModule, RouterModule],
+                    imports: [CommonModule, RouterModule, ParagraphModule],
                     exports: [TopbarComponent],
                 }]
         }] });
@@ -1006,14 +1081,14 @@ class MenuService {
         }
     }
 }
-MenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuService, deps: [{ token: i1$3.ConfigService }, { token: i2.DocumentService }, { token: i1$4.UserProviderService }, { token: i4.NGXLogger }, { token: i1$3.MenuIncludeService }], target: i0.ɵɵFactoryTarget.Injectable });
-MenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }, { type: i2.DocumentService }, { type: i1$4.UserProviderService }, { type: i4.NGXLogger }, { type: i1$3.MenuIncludeService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.ConfigService }, { type: i2.DocumentService }, { type: i1$6.UserProviderService }, { type: i4.NGXLogger }, { type: i1$3.MenuIncludeService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1033,10 +1108,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 const routes = [];
 class MenuRoutingModule {
 }
-MenuRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MenuRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] });
-MenuRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuRoutingModule, imports: [[RouterModule.forChild(routes)], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuRoutingModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],
@@ -1061,8 +1136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class MenuItemTextComponent {
 }
-MenuItemTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: MenuItemTextComponent, selector: "valtimo-menu-item-text", inputs: { menuItem: "menuItem" }, ngImport: i0, template: `
+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"
@@ -1084,8 +1159,8 @@ MenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
           menuItem.title
       }}</span
     >
-  `, isInline: true, directives: [{ type: i1$5.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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuItemTextComponent, decorators: [{
+  `, 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: [{
             type: Component,
             args: [{
                     selector: 'valtimo-menu-item-text',
@@ -1134,8 +1209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class SubmenuItemTextComponent {
 }
-SubmenuItemTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SubmenuItemTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SubmenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SubmenuItemTextComponent, selector: "valtimo-submenu-item-text", inputs: { submenuItem: "submenuItem" }, ngImport: i0, template: `
+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="{
@@ -1152,8 +1227,8 @@ SubmenuItemTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
       }}
       <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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SubmenuItemTextComponent, decorators: [{
+  `, 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',
@@ -1230,12 +1305,12 @@ class MenuComponent {
         }
     }
 }
-MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuComponent, deps: [{ token: MenuService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$2.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$2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i1.AsyncPipe, "translate": i1$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuComponent, decorators: [{
+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$2.Router }]; } });
+        }], ctorParameters: function () { return [{ type: MenuService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$5.Router }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1254,10 +1329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class MenuModule {
 }
-MenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: MenuModule, providers: [], imports: [[CommonModule, RouterModule, NgbTooltipModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MenuModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [MenuComponent, MenuItemTextComponent, SubmenuItemTextComponent],
@@ -1322,14 +1397,14 @@ class VersionService {
         return this.http.get(`/api/valtimo/version`);
     }
 }
-VersionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: VersionService, deps: [{ token: i1$7.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-VersionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: VersionService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: VersionService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$7.HttpClient }]; } });
+        }], ctorParameters: function () { return [{ type: i1$9.HttpClient }]; } });
 
 class RightSidebarComponent {
     constructor(userProviderService, formBuilder, versionService, translate, contextService, http, logger) {
@@ -1423,12 +1498,12 @@ class RightSidebarComponent {
         this.userProviderService.logout();
     }
 }
-RightSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RightSidebarComponent, deps: [{ token: i1$4.UserProviderService }, { token: i3.FormBuilder }, { token: VersionService }, { token: i1$6.TranslateService }, { token: i5.ContextService }, { token: i1$7.HttpClient }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-RightSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$6.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$5.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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RightSidebarComponent, decorators: [{
+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: [{
             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$4.UserProviderService }, { type: i3.FormBuilder }, { type: VersionService }, { type: i1$6.TranslateService }, { type: i5.ContextService }, { type: i1$7.HttpClient }, { type: i4.NGXLogger }]; } });
+        }], 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 }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1447,12 +1522,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class RightSidebarModule {
 }
-RightSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RightSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RightSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RightSidebarModule, declarations: [RightSidebarComponent], imports: [CommonModule,
+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,
         FormsModule,
         ReactiveFormsModule,
-        RouterModule, i1$6.TranslateModule, NgbTooltipModule], exports: [RightSidebarComponent] });
-RightSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RightSidebarModule, imports: [[
+        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,
@@ -1466,7 +1541,7 @@ RightSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
             }),
             NgbTooltipModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RightSidebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RightSidebarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [RightSidebarComponent],
@@ -1548,12 +1623,12 @@ class PageTitleComponent {
         });
     }
 }
-PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i2$1.Title }, { token: i1$6.TranslateService }, { token: i4.NGXLogger }], target: i0.ɵɵFactoryTarget.Component });
-PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: PageTitleComponent, decorators: [{
+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$2.Router }, { type: i1$2.ActivatedRoute }, { type: i2$1.Title }, { type: i1$6.TranslateService }, { type: i4.NGXLogger }]; } });
+        }], 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.
@@ -1571,23 +1646,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * limitations under the License.
  */
 class LeftSidebarComponent {
-    constructor(translateService, elementRef) {
+    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.defaultMenuWidth = 230;
-        this.maxMenuWidth = 330;
-        this.minMenuWidth = 120;
-        this.mouseX$ = fromEvent(document.body, 'mousemove').pipe(map((e) => e.pageX));
+        this.mouseX$ = fromEvent(document.body, 'mousemove').pipe(map$1((e) => e.pageX));
         this.bodyStyle = elementRef.nativeElement.ownerDocument.body.style;
     }
     ngOnInit() {
-        this.setMenuWidth(this.defaultMenuWidth);
+        const customLeftSidebar = this.configService.config.customLeftSidebar;
+        this.setInitialWidth(customLeftSidebar);
     }
     ngAfterViewInit() {
         this.mouseXSubscription = combineLatest([this.mouseX$, this.isResizing$])
@@ -1631,6 +1705,14 @@ class LeftSidebarComponent {
             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);
@@ -1642,18 +1724,19 @@ class LeftSidebarComponent {
         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.9", ngImport: i0, type: LeftSidebarComponent, deps: [{ token: i1$6.TranslateService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LeftSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: LeftSidebarComponent, decorators: [{
+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: [{
             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$6.TranslateService }, { type: i0.ElementRef }]; }, propDecorators: { toggleButtonRef: [{
+        }], ctorParameters: function () { return [{ type: i1$8.TranslateService }, { type: i0.ElementRef }, { type: i1$3.ConfigService }]; }, propDecorators: { toggleButtonRef: [{
                 type: ViewChild,
                 args: ['toggleButton']
             }], menuIsOpen: [{
@@ -1679,10 +1762,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class PageTitleModule {
 }
-PageTitleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PageTitleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleModule, declarations: [PageTitleComponent], imports: [CommonModule, TranslateModule], exports: [PageTitleComponent] });
-PageTitleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleModule, imports: [[CommonModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [PageTitleComponent],
@@ -1708,10 +1791,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class LeftSidebarModule {
 }
-LeftSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LeftSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LeftSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LeftSidebarModule, declarations: [LeftSidebarComponent], imports: [CommonModule, MenuModule, PageTitleModule], exports: [LeftSidebarComponent] });
-LeftSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LeftSidebarModule, imports: [[CommonModule, MenuModule, PageTitleModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LeftSidebarModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [LeftSidebarComponent],
@@ -1946,9 +2029,9 @@ class ViewContentService {
         this.converters[converter.getTypeString()] = converter;
     }
 }
-ViewContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ViewContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ViewContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ViewContentService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ViewContentService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1979,9 +2062,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.9", ngImport: i0, type: ListFilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ListFilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListFilterPipe, name: "listFilter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListFilterPipe, decorators: [{
+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: [{
             type: Pipe,
             args: [{
                     name: 'listFilter',
@@ -2030,8 +2113,8 @@ class ListComponent {
         }
         else {
             this.logger.debug('Pagination does NOT exist in local storage for this list. Will use default. Change it to create an entry.');
+            this.paginationSet.emit(10);
         }
-        this.paginationSet.emit();
     }
     setPaginationSize(numberOfEntries) {
         localStorage.setItem(`${this.paginationIdentifier}${ListComponent.PAGINATION_SIZE}`, numberOfEntries);
@@ -2051,6 +2134,9 @@ class ListComponent {
         if (changes.items && changes.items.currentValue) {
             this.transformListItemsMatchFields();
         }
+        if (changes?.initialSortState?.currentValue) {
+            this.sort$.next(changes?.initialSortState?.currentValue);
+        }
     }
     ngAfterViewInit() {
         if (this.isSearchable) {
@@ -2134,11 +2220,11 @@ class ListComponent {
     }
 }
 ListComponent.PAGINATION_SIZE = 'PaginationSize';
-ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", 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.9", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState" }, 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=\"Search...\"\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\"\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)\"\n              ></i>\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-more-vert\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item)\"\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$5.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: { "async": i1.AsyncPipe, "listFilter": ListFilterPipe, "translate": i1$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, decorators: [{
+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" }, 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=\"Search...\"\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\"\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)\"\n              ></i>\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)\"\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: { "async": i1.AsyncPipe, "listFilter": ListFilterPipe, "translate": i1$8.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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=\"Search...\"\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\"\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)\"\n              ></i>\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-more-vert\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item)\"\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=\"Search...\"\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\"\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)\"\n              ></i>\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)\"\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"] }]
         }], ctorParameters: function () { return [{ type: ViewContentService }, { type: i4.NGXLogger }]; }, propDecorators: { items: [{
                 type: Input
             }], fields: [{
@@ -2194,9 +2280,9 @@ class CardComponent {
     constructor() { }
     ngOnInit() { }
 }
-CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: CardComponent, decorators: [{
+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: [{
             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: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
@@ -2222,10 +2308,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class CardModule {
 }
-CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] });
-CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [CardComponent],
@@ -2251,10 +2337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class ListModule {
 }
-ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: ListModule, imports: [[CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [ListComponent, ListFilterPipe],
@@ -2290,8 +2376,8 @@ class BreadcrumbNavigationComponent {
         this.setBreadcrumbs(this.route);
         this.routerSub = this.router.events
             .pipe(filter(event => event instanceof NavigationEnd))
-            .pipe(map(() => this.route))
-            .pipe(map(route => {
+            .pipe(map$1(() => this.route))
+            .pipe(map$1(route => {
             while (route.firstChild) {
                 route = route.firstChild;
             }
@@ -2340,12 +2426,12 @@ class BreadcrumbNavigationComponent {
         this.routerSub.unsubscribe();
     }
 }
-BreadcrumbNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BreadcrumbNavigationComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$2.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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BreadcrumbNavigationComponent, decorators: [{
+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: [{
             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$2.Router }, { type: i1$2.ActivatedRoute }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.Router }, { type: i1$5.ActivatedRoute }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -2369,12 +2455,12 @@ class PageHeaderComponent {
     }
     ngOnInit() { }
 }
-PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageHeaderComponent, deps: [{ token: i1$8.UserInterfaceService }], target: i0.ɵɵFactoryTarget.Component });
-PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: PageHeaderComponent, decorators: [{
+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: [{
             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$8.UserInterfaceService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.UserInterfaceService }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -2393,10 +2479,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class BreadcrumbNavigationModule {
 }
-BreadcrumbNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BreadcrumbNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BreadcrumbNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BreadcrumbNavigationModule, declarations: [BreadcrumbNavigationComponent], imports: [CommonModule, RouterModule, TranslateModule], exports: [BreadcrumbNavigationComponent] });
-BreadcrumbNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BreadcrumbNavigationModule, imports: [[CommonModule, RouterModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BreadcrumbNavigationModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [BreadcrumbNavigationComponent],
@@ -2422,10 +2508,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class PageHeaderModule {
 }
-PageHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PageHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageHeaderModule, declarations: [PageHeaderComponent], imports: [CommonModule, PageTitleModule, BreadcrumbNavigationModule], exports: [PageHeaderComponent] });
-PageHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageHeaderModule, imports: [[CommonModule, PageTitleModule, BreadcrumbNavigationModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageHeaderModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [PageHeaderComponent],
@@ -2493,9 +2579,9 @@ class WidgetComponent {
         this.isCollapsed = !(this.collapseAble && this.collapse === 'hide');
     }
 }
-WidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: WidgetComponent, decorators: [{
+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: [{
             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: [{
@@ -2537,10 +2623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class WidgetModule {
 }
-WidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WidgetModule, declarations: [WidgetComponent], imports: [CommonModule], exports: [WidgetComponent] });
-WidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WidgetModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WidgetModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [WidgetComponent],
@@ -2574,9 +2660,9 @@ class FieldAutoFocusDirective {
         }, 300);
     }
 }
-FieldAutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FieldAutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-FieldAutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FieldAutoFocusDirective, decorators: [{
+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: [{
             type: Directive,
             args: [{
                     selector: '[valtimoFieldAutoFocus]',
@@ -2600,10 +2686,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class FieldAutoFocusModule {
 }
-FieldAutoFocusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FieldAutoFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FieldAutoFocusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FieldAutoFocusModule, declarations: [FieldAutoFocusDirective], imports: [CommonModule], exports: [FieldAutoFocusDirective] });
-FieldAutoFocusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FieldAutoFocusModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FieldAutoFocusModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [FieldAutoFocusDirective],
@@ -2755,9 +2841,9 @@ class BpmnJsDiagramComponent {
         this.bpmnJS.destroy();
     }
 }
-BpmnJsDiagramComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BpmnJsDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BpmnJsDiagramComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: BpmnJsDiagramComponent, decorators: [{
+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: [{
             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: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { el: [{
@@ -2792,10 +2878,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class BpmnJsDiagramModule {
 }
-BpmnJsDiagramModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BpmnJsDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BpmnJsDiagramModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BpmnJsDiagramModule, declarations: [BpmnJsDiagramComponent], imports: [CommonModule], exports: [BpmnJsDiagramComponent] });
-BpmnJsDiagramModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BpmnJsDiagramModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: BpmnJsDiagramModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [BpmnJsDiagramComponent],
@@ -2821,9 +2907,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class TimelineComponent {
 }
-TimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TimelineComponent, decorators: [{
+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: [{
             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: [""] }]
         }], propDecorators: { items: [{
@@ -2847,10 +2933,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class TimelineModule {
 }
-TimelineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TimelineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TimelineModule, declarations: [TimelineComponent], imports: [CommonModule, TranslateModule], exports: [TimelineComponent] });
-TimelineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TimelineModule, imports: [[CommonModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TimelineModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [TimelineComponent],
@@ -2876,10 +2962,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class ComponentsModule {
 }
-ComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ComponentsModule });
-ComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ComponentsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ComponentsModule, decorators: [{
+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: [{
             type: NgModule
         }] });
 
@@ -2919,9 +3005,9 @@ class FilterSidebarComponent {
         localStorage.setItem('filterSidebar', this.filterSidebar);
     }
 }
-FilterSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FilterSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: FilterSidebarComponent, decorators: [{
+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: [{
             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 []; } });
@@ -2943,10 +3029,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class FilterSidebarModule {
 }
-FilterSidebarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FilterSidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FilterSidebarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FilterSidebarModule, declarations: [FilterSidebarComponent], imports: [CommonModule], exports: [FilterSidebarComponent] });
-FilterSidebarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FilterSidebarModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FilterSidebarModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [FilterSidebarComponent],
@@ -2991,9 +3077,9 @@ class UploaderDragDropDirective {
         }
     }
 }
-UploaderDragDropDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UploaderDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-UploaderDragDropDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: UploaderDragDropDirective, decorators: [{
+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: [{
             type: Directive,
             args: [{
                     selector: '[valtimoUploaderDragDrop]',
@@ -3042,9 +3128,9 @@ class FileSizePipe {
         return bytes.toFixed(+precision) + ' ' + this.units[unit];
     }
 }
-FileSizePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-FileSizePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizePipe, name: "filesize" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizePipe, decorators: [{
+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: [{
             type: Pipe,
             args: [{
                     name: 'filesize',
@@ -3101,12 +3187,12 @@ class UploaderComponent {
         });
     }
 }
-UploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UploaderComponent, deps: [{ token: i1$9.S3Service }], target: i0.ɵɵFactoryTarget.Component });
-UploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: UploaderComponent, decorators: [{
+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: [{
             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$9.S3Service }]; }, propDecorators: { resourcesChanged: [{
+        }], ctorParameters: function () { return [{ type: i1$a.S3Service }]; }, propDecorators: { resourcesChanged: [{
                 type: Output
             }], resourceRegistered: [{
                 type: Output
@@ -3131,10 +3217,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class FileSizeModule {
 }
-FileSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizeModule, declarations: [FileSizePipe], imports: [CommonModule], exports: [FileSizePipe] });
-FileSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizeModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FileSizeModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [FileSizePipe],
@@ -3160,10 +3246,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class UploaderModule {
 }
-UploaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UploaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UploaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UploaderModule, declarations: [UploaderComponent, UploaderDragDropDirective], imports: [CommonModule, FileSizeModule], exports: [UploaderComponent, UploaderDragDropDirective] });
-UploaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UploaderModule, imports: [[CommonModule, FileSizeModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: UploaderModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [UploaderComponent, UploaderDragDropDirective],
@@ -3239,12 +3325,12 @@ class AlertService {
         return this.confirmed;
     }
 }
-AlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-AlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertService, decorators: [{
+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: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.Router }]; } });
 
 /*
  * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -3372,9 +3458,9 @@ class AlertComponent {
         }
     }
 }
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: AlertComponent, decorators: [{
+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: [{
             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 }]; } });
@@ -3396,10 +3482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class AlertModule {
 }
-AlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertModule, declarations: [AlertComponent], imports: [CommonModule], exports: [AlertComponent] });
-AlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -3427,9 +3513,9 @@ class DataListComponent {
     constructor() { }
     ngOnInit() { }
 }
-DataListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: DataListComponent, decorators: [{
+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: [{
             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: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { collection: [{
@@ -3455,10 +3541,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class DataListModule {
 }
-DataListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DataListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataListModule, declarations: [DataListComponent], imports: [CommonModule], exports: [DataListComponent] });
-DataListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataListModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataListModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [DataListComponent],
@@ -3467,6 +3553,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
+/*
+ * 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 FormIoStateService {
     constructor() {
         this._documentDefinitionName$ = new BehaviorSubject(undefined);
@@ -3492,9 +3593,9 @@ class FormIoStateService {
         this._currentForm$.next(form);
     }
 }
-FormIoStateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FormIoStateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoStateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoStateService, decorators: [{
+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: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3517,12 +3618,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * limitations under the License.
  */
 class FormioComponent {
-    constructor(userProviderService, logger, stateService, route, translateService) {
+    constructor(userProviderService, logger, stateService, route, translateService, modalService) {
         this.userProviderService = userProviderService;
         this.logger = logger;
         this.stateService = stateService;
         this.route = route;
         this.translateService = translateService;
+        this.modalService = modalService;
         this.submission = {};
         // eslint-disable-next-line @angular-eslint/no-output-native
         this.submit = new EventEmitter();
@@ -3535,8 +3637,7 @@ class FormioComponent {
     ngOnInit() {
         const documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName');
         const documentId = this.route.snapshot.paramMap.get('documentId');
-        const formDefinition = this.form;
-        this.formDefinition = formDefinition;
+        this.formDefinition = this.form;
         this.errors = [];
         this.setInitialToken();
         if (documentDefinitionName) {
@@ -3549,8 +3650,7 @@ class FormioComponent {
         this.openLanguageSubscription();
     }
     ngOnChanges(changes) {
-        const currentForm = changes.form.currentValue;
-        this.formDefinition = currentForm;
+        this.formDefinition = changes.form.currentValue;
         this.reloadForm();
         this.setInitialToken();
         if (changes.formDefinitionRefresh$) {
@@ -3582,10 +3682,14 @@ class FormioComponent {
     onChange(object) {
         this.change.emit(object);
     }
-    formHasLegacyUpload(formDefinition) {
-        const stringifiedFormDefinition = JSON.stringify(formDefinition);
-        const legacyUploadString = '"type":"file"';
-        return stringifiedFormDefinition.includes(legacyUploadString);
+    nextPage() {
+        this.scrollToTop();
+    }
+    prevPage() {
+        this.scrollToTop();
+    }
+    scrollToTop() {
+        this.modalService.scrollToTop();
     }
     setInitialToken() {
         this.userProviderService.getToken().then((token) => {
@@ -3610,7 +3714,7 @@ class FormioComponent {
     }
     refreshToken() {
         from(this.userProviderService.updateToken(-1))
-            .pipe(switchMap(() => this.userProviderService.getToken()), take(1))
+            .pipe(switchMap$1(() => this.userProviderService.getToken()), take(1))
             .subscribe(token => {
             this.setToken(token);
         });
@@ -3635,12 +3739,12 @@ class FormioComponent {
         });
     }
 }
-FormioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormioComponent, deps: [{ token: i1$4.UserProviderService }, { token: i4.NGXLogger }, { token: FormIoStateService }, { token: i1$2.ActivatedRoute }, { token: i1$6.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-FormioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [language]=\"currentLanguage$ | async\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n  ></formio>\n</div>\n", styles: [""], components: [{ type: i6.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.9", ngImport: i0, type: FormioComponent, decorators: [{
+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    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [language]=\"currentLanguage$ | async\"\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: [{
             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    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [language]=\"currentLanguage$ | async\"\n    (submit)=\"onSubmit($event)\"\n    (ready)=\"formReady($event)\"\n    (change)=\"onChange($event)\"\n  ></formio>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i1$4.UserProviderService }, { type: i4.NGXLogger }, { type: FormIoStateService }, { type: i1$2.ActivatedRoute }, { type: i1$6.TranslateService }]; }, 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    [submission]=\"submission\"\n    [form]=\"formDefinition\"\n    [refresh]=\"refreshForm\"\n    [options]=\"options\"\n    [language]=\"currentLanguage$ | async\"\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: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -3679,9 +3783,9 @@ class FormioBuilderComponent {
         this.change.emit(event);
     }
 }
-FormioBuilderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormioBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormioBuilderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: i6.FormBuilderComponent, selector: "form-builder", inputs: ["noeval", "form", "options", "formbuilder", "refresh", "rebuild"], outputs: ["change"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormioBuilderComponent, decorators: [{
+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: [{
             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: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { form: [{
@@ -3712,6 +3816,21 @@ const AppConfig = {
     formOnly: false,
 };
 
+/*
+ * 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 FormIoDomService {
     constructor(stateService) {
         this.stateService = stateService;
@@ -3725,9 +3844,9 @@ class FormIoDomService {
         });
     }
 }
-FormIoDomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoDomService, deps: [{ token: FormIoStateService }], target: i0.ɵɵFactoryTarget.Injectable });
-FormIoDomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoDomService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoDomService, decorators: [{
+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: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: FormIoStateService }]; } });
 
@@ -3748,11 +3867,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class ProgressBarComponent {
 }
-ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ProgressBarComponent, selector: "valtimo-progress-bar", ngImport: i0, template: "<div class=\"progress\" style=\"position: relative\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\"></div>\n</div>\n", styles: [".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.9", ngImport: i0, type: ProgressBarComponent, decorators: [{
+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: [{
             type: Component,
-            args: [{ selector: 'valtimo-progress-bar', template: "<div class=\"progress\" style=\"position: relative\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\"></div>\n</div>\n", styles: [".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"] }]
+            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"] }]
         }] });
 
 /*
@@ -3842,11 +3961,11 @@ class WebcamComponent {
         return new File([blob], imgFileName);
     }
 }
-WebcamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WebcamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WebcamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: WebcamComponent, selector: "valtimo-webcam", outputs: { imageSaved: "imageSaved" }, ngImport: i0, template: "<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: [".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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WebcamComponent, decorators: [{
+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: [{
             type: Component,
-            args: [{ selector: 'valtimo-webcam', template: "<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: [".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"] }]
+            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: [{
                 type: Output
             }] } });
@@ -3888,7 +4007,7 @@ class DropzoneComponent {
             this.translateService.stream('dropzone.error.generic'),
             this.translateService.stream('dropzone.error.tooBig'),
             this.translateService.stream('dropzone.error.wrongType'),
-        ]).pipe(map(([dropzoneError, generic, tooBig, wrongType]) => {
+        ]).pipe(map$1(([dropzoneError, generic, tooBig, wrongType]) => {
             const strings = this.errorMessagesStrings;
             if (dropzoneError) {
                 if (dropzoneError.includes(strings.tooBig)) {
@@ -3961,12 +4080,12 @@ class DropzoneComponent {
         this.fileSelected.emit(file);
     }
 }
-DropzoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropzoneComponent, deps: [{ token: i1$6.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-DropzoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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" }, outputs: { fileSelected: "fileSelected" }, viewQueries: [{ propertyName: "dropzoneRef", first: true, predicate: ["dropzone"], descendants: true }], ngImport: i0, template: "<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: ["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$6.TranslatePipe, "filesize": FileSizePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropzoneComponent, decorators: [{
+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" }, 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: [{
             type: Component,
-            args: [{ selector: 'valtimo-dropzone', template: "<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: ["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$6.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$8.TranslateService }]; }, propDecorators: { dropzoneRef: [{
                 type: ViewChild,
                 args: ['dropzone']
             }], title: [{
@@ -3997,6 +4116,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Output
             }] } });
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 class FormIoUploaderComponent {
     constructor(uploadProviderService, stateService, domService, downloadService) {
         this.uploadProviderService = uploadProviderService;
@@ -4040,12 +4174,12 @@ class FormIoUploaderComponent {
         this.valueChange.emit(this._value);
     }
 }
-FormIoUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoUploaderComponent, deps: [{ token: i1$9.UploadProviderService }, { token: FormIoStateService }, { token: FormIoDomService }, { token: i1$9.DownloadService }], target: i0.ɵɵFactoryTarget.Component });
-FormIoUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "<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: [".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"], 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.9", ngImport: i0, type: FormIoUploaderComponent, decorators: [{
+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"], 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: [{
             type: Component,
-            args: [{ selector: 'valtimo-formio-uploader', template: "<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: [".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$9.UploadProviderService }, { type: FormIoStateService }, { type: FormIoDomService }, { type: i1$9.DownloadService }]; }, propDecorators: { disabled: [{
+            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: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -4082,10 +4216,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class ProgressBarModule {
 }
-ProgressBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ProgressBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent], imports: [CommonModule], exports: [ProgressBarComponent] });
-ProgressBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ProgressBarModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ProgressBarModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [ProgressBarComponent],
@@ -4111,10 +4245,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class WebcamModule {
 }
-WebcamModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WebcamModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-WebcamModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WebcamModule, declarations: [WebcamComponent], imports: [CommonModule, TranslateModule], exports: [WebcamComponent] });
-WebcamModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WebcamModule, imports: [[CommonModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: WebcamModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [WebcamComponent],
@@ -4140,10 +4274,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class DropzoneModule {
 }
-DropzoneModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropzoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropzoneModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", 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.9", ngImport: i0, type: DropzoneModule, imports: [[CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropzoneModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [DropzoneComponent],
@@ -4169,8 +4303,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class FormIoModule {
 }
-FormIoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoModule, declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent], imports: [CommonModule,
+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, FormioBuilderComponent, FormIoUploaderComponent], imports: [CommonModule,
         FormioModule,
         DropzoneModule,
         TranslateModule,
@@ -4178,7 +4312,7 @@ FormIoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileSizeModule,
         ResourceModule,
         RouterModule], exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent] });
-FormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoModule, providers: [FormIoDomService, { provide: FormioAppConfig, useValue: AppConfig }], imports: [[
+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,
@@ -4188,7 +4322,7 @@ FormIoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             ResourceModule,
             RouterModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormIoModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FormIoModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -4223,11 +4357,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * limitations under the License.
  */
 class ModalComponent {
-    constructor() {
+    constructor(modalService) {
+        this.modalService = modalService;
         this.title = '';
         this.subtitle = '';
         this.showFooter = false;
     }
+    ngOnInit() {
+        this.openScrollSubscription();
+    }
     ngAfterViewInit() {
         $(`#${this.elementId}`).modal({ show: false });
     }
@@ -4237,13 +4375,23 @@ class ModalComponent {
     hide() {
         $(`#${this.elementId}`).modal('hide');
     }
+    ngOnDestroy() {
+        this.scrollSubscription.unsubscribe();
+    }
+    openScrollSubscription() {
+        this.scrollSubscription = this.modalService.scrollToTop$.subscribe(() => {
+            const element = this.scrollModal.nativeElement;
+            if (element)
+                element.scrollTo(0, 0);
+        });
+    }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalComponent, selector: "valtimo-modal", inputs: { elementId: "elementId", title: "title", subtitle: "subtitle", templateBelowSubtitle: "templateBelowSubtitle", showFooter: "showFooter" }, 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\">\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.9", ngImport: i0, type: ModalComponent, decorators: [{
+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: [{
             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\">\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 []; }, propDecorators: { elementId: [{
+            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: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -4253,6 +4401,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input
             }], showFooter: [{
                 type: Input
+            }], scrollModal: [{
+                type: ViewChild,
+                args: ['scrollModal']
             }] } });
 
 /*
@@ -4272,10 +4423,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class ModalModule {
 }
-ModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalModule, declarations: [ModalComponent], imports: [CommonModule], exports: [ModalComponent] });
-ModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [ModalComponent],
@@ -4310,9 +4461,9 @@ class SpinnerComponent {
         this.noMarginTop = false;
     }
 }
-SpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$a.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$6.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SpinnerComponent, decorators: [{
+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: [{
             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: [{
@@ -4350,10 +4501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class SpinnerModule {
 }
-SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule, NgxSpinnerModule, TranslateModule], exports: [SpinnerComponent] });
-SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SpinnerModule, imports: [[CommonModule, NgxSpinnerModule, TranslateModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SpinnerModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [SpinnerComponent],
@@ -4524,11 +4675,11 @@ class SearchableDropdownComponent {
         });
     }
 }
-SearchableDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchableDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "<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 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 class=\"underline-button\" (click)=\"openDropdown()\" [style.width.px]=\"width\">\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"dropdown-container\" [style.width.px]=\"width\">\n    <div class=\"dropdown-size 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 class=\"dropdown-list\" (mouseenter)=\"mouseEnterList()\" (mouseleave)=\"mouseLeaveList()\">\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=\"dropdown-button dropdown-size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"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 class=\"dropdown-button dropdown-size disabled\" [style.width.px]=\"width\">\n    <span class=\"dropdown-button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div *ngIf=\"style === 'button' || !style\" class=\"dropdown-size\" [style.width.px]=\"width\"></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"underline-button\"><b>-</b></h5>\n</ng-template>\n", styles: [".dropdown-size{width:250px;height:34px}.underline-button{text-decoration:underline;width:250px;cursor:pointer}.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}.dropdown-list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.search input{width:100%;border:none;outline:none;padding:0}.search input:focus{border:none;outline:none}.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}.dropdown-button.focus{background-color:#f5f5f5}.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.9", ngImport: i0, type: SearchableDropdownComponent, decorators: [{
+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: [{
             type: Component,
-            args: [{ selector: 'valtimo-searchable-dropdown', template: "<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 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 class=\"underline-button\" (click)=\"openDropdown()\" [style.width.px]=\"width\">\n      <b>\n        {{ buttonText }}\n      </b>\n    </h5>\n  </ng-container>\n</ng-template>\n\n<ng-template #opened>\n  <div class=\"dropdown-container\" [style.width.px]=\"width\">\n    <div class=\"dropdown-size 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 class=\"dropdown-list\" (mouseenter)=\"mouseEnterList()\" (mouseleave)=\"mouseLeaveList()\">\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=\"dropdown-button dropdown-size\"\n            (click)=\"submit(item.id)\"\n            (mouseenter)=\"hoverOverButton(item.id)\"\n            (mouseleave)=\"resetFocus()\"\n            [style.width.px]=\"width\"\n          >\n            <span class=\"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 class=\"dropdown-button dropdown-size disabled\" [style.width.px]=\"width\">\n    <span class=\"dropdown-button-text\">{{ noResultsText }}</span>\n  </div>\n</ng-template>\n\n<ng-template #space>\n  <div *ngIf=\"style === 'button' || !style\" class=\"dropdown-size\" [style.width.px]=\"width\"></div>\n  <h5 *ngIf=\"style === 'underlinedText'\" class=\"underline-button\"><b>-</b></h5>\n</ng-template>\n", styles: [".dropdown-size{width:250px;height:34px}.underline-button{text-decoration:underline;width:250px;cursor:pointer}.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}.dropdown-list{list-style:none;padding:0;margin:0;overflow:auto;overflow-x:hidden;z-index:9999}.search{border-bottom:1px solid #dee2e6;padding:8px 24px;display:flex;align-items:center;flex-shrink:0;height:44px}.search input{width:100%;border:none;outline:none;padding:0}.search input:focus{border:none;outline:none}.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}.dropdown-button.focus{background-color:#f5f5f5}.dropdown-button-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.disabled{pointer-events:none;color:#959595;cursor:default}\n"] }]
+            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: [{
                 type: Input
             }], items: [{
@@ -4573,10 +4724,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class SearchableDropdownModule {
 }
-SearchableDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchableDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownModule, declarations: [SearchableDropdownComponent], imports: [CommonModule, ReactiveFormsModule], exports: [SearchableDropdownComponent] });
-SearchableDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownModule, imports: [[CommonModule, ReactiveFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [SearchableDropdownComponent],
@@ -4585,6 +4736,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 const formIoUploaderEditForm = () => ({
     components: [
         { key: 'type', type: 'hidden' },
@@ -4675,6 +4841,21 @@ const formIoUploaderEditForm = () => ({
     ],
 });
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 const customUploaderType = 'valtimo-file';
 const COMPONENT_OPTIONS = {
     type: customUploaderType,
@@ -4700,6 +4881,21 @@ function registerFormioUploadComponent(injector) {
     }
 }
 
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 const SelectComponent = Components.components.select;
 function registerFormioFileSelectorComponent(injector) {
     const documentService = injector.get(DocumentService);
@@ -4793,11 +4989,11 @@ class SearchableDropdownSelectComponent {
         this.clearSelection.emit();
     }
 }
-SearchableDropdownSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchableDropdownSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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: "<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: [".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.9", ngImport: i0, type: SearchableDropdownSelectComponent, decorators: [{
+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: [{
             type: Component,
-            args: [{ selector: 'valtimo-searchable-dropdown-select', template: "<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: [".selected-text{margin:0}.clear-icon{font-size:16px}\n"] }]
+            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: [{
                 type: Input
             }], items: [{
@@ -4843,10 +5039,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class SearchableDropdownSelectModule {
 }
-SearchableDropdownSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SearchableDropdownSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownSelectModule, declarations: [SearchableDropdownSelectComponent], imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule], exports: [SearchableDropdownSelectComponent] });
-SearchableDropdownSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownSelectModule, imports: [[CommonModule, ReactiveFormsModule, SearchableDropdownModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SearchableDropdownSelectModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [SearchableDropdownSelectComponent],
@@ -4886,9 +5082,9 @@ class MultiselectDropdownComponent {
         this.itemsSelected.emit(this.selectedItems);
     }
 }
-MultiselectDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MultiselectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiselectDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", 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$b.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.9", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
+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: [{
             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: [""] }]
         }], propDecorators: { selectedItems: [{
@@ -4920,10 +5116,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  */
 class MultiselectDropdownModule {
 }
-MultiselectDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MultiselectDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MultiselectDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MultiselectDropdownModule, declarations: [MultiselectDropdownComponent], imports: [CommonModule, ReactiveFormsModule, NgMultiSelectDropDownModule, FormsModule], exports: [MultiselectDropdownComponent] });
-MultiselectDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MultiselectDropdownModule, imports: [[CommonModule, ReactiveFormsModule, NgMultiSelectDropDownModule, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: MultiselectDropdownModule, decorators: [{
+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: [{
             type: NgModule,
             args: [{
                     declarations: [MultiselectDropdownComponent],
@@ -4952,5 +5148,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, 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, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerComponent, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customUploaderType, menuInitializer, registerFormioFileSelectorComponent, registerFormioUploadComponent };
+export { Alert, AlertComponent, AlertModule, AlertService, AlertType, AlertsOptionsImpl, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, 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, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerComponent, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ValtimoModalService, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customUploaderType, menuInitializer, registerFormioFileSelectorComponent, registerFormioUploadComponent };
 //# sourceMappingURL=valtimo-components.mjs.map