@valtimo/components 4.15.3-next-main.14 → 4.16.0

package/fesm2015/valtimo-components.js

@@ -5,7 +5,7 @@ import * as momentImported from 'moment';
 import { ChoicefieldService } from '@valtimo/choicefield';
 import { RouterModule, NavigationEnd, Router, ActivatedRoute, PRIMARY_OUTLET, NavigationStart } from '@angular/router';
 import { NGXLogger } from 'ngx-logger';
-import { ConfigService } from '@valtimo/config';
+import { ConfigService, HttpLoaderFactory } from '@valtimo/config';
 import { BehaviorSubject, Observable, combineLatest, fromEvent, Subscription, Subject, timer, from } from 'rxjs';
 import { DocumentService, DocumentModule } from '@valtimo/document';
 import { UserProviderService } from '@valtimo/security';
@@ -13,17 +13,154 @@ import { NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstra
 import { TranslateModule, TranslateService, TranslateLoader } from '@ngx-translate/core';
 import { HttpClient } from '@angular/common/http';
 import { ContextService } from '@valtimo/context';
-import { HttpLoaderFactory, S3Resource, Alert, AlertType } from '@valtimo/contract';
 import { map, debounceTime, take, filter, switchMap } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
 import * as BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
 import { create } from 'heatmap.js-fixed/build/heatmap.js';
-import { S3Service, UploadProviderService, DownloadService, ResourceModule } from '@valtimo/resource';
+import { S3Resource, S3Service, UploadProviderService, DownloadService, ResourceModule } from '@valtimo/resource';
 import { Formio, FormioModule, FormioAppConfig, createCustomFormioComponent, registerCustomFormioComponentWithClass } from 'angular-formio';
 import jwt_decode from 'jwt-decode';
 import * as Dropzone from 'dropzone';
 import { NgxSpinnerModule } from 'ngx-spinner';
 
+/*
+ * 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 Alert {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+var AlertType;
+(function (AlertType) {
+    AlertType[AlertType["Success"] = 0] = "Success";
+    AlertType[AlertType["Error"] = 1] = "Error";
+    AlertType[AlertType["Info"] = 2] = "Info";
+    AlertType[AlertType["Warning"] = 3] = "Warning";
+    AlertType[AlertType["Notification"] = 4] = "Notification";
+    AlertType[AlertType["ModalNotification"] = 5] = "ModalNotification";
+})(AlertType || (AlertType = {}));
+
+/*
+ * 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 AlertsOptionsImpl {
+    constructor(submitMessage) {
+        this.submitMessage = submitMessage;
+    }
+}
+class FormioOptionsImpl {
+    constructor() { }
+    setAlertMessage(submitMessage) {
+        this.alerts = new AlertsOptionsImpl(submitMessage);
+    }
+    setHooks(beforeSubmit) {
+        this.hooks = { beforeSubmit: beforeSubmit };
+    }
+}
+
+/*
+ * 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 TimelineItemImpl {
+    constructor(date, time, user, activity, summaryTranslationKey, summaryTranslationParams) {
+        this._date = date;
+        this._time = time;
+        this._user = user;
+        this._activity = activity;
+        this._summaryTranslationKey = summaryTranslationKey;
+        this._summaryTranslationParams = summaryTranslationParams;
+    }
+    get date() {
+        return this._date;
+    }
+    get time() {
+        return this._time;
+    }
+    get user() {
+        return this._user;
+    }
+    get activity() {
+        return this._activity;
+    }
+    get summaryTranslationKey() {
+        return this._summaryTranslationKey;
+    }
+    get summaryTranslationParams() {
+        return this._summaryTranslationParams;
+    }
+}
+
+/*
+ * 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.
  *
@@ -50,7 +187,7 @@ class CamundaFormComponent {
 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 *ngIf=\"formFields\"\n                                  [formFields]=\"formFields\"\n                                  (submitted)=\"onSubmitted($event)\">\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"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaFormComponent.ctorParameters = () => [];
@@ -89,7 +226,7 @@ class CamundaCustomFormComponent {
 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\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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: [""]
             },] }
 ];
@@ -120,15 +257,9 @@ class CamundaCustomFormModule {
 }
 CamundaCustomFormModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [
-                    CamundaCustomFormComponent
-                ],
-                imports: [
-                    CommonModule
-                ],
-                exports: [
-                    CamundaCustomFormComponent
-                ]
+                declarations: [CamundaCustomFormComponent],
+                imports: [CommonModule],
+                exports: [CamundaCustomFormComponent],
             },] }
 ];
 
@@ -161,8 +292,8 @@ function minDate(minDateIn) {
             return {
                 minDate: {
                     minDate: momentMinDate.format(DATE_FORMAT),
-                    actual: controlDate.format(DATE_FORMAT)
-                }
+                    actual: controlDate.format(DATE_FORMAT),
+                },
             };
         }
         else {
@@ -181,8 +312,8 @@ function maxDate(maxDateIn) {
             return {
                 maxDate: {
                     maxDate: momentMaxDate.format(DATE_FORMAT),
-                    actual: controlDate.format(DATE_FORMAT)
-                }
+                    actual: controlDate.format(DATE_FORMAT),
+                },
             };
         }
         else {
@@ -207,8 +338,7 @@ function maxDate(maxDateIn) {
  * limitations under the License.
  */
 class CamundaFormfieldService {
-    constructor() {
-    }
+    constructor() { }
     isFormFieldDisabled(formField) {
         return formField.validationConstraints.filter(vc => vc.name === 'readonly').length > 0;
     }
@@ -249,7 +379,7 @@ class CamundaFormfieldService {
 CamundaFormfieldService.ɵprov = ɵɵdefineInjectable({ factory: function CamundaFormfieldService_Factory() { return new CamundaFormfieldService(); }, token: CamundaFormfieldService, providedIn: "root" });
 CamundaFormfieldService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 CamundaFormfieldService.ctorParameters = () => [];
@@ -285,7 +415,7 @@ class CamundaGeneratedFormComponent {
         this.formFields.forEach(formField => {
             const control = new FormControl({
                 value: formField.defaultValue,
-                disabled: this.camundaFormFieldService.isFormFieldDisabled(formField)
+                disabled: this.camundaFormFieldService.isFormFieldDisabled(formField),
             }, this.camundaFormFieldService.getValidatorTypes(formField));
             group.addControl(formField.id, control);
         });
@@ -306,7 +436,7 @@ class CamundaGeneratedFormComponent {
 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    <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 class=\"btn btn-space btn-default float-left\" type=\"button\" (click)=\"back()\" id=\"back-button\">\n          Back\n        </button>\n        <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\" id=\"reset-button\">Reset</button>\n        <button class=\"btn btn-space btn-primary\"\n                [disabled]=\"!formGroup.disabled && !formGroup.valid\"\n                type=\"submit\"\n                id=\"submit-button\">\n          Submit\n        </button>\n      </div>\n    </div>\n  </div>\n</form>\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaGeneratedFormComponent.ctorParameters = () => [
@@ -335,13 +465,12 @@ CamundaGeneratedFormComponent.propDecorators = {
  * limitations under the License.
  */
 class CamundaStringFormfieldComponent {
-    constructor() {
-    }
+    constructor() { }
 }
 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 id=\"{{ formField.id }}\"\n           class=\"form-control\"\n           type=\"text\"\n           [attr.placeholder]=\"formField.defaultValue\"\n           [formControlName]=\"formField.id\"/>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaStringFormfieldComponent.ctorParameters = () => [];
@@ -362,13 +491,12 @@ CamundaStringFormfieldComponent.ctorParameters = () => [];
  * limitations under the License.
  */
 class CamundaBooleanFormfieldComponent {
-    constructor() {
-    }
+    constructor() { }
 }
 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      <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      <span class=\"custom-control-label custom-control-color\">No</span>\n    </label>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaBooleanFormfieldComponent.ctorParameters = () => [];
@@ -402,9 +530,9 @@ class CamundaDateFormfieldComponent {
             componentIcon: '.mdi.mdi-calendar',
             navIcons: {
                 rightIcon: 'mdi mdi-chevron-right',
-                leftIcon: 'mdi mdi-chevron-left'
+                leftIcon: 'mdi mdi-chevron-left',
             },
-            format: 'dd-mm-yyyy'
+            format: 'dd-mm-yyyy',
         };
     }
     ngAfterViewInit() {
@@ -421,7 +549,7 @@ class CamundaDateFormfieldComponent {
         $(this.INPUT_SELECTOR).datetimepicker(this.datePickerOptions);
         $(this.INPUT_SELECTOR).on('changeDate', function (e) {
             formGroup.patchValue({
-                [formField.id]: moment$1(e.date.valueOf()).format('DD/MM/YYYY')
+                [formField.id]: moment$1(e.date.valueOf()).format('DD/MM/YYYY'),
             });
         });
     }
@@ -429,7 +557,7 @@ class CamundaDateFormfieldComponent {
 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    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaDateFormfieldComponent.ctorParameters = () => [
@@ -452,13 +580,12 @@ CamundaDateFormfieldComponent.ctorParameters = () => [
  * limitations under the License.
  */
 class CamundaLongFormfieldComponent {
-    constructor() {
-    }
+    constructor() { }
 }
 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 id=\"{{ formField.id }}\"\n           class=\"form-control\"\n           type=\"number\"\n           [attr.placeholder]=\"formField.defaultValue\"\n           [formControlName]=\"formField.id\"/>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaLongFormfieldComponent.ctorParameters = () => [];
@@ -479,8 +606,7 @@ CamundaLongFormfieldComponent.ctorParameters = () => [];
  * limitations under the License.
  */
 class CamundaEnumFormfieldComponent {
-    constructor() {
-    }
+    constructor() { }
     ngOnInit() {
         this.valueKeys = Object.keys(this.formField.type.values);
     }
@@ -488,7 +614,7 @@ class CamundaEnumFormfieldComponent {
 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\n      class=\"form-control\"\n      id=\"{{ formField.id }}\"\n      [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\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaEnumFormfieldComponent.ctorParameters = () => [];
@@ -509,13 +635,12 @@ CamundaEnumFormfieldComponent.ctorParameters = () => [];
  * limitations under the License.
  */
 class CamundaTextareaFormfieldComponent {
-    constructor() {
-    }
+    constructor() { }
 }
 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 id=\"{{ formField.id }}\"\n              class=\"form-control\"\n              [attr.placeholder]=\"formField.defaultValue\"\n              [formControlName]=\"formField.id\"></textarea>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaTextareaFormfieldComponent.ctorParameters = () => [];
@@ -541,7 +666,9 @@ class CamundaChoicefieldFormfieldComponent {
         this.choicefieldValues = [];
     }
     ngOnInit() {
-        this.choicefieldService.getChoiceFieldValuesByName(this.formField.properties['choicefield']).subscribe(data => {
+        this.choicefieldService
+            .getChoiceFieldValuesByName(this.formField.properties['choicefield'])
+            .subscribe(data => {
             this.choicefieldValues = data;
         });
     }
@@ -549,7 +676,7 @@ class CamundaChoicefieldFormfieldComponent {
 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\n      class=\"form-control\"\n      id=\"{{ formField.id }}\"\n      [formControlName]=\"formField.id\">\n      <option selected=\"selected\" value=\"\"></option>\n      <ng-container *ngFor=\"let choicefieldValue of choicefieldValues\">\n        <option *ngIf=\"!choicefieldValue.deprecated\"\n                [value]=\"choicefieldValue.value\"\n                id=\"option_{{ choicefieldValue.value }}\">\n          {{ choicefieldValue.name }}\n        </option>\n      </ng-container>\n    </select>\n    <valtimo-camunda-formfield-validation\n      [formGroup]=\"formGroup\"\n      [formField]=\"formField\">\n    </valtimo-camunda-formfield-validation>\n  </div>\n</div>\n"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaChoicefieldFormfieldComponent.ctorParameters = () => [
@@ -582,7 +709,7 @@ class CamundaFormfieldGeneratorDirective {
             long: CamundaLongFormfieldComponent,
             enum: CamundaEnumFormfieldComponent,
             textarea: CamundaTextareaFormfieldComponent,
-            choicefield: CamundaChoicefieldFormfieldComponent
+            choicefield: CamundaChoicefieldFormfieldComponent,
         };
     }
     ngOnInit() {
@@ -599,7 +726,7 @@ class CamundaFormfieldGeneratorDirective {
 }
 CamundaFormfieldGeneratorDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[valtimoCamundaFormfieldGenerator]'
+                selector: '[valtimoCamundaFormfieldGenerator]',
             },] }
 ];
 CamundaFormfieldGeneratorDirective.ctorParameters = () => [
@@ -627,8 +754,7 @@ CamundaFormfieldGeneratorDirective.propDecorators = {
  * limitations under the License.
  */
 class CamundaFormfieldValidationComponent {
-    constructor() {
-    }
+    constructor() { }
     ngOnInit() {
         this.formControl = this.formGroup.get(this.formField.id);
     }
@@ -636,7 +762,7 @@ class CamundaFormfieldValidationComponent {
 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 class=\"parsley-errors-list filled\"\n    *ngIf=\"formControl.invalid && (formControl.dirty || formControl.touched)\">\n  <li *ngIf=\"formControl.errors.required\">\n    This field is required.\n  </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"
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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"
             },] }
 ];
 CamundaFormfieldValidationComponent.ctorParameters = () => [];
@@ -674,15 +800,10 @@ CamundaGeneratedFormModule.decorators = [
                     CamundaTextareaFormfieldComponent,
                     CamundaChoicefieldFormfieldComponent,
                     CamundaFormfieldValidationComponent,
-                    CamundaGeneratedFormComponent
-                ],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule
-                ],
-                exports: [
-                    CamundaGeneratedFormComponent
+                    CamundaGeneratedFormComponent,
                 ],
+                imports: [CommonModule, ReactiveFormsModule],
+                exports: [CamundaGeneratedFormComponent],
                 entryComponents: [
                     CamundaStringFormfieldComponent,
                     CamundaBooleanFormfieldComponent,
@@ -690,8 +811,8 @@ CamundaGeneratedFormModule.decorators = [
                     CamundaLongFormfieldComponent,
                     CamundaEnumFormfieldComponent,
                     CamundaTextareaFormfieldComponent,
-                    CamundaChoicefieldFormfieldComponent
-                ]
+                    CamundaChoicefieldFormfieldComponent,
+                ],
             },] }
 ];
 
@@ -714,17 +835,9 @@ class CamundaFormModule {
 }
 CamundaFormModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [
-                    CamundaFormComponent
-                ],
-                imports: [
-                    CommonModule,
-                    CamundaGeneratedFormModule,
-                    CamundaCustomFormModule
-                ],
-                exports: [
-                    CamundaFormComponent
-                ]
+                declarations: [CamundaFormComponent],
+                imports: [CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule],
+                exports: [CamundaFormComponent],
             },] }
 ];
 
@@ -744,8 +857,7 @@ CamundaFormModule.decorators = [
  * limitations under the License.
  */
 class TopbarComponent {
-    constructor() {
-    }
+    constructor() { }
 }
 TopbarComponent.decorators = [
     { type: Component, args: [{
@@ -776,11 +888,8 @@ class TopbarModule {
 TopbarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [TopbarComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule
-                ],
-                exports: [TopbarComponent]
+                imports: [CommonModule, RouterModule],
+                exports: [TopbarComponent],
             },] }
 ];
 
@@ -825,7 +934,7 @@ class MenuService {
             menuItems.push(menuItem);
         });
         menuItems = this.sortMenuItems(menuItems);
-        this.appendDossierSubMenuItems(menuItems).subscribe(value => menuItems = this.applyMenuRoleSecurity(value));
+        this.appendDossierSubMenuItems(menuItems).subscribe(value => (menuItems = this.applyMenuRoleSecurity(value)));
         return menuItems;
     }
     sortMenuItems(menuItems) {
@@ -837,13 +946,12 @@ class MenuService {
         return new Observable(subscriber => {
             this.logger.debug('appendDossierSubMenuItems');
             this.documentService.getAllDefinitions().subscribe(definitions => {
-                const dossierMenuItems = definitions.content
-                    .map((definition, index) => ({
+                const dossierMenuItems = definitions.content.map((definition, index) => ({
                     link: ['/dossiers/' + definition.id.name],
                     title: definition.schema.title,
                     iconClass: 'icon mdi mdi-dot-circle',
                     sequence: index,
-                    show: true
+                    show: true,
                 }));
                 this.logger.debug('found dossierMenuItems', dossierMenuItems);
                 const menuItemIndex = menuItems.findIndex(({ title }) => title === 'Dossiers');
@@ -890,7 +998,7 @@ class MenuService {
 MenuService.ɵprov = ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(ɵɵinject(ConfigService), ɵɵinject(DocumentService), ɵɵinject(UserProviderService), ɵɵinject(NGXLogger)); }, token: MenuService, providedIn: "root" });
 MenuService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 MenuService.ctorParameters = () => [
@@ -920,10 +1028,8 @@ class MenuRoutingModule {
 }
 MenuRoutingModule.decorators = [
     { type: NgModule, args: [{
-                imports: [
-                    RouterModule.forChild(routes)
-                ],
-                exports: [RouterModule]
+                imports: [RouterModule.forChild(routes)],
+                exports: [RouterModule],
             },] }
 ];
 
@@ -951,7 +1057,7 @@ class MenuComponent {
     }
     ngOnInit() {
         this.openRouterSubscription();
-        this.menuItemSubscription = this.menuService.menuItems$.subscribe(value => this.menuItems = value);
+        this.menuItemSubscription = this.menuService.menuItems$.subscribe(value => (this.menuItems = value));
     }
     ngOnDestroy() {
         this.routerSubscription.unsubscribe();
@@ -1010,11 +1116,13 @@ MenuItemTextComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-menu-item-text',
                 template: `
-    <i class="{{ menuItem.iconClass }}"
-       container="body"
-       placement="right"
-       ngbTooltip="{{ menuItem.title | translate }}"
-       autoClose="true">
+    <i
+      class="{{ menuItem.iconClass }}"
+      container="body"
+      placement="right"
+      ngbTooltip="{{ menuItem.title | translate }}"
+      autoClose="true"
+    >
     </i>
     <span>{{ menuItem.title | translate }}</span>
   `
@@ -1046,7 +1154,7 @@ SubmenuItemTextComponent.decorators = [
                 selector: 'valtimo-submenu-item-text',
                 template: `
     <span [ngClass]="submenuItem.textClass">
-    {{ submenuItem.title | translate }}
+      {{ submenuItem.title | translate }}
       <ng-container *ngIf="!submenuItem.link">&gt;</ng-container>
     </span>
   `
@@ -1076,14 +1184,9 @@ class MenuModule {
 MenuModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [MenuComponent, MenuItemTextComponent, SubmenuItemTextComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule,
-                    NgbTooltipModule,
-                    TranslateModule
-                ],
+                imports: [CommonModule, RouterModule, NgbTooltipModule, TranslateModule],
                 exports: [MenuComponent],
-                providers: []
+                providers: [],
             },] }
 ];
 
@@ -1147,7 +1250,7 @@ class VersionService {
 VersionService.ɵprov = ɵɵdefineInjectable({ factory: function VersionService_Factory() { return new VersionService(ɵɵinject(HttpClient)); }, token: VersionService, providedIn: "root" });
 VersionService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 VersionService.ctorParameters = () => [
@@ -1187,7 +1290,7 @@ class RightSidebarComponent {
             'emailNotificationOnThursday',
             'emailNotificationOnFriday',
             'emailNotificationOnSaturday',
-            'emailNotificationOnSunday'
+            'emailNotificationOnSunday',
         ];
         this.settingsForm = this.formBuilder.group({
             taskNotifications: new FormControl(false),
@@ -1198,13 +1301,15 @@ class RightSidebarComponent {
             emailNotificationOnThursday: new FormControl(false),
             emailNotificationOnFriday: new FormControl(false),
             emailNotificationOnSaturday: new FormControl(false),
-            emailNotificationOnSunday: new FormControl(false)
+            emailNotificationOnSunday: new FormControl(false),
         });
         this.getUserSettings();
     }
     loadContextSwitch() {
-        combineLatest([this.contextService.getUserContexts(), this.contextService.getUserContextActive()])
-            .subscribe(([userContexts, userContextActive]) => {
+        combineLatest([
+            this.contextService.getUserContexts(),
+            this.contextService.getUserContextActive(),
+        ]).subscribe(([userContexts, userContextActive]) => {
             this.userContextActive = userContextActive;
             this.userContexts = userContexts;
         });
@@ -1262,7 +1367,7 @@ class RightSidebarComponent {
 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 class=\"nav-link active\" href=\"#account\" aria-controls=\"account\" role=\"tab\" data-toggle=\"tab\"\n             translate=\"account.title\"></a>\n        </li>\n        <li class=\"nav-item\" role=\"presentation\">\n          <a class=\"nav-link\" (click)=\"loadUserSettingsTab()\" href=\"#settings\" aria-controls=\"settings\" role=\"tab\"\n             data-toggle=\"tab\" translate=\"settings.title\"></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\">{{ userIdentity.firstName + ' ' + userIdentity.lastName }}</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 class=\"form-control\" #contextSelect (change)=\"setUserContext(+contextSelect.value)\">\n                    <option *ngFor=\"let context of userContexts\" [value]=\"context.id\"\n                            [selected]=\"context.id === userContextActive.id\">\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 href=\"https://docs.valtimo.nl\" target=\"_blank\" class=\"d-block\" translate=\"account.links.help\"></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"https://www.valtimo.nl/feedback/\" target=\"_blank\" class=\"d-block\"\n                     translate=\"account.links.feedback\"></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"https://forum.valtimo.nl\" target=\"_blank\" class=\"d-block\"\n                     translate=\"account.links.forum\"></a>\n                </li>\n                <li class=\"bg-transparent list-group-item px-0\">\n                  <a href=\"javascript:void(0)\" class=\"d-block\" (click)=\"logout()\"\n                     translate=\"account.links.signOut\"></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 class=\"form-control\" #langSelect (change)=\"updateUserLanguage(langSelect.value)\">\n                    <option *ngFor=\"let lang of translate.getLangs()\" [value]=\"lang\"\n                            [selected]=\"lang === translate.currentLang\">\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 type=\"checkbox\" formControlName=\"taskNotifications\" id=\"taskNotifications\"\n                             (ngModelChange)=\"onSettingsSubmit()\"><span>\n                      <label for=\"taskNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.taskNotifications\"></span>\n                    <div class=\"text-muted info-text\" translate=\"settings.notification.taskNotificationsIntro\"></div>\n                  </li>\n\n                  <li>\n                    <div class=\"switch-button switch-button-sm switch-button-success\">\n                      <input type=\"checkbox\" formControlName=\"emailNotifications\" id=\"emailNotifications\"\n                             (ngModelChange)=\"onSettingsSubmit()\"><span>\n                      <label for=\"emailNotifications\"></label></span>\n                    </div>\n                    <span class=\"name\" translate=\"settings.notification.emailNotifications\"></span>\n                    <div class=\"text-muted info-text\" translate=\"settings.notification.emailNotificationsIntro\"></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 type=\"checkbox\" formControlName=\"{{ frequency }}\" id=\"{{ frequency }}\"\n                               (ngModelChange)=\"onSettingsSubmit()\"><span>\n                        <label for=\"{{ frequency }}\"></label></span>\n                      </div>\n                      <span class=\"name\">{{ 'settings.notification.' + frequency | translate }}</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\n      </div>\n    </div>\n  </div>\n</nav>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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{background-color:#f8f9fa;bottom:0;position:fixed;width:259px}.info-text{line-height:1em!important;margin-bottom:15px;padding-right:70px}"]
             },] }
 ];
@@ -1306,12 +1411,12 @@ RightSidebarModule.decorators = [
                         loader: {
                             provide: TranslateLoader,
                             useFactory: ɵ0,
-                            deps: [HttpClient]
-                        }
+                            deps: [HttpClient],
+                        },
                     }),
-                    NgbTooltipModule
+                    NgbTooltipModule,
                 ],
-                exports: [RightSidebarComponent]
+                exports: [RightSidebarComponent],
             },] }
 ];
 
@@ -1411,7 +1516,7 @@ class LeftSidebarComponent {
 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);\"><valtimo-page-title></valtimo-page-title></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",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF 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{align-items:center;display:flex;height:32px}.be-left-sidebar .left-sidebar-content{padding-top:20px}.be-toggle-left-sidebar svg{height:auto;margin-right:7px;min-width:21px;overflow:visible}.be-toggle-left-sidebar svg path{fill:#696969;transition:.27s ease}.resize-border{background-color:#ff5800;cursor:col-resize;height:100%;margin-right:-3px;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease;width:3px}.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\")}"]
             },] }
 ];
@@ -1471,7 +1576,7 @@ class PageTitleComponent {
         this.setTitle();
         this.routerSub = this.router.events
             .pipe(filter(event => event instanceof NavigationEnd))
-            .subscribe((event) => {
+            .subscribe(event => {
             this.setTitle();
         });
     }
@@ -1514,11 +1619,8 @@ class PageTitleModule {
 PageTitleModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [PageTitleComponent],
-                imports: [
-                    CommonModule,
-                    TranslateModule
-                ],
-                exports: [PageTitleComponent]
+                imports: [CommonModule, TranslateModule],
+                exports: [PageTitleComponent],
             },] }
 ];
 
@@ -1542,12 +1644,8 @@ class LeftSidebarModule {
 LeftSidebarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [LeftSidebarComponent],
-                imports: [
-                    CommonModule,
-                    MenuModule,
-                    PageTitleModule
-                ],
-                exports: [LeftSidebarComponent]
+                imports: [CommonModule, MenuModule, PageTitleModule],
+                exports: [LeftSidebarComponent],
             },] }
 ];
 
@@ -1599,7 +1697,7 @@ class BooleanTypeConverter {
             return value ? 'Yes' : 'No';
         }
         else {
-            return value ? (definition.enum[0] || 'Yes') : (definition.enum[1] || 'No');
+            return value ? definition.enum[0] || 'Yes' : definition.enum[1] || 'No';
         }
     }
 }
@@ -1736,7 +1834,7 @@ const TYPE_CONVERTERS = [
     dateTypeConverter,
     enumTypeConverter,
     stringReplaceUnderscoreTypeConverter,
-    relatedFilesTypeConverter
+    relatedFilesTypeConverter,
 ];
 
 /*
@@ -1762,7 +1860,7 @@ class ViewContentService {
     }
     get(value, definition) {
         if (!definition.viewType) {
-            definition.viewType = typeof (value);
+            definition.viewType = typeof value;
         }
         if (typeof this.converters[definition.viewType] !== 'undefined') {
             return this.converters[definition.viewType].convert(value, definition);
@@ -1781,7 +1879,7 @@ class ViewContentService {
 ViewContentService.ɵprov = ɵɵdefineInjectable({ factory: function ViewContentService_Factory() { return new ViewContentService(); }, token: ViewContentService, providedIn: "root" });
 ViewContentService.decorators = [
     { type: Injectable, args: [{
-                providedIn: 'root'
+                providedIn: 'root',
             },] }
 ];
 ViewContentService.ctorParameters = () => [];
@@ -1815,7 +1913,7 @@ class ListComponent {
         this.regExpStringRemoveUnderscore = /_/g;
         this.sort$ = new BehaviorSubject({
             state: { name: '', direction: 'DESC' },
-            isSorting: false
+            isSorting: false,
         });
         this.viewListAs = localStorage.getItem('viewListAs') || 'table';
     }
@@ -1872,7 +1970,7 @@ class ListComponent {
                 item.listItemFields = this.fields.map(field => ({
                     key: field.key,
                     label: field.label,
-                    value: this.resolveObject(field, item)
+                    value: this.resolveObject(field, item),
                 }));
             });
         }
@@ -1883,7 +1981,9 @@ class ListComponent {
     resolveObject(definition, obj) {
         const definitionKey = definition.key;
         const customPropString = '$.';
-        const key = definitionKey.includes(customPropString) ? definitionKey.split(customPropString)[1] : definitionKey;
+        const key = definitionKey.includes(customPropString)
+            ? definitionKey.split(customPropString)[1]
+            : definitionKey;
         const resolvedObjValue = key.split('.').reduce(function (prev, curr) {
             return prev ? prev[curr] : null;
         }, obj || self);
@@ -1932,7 +2032,7 @@ ListComponent.PAGINATION_SIZE = 'PaginationSize';
 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 *ngIf=\"isSearchable\" class=\"form-control col-sm-8\" type=\"text\" placeholder=\"Search...\" #searchBox />\n\n        <div class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\" role=\"group\" *ngIf=\"viewMode\">\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"mdi mdi-view-headline\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"mdi mdi-view-module\"></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              {{ listItemField.value || '-' }}\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i style=\"cursor: pointer\" [ngClass]=\"action.iconClass\" (click)=\"action.callback(item)\"></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>{{ 'list.currentPage' | translate: {current: pagination.page, total: getTotalPageCount()} }}</strong>\n      <br />\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate: {number: (items | listFilter: searchModel).length, total: pagination.collectionSize})\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\">{{ 'list.noResults' | translate }}</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",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"mdi mdi-view-headline\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"mdi mdi-view-module\"></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              {{ listItemField.value || '-' }}\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\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",
                 styles: ["@charset \"UTF-8\";\n/*!\n * Copyright 2015-2020 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS 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}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;height:80px;padding-left:18px;padding-right:18px}.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}td:first-child,th:first-child{padding-left:25px}th.sortable{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}th.sortable:after{content:\" \uF0DD\";font-family:Font Awesome\\ 5 Free;margin:auto 0 auto 5px;opacity:0;position:absolute;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}"]
             },] }
 ];
@@ -1979,16 +2079,12 @@ class ListFilterPipe {
         if (!filterText) {
             return list;
         }
-        return list.filter(item => Object.keys(item).some(k => item[k] != null &&
-            item[k]
-                .toString()
-                .toLowerCase()
-                .includes(filterText.toLowerCase())));
+        return list.filter(item => Object.keys(item).some(k => item[k] != null && item[k].toString().toLowerCase().includes(filterText.toLowerCase())));
     }
 }
 ListFilterPipe.decorators = [
     { type: Pipe, args: [{
-                name: 'listFilter'
+                name: 'listFilter',
             },] }
 ];
 
@@ -2012,13 +2108,12 @@ ListFilterPipe.decorators = [
  */
 class CardComponent {
     constructor() { }
-    ngOnInit() {
-    }
+    ngOnInit() { }
 }
 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",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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: [""]
             },] }
 ];
@@ -2048,10 +2143,8 @@ class CardModule {
 CardModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [CardComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [CardComponent]
+                imports: [CommonModule],
+                exports: [CardComponent],
             },] }
 ];
 
@@ -2076,7 +2169,7 @@ ListModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ListComponent, ListFilterPipe],
                 imports: [CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule],
-                exports: [ListComponent, ListFilterPipe]
+                exports: [ListComponent, ListFilterPipe],
             },] }
 ];
 
@@ -2136,7 +2229,7 @@ class BreadcrumbNavigationComponent {
         this.routerSub = this.router.events
             .pipe(filter(event => event instanceof NavigationEnd))
             .pipe(map(() => this.route))
-            .pipe(map((route) => {
+            .pipe(map(route => {
             while (route.firstChild) {
                 route = route.firstChild;
             }
@@ -2157,7 +2250,7 @@ class BreadcrumbNavigationComponent {
                 url: snapshot.url.join('/'),
                 path: snapshot.routeConfig.path,
                 label: snapshot.data['title'],
-                params: snapshot.params
+                params: snapshot.params,
             };
             this.generateBreadcrumbs(activeRoute);
         }
@@ -2165,14 +2258,14 @@ class BreadcrumbNavigationComponent {
     generateBreadcrumbs(activeBreadcrumb) {
         this.breadcrumbs = [];
         this.router.config.map(routerConfig => {
-            if (activeBreadcrumb.path.indexOf(routerConfig.path + '/') === 0
-                && activeBreadcrumb.path !== routerConfig.path
-                && routerConfig.path !== '') {
+            if (activeBreadcrumb.path.indexOf(routerConfig.path + '/') === 0 &&
+                activeBreadcrumb.path !== routerConfig.path &&
+                routerConfig.path !== '') {
                 const parentRoute = {
                     url: routerConfig.path.replace(/:(.+?)\b/g, (_, p1) => activeBreadcrumb.params[p1]),
                     path: routerConfig.path,
                     label: routerConfig.data['title'],
-                    params: activeBreadcrumb.params
+                    params: activeBreadcrumb.params,
                 };
                 const exist = this.breadcrumbs.findIndex(item => item.url === parentRoute.url);
                 if (exist === -1) {
@@ -2217,12 +2310,8 @@ class BreadcrumbNavigationModule {
 BreadcrumbNavigationModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [BreadcrumbNavigationComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule,
-                    TranslateModule
-                ],
-                exports: [BreadcrumbNavigationComponent]
+                imports: [CommonModule, RouterModule, TranslateModule],
+                exports: [BreadcrumbNavigationComponent],
             },] }
 ];
 
@@ -2246,12 +2335,8 @@ class PageHeaderModule {
 PageHeaderModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [PageHeaderComponent],
-                imports: [
-                    CommonModule,
-                    PageTitleModule,
-                    BreadcrumbNavigationModule
-                ],
-                exports: [PageHeaderComponent]
+                imports: [CommonModule, PageTitleModule, BreadcrumbNavigationModule],
+                exports: [PageHeaderComponent],
             },] }
 ];
 
@@ -2317,7 +2402,7 @@ class WidgetComponent {
 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 }}\"\n       *ngIf=\"title || subtitle\">\n    <div class=\"row\">\n      <div class=\"col-7\"\n           [ngClass]=\"{'clickable': collapseAble}\"\n           (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 class=\"icon mdi\"\n           *ngIf=\"collapseAble\"\n           [ngClass]=\"{'mdi-chevron-up': isCollapsed, 'mdi-chevron-down': !isCollapsed}\"\n           (click)=\"toggleContent()\"></a>\n      </div>\n    </div>\n  </div>\n  <!-- content -->\n  <div [hidden]=\"!isCollapsed\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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 .card-subtitle,.card-full .tools .icon{color:#6b6b6b!important}.card-full-warning,.card-full-warning .card-subtitle,.card-full-warning .tools .icon{color:#343a40!important}.card-full-danger,.card-full-danger .card-subtitle,.card-full-danger .tools .icon,.card-full-dark,.card-full-dark .card-subtitle,.card-full-dark .tools .icon,.card-full-info,.card-full-info .card-subtitle,.card-full-info .tools .icon,.card-full-primary,.card-full-primary .card-subtitle,.card-full-primary .tools .icon,.card-full-success,.card-full-success .card-subtitle,.card-full-success .tools .icon{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}"]
             },] }
 ];
@@ -2354,10 +2439,8 @@ class WidgetModule {
 WidgetModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [WidgetComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [WidgetComponent]
+                imports: [CommonModule],
+                exports: [WidgetComponent],
             },] }
 ];
 
@@ -2388,7 +2471,7 @@ class FieldAutoFocusDirective {
 }
 FieldAutoFocusDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[valtimoFieldAutoFocus]'
+                selector: '[valtimoFieldAutoFocus]',
             },] }
 ];
 FieldAutoFocusDirective.ctorParameters = () => [
@@ -2415,12 +2498,8 @@ class FieldAutoFocusModule {
 FieldAutoFocusModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [FieldAutoFocusDirective],
-                exports: [
-                    FieldAutoFocusDirective
-                ],
-                imports: [
-                    CommonModule
-                ]
+                exports: [FieldAutoFocusDirective],
+                imports: [CommonModule],
             },] }
 ];
 
@@ -2493,15 +2572,15 @@ class BpmnJsDiagramComponent {
         }
         if (inputData) {
             Object.keys(inputData).forEach(key => {
-                const diagramContainer = this.el.nativeElement.querySelector('svg')
-                    .getBoundingClientRect(), diagramElm = this.el.nativeElement.querySelector(`g[data-element-id=${key}]`)
+                const diagramContainer = this.el.nativeElement.querySelector('svg').getBoundingClientRect(), diagramElm = this.el.nativeElement
+                    .querySelector(`g[data-element-id=${key}]`)
                     .getBoundingClientRect();
                 this.setMax(key);
                 this.heatPoints.data.push({
                     x: Math.round(diagramElm.x - diagramContainer.x + diagramElm.width / 2),
                     y: Math.round(diagramElm.y - diagramContainer.y + diagramElm.height / 2),
                     value: inputData[key][valueKey],
-                    radius: diagramElm.width / 2
+                    radius: diagramElm.width / 2,
                 });
                 if (inputData[key].count > 0) {
                     this.addCounterActiveOverlays(key, inputData);
@@ -2525,27 +2604,27 @@ class BpmnJsDiagramComponent {
         overlays.add(key, {
             position: {
                 bottom: -10,
-                left: 0
+                left: 0,
             },
             show: {
                 minZoom: 0,
-                maxZoom: 5.0
+                maxZoom: 5.0,
             },
-            html: `<span class="badge badge-pill badge-primary">${inputData[key].count}</span>`
+            html: `<span class="badge badge-pill badge-primary">${inputData[key].count}</span>`,
         });
     }
     showHeatmap() {
         this.heatMapInstance = create({
             radius: 54,
-            blur: .70,
-            maxOpacity: .4,
+            blur: 0.7,
+            maxOpacity: 0.4,
             minOpacity: 0,
-            container: this.el.nativeElement
+            container: this.el.nativeElement,
         });
         this.heatMapInstance.setData({
             min: this.min,
             max: this.max,
-            data: this.heatPoints.data
+            data: this.heatPoints.data,
         });
     }
     clearHeatmap() {
@@ -2567,7 +2646,7 @@ class BpmnJsDiagramComponent {
 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 type=\"checkbox\" id=\"toggleHeatmap\" [checked]=\"heatmapMode\" (click)=\"toggleHeatmap()\"><span>\n    <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><div class=\"legenda highlight-overlay-past\"></div> Executed tasks</span>\n  <span class=\"ml-3\"><div class=\"legenda highlight-overlay-current\"></div> Current tasks</span>\n</div>\n\n<div *ngIf=\"heatmapDuration || heatmapCount\" class=\"p-4 text-center legenda-holder\">\n  <span><span class=\"badge badge-pill badge-primary\">N</span>&nbsp;&nbsp;Amount of currently active instances of this task.</span>\n  <span>&nbsp;&nbsp;|&nbsp;&nbsp;Red/yellow/green orbs: The amount of times the task is executed in comparison to the other tasks.</span>\n</div>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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: [""]
             },] }
 ];
@@ -2601,10 +2680,8 @@ class BpmnJsDiagramModule {
 BpmnJsDiagramModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [BpmnJsDiagramComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [BpmnJsDiagramComponent]
+                imports: [CommonModule],
+                exports: [BpmnJsDiagramComponent],
             },] }
 ];
 
@@ -2628,7 +2705,7 @@ class TimelineComponent {
 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\">\n    No result found\n  </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 [innerHTML]=\"item.summaryTranslationKey | translate: item.summaryTranslationParams\"></p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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\n                [innerHTML]=\"item.summaryTranslationKey | translate: item.summaryTranslationParams\"\n              ></p>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n",
                 styles: [""]
             },] }
 ];
@@ -2656,11 +2733,8 @@ class TimelineModule {
 TimelineModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [TimelineComponent],
-                imports: [
-                    CommonModule,
-                    TranslateModule,
-                ],
-                exports: [TimelineComponent]
+                imports: [CommonModule, TranslateModule],
+                exports: [TimelineComponent],
             },] }
 ];
 
@@ -2750,10 +2824,8 @@ class FilterSidebarModule {
 FilterSidebarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [FilterSidebarComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [FilterSidebarComponent]
+                imports: [CommonModule],
+                exports: [FilterSidebarComponent],
             },] }
 ];
 
@@ -2780,8 +2852,7 @@ class UploaderComponent {
         this.resourceRegistered = new EventEmitter();
         this.showFileList = true;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     onFileFieldChange(files) {
         for (const file of files) {
             this.uploadFile(file);
@@ -2811,7 +2882,7 @@ class UploaderComponent {
 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 class=\"upload-file-container p-5\" (click)=\"fileInput.click()\" valtimoUploaderDragDrop\n     (fileDropped)=\"onFileFieldChange($event)\">\n  <span class=\"align-middle\"><i class=\"fa fa-cloud-upload fa-4x\"></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><br/>\n      {{ resource.sizeInBytes | filesize }}\n    </p>\n    <button class=\"delete-file\" (click)=\"deleteResource(resource)\">\n      <i class=\"fa fa-trash text-danger\"></i>\n    </button>\n  </div>\n</div>\n\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"fa fa-cloud-upload fa-4x\"></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=\"fa fa-trash text-danger\"></i>\n    </button>\n  </div>\n</div>\n",
                 styles: [".upload-file-container{background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:100px;border:2px dashed #d5d8de;color:#d5d8de;margin:0 0 1rem;text-align:center}.upload-file-container i.mdi-cloud-upload{font-size:5em}.upload-file-container:hover{cursor:pointer;opacity:.8}.files-list{background:#fff;border:1px solid #bdc0c7;display:flex;font-size:1em;justify-content:space-between;margin:1rem auto;padding:5px}.files-list .delete-file{background:transparent;border:none;cursor:pointer}.files-list .delete-file i{font-size:1.5em}"]
             },] }
 ];
@@ -2862,7 +2933,7 @@ class UploaderDragDropDirective {
 }
 UploaderDragDropDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[valtimoUploaderDragDrop]'
+                selector: '[valtimoUploaderDragDrop]',
             },] }
 ];
 UploaderDragDropDirective.propDecorators = {
@@ -2889,14 +2960,7 @@ UploaderDragDropDirective.propDecorators = {
  */
 class FileSizePipe {
     constructor() {
-        this.units = [
-            'bytes',
-            'KB',
-            'MB',
-            'GB',
-            'TB',
-            'PB'
-        ];
+        this.units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
     }
     transform(bytes = 0, precision = 2) {
         if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) {
@@ -2912,7 +2976,7 @@ class FileSizePipe {
 }
 FileSizePipe.decorators = [
     { type: Pipe, args: [{
-                name: 'filesize'
+                name: 'filesize',
             },] }
 ];
 
@@ -2936,10 +3000,8 @@ class FileSizeModule {
 FileSizeModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [FileSizePipe],
-                imports: [
-                    CommonModule
-                ],
-                exports: [FileSizePipe]
+                imports: [CommonModule],
+                exports: [FileSizePipe],
             },] }
 ];
 
@@ -2963,11 +3025,8 @@ class UploaderModule {
 UploaderModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [UploaderComponent, UploaderDragDropDirective],
-                imports: [
-                    CommonModule,
-                    FileSizeModule
-                ],
-                exports: [UploaderComponent, UploaderDragDropDirective]
+                imports: [CommonModule, FileSizeModule],
+                exports: [UploaderComponent, UploaderDragDropDirective],
             },] }
 ];
 
@@ -3067,11 +3126,9 @@ class AlertComponent {
         this.alerts = [];
         this.autoCloseInMS = 5000;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     ngAfterContentInit() {
-        this.subscription = this.alertService.onAlert()
-            .subscribe(alert => {
+        this.subscription = this.alertService.onAlert().subscribe(alert => {
             if (!alert.message) {
                 // clear alerts when an empty alert is received
                 this.alerts = [];
@@ -3177,7 +3234,7 @@ class AlertComponent {
 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\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)\"><span class=\"mdi mdi-close\" aria-hidden=\"true\"></span></button>\n            <div class=\"icon\"><span class=\"{{ alert.iconClass || cssIconClass(alert) }}\"></span></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 class=\"{{ confirmation.class }} mr-2\"\n                      *ngFor=\"let confirmation of alert.confirmations\"\n                      (click)=\"alertConfirm(alert, confirmation.value)\">{{ confirmation.label }}</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 class=\"{{ confirmation.class }} mr-2\"\n                *ngFor=\"let confirmation of alert.confirmations\"\n                (click)=\"alertConfirm(alert, confirmation.value)\">{{ confirmation.label }}</button>\n      </div>\n    </div>\n    <button class=\"close\" type=\"button\" (click)=\"removeAlert(alert)\"><span class=\"mdi mdi-close\" aria-hidden=\"true\"></span></button>\n  </div>\n</div>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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{align-items:center;display:flex}.alert .message{font-size:1.1rem!important;line-height:1.5rem!important;padding:2rem 5rem 2rem 2rem!important}.alert .close{color:#fff!important;opacity:1!important;padding:2rem 2rem 0 0!important;right:0!important}.alert .icon{padding-left:2rem!important}.alert-warning{color:#404040!important}.alert-light .close,.alert-warning .close{color:#404040!important;opacity:1!important}"]
             },] }
 ];
@@ -3206,7 +3263,7 @@ AlertModule.decorators = [
     { type: NgModule, args: [{
                 imports: [CommonModule],
                 declarations: [AlertComponent],
-                exports: [AlertComponent]
+                exports: [AlertComponent],
             },] }
 ];
 
@@ -3227,8 +3284,7 @@ AlertModule.decorators = [
  */
 class DataListComponent {
     constructor() { }
-    ngOnInit() {
-    }
+    ngOnInit() { }
 }
 DataListComponent.decorators = [
     { type: Component, args: [{
@@ -3263,10 +3319,8 @@ class DataListModule {
 DataListModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [DataListComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [DataListComponent]
+                imports: [CommonModule],
+                exports: [DataListComponent],
             },] }
 ];
 
@@ -3308,21 +3362,22 @@ FormIoStateService.decorators = [
  * limitations under the License.
  */
 class FormioComponent {
-    constructor(userProviderService, logger, stateService, route) {
+    constructor(userProviderService, logger, stateService, route, translateService) {
         this.userProviderService = userProviderService;
         this.logger = logger;
         this.stateService = stateService;
         this.route = route;
+        this.translateService = translateService;
         this.submission = {};
         this.submit = new EventEmitter();
         this.change = new EventEmitter();
         this.refreshForm = new EventEmitter();
         this.errors = [];
+        this.currentLanguage$ = new BehaviorSubject(this.translateService.currentLang);
     }
     ngOnInit() {
         const documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName');
         const formDefinition = this.form;
-        this.loadUserLanguageSetting();
         this.formDefinition = formDefinition;
         this.errors = [];
         if (this.formHasLegacyUpload(formDefinition)) {
@@ -3332,11 +3387,11 @@ class FormioComponent {
             this.stateService.setDocumentDefinitionName(documentDefinitionName);
         }
         this.subscribeFormRefresh();
+        this.openLanguageSubscription();
     }
     ngOnChanges(changes) {
         const currentForm = changes.form.currentValue;
         this.formDefinition = currentForm;
-        this.loadUserLanguageSetting();
         this.reloadForm();
         if (this.formHasLegacyUpload(currentForm)) {
             this.setInitialToken();
@@ -3347,17 +3402,14 @@ class FormioComponent {
         }
     }
     ngOnDestroy() {
+        var _a, _b;
         this.unsubscribeFormRefresh();
-        if (this.tokenRefreshTimerSubscription) {
-            this.tokenRefreshTimerSubscription.unsubscribe();
-        }
-    }
-    loadUserLanguageSetting() {
-        this.language = localStorage.getItem('langKey') || '';
+        (_a = this.tokenRefreshTimerSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        (_b = this.languageSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
     }
     reloadForm() {
         this.refreshForm.emit({
-            form: this.formDefinition
+            form: this.formDefinition,
         });
     }
     showErrors(errors) {
@@ -3406,7 +3458,7 @@ class FormioComponent {
     }
     subscribeFormRefresh() {
         if (this.formRefresh$) {
-            this.formRefreshSubscription = this.formRefresh$.subscribe((refreshValue) => {
+            this.formRefreshSubscription = this.formRefresh$.subscribe(refreshValue => {
                 if (refreshValue) {
                     this.refreshForm.emit(refreshValue);
                 }
@@ -3418,11 +3470,16 @@ class FormioComponent {
             this.formRefreshSubscription.unsubscribe();
         }
     }
+    openLanguageSubscription() {
+        this.languageSubscription = this.translateService.stream('key').subscribe(() => {
+            this.currentLanguage$.next(this.translateService.currentLang);
+        });
+    }
 }
 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 [submission]=\"submission\"\n          [form]=\"formDefinition\"\n          [refresh]=\"refreshForm\"\n          [options]=\"options\"\n          [language]=\"language\"\n          (submit)=\"onSubmit($event)\"\n          (ready)=\"formReady($event)\"\n          (change)=\"onChange($event)\"\n  >\n  </formio>\n</div>\n",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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: [""]
             },] }
 ];
@@ -3430,7 +3487,8 @@ FormioComponent.ctorParameters = () => [
     { type: UserProviderService },
     { type: NGXLogger },
     { type: FormIoStateService },
-    { type: ActivatedRoute }
+    { type: ActivatedRoute },
+    { type: TranslateService }
 ];
 FormioComponent.propDecorators = {
     form: [{ type: Input }],
@@ -3460,8 +3518,7 @@ class FormioBuilderComponent {
     constructor() {
         this.change = new EventEmitter();
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     onChange(event) {
         this.change.emit(event);
     }
@@ -3469,7 +3526,7 @@ class FormioBuilderComponent {
 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",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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: [""]
             },] }
 ];
@@ -3498,7 +3555,7 @@ const AppConfig = {
     appUrl: 'http://localhost:4200',
     apiUrl: 'http://localhost:4200',
     icons: 'fontawesome',
-    formOnly: false
+    formOnly: false,
 };
 
 class FormIoDomService {
@@ -3506,7 +3563,7 @@ class FormIoDomService {
         this.stateService = stateService;
     }
     toggleSubmitButton(disabled) {
-        this.stateService.currentForm$.pipe(take(1)).subscribe((form) => {
+        this.stateService.currentForm$.pipe(take(1)).subscribe(form => {
             const button = form.formioElement.nativeElement
                 .getElementsByClassName('formio-component-submit')[0]
                 .getElementsByClassName('btn-primary')[0];
@@ -3540,15 +3597,17 @@ class FormIoUploaderComponent {
         }
     }
     downloadFile(resourceFile) {
-        this.uploadProviderService.getResource(resourceFile.data.resourceId).subscribe((resource) => {
+        this.uploadProviderService
+            .getResource(resourceFile.data.resourceId)
+            .subscribe((resource) => {
             this.downloadService.downloadFile(resource.url, resource.resource.name);
         });
     }
     fileSelected(file) {
         this.domService.toggleSubmitButton(true);
         this.uploading$.next(true);
-        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe((name) => {
-            this.uploadProviderService.uploadFile(file, name).subscribe((result) => {
+        this.stateService.documentDefinitionName$.pipe(take(1)).subscribe(name => {
+            this.uploadProviderService.uploadFile(file, name).subscribe(result => {
                 this.domService.toggleSubmitButton(false);
                 this.uploading$.next(false);
                 this._value.push(result);
@@ -3565,7 +3624,7 @@ class FormIoUploaderComponent {
 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 fa fa-trash\"></i>\n    </a>\n  </div>\n</div>\n",
+                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 fa fa-trash\"></i>\n    </a>\n  </div>\n</div>\n",
                 styles: [".progress-bar-container{padding:15px 20px}::ng-deep .formio-component-valtimo-file .btn-secondary,::ng-deep .formio-component-valtimo-file .formio-button-add-another{display:none}::ng-deep .formio-component-valtimo-file td{border:none;padding:0!important}::ng-deep .formio-component-valtimo-file .table{border:none;border-collapse:collapse;margin:10px 0}.dropzone-container{margin-bottom:12px}.file-preview{border:1px solid #dee2e6;display:flex;margin-top:-1px}.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;cursor:pointer;font-size:1.3846rem;line-height:18px}.file-preview .icon:hover{color:grey}"]
             },] }
 ];
@@ -3617,13 +3676,13 @@ class DropzoneComponent {
         this.error$ = new BehaviorSubject('');
         this.errorMessagesStrings = {
             tooBig: 'too big',
-            wrongType: 'this type'
+            wrongType: 'this type',
         };
         this.errorMessage$ = combineLatest([
             this.error$,
             this.translateService.stream('dropzone.error.generic'),
             this.translateService.stream('dropzone.error.tooBig'),
-            this.translateService.stream('dropzone.error.wrongType')
+            this.translateService.stream('dropzone.error.wrongType'),
         ]).pipe(map(([dropzoneError, generic, tooBig, wrongType]) => {
             const strings = this.errorMessagesStrings;
             if (dropzoneError) {
@@ -3675,7 +3734,7 @@ class DropzoneComponent {
             accept: file => {
                 this.dropzone.removeAllFiles();
                 this.setFile(file);
-            }
+            },
         });
         this.setDropzoneEvents();
     }
@@ -3701,7 +3760,7 @@ class DropzoneComponent {
 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\"><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 (click)=\"showCamera()\" *ngIf=\"camera\" type=\"button\" class=\"btn btn-primary px-3 webcam-button\"><i class=\"fa fa-camera\" aria-hidden=\"true\"></i></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=\"{ errorMessage: errorMessage$ | async, externalError: externalError$ | async, file: file$ | async } 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\n",
+                template: "<form #dropzone [ngClass]=\"{disabled: disabled || uploading}\" class=\"dropzone dz-clickable\">\n  <div class=\"dz-message\">\n    <div class=\"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=\"fa fa-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{font-size:2rem;text-align:center}form.dropzone.disabled{cursor:default;opacity:.7;pointer-events:none}form.dropzone.preview{border:none;padding:15px 20px}.dz-message{align-items:center;display:flex;flex-direction:column}.dropzone-mobile-trigger{cursor:pointer}.alert-light{align-items:center;display:flex}form.dropzone .mdi{background-color:transparent;border-radius:0;display:inline-block;height:auto;margin-bottom:0;padding:0;width:auto}form.dropzone .message{padding:1.385rem 2.1542rem}.file{align-items:center;display:flex;flex-direction:row;font-size:1.5rem}.small-font{color:#959595;font-size:1rem}.file-size{margin-left:5px}.progress-bar-container{bottom:0;height:auto;position:absolute;width:100%}.webcam-button{position:absolute;right:10px;top:10px}"]
             },] }
 ];
@@ -3745,7 +3804,7 @@ class ProgressBarComponent {
 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\">\n  </div>\n</div>\n",
+                template: "<div class=\"progress\" style=\"position: relative\">\n  <div class=\"progress-bar progress-bar-striped indeterminate\"></div>\n</div>\n",
                 styles: [".progress-bar.indeterminate{-webkit-animation:progress-indeterminate 3s linear infinite;animation:progress-indeterminate 3s linear infinite;position:relative}@-webkit-keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}@keyframes progress-indeterminate{0%{left:-25%;width:25%}to{left:100%;width:25%}}"]
             },] }
 ];
@@ -3770,10 +3829,8 @@ class ProgressBarModule {
 ProgressBarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ProgressBarComponent],
-                imports: [
-                    CommonModule,
-                ],
-                exports: [ProgressBarComponent]
+                imports: [CommonModule],
+                exports: [ProgressBarComponent],
             },] }
 ];
 
@@ -3805,8 +3862,7 @@ class WebcamComponent {
             this.toggleFade();
         });
         if (navigator.mediaDevices.getUserMedia) {
-            navigator.mediaDevices.getUserMedia({ video: true })
-                .then((stream) => {
+            navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
                 video.srcObject = stream;
                 this.stream$.next(stream);
             });
@@ -3836,9 +3892,9 @@ class WebcamComponent {
         return false;
     }
     stopStream() {
-        this.stream$.pipe(take(1)).subscribe((mediaStream) => {
+        this.stream$.pipe(take(1)).subscribe(mediaStream => {
             if (mediaStream) {
-                mediaStream.getTracks().forEach((stream) => stream.stop());
+                mediaStream.getTracks().forEach(stream => stream.stop());
             }
         });
     }
@@ -3869,7 +3925,7 @@ class WebcamComponent {
 WebcamComponent.decorators = [
     { type: Component, args: [{
                 selector: 'valtimo-webcam',
-                template: "<div (click)=\"close(false)\" *ngIf=\"{picture: picture$ | async, stream: stream$ | async} as obs\"\n     [ngClass]=\"{showing: showing$ | async}\"\n     class=\"webcam-overlay\">\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 (click)=\"captureImage()\" [disabled]=\"obs.picture?.file || !obs.stream\" class=\"btn btn-primary btn-lg\">\n            <i\n                    class=\"fa fa-camera\"></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\"><i\n                  class=\"fa fa-undo\"></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\"><i\n                  class=\"fa fa-save\"></i>{{'webcam.save' | translate}}</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",
+                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=\"fa fa-camera\"></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=\"fa fa-undo\"></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=\"fa fa-save\"></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{align-items:center;background-color:rgba(0,0,0,.65);display:flex;height:100%;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:opacity .15s linear;width:100%;z-index:9999}.showing{opacity:1}.webcam-container{padding:20px}.button-container{align-items:center;display:flex;height:30px;justify-content:space-evenly;margin-bottom:10px;margin-top:20px}.button-container i{margin-right:5px}.new-btn,.picture-btn,.save-btn{display:flex;justify-content:center;position:absolute}.new-btn,.save-btn{width:calc(50% - 65px)}.picture-btn{left:0;width:100%}.new-btn{left:0}.save-btn{right:0}.modal-header{color:grey;margin-top:35px;padding:0;position:absolute;right:-18px;top:0}.close{color:grey}.inner-container{position:relative}.video-container{height:495px;overflow:hidden}.video-container img,.video-container video{height:495px;position:absolute;width:660px}.video-container img{-o-object-fit:cover;object-fit:cover}#canvas{display:none}"]
             },] }
 ];
@@ -3897,11 +3953,8 @@ class WebcamModule {
 WebcamModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [WebcamComponent],
-                imports: [
-                    CommonModule,
-                    TranslateModule
-                ],
-                exports: [WebcamComponent]
+                imports: [CommonModule, TranslateModule],
+                exports: [WebcamComponent],
             },] }
 ];
 
@@ -3926,7 +3979,7 @@ DropzoneModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [DropzoneComponent],
                 imports: [CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule],
-                exports: [DropzoneComponent]
+                exports: [DropzoneComponent],
             },] }
 ];
 
@@ -3958,14 +4011,14 @@ FormIoModule.decorators = [
                     DocumentModule,
                     FileSizeModule,
                     ResourceModule,
-                    RouterModule
+                    RouterModule,
                 ],
                 declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
                 exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
                 providers: [
                     FormIoStateService,
                     FormIoDomService,
-                    { provide: FormioAppConfig, useValue: ɵ0$1 }
+                    { provide: FormioAppConfig, useValue: ɵ0$1 },
                 ],
             },] }
 ];
@@ -4038,7 +4091,7 @@ ModalModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ModalComponent],
                 imports: [CommonModule],
-                exports: [ModalComponent]
+                exports: [ModalComponent],
             },] }
 ];
 
@@ -4071,7 +4124,7 @@ class SpinnerComponent {
 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",
+                template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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;margin-top:30px;width:100%}.spinner-container.no-margin-top{margin-top:0}"]
             },] }
 ];
@@ -4106,14 +4159,8 @@ class SpinnerModule {
 SpinnerModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SpinnerComponent],
-                exports: [
-                    SpinnerComponent
-                ],
-                imports: [
-                    CommonModule,
-                    NgxSpinnerModule,
-                    TranslateModule
-                ]
+                exports: [SpinnerComponent],
+                imports: [CommonModule, NgxSpinnerModule, TranslateModule],
             },] }
 ];
 
@@ -4199,7 +4246,7 @@ class SearchableDropdownComponent {
                 .pipe(take(1))
                 .subscribe(([mouseOnList, items, focusedId]) => {
                 const length = items.length;
-                const focusedIndex = items.findIndex((item) => item.id === focusedId);
+                const focusedIndex = items.findIndex(item => item.id === focusedId);
                 const code = event.code;
                 const shiftKey = event.shiftKey;
                 const down = 'ArrowDown';
@@ -4231,7 +4278,8 @@ class SearchableDropdownComponent {
                         }
                         // handle moving up in the list with up arrow up or shift+tab
                     }
-                    else if ((code === up || (code === tab && shiftKey)) && focusedId !== this.searchId) {
+                    else if ((code === up || (code === tab && shiftKey)) &&
+                        focusedId !== this.searchId) {
                         // move to previous item if focus is not on the first item in the list
                         if (focusedIndex > 0) {
                             this.focusedItemId$.next(items[focusedIndex - 1].id);
@@ -4247,16 +4295,17 @@ class SearchableDropdownComponent {
         });
     }
     openSearchSubscription() {
-        this.searchSubscription = this.searchTerm.valueChanges.subscribe((searchTerm) => {
-            this.focusedItemId$.pipe(take(1)).subscribe((focusedItemId) => {
+        this.searchSubscription = this.searchTerm.valueChanges.subscribe(searchTerm => {
+            this.focusedItemId$.pipe(take(1)).subscribe(focusedItemId => {
                 if (!searchTerm) {
                     this.filteredItems$.next(this.items);
                 }
                 else {
-                    const filteredItems = this.items.filter((item) => item.text.toUpperCase().includes(searchTerm.toUpperCase()));
+                    const filteredItems = this.items.filter(item => item.text.toUpperCase().includes(searchTerm.toUpperCase()));
                     this.filteredItems$.next(filteredItems);
                     // move focus to search box if filtered list length is 0 or previously focused item is not in filtered list anymore
-                    if (filteredItems.length === 0 || !filteredItems.some((item) => item.id === focusedItemId)) {
+                    if (filteredItems.length === 0 ||
+                        !filteredItems.some(item => item.id === focusedItemId)) {
                         this.resetFocus();
                     }
                 }
@@ -4268,8 +4317,8 @@ class SearchableDropdownComponent {
         });
     }
     scrollButtonIntoView(id) {
-        this.filteredItems$.pipe(take(1)).subscribe((items) => {
-            const focusItemIndex = items.findIndex((item) => item.id === id);
+        this.filteredItems$.pipe(take(1)).subscribe(items => {
+            const focusItemIndex = items.findIndex(item => item.id === id);
             const focusedButton = this.buttons.toArray()[focusItemIndex];
             if (focusedButton) {
                 focusedButton.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -4280,7 +4329,7 @@ class SearchableDropdownComponent {
 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 class=\"btn btn-primary btn-sm dropdown-size\" (click)=\"openDropdown()\" [style.width.px]=\"width\">\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 #search [ngClass]=\"{ disabled: disabled }\" [placeholder]=\"searchText\" [formControl]=\"searchTerm\" />\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 *ngIf=\"filteredItems.length > 0 && focusedItemId$ | async as focusedItemId; else noResults\">\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",
+                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{height:34px;width:250px}.underline-button{cursor:pointer;text-decoration:underline;width:250px}.dropdown-container{background-color:#fff;border:1px solid #e3e3e3;border-radius:3px;box-shadow:0 0 6px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;max-height:300px;overflow:hidden;padding:7px 0;position:fixed;width:250px;z-index:999}.dropdown-list{list-style:none;margin:0;overflow:auto;overflow-x:hidden;padding:0;z-index:9999}.search{align-items:center;border-bottom:1px solid #dee2e6;display:flex;flex-shrink:0;height:44px;padding:8px 24px}.search input{padding:0;width:100%}.dropdown-button,.search input,.search input:focus{border:none;outline:none}.dropdown-button{align-items:center;background-color:#fff;color:#504e4e;cursor:pointer;display:flex;font-size:1rem;font-weight:400;padding:8px 24px}.dropdown-button.focus{background-color:#f5f5f5}.dropdown-button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.disabled{color:#959595;cursor:default;pointer-events:none}"]
             },] }
 ];
@@ -4319,7 +4368,7 @@ SearchableDropdownModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SearchableDropdownComponent],
                 imports: [CommonModule, ReactiveFormsModule],
-                exports: [SearchableDropdownComponent]
+                exports: [SearchableDropdownComponent],
             },] }
 ];
 
@@ -4345,7 +4394,7 @@ const formIoUploaderEditForm = () => ({
             tooltip: 'The name of this field in the API endpoint.',
             validate: {
                 required: true,
-            }
+            },
         },
         {
             type: 'textfield',
@@ -4409,7 +4458,7 @@ const formIoUploaderEditForm = () => ({
             validate: {
                 required: false,
             },
-        }
+        },
     ],
 });
 
@@ -4467,7 +4516,7 @@ class SearchableDropdownSelectComponent {
 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 class=\"d-flex flex-row align-items-center\" [style.height.px]=\"style === 'button' ? 34 : null\">\n    <h5 class=\"selected-text\">{{ selectedText }} <b>{{ selectedTextValue }}</b></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 fa fa-times text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n\n",
+                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 fa fa-times text-danger\"></i>\n    </button>\n  </div>\n</ng-template>\n",
                 styles: [".selected-text{margin:0}.clear-icon{font-size:13px}"]
             },] }
 ];
@@ -4508,7 +4557,7 @@ SearchableDropdownSelectModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SearchableDropdownSelectComponent],
                 imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule],
-                exports: [SearchableDropdownSelectComponent]
+                exports: [SearchableDropdownSelectComponent],
             },] }
 ];
 
@@ -4532,5 +4581,5 @@ SearchableDropdownSelectModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertModule, AlertService, BpmnJsDiagramComponent, BpmnJsDiagramModule, BreadcrumbNavigationComponent, BreadcrumbNavigationModule, CamundaFormComponent, CamundaFormModule, CardComponent, CardModule, ComponentsModule, DataListComponent, DataListModule, DropzoneComponent, DropzoneModule, FieldAutoFocusDirective, FieldAutoFocusModule, FileSizeModule, FileSizePipe, FilterSidebarComponent, FilterSidebarModule, FormIoModule, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerModule, TimelineComponent, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customUploaderType, menuInitializer, registerFormioUploadComponent, ɵ0, CamundaGeneratedFormModule as ɵa, CamundaStringFormfieldComponent as ɵb, CamundaBooleanFormfieldComponent as ɵc, CamundaDateFormfieldComponent as ɵd, CamundaFormfieldService as ɵe, CamundaFormfieldGeneratorDirective as ɵf, CamundaLongFormfieldComponent as ɵg, CamundaEnumFormfieldComponent as ɵh, CamundaTextareaFormfieldComponent as ɵi, CamundaChoicefieldFormfieldComponent as ɵj, CamundaFormfieldValidationComponent as ɵk, CamundaGeneratedFormComponent as ɵl, CamundaCustomFormModule as ɵm, CamundaCustomFormComponent as ɵn, MenuComponent as ɵo, MenuItemTextComponent as ɵp, SubmenuItemTextComponent as ɵq, VersionService as ɵr, FormIoStateService as ɵs, FormIoDomService as ɵt, AppConfig as ɵu, SpinnerComponent as ɵv };
+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, FormIoUploaderComponent, FormioBuilderComponent, FormioComponent, FormioOptionsImpl, LeftSidebarComponent, LeftSidebarModule, ListComponent, ListFilterPipe, ListModule, MenuModule, MenuRoutingModule, MenuService, ModalComponent, ModalModule, PageHeaderComponent, PageHeaderModule, PageTitleComponent, PageTitleModule, ProgressBarComponent, ProgressBarModule, RightSidebarComponent, RightSidebarModule, SearchableDropdownComponent, SearchableDropdownModule, SearchableDropdownSelectComponent, SearchableDropdownSelectModule, SpinnerModule, TimelineComponent, TimelineItemImpl, TimelineModule, TopbarComponent, TopbarModule, UploaderComponent, UploaderDragDropDirective, UploaderModule, ViewContentService, WebcamComponent, WebcamModule, WidgetComponent, WidgetModule, customUploaderType, menuInitializer, registerFormioUploadComponent, ɵ0, CamundaGeneratedFormModule as ɵa, CamundaStringFormfieldComponent as ɵb, CamundaBooleanFormfieldComponent as ɵc, CamundaDateFormfieldComponent as ɵd, CamundaFormfieldService as ɵe, CamundaFormfieldGeneratorDirective as ɵf, CamundaLongFormfieldComponent as ɵg, CamundaEnumFormfieldComponent as ɵh, CamundaTextareaFormfieldComponent as ɵi, CamundaChoicefieldFormfieldComponent as ɵj, CamundaFormfieldValidationComponent as ɵk, CamundaGeneratedFormComponent as ɵl, CamundaCustomFormModule as ɵm, CamundaCustomFormComponent as ɵn, MenuComponent as ɵo, MenuItemTextComponent as ɵp, SubmenuItemTextComponent as ɵq, VersionService as ɵr, FormIoStateService as ɵs, FormIoDomService as ɵt, AppConfig as ɵu, SpinnerComponent as ɵv };
 //# sourceMappingURL=valtimo-components.js.map