@valtimo/components 4.15.3-next-main.15 → 4.15.3-next-main.16

package/fesm2015/valtimo-components.js

@@ -50,7 +50,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 +89,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 +120,9 @@ class CamundaCustomFormModule {
 }
 CamundaCustomFormModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [
-                    CamundaCustomFormComponent
-                ],
-                imports: [
-                    CommonModule
-                ],
-                exports: [
-                    CamundaCustomFormComponent
-                ]
+                declarations: [CamundaCustomFormComponent],
+                imports: [CommonModule],
+                exports: [CamundaCustomFormComponent],
             },] }
 ];
 
@@ -161,8 +155,8 @@ function minDate(minDateIn) {
             return {
                 minDate: {
                     minDate: momentMinDate.format(DATE_FORMAT),
-                    actual: controlDate.format(DATE_FORMAT)
-                }
+                    actual: controlDate.format(DATE_FORMAT),
+                },
             };
         }
         else {
@@ -181,8 +175,8 @@ function maxDate(maxDateIn) {
             return {
                 maxDate: {
                     maxDate: momentMaxDate.format(DATE_FORMAT),
-                    actual: controlDate.format(DATE_FORMAT)
-                }
+                    actual: controlDate.format(DATE_FORMAT),
+                },
             };
         }
         else {
@@ -207,8 +201,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 +242,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 +278,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 +299,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 +328,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 +354,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 +393,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 +412,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 +420,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 +443,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 +469,7 @@ CamundaLongFormfieldComponent.ctorParameters = () => [];
  * limitations under the License.
  */
 class CamundaEnumFormfieldComponent {
-    constructor() {
-    }
+    constructor() { }
     ngOnInit() {
         this.valueKeys = Object.keys(this.formField.type.values);
     }
@@ -488,7 +477,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 +498,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 +529,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 +539,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 +572,7 @@ class CamundaFormfieldGeneratorDirective {
             long: CamundaLongFormfieldComponent,
             enum: CamundaEnumFormfieldComponent,
             textarea: CamundaTextareaFormfieldComponent,
-            choicefield: CamundaChoicefieldFormfieldComponent
+            choicefield: CamundaChoicefieldFormfieldComponent,
         };
     }
     ngOnInit() {
@@ -599,7 +589,7 @@ class CamundaFormfieldGeneratorDirective {
 }
 CamundaFormfieldGeneratorDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[valtimoCamundaFormfieldGenerator]'
+                selector: '[valtimoCamundaFormfieldGenerator]',
             },] }
 ];
 CamundaFormfieldGeneratorDirective.ctorParameters = () => [
@@ -627,8 +617,7 @@ CamundaFormfieldGeneratorDirective.propDecorators = {
  * limitations under the License.
  */
 class CamundaFormfieldValidationComponent {
-    constructor() {
-    }
+    constructor() { }
     ngOnInit() {
         this.formControl = this.formGroup.get(this.formField.id);
     }
@@ -636,7 +625,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 +663,10 @@ CamundaGeneratedFormModule.decorators = [
                     CamundaTextareaFormfieldComponent,
                     CamundaChoicefieldFormfieldComponent,
                     CamundaFormfieldValidationComponent,
-                    CamundaGeneratedFormComponent
-                ],
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule
-                ],
-                exports: [
-                    CamundaGeneratedFormComponent
+                    CamundaGeneratedFormComponent,
                 ],
+                imports: [CommonModule, ReactiveFormsModule],
+                exports: [CamundaGeneratedFormComponent],
                 entryComponents: [
                     CamundaStringFormfieldComponent,
                     CamundaBooleanFormfieldComponent,
@@ -690,8 +674,8 @@ CamundaGeneratedFormModule.decorators = [
                     CamundaLongFormfieldComponent,
                     CamundaEnumFormfieldComponent,
                     CamundaTextareaFormfieldComponent,
-                    CamundaChoicefieldFormfieldComponent
-                ]
+                    CamundaChoicefieldFormfieldComponent,
+                ],
             },] }
 ];
 
@@ -714,17 +698,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 +720,7 @@ CamundaFormModule.decorators = [
  * limitations under the License.
  */
 class TopbarComponent {
-    constructor() {
-    }
+    constructor() { }
 }
 TopbarComponent.decorators = [
     { type: Component, args: [{
@@ -776,11 +751,8 @@ class TopbarModule {
 TopbarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [TopbarComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule
-                ],
-                exports: [TopbarComponent]
+                imports: [CommonModule, RouterModule],
+                exports: [TopbarComponent],
             },] }
 ];
 
@@ -825,7 +797,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 +809,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 +861,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 +891,8 @@ class MenuRoutingModule {
 }
 MenuRoutingModule.decorators = [
     { type: NgModule, args: [{
-                imports: [
-                    RouterModule.forChild(routes)
-                ],
-                exports: [RouterModule]
+                imports: [RouterModule.forChild(routes)],
+                exports: [RouterModule],
             },] }
 ];
 
@@ -951,7 +920,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 +979,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 +1017,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 +1047,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 +1113,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 +1153,7 @@ class RightSidebarComponent {
             'emailNotificationOnThursday',
             'emailNotificationOnFriday',
             'emailNotificationOnSaturday',
-            'emailNotificationOnSunday'
+            'emailNotificationOnSunday',
         ];
         this.settingsForm = this.formBuilder.group({
             taskNotifications: new FormControl(false),
@@ -1198,13 +1164,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 +1230,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 +1274,12 @@ RightSidebarModule.decorators = [
                         loader: {
                             provide: TranslateLoader,
                             useFactory: ɵ0,
-                            deps: [HttpClient]
-                        }
+                            deps: [HttpClient],
+                        },
                     }),
-                    NgbTooltipModule
+                    NgbTooltipModule,
                 ],
-                exports: [RightSidebarComponent]
+                exports: [RightSidebarComponent],
             },] }
 ];
 
@@ -1411,7 +1379,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 +1439,7 @@ class PageTitleComponent {
         this.setTitle();
         this.routerSub = this.router.events
             .pipe(filter(event => event instanceof NavigationEnd))
-            .subscribe((event) => {
+            .subscribe(event => {
             this.setTitle();
         });
     }
@@ -1514,11 +1482,8 @@ class PageTitleModule {
 PageTitleModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [PageTitleComponent],
-                imports: [
-                    CommonModule,
-                    TranslateModule
-                ],
-                exports: [PageTitleComponent]
+                imports: [CommonModule, TranslateModule],
+                exports: [PageTitleComponent],
             },] }
 ];
 
@@ -1542,12 +1507,8 @@ class LeftSidebarModule {
 LeftSidebarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [LeftSidebarComponent],
-                imports: [
-                    CommonModule,
-                    MenuModule,
-                    PageTitleModule
-                ],
-                exports: [LeftSidebarComponent]
+                imports: [CommonModule, MenuModule, PageTitleModule],
+                exports: [LeftSidebarComponent],
             },] }
 ];
 
@@ -1599,7 +1560,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 +1697,7 @@ const TYPE_CONVERTERS = [
     dateTypeConverter,
     enumTypeConverter,
     stringReplaceUnderscoreTypeConverter,
-    relatedFilesTypeConverter
+    relatedFilesTypeConverter,
 ];
 
 /*
@@ -1762,7 +1723,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 +1742,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 +1776,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 +1833,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 +1844,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 +1895,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 +1942,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 +1971,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 +2006,8 @@ class CardModule {
 CardModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [CardComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [CardComponent]
+                imports: [CommonModule],
+                exports: [CardComponent],
             },] }
 ];
 
@@ -2076,7 +2032,7 @@ ListModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ListComponent, ListFilterPipe],
                 imports: [CommonModule, CardModule, NgbPaginationModule, FormsModule, TranslateModule],
-                exports: [ListComponent, ListFilterPipe]
+                exports: [ListComponent, ListFilterPipe],
             },] }
 ];
 
@@ -2136,7 +2092,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 +2113,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 +2121,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 +2173,8 @@ class BreadcrumbNavigationModule {
 BreadcrumbNavigationModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [BreadcrumbNavigationComponent],
-                imports: [
-                    CommonModule,
-                    RouterModule,
-                    TranslateModule
-                ],
-                exports: [BreadcrumbNavigationComponent]
+                imports: [CommonModule, RouterModule, TranslateModule],
+                exports: [BreadcrumbNavigationComponent],
             },] }
 ];
 
@@ -2246,12 +2198,8 @@ class PageHeaderModule {
 PageHeaderModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [PageHeaderComponent],
-                imports: [
-                    CommonModule,
-                    PageTitleModule,
-                    BreadcrumbNavigationModule
-                ],
-                exports: [PageHeaderComponent]
+                imports: [CommonModule, PageTitleModule, BreadcrumbNavigationModule],
+                exports: [PageHeaderComponent],
             },] }
 ];
 
@@ -2317,7 +2265,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 +2302,8 @@ class WidgetModule {
 WidgetModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [WidgetComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [WidgetComponent]
+                imports: [CommonModule],
+                exports: [WidgetComponent],
             },] }
 ];
 
@@ -2388,7 +2334,7 @@ class FieldAutoFocusDirective {
 }
 FieldAutoFocusDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[valtimoFieldAutoFocus]'
+                selector: '[valtimoFieldAutoFocus]',
             },] }
 ];
 FieldAutoFocusDirective.ctorParameters = () => [
@@ -2415,12 +2361,8 @@ class FieldAutoFocusModule {
 FieldAutoFocusModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [FieldAutoFocusDirective],
-                exports: [
-                    FieldAutoFocusDirective
-                ],
-                imports: [
-                    CommonModule
-                ]
+                exports: [FieldAutoFocusDirective],
+                imports: [CommonModule],
             },] }
 ];
 
@@ -2493,15 +2435,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 +2467,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 +2509,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 +2543,8 @@ class BpmnJsDiagramModule {
 BpmnJsDiagramModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [BpmnJsDiagramComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [BpmnJsDiagramComponent]
+                imports: [CommonModule],
+                exports: [BpmnJsDiagramComponent],
             },] }
 ];
 
@@ -2628,7 +2568,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 +2596,8 @@ class TimelineModule {
 TimelineModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [TimelineComponent],
-                imports: [
-                    CommonModule,
-                    TranslateModule,
-                ],
-                exports: [TimelineComponent]
+                imports: [CommonModule, TranslateModule],
+                exports: [TimelineComponent],
             },] }
 ];
 
@@ -2750,10 +2687,8 @@ class FilterSidebarModule {
 FilterSidebarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [FilterSidebarComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [FilterSidebarComponent]
+                imports: [CommonModule],
+                exports: [FilterSidebarComponent],
             },] }
 ];
 
@@ -2780,8 +2715,7 @@ class UploaderComponent {
         this.resourceRegistered = new EventEmitter();
         this.showFileList = true;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     onFileFieldChange(files) {
         for (const file of files) {
             this.uploadFile(file);
@@ -2811,7 +2745,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 +2796,7 @@ class UploaderDragDropDirective {
 }
 UploaderDragDropDirective.decorators = [
     { type: Directive, args: [{
-                selector: '[valtimoUploaderDragDrop]'
+                selector: '[valtimoUploaderDragDrop]',
             },] }
 ];
 UploaderDragDropDirective.propDecorators = {
@@ -2889,14 +2823,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 +2839,7 @@ class FileSizePipe {
 }
 FileSizePipe.decorators = [
     { type: Pipe, args: [{
-                name: 'filesize'
+                name: 'filesize',
             },] }
 ];
 
@@ -2936,10 +2863,8 @@ class FileSizeModule {
 FileSizeModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [FileSizePipe],
-                imports: [
-                    CommonModule
-                ],
-                exports: [FileSizePipe]
+                imports: [CommonModule],
+                exports: [FileSizePipe],
             },] }
 ];
 
@@ -2963,11 +2888,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 +2989,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 +3097,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 +3126,7 @@ AlertModule.decorators = [
     { type: NgModule, args: [{
                 imports: [CommonModule],
                 declarations: [AlertComponent],
-                exports: [AlertComponent]
+                exports: [AlertComponent],
             },] }
 ];
 
@@ -3227,8 +3147,7 @@ AlertModule.decorators = [
  */
 class DataListComponent {
     constructor() { }
-    ngOnInit() {
-    }
+    ngOnInit() { }
 }
 DataListComponent.decorators = [
     { type: Component, args: [{
@@ -3263,10 +3182,8 @@ class DataListModule {
 DataListModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [DataListComponent],
-                imports: [
-                    CommonModule
-                ],
-                exports: [DataListComponent]
+                imports: [CommonModule],
+                exports: [DataListComponent],
             },] }
 ];
 
@@ -3308,21 +3225,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 +3250,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 +3265,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 +3321,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 +3333,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 +3350,8 @@ FormioComponent.ctorParameters = () => [
     { type: UserProviderService },
     { type: NGXLogger },
     { type: FormIoStateService },
-    { type: ActivatedRoute }
+    { type: ActivatedRoute },
+    { type: TranslateService }
 ];
 FormioComponent.propDecorators = {
     form: [{ type: Input }],
@@ -3460,8 +3381,7 @@ class FormioBuilderComponent {
     constructor() {
         this.change = new EventEmitter();
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     onChange(event) {
         this.change.emit(event);
     }
@@ -3469,7 +3389,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 +3418,7 @@ const AppConfig = {
     appUrl: 'http://localhost:4200',
     apiUrl: 'http://localhost:4200',
     icons: 'fontawesome',
-    formOnly: false
+    formOnly: false,
 };
 
 class FormIoDomService {
@@ -3506,7 +3426,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 +3460,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 +3487,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 +3539,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 +3597,7 @@ class DropzoneComponent {
             accept: file => {
                 this.dropzone.removeAllFiles();
                 this.setFile(file);
-            }
+            },
         });
         this.setDropzoneEvents();
     }
@@ -3701,7 +3623,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 +3667,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 +3692,8 @@ class ProgressBarModule {
 ProgressBarModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ProgressBarComponent],
-                imports: [
-                    CommonModule,
-                ],
-                exports: [ProgressBarComponent]
+                imports: [CommonModule],
+                exports: [ProgressBarComponent],
             },] }
 ];
 
@@ -3805,8 +3725,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 +3755,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 +3788,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 +3816,8 @@ class WebcamModule {
 WebcamModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [WebcamComponent],
-                imports: [
-                    CommonModule,
-                    TranslateModule
-                ],
-                exports: [WebcamComponent]
+                imports: [CommonModule, TranslateModule],
+                exports: [WebcamComponent],
             },] }
 ];
 
@@ -3926,7 +3842,7 @@ DropzoneModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [DropzoneComponent],
                 imports: [CommonModule, TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule],
-                exports: [DropzoneComponent]
+                exports: [DropzoneComponent],
             },] }
 ];
 
@@ -3958,14 +3874,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 +3954,7 @@ ModalModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [ModalComponent],
                 imports: [CommonModule],
-                exports: [ModalComponent]
+                exports: [ModalComponent],
             },] }
 ];
 
@@ -4071,7 +3987,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 +4022,8 @@ class SpinnerModule {
 SpinnerModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SpinnerComponent],
-                exports: [
-                    SpinnerComponent
-                ],
-                imports: [
-                    CommonModule,
-                    NgxSpinnerModule,
-                    TranslateModule
-                ]
+                exports: [SpinnerComponent],
+                imports: [CommonModule, NgxSpinnerModule, TranslateModule],
             },] }
 ];
 
@@ -4199,7 +4109,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 +4141,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 +4158,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 +4180,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 +4192,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 +4231,7 @@ SearchableDropdownModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SearchableDropdownComponent],
                 imports: [CommonModule, ReactiveFormsModule],
-                exports: [SearchableDropdownComponent]
+                exports: [SearchableDropdownComponent],
             },] }
 ];
 
@@ -4345,7 +4257,7 @@ const formIoUploaderEditForm = () => ({
             tooltip: 'The name of this field in the API endpoint.',
             validate: {
                 required: true,
-            }
+            },
         },
         {
             type: 'textfield',
@@ -4409,7 +4321,7 @@ const formIoUploaderEditForm = () => ({
             validate: {
                 required: false,
             },
-        }
+        },
     ],
 });
 
@@ -4467,7 +4379,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 +4420,7 @@ SearchableDropdownSelectModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [SearchableDropdownSelectComponent],
                 imports: [CommonModule, ReactiveFormsModule, SearchableDropdownModule],
-                exports: [SearchableDropdownSelectComponent]
+                exports: [SearchableDropdownSelectComponent],
             },] }
 ];