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

package/bundles/valtimo-components.umd.js

@@ -1,11 +1,177 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('moment'), require('@valtimo/choicefield'), require('@angular/router'), require('ngx-logger'), require('@valtimo/config'), require('rxjs'), require('@valtimo/document'), require('@valtimo/security'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('@valtimo/context'), require('@valtimo/contract'), require('rxjs/operators'), require('@angular/platform-browser'), require('bpmn-js/dist/bpmn-navigated-viewer.production.min.js'), require('heatmap.js-fixed/build/heatmap.js'), require('@valtimo/resource'), require('angular-formio'), require('jwt-decode'), require('dropzone'), require('ngx-spinner')) :
-    typeof define === 'function' && define.amd ? define('@valtimo/components', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'moment', '@valtimo/choicefield', '@angular/router', 'ngx-logger', '@valtimo/config', 'rxjs', '@valtimo/document', '@valtimo/security', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', '@valtimo/context', '@valtimo/contract', 'rxjs/operators', '@angular/platform-browser', 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js', 'heatmap.js-fixed/build/heatmap.js', '@valtimo/resource', 'angular-formio', 'jwt-decode', 'dropzone', 'ngx-spinner'], factory) :
-    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.components = {}), global.ng.core, global.ng.common, global.ng.forms, global.moment, global.choicefield, global.ng.router, global.ngxLogger, global.config, global.rxjs, global.document, global.security, global.ngBootstrap, global.core$1, global.ng.common.http, global.context, global.contract, global.rxjs.operators, global.ng.platformBrowser, global.BpmnJS, global.heatmap, global.resource, global.angularFormio, global.jwt_decode, global.Dropzone, global.ngxSpinner));
-}(this, (function (exports, i0, common, forms, momentImported, choicefield, i1, i4, i1$1, rxjs, i2, i3, ngBootstrap, core, i1$2, context, contract, operators, platformBrowser, BpmnJS, heatmap, resource, angularFormio, jwt_decode, Dropzone, ngxSpinner) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('moment'), require('@valtimo/choicefield'), require('@angular/router'), require('ngx-logger'), require('@valtimo/config'), require('rxjs'), require('@valtimo/document'), require('@valtimo/security'), require('@ng-bootstrap/ng-bootstrap'), require('@ngx-translate/core'), require('@angular/common/http'), require('@valtimo/context'), require('rxjs/operators'), require('@angular/platform-browser'), require('bpmn-js/dist/bpmn-navigated-viewer.production.min.js'), require('heatmap.js-fixed/build/heatmap.js'), require('@valtimo/resource'), require('angular-formio'), require('jwt-decode'), require('dropzone'), require('ngx-spinner')) :
+    typeof define === 'function' && define.amd ? define('@valtimo/components', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'moment', '@valtimo/choicefield', '@angular/router', 'ngx-logger', '@valtimo/config', 'rxjs', '@valtimo/document', '@valtimo/security', '@ng-bootstrap/ng-bootstrap', '@ngx-translate/core', '@angular/common/http', '@valtimo/context', 'rxjs/operators', '@angular/platform-browser', 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js', 'heatmap.js-fixed/build/heatmap.js', '@valtimo/resource', 'angular-formio', 'jwt-decode', 'dropzone', 'ngx-spinner'], factory) :
+    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.components = {}), global.ng.core, global.ng.common, global.ng.forms, global.moment, global.choicefield, global.ng.router, global.ngxLogger, global.config, global.rxjs, global.document, global.security, global.ngBootstrap, global.core$1, global.ng.common.http, global.context, global.rxjs.operators, global.ng.platformBrowser, global.BpmnJS, global.heatmap, global.resource, global.angularFormio, global.jwt_decode, global.Dropzone, global.ngxSpinner));
+}(this, (function (exports, i0, common, forms, momentImported, choicefield, i1, i4, i1$1, rxjs, i2, i3, ngBootstrap, core, i1$2, context, operators, platformBrowser, BpmnJS, heatmap, resource, angularFormio, jwt_decode, Dropzone, ngxSpinner) { 'use strict';
 
     jwt_decode = jwt_decode && Object.prototype.hasOwnProperty.call(jwt_decode, 'default') ? jwt_decode['default'] : jwt_decode;
 
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var Alert = /** @class */ (function () {
+        function Alert(init) {
+            Object.assign(this, init);
+        }
+        return Alert;
+    }());
+    (function (AlertType) {
+        AlertType[AlertType["Success"] = 0] = "Success";
+        AlertType[AlertType["Error"] = 1] = "Error";
+        AlertType[AlertType["Info"] = 2] = "Info";
+        AlertType[AlertType["Warning"] = 3] = "Warning";
+        AlertType[AlertType["Notification"] = 4] = "Notification";
+        AlertType[AlertType["ModalNotification"] = 5] = "ModalNotification";
+    })(exports.AlertType || (exports.AlertType = {}));
+
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var AlertsOptionsImpl = /** @class */ (function () {
+        function AlertsOptionsImpl(submitMessage) {
+            this.submitMessage = submitMessage;
+        }
+        return AlertsOptionsImpl;
+    }());
+    var FormioOptionsImpl = /** @class */ (function () {
+        function FormioOptionsImpl() {
+        }
+        FormioOptionsImpl.prototype.setAlertMessage = function (submitMessage) {
+            this.alerts = new AlertsOptionsImpl(submitMessage);
+        };
+        FormioOptionsImpl.prototype.setHooks = function (beforeSubmit) {
+            this.hooks = { beforeSubmit: beforeSubmit };
+        };
+        return FormioOptionsImpl;
+    }());
+
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+    var TimelineItemImpl = /** @class */ (function () {
+        function TimelineItemImpl(date, time, user, activity, summaryTranslationKey, summaryTranslationParams) {
+            this._date = date;
+            this._time = time;
+            this._user = user;
+            this._activity = activity;
+            this._summaryTranslationKey = summaryTranslationKey;
+            this._summaryTranslationParams = summaryTranslationParams;
+        }
+        Object.defineProperty(TimelineItemImpl.prototype, "date", {
+            get: function () {
+                return this._date;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimelineItemImpl.prototype, "time", {
+            get: function () {
+                return this._time;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimelineItemImpl.prototype, "user", {
+            get: function () {
+                return this._user;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimelineItemImpl.prototype, "activity", {
+            get: function () {
+                return this._activity;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimelineItemImpl.prototype, "summaryTranslationKey", {
+            get: function () {
+                return this._summaryTranslationKey;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TimelineItemImpl.prototype, "summaryTranslationParams", {
+            get: function () {
+                return this._summaryTranslationParams;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return TimelineItemImpl;
+    }());
+
+    /*
+     * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *
+     * Licensed under EUPL, Version 1.2 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" basis,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     */
+
+    /*
+     *
+     *  * Copyright 2015-2020 Ritense BV, the Netherlands.
+     *  *
+     *  * Licensed under EUPL, Version 1.2 (the "License");
+     *  * you may not use this file except in compliance with the License.
+     *  * You may obtain a copy of the License at
+     *  *
+     *  * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+     *  *
+     *  * Unless required by applicable law or agreed to in writing, software
+     *  * distributed under the License is distributed on an "AS IS" basis,
+     *  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     *  * See the License for the specific language governing permissions and
+     *  * limitations under the License.
+     *
+     */
+
     /*
      * Copyright 2015-2020 Ritense BV, the Netherlands.
      *
@@ -33,7 +199,7 @@
     CamundaFormComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -74,7 +240,7 @@
     CamundaCustomFormComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -108,15 +274,9 @@
     }());
     CamundaCustomFormModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [
-                        CamundaCustomFormComponent
-                    ],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [
-                        CamundaCustomFormComponent
-                    ]
+                    declarations: [CamundaCustomFormComponent],
+                    imports: [common.CommonModule],
+                    exports: [CamundaCustomFormComponent],
                 },] }
     ];
 
@@ -149,8 +309,8 @@
                 return {
                     minDate: {
                         minDate: momentMinDate.format(DATE_FORMAT),
-                        actual: controlDate.format(DATE_FORMAT)
-                    }
+                        actual: controlDate.format(DATE_FORMAT),
+                    },
                 };
             }
             else {
@@ -169,8 +329,8 @@
                 return {
                     maxDate: {
                         maxDate: momentMaxDate.format(DATE_FORMAT),
-                        actual: controlDate.format(DATE_FORMAT)
-                    }
+                        actual: controlDate.format(DATE_FORMAT),
+                    },
                 };
             }
             else {
@@ -238,7 +398,7 @@
     CamundaFormfieldService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CamundaFormfieldService_Factory() { return new CamundaFormfieldService(); }, token: CamundaFormfieldService, providedIn: "root" });
     CamundaFormfieldService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     CamundaFormfieldService.ctorParameters = function () { return []; };
@@ -275,7 +435,7 @@
             this.formFields.forEach(function (formField) {
                 var control = new forms.FormControl({
                     value: formField.defaultValue,
-                    disabled: _this.camundaFormFieldService.isFormFieldDisabled(formField)
+                    disabled: _this.camundaFormFieldService.isFormFieldDisabled(formField),
                 }, _this.camundaFormFieldService.getValidatorTypes(formField));
                 group.addControl(formField.id, control);
             });
@@ -297,7 +457,7 @@
     CamundaGeneratedFormComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -333,7 +493,7 @@
     CamundaStringFormfieldComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -361,7 +521,7 @@
     CamundaBooleanFormfieldComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -395,9 +555,9 @@
                 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',
             };
         };
         CamundaDateFormfieldComponent.prototype.ngAfterViewInit = function () {
@@ -424,7 +584,7 @@
     CamundaDateFormfieldComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -454,7 +614,7 @@
     CamundaLongFormfieldComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -485,7 +645,7 @@
     CamundaEnumFormfieldComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -513,7 +673,7 @@
     CamundaTextareaFormfieldComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -540,7 +700,9 @@
         }
         CamundaChoicefieldFormfieldComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.choicefieldService.getChoiceFieldValuesByName(this.formField.properties['choicefield']).subscribe(function (data) {
+            this.choicefieldService
+                .getChoiceFieldValuesByName(this.formField.properties['choicefield'])
+                .subscribe(function (data) {
                 _this.choicefieldValues = data;
             });
         };
@@ -549,7 +711,7 @@
     CamundaChoicefieldFormfieldComponent.decorators = [
         { type: i0.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 = function () { return [
@@ -582,7 +744,7 @@
                 long: CamundaLongFormfieldComponent,
                 enum: CamundaEnumFormfieldComponent,
                 textarea: CamundaTextareaFormfieldComponent,
-                choicefield: CamundaChoicefieldFormfieldComponent
+                choicefield: CamundaChoicefieldFormfieldComponent,
             };
         }
         CamundaFormfieldGeneratorDirective.prototype.ngOnInit = function () {
@@ -600,7 +762,7 @@
     }());
     CamundaFormfieldGeneratorDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[valtimoCamundaFormfieldGenerator]'
+                    selector: '[valtimoCamundaFormfieldGenerator]',
                 },] }
     ];
     CamundaFormfieldGeneratorDirective.ctorParameters = function () { return [
@@ -638,7 +800,7 @@
     CamundaFormfieldValidationComponent.decorators = [
         { type: i0.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 = function () { return []; };
@@ -679,15 +841,10 @@
                         CamundaTextareaFormfieldComponent,
                         CamundaChoicefieldFormfieldComponent,
                         CamundaFormfieldValidationComponent,
-                        CamundaGeneratedFormComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule
-                    ],
-                    exports: [
-                        CamundaGeneratedFormComponent
+                        CamundaGeneratedFormComponent,
                     ],
+                    imports: [common.CommonModule, forms.ReactiveFormsModule],
+                    exports: [CamundaGeneratedFormComponent],
                     entryComponents: [
                         CamundaStringFormfieldComponent,
                         CamundaBooleanFormfieldComponent,
@@ -695,8 +852,8 @@
                         CamundaLongFormfieldComponent,
                         CamundaEnumFormfieldComponent,
                         CamundaTextareaFormfieldComponent,
-                        CamundaChoicefieldFormfieldComponent
-                    ]
+                        CamundaChoicefieldFormfieldComponent,
+                    ],
                 },] }
     ];
 
@@ -722,17 +879,9 @@
     }());
     CamundaFormModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [
-                        CamundaFormComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        CamundaGeneratedFormModule,
-                        CamundaCustomFormModule
-                    ],
-                    exports: [
-                        CamundaFormComponent
-                    ]
+                    declarations: [CamundaFormComponent],
+                    imports: [common.CommonModule, CamundaGeneratedFormModule, CamundaCustomFormModule],
+                    exports: [CamundaFormComponent],
                 },] }
     ];
 
@@ -788,11 +937,8 @@
     TopbarModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [TopbarComponent],
-                    imports: [
-                        common.CommonModule,
-                        i1.RouterModule
-                    ],
-                    exports: [TopbarComponent]
+                    imports: [common.CommonModule, i1.RouterModule],
+                    exports: [TopbarComponent],
                 },] }
     ];
 
@@ -842,7 +988,7 @@
                 menuItems.push(menuItem);
             });
             menuItems = this.sortMenuItems(menuItems);
-            this.appendDossierSubMenuItems(menuItems).subscribe(function (value) { return menuItems = _this.applyMenuRoleSecurity(value); });
+            this.appendDossierSubMenuItems(menuItems).subscribe(function (value) { return (menuItems = _this.applyMenuRoleSecurity(value)); });
             return menuItems;
         };
         MenuService.prototype.sortMenuItems = function (menuItems) {
@@ -855,13 +1001,12 @@
             return new rxjs.Observable(function (subscriber) {
                 _this.logger.debug('appendDossierSubMenuItems');
                 _this.documentService.getAllDefinitions().subscribe(function (definitions) {
-                    var dossierMenuItems = definitions.content
-                        .map(function (definition, index) { return ({
+                    var dossierMenuItems = definitions.content.map(function (definition, index) { return ({
                         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);
                     var menuItemIndex = menuItems.findIndex(function (_a) {
@@ -913,7 +1058,7 @@
     MenuService.ɵprov = i0.ɵɵdefineInjectable({ factory: function MenuService_Factory() { return new MenuService(i0.ɵɵinject(i1$1.ConfigService), i0.ɵɵinject(i2.DocumentService), i0.ɵɵinject(i3.UserProviderService), i0.ɵɵinject(i4.NGXLogger)); }, token: MenuService, providedIn: "root" });
     MenuService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     MenuService.ctorParameters = function () { return [
@@ -946,10 +1091,8 @@
     }());
     MenuRoutingModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [
-                        i1.RouterModule.forChild(routes)
-                    ],
-                    exports: [i1.RouterModule]
+                    imports: [i1.RouterModule.forChild(routes)],
+                    exports: [i1.RouterModule],
                 },] }
     ];
 
@@ -978,7 +1121,7 @@
         MenuComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.openRouterSubscription();
-            this.menuItemSubscription = this.menuService.menuItems$.subscribe(function (value) { return _this.menuItems = value; });
+            this.menuItemSubscription = this.menuService.menuItems$.subscribe(function (value) { return (_this.menuItems = value); });
         };
         MenuComponent.prototype.ngOnDestroy = function () {
             this.routerSubscription.unsubscribe();
@@ -1041,7 +1184,7 @@
     MenuItemTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-menu-item-text',
-                    template: "\n    <i class=\"{{ menuItem.iconClass }}\"\n       container=\"body\"\n       placement=\"right\"\n       ngbTooltip=\"{{ menuItem.title | translate }}\"\n       autoClose=\"true\">\n    </i>\n    <span>{{ menuItem.title | translate }}</span>\n  "
+                    template: "\n    <i\n      class=\"{{ menuItem.iconClass }}\"\n      container=\"body\"\n      placement=\"right\"\n      ngbTooltip=\"{{ menuItem.title | translate }}\"\n      autoClose=\"true\"\n    >\n    </i>\n    <span>{{ menuItem.title | translate }}</span>\n  "
                 },] }
     ];
     MenuItemTextComponent.propDecorators = {
@@ -1071,7 +1214,7 @@
     SubmenuItemTextComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-submenu-item-text',
-                    template: "\n    <span [ngClass]=\"submenuItem.textClass\">\n    {{ submenuItem.title | translate }}\n      <ng-container *ngIf=\"!submenuItem.link\">&gt;</ng-container>\n    </span>\n  "
+                    template: "\n    <span [ngClass]=\"submenuItem.textClass\">\n      {{ submenuItem.title | translate }}\n      <ng-container *ngIf=\"!submenuItem.link\">&gt;</ng-container>\n    </span>\n  "
                 },] }
     ];
     SubmenuItemTextComponent.propDecorators = {
@@ -1101,14 +1244,9 @@
     MenuModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [MenuComponent, MenuItemTextComponent, SubmenuItemTextComponent],
-                    imports: [
-                        common.CommonModule,
-                        i1.RouterModule,
-                        ngBootstrap.NgbTooltipModule,
-                        core.TranslateModule
-                    ],
+                    imports: [common.CommonModule, i1.RouterModule, ngBootstrap.NgbTooltipModule, core.TranslateModule],
                     exports: [MenuComponent],
-                    providers: []
+                    providers: [],
                 },] }
     ];
 
@@ -1169,6 +1307,8 @@
         return extendStatics(d, b);
     };
     function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -1354,11 +1494,13 @@
         }
         return ar;
     }
+    /** @deprecated */
     function __spread() {
         for (var ar = [], i = 0; i < arguments.length; i++)
             ar = ar.concat(__read(arguments[i]));
         return ar;
     }
+    /** @deprecated */
     function __spreadArrays() {
         for (var s = 0, i = 0, il = arguments.length; i < il; i++)
             s += arguments[i].length;
@@ -1367,7 +1509,17 @@
                 r[k] = a[j];
         return r;
     }
-    ;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
     }
@@ -1432,18 +1584,21 @@
     function __importDefault(mod) {
         return (mod && mod.__esModule) ? mod : { default: mod };
     }
-    function __classPrivateFieldGet(receiver, privateMap) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to get private field on non-instance");
-        }
-        return privateMap.get(receiver);
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
     }
-    function __classPrivateFieldSet(receiver, privateMap, value) {
-        if (!privateMap.has(receiver)) {
-            throw new TypeError("attempted to set private field on non-instance");
-        }
-        privateMap.set(receiver, value);
-        return value;
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
     /*
@@ -1474,7 +1629,7 @@
     VersionService.ɵprov = i0.ɵɵdefineInjectable({ factory: function VersionService_Factory() { return new VersionService(i0.ɵɵinject(i1$2.HttpClient)); }, token: VersionService, providedIn: "root" });
     VersionService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     VersionService.ctorParameters = function () { return [
@@ -1499,7 +1654,7 @@
                 'emailNotificationOnThursday',
                 'emailNotificationOnFriday',
                 'emailNotificationOnSaturday',
-                'emailNotificationOnSunday'
+                'emailNotificationOnSunday',
             ];
             this.settingsForm = this.formBuilder.group({
                 taskNotifications: new forms.FormControl(false),
@@ -1510,14 +1665,16 @@
                 emailNotificationOnThursday: new forms.FormControl(false),
                 emailNotificationOnFriday: new forms.FormControl(false),
                 emailNotificationOnSaturday: new forms.FormControl(false),
-                emailNotificationOnSunday: new forms.FormControl(false)
+                emailNotificationOnSunday: new forms.FormControl(false),
             });
             this.getUserSettings();
         };
         RightSidebarComponent.prototype.loadContextSwitch = function () {
             var _this = this;
-            rxjs.combineLatest([this.contextService.getUserContexts(), this.contextService.getUserContextActive()])
-                .subscribe(function (_a) {
+            rxjs.combineLatest([
+                this.contextService.getUserContexts(),
+                this.contextService.getUserContextActive(),
+            ]).subscribe(function (_a) {
                 var _b = __read(_a, 2), userContexts = _b[0], userContextActive = _b[1];
                 _this.userContextActive = userContextActive;
                 _this.userContexts = userContexts;
@@ -1580,7 +1737,7 @@
     RightSidebarComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -1609,7 +1766,7 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      */
-    var ɵ0 = contract.HttpLoaderFactory;
+    var ɵ0 = i1$1.HttpLoaderFactory;
     var RightSidebarModule = /** @class */ (function () {
         function RightSidebarModule() {
         }
@@ -1627,12 +1784,12 @@
                             loader: {
                                 provide: core.TranslateLoader,
                                 useFactory: ɵ0,
-                                deps: [i1$2.HttpClient]
-                            }
+                                deps: [i1$2.HttpClient],
+                            },
                         }),
-                        ngBootstrap.NgbTooltipModule
+                        ngBootstrap.NgbTooltipModule,
                     ],
-                    exports: [RightSidebarComponent]
+                    exports: [RightSidebarComponent],
                 },] }
     ];
 
@@ -1722,7 +1879,7 @@
     LeftSidebarComponent.decorators = [
         { type: i0.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\")}"]
                 },] }
     ];
@@ -1831,11 +1988,8 @@
     PageTitleModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [PageTitleComponent],
-                    imports: [
-                        common.CommonModule,
-                        core.TranslateModule
-                    ],
-                    exports: [PageTitleComponent]
+                    imports: [common.CommonModule, core.TranslateModule],
+                    exports: [PageTitleComponent],
                 },] }
     ];
 
@@ -1862,12 +2016,8 @@
     LeftSidebarModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [LeftSidebarComponent],
-                    imports: [
-                        common.CommonModule,
-                        MenuModule,
-                        PageTitleModule
-                    ],
-                    exports: [LeftSidebarComponent]
+                    imports: [common.CommonModule, MenuModule, PageTitleModule],
+                    exports: [LeftSidebarComponent],
                 },] }
     ];
 
@@ -1924,7 +2074,7 @@
                 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';
             }
         };
         return BooleanTypeConverter;
@@ -2072,7 +2222,7 @@
         dateTypeConverter,
         enumTypeConverter,
         stringReplaceUnderscoreTypeConverter,
-        relatedFilesTypeConverter
+        relatedFilesTypeConverter,
     ];
 
     /*
@@ -2099,7 +2249,7 @@
         }
         ViewContentService.prototype.get = function (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);
@@ -2119,7 +2269,7 @@
     ViewContentService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ViewContentService_Factory() { return new ViewContentService(); }, token: ViewContentService, providedIn: "root" });
     ViewContentService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     ViewContentService.ctorParameters = function () { return []; };
@@ -2153,7 +2303,7 @@
             this.regExpStringRemoveUnderscore = /_/g;
             this.sort$ = new rxjs.BehaviorSubject({
                 state: { name: '', direction: 'DESC' },
-                isSorting: false
+                isSorting: false,
             });
             this.viewListAs = localStorage.getItem('viewListAs') || 'table';
         }
@@ -2212,7 +2362,7 @@
                     item.listItemFields = _this.fields.map(function (field) { return ({
                         key: field.key,
                         label: field.label,
-                        value: _this.resolveObject(field, item)
+                        value: _this.resolveObject(field, item),
                     }); });
                 });
             }
@@ -2223,7 +2373,9 @@
         ListComponent.prototype.resolveObject = function (definition, obj) {
             var definitionKey = definition.key;
             var customPropString = '$.';
-            var key = definitionKey.includes(customPropString) ? definitionKey.split(customPropString)[1] : definitionKey;
+            var key = definitionKey.includes(customPropString)
+                ? definitionKey.split(customPropString)[1]
+                : definitionKey;
             var resolvedObjValue = key.split('.').reduce(function (prev, curr) {
                 return prev ? prev[curr] : null;
             }, obj || self);
@@ -2274,7 +2426,7 @@
     ListComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -2323,17 +2475,13 @@
             if (!filterText) {
                 return list;
             }
-            return list.filter(function (item) { return Object.keys(item).some(function (k) { return item[k] != null &&
-                item[k]
-                    .toString()
-                    .toLowerCase()
-                    .includes(filterText.toLowerCase()); }); });
+            return list.filter(function (item) { return Object.keys(item).some(function (k) { return item[k] != null && item[k].toString().toLowerCase().includes(filterText.toLowerCase()); }); });
         };
         return ListFilterPipe;
     }());
     ListFilterPipe.decorators = [
         { type: i0.Pipe, args: [{
-                    name: 'listFilter'
+                    name: 'listFilter',
                 },] }
     ];
 
@@ -2358,14 +2506,13 @@
     var CardComponent = /** @class */ (function () {
         function CardComponent() {
         }
-        CardComponent.prototype.ngOnInit = function () {
-        };
+        CardComponent.prototype.ngOnInit = function () { };
         return CardComponent;
     }());
     CardComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -2398,10 +2545,8 @@
     CardModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [CardComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [CardComponent]
+                    imports: [common.CommonModule],
+                    exports: [CardComponent],
                 },] }
     ];
 
@@ -2429,7 +2574,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [ListComponent, ListFilterPipe],
                     imports: [common.CommonModule, CardModule, ngBootstrap.NgbPaginationModule, forms.FormsModule, core.TranslateModule],
-                    exports: [ListComponent, ListFilterPipe]
+                    exports: [ListComponent, ListFilterPipe],
                 },] }
     ];
 
@@ -2513,7 +2658,7 @@
                     url: snapshot.url.join('/'),
                     path: snapshot.routeConfig.path,
                     label: snapshot.data['title'],
-                    params: snapshot.params
+                    params: snapshot.params,
                 };
                 this.generateBreadcrumbs(activeRoute);
             }
@@ -2522,14 +2667,14 @@
             var _this = this;
             this.breadcrumbs = [];
             this.router.config.map(function (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 !== '') {
                     var parentRoute_1 = {
                         url: routerConfig.path.replace(/:(.+?)\b/g, function (_, p1) { return activeBreadcrumb.params[p1]; }),
                         path: routerConfig.path,
                         label: routerConfig.data['title'],
-                        params: activeBreadcrumb.params
+                        params: activeBreadcrumb.params,
                     };
                     var exist = _this.breadcrumbs.findIndex(function (item) { return item.url === parentRoute_1.url; });
                     if (exist === -1) {
@@ -2578,12 +2723,8 @@
     BreadcrumbNavigationModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [BreadcrumbNavigationComponent],
-                    imports: [
-                        common.CommonModule,
-                        i1.RouterModule,
-                        core.TranslateModule
-                    ],
-                    exports: [BreadcrumbNavigationComponent]
+                    imports: [common.CommonModule, i1.RouterModule, core.TranslateModule],
+                    exports: [BreadcrumbNavigationComponent],
                 },] }
     ];
 
@@ -2610,12 +2751,8 @@
     PageHeaderModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [PageHeaderComponent],
-                    imports: [
-                        common.CommonModule,
-                        PageTitleModule,
-                        BreadcrumbNavigationModule
-                    ],
-                    exports: [PageHeaderComponent]
+                    imports: [common.CommonModule, PageTitleModule, BreadcrumbNavigationModule],
+                    exports: [PageHeaderComponent],
                 },] }
     ];
 
@@ -2684,7 +2821,7 @@
     WidgetComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -2724,10 +2861,8 @@
     WidgetModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [WidgetComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [WidgetComponent]
+                    imports: [common.CommonModule],
+                    exports: [WidgetComponent],
                 },] }
     ];
 
@@ -2760,7 +2895,7 @@
     }());
     FieldAutoFocusDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[valtimoFieldAutoFocus]'
+                    selector: '[valtimoFieldAutoFocus]',
                 },] }
     ];
     FieldAutoFocusDirective.ctorParameters = function () { return [
@@ -2790,12 +2925,8 @@
     FieldAutoFocusModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [FieldAutoFocusDirective],
-                    exports: [
-                        FieldAutoFocusDirective
-                    ],
-                    imports: [
-                        common.CommonModule
-                    ]
+                    exports: [FieldAutoFocusDirective],
+                    imports: [common.CommonModule],
                 },] }
     ];
 
@@ -2871,15 +3002,15 @@
             }
             if (inputData) {
                 Object.keys(inputData).forEach(function (key) {
-                    var diagramContainer = _this.el.nativeElement.querySelector('svg')
-                        .getBoundingClientRect(), diagramElm = _this.el.nativeElement.querySelector("g[data-element-id=" + key + "]")
+                    var 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);
@@ -2903,27 +3034,27 @@
             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>",
             });
         };
         BpmnJsDiagramComponent.prototype.showHeatmap = function () {
             this.heatMapInstance = heatmap.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,
             });
         };
         BpmnJsDiagramComponent.prototype.clearHeatmap = function () {
@@ -2946,7 +3077,7 @@
     BpmnJsDiagramComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -2983,10 +3114,8 @@
     BpmnJsDiagramModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [BpmnJsDiagramComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [BpmnJsDiagramComponent]
+                    imports: [common.CommonModule],
+                    exports: [BpmnJsDiagramComponent],
                 },] }
     ];
 
@@ -3013,7 +3142,7 @@
     TimelineComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -3044,11 +3173,8 @@
     TimelineModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [TimelineComponent],
-                    imports: [
-                        common.CommonModule,
-                        core.TranslateModule,
-                    ],
-                    exports: [TimelineComponent]
+                    imports: [common.CommonModule, core.TranslateModule],
+                    exports: [TimelineComponent],
                 },] }
     ];
 
@@ -3145,10 +3271,8 @@
     FilterSidebarModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [FilterSidebarComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [FilterSidebarComponent]
+                    imports: [common.CommonModule],
+                    exports: [FilterSidebarComponent],
                 },] }
     ];
 
@@ -3160,8 +3284,7 @@
             this.resourceRegistered = new i0.EventEmitter();
             this.showFileList = true;
         }
-        UploaderComponent.prototype.ngOnInit = function () {
-        };
+        UploaderComponent.prototype.ngOnInit = function () { };
         UploaderComponent.prototype.onFileFieldChange = function (files) {
             var e_1, _a;
             try {
@@ -3183,7 +3306,7 @@
             this.s3Service.getPreSignedUrl(file.name).subscribe(function (value) {
                 var preSignedUrl = new URL(value);
                 _this.s3Service.upload(preSignedUrl, file).subscribe(function (result) {
-                    var s3ResourceDTO = new contract.S3Resource(file, preSignedUrl);
+                    var s3ResourceDTO = new resource.S3Resource(file, preSignedUrl);
                     _this.s3Service.registerResource(s3ResourceDTO).subscribe(function (resource) {
                         _this.resources.push(resource);
                         _this.resourceRegistered.emit(resource);
@@ -3205,7 +3328,7 @@
     UploaderComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -3257,7 +3380,7 @@
     }());
     UploaderDragDropDirective.decorators = [
         { type: i0.Directive, args: [{
-                    selector: '[valtimoUploaderDragDrop]'
+                    selector: '[valtimoUploaderDragDrop]',
                 },] }
     ];
     UploaderDragDropDirective.propDecorators = {
@@ -3284,14 +3407,7 @@
      */
     var FileSizePipe = /** @class */ (function () {
         function FileSizePipe() {
-            this.units = [
-                'bytes',
-                'KB',
-                'MB',
-                'GB',
-                'TB',
-                'PB'
-            ];
+            this.units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
         }
         FileSizePipe.prototype.transform = function (bytes, precision) {
             if (bytes === void 0) { bytes = 0; }
@@ -3310,7 +3426,7 @@
     }());
     FileSizePipe.decorators = [
         { type: i0.Pipe, args: [{
-                    name: 'filesize'
+                    name: 'filesize',
                 },] }
     ];
 
@@ -3337,10 +3453,8 @@
     FileSizeModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [FileSizePipe],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [FileSizePipe]
+                    imports: [common.CommonModule],
+                    exports: [FileSizePipe],
                 },] }
     ];
 
@@ -3367,11 +3481,8 @@
     UploaderModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [UploaderComponent, UploaderDragDropDirective],
-                    imports: [
-                        common.CommonModule,
-                        FileSizeModule
-                    ],
-                    exports: [UploaderComponent, UploaderDragDropDirective]
+                    imports: [common.CommonModule, FileSizeModule],
+                    exports: [UploaderComponent, UploaderDragDropDirective],
                 },] }
     ];
 
@@ -3410,22 +3521,22 @@
         };
         // convenience methods
         AlertService.prototype.success = function (message, confirmations, iconClass) {
-            this.alert(new contract.Alert({ message: message, type: contract.AlertType.Success, confirmations: confirmations, iconClass: iconClass }));
+            this.alert(new Alert({ message: message, type: exports.AlertType.Success, confirmations: confirmations, iconClass: iconClass }));
         };
         AlertService.prototype.error = function (message, confirmations, iconClass) {
-            this.alert(new contract.Alert({ message: message, type: contract.AlertType.Error, confirmations: confirmations, iconClass: iconClass }));
+            this.alert(new Alert({ message: message, type: exports.AlertType.Error, confirmations: confirmations, iconClass: iconClass }));
         };
         AlertService.prototype.info = function (message, confirmations, iconClass) {
-            this.alert(new contract.Alert({ message: message, type: contract.AlertType.Info, confirmations: confirmations, iconClass: iconClass }));
+            this.alert(new Alert({ message: message, type: exports.AlertType.Info, confirmations: confirmations, iconClass: iconClass }));
         };
         AlertService.prototype.warning = function (message, confirmations, iconClass) {
-            this.alert(new contract.Alert({ message: message, type: contract.AlertType.Warning, confirmations: confirmations, iconClass: iconClass }));
+            this.alert(new Alert({ message: message, type: exports.AlertType.Warning, confirmations: confirmations, iconClass: iconClass }));
         };
         AlertService.prototype.notification = function (message, confirmations, iconClass) {
-            this.alert(new contract.Alert({ message: message, type: contract.AlertType.Notification, confirmations: confirmations, iconClass: iconClass }));
+            this.alert(new Alert({ message: message, type: exports.AlertType.Notification, confirmations: confirmations, iconClass: iconClass }));
         };
         AlertService.prototype.modalNotification = function (message, confirmations, iconClass) {
-            this.alert(new contract.Alert({ message: message, type: contract.AlertType.ModalNotification, confirmations: confirmations, iconClass: iconClass }));
+            this.alert(new Alert({ message: message, type: exports.AlertType.ModalNotification, confirmations: confirmations, iconClass: iconClass }));
         };
         // main alert method
         AlertService.prototype.alert = function (alert) {
@@ -3433,7 +3544,7 @@
         };
         // clear alerts
         AlertService.prototype.clear = function () {
-            this.subject.next(new contract.Alert({}));
+            this.subject.next(new Alert({}));
         };
         // emit confirm
         AlertService.prototype.emitAlertConfirmEvent = function (alert) {
@@ -3473,12 +3584,10 @@
             this.alerts = [];
             this.autoCloseInMS = 5000;
         }
-        AlertComponent.prototype.ngOnInit = function () {
-        };
+        AlertComponent.prototype.ngOnInit = function () { };
         AlertComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
-            this.subscription = this.alertService.onAlert()
-                .subscribe(function (alert) {
+            this.subscription = this.alertService.onAlert().subscribe(function (alert) {
                 if (!alert.message) {
                     // clear alerts when an empty alert is received
                     _this.alerts = [];
@@ -3534,7 +3643,7 @@
             }
             // return true based on AlertType.ModalNotification
             switch (alert.type) {
-                case contract.AlertType.ModalNotification:
+                case exports.AlertType.ModalNotification:
                     return true;
                 default:
                     return false;
@@ -3546,17 +3655,17 @@
             }
             // return css class based on alert type
             switch (alert.type) {
-                case contract.AlertType.Success:
+                case exports.AlertType.Success:
                     return 'alert alert-success';
-                case contract.AlertType.Error:
+                case exports.AlertType.Error:
                     return 'alert alert-danger';
-                case contract.AlertType.Info:
+                case exports.AlertType.Info:
                     return 'alert alert-info';
-                case contract.AlertType.Warning:
+                case exports.AlertType.Warning:
                     return 'alert alert-warning';
-                case contract.AlertType.Notification:
+                case exports.AlertType.Notification:
                     return 'alert alert-light';
-                case contract.AlertType.ModalNotification:
+                case exports.AlertType.ModalNotification:
                     return 'alert alert-light';
             }
         };
@@ -3566,17 +3675,17 @@
             }
             // return css class based on alert type
             switch (alert.type) {
-                case contract.AlertType.Success:
+                case exports.AlertType.Success:
                     return 'mdi mdi-check';
-                case contract.AlertType.Error:
+                case exports.AlertType.Error:
                     return 'mdi mdi-close-circle-o';
-                case contract.AlertType.Info:
+                case exports.AlertType.Info:
                     return 'mdi mdi-info-outline';
-                case contract.AlertType.Warning:
+                case exports.AlertType.Warning:
                     return 'mdi mdi-alert-triangle';
-                case contract.AlertType.Notification:
+                case exports.AlertType.Notification:
                     return 'mdi mdi-notifications';
-                case contract.AlertType.ModalNotification:
+                case exports.AlertType.ModalNotification:
                     return 'mdi mdi-notifications';
             }
         };
@@ -3585,7 +3694,7 @@
     AlertComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -3617,7 +3726,7 @@
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule],
                     declarations: [AlertComponent],
-                    exports: [AlertComponent]
+                    exports: [AlertComponent],
                 },] }
     ];
 
@@ -3639,8 +3748,7 @@
     var DataListComponent = /** @class */ (function () {
         function DataListComponent() {
         }
-        DataListComponent.prototype.ngOnInit = function () {
-        };
+        DataListComponent.prototype.ngOnInit = function () { };
         return DataListComponent;
     }());
     DataListComponent.decorators = [
@@ -3679,10 +3787,8 @@
     DataListModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [DataListComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [DataListComponent]
+                    imports: [common.CommonModule],
+                    exports: [DataListComponent],
                 },] }
     ];
 
@@ -3737,21 +3843,22 @@
      * limitations under the License.
      */
     var FormioComponent = /** @class */ (function () {
-        function FormioComponent(userProviderService, logger, stateService, route) {
+        function FormioComponent(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 i0.EventEmitter();
             this.change = new i0.EventEmitter();
             this.refreshForm = new i0.EventEmitter();
             this.errors = [];
+            this.currentLanguage$ = new rxjs.BehaviorSubject(this.translateService.currentLang);
         }
         FormioComponent.prototype.ngOnInit = function () {
             var documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName');
             var formDefinition = this.form;
-            this.loadUserLanguageSetting();
             this.formDefinition = formDefinition;
             this.errors = [];
             if (this.formHasLegacyUpload(formDefinition)) {
@@ -3761,11 +3868,11 @@
                 this.stateService.setDocumentDefinitionName(documentDefinitionName);
             }
             this.subscribeFormRefresh();
+            this.openLanguageSubscription();
         };
         FormioComponent.prototype.ngOnChanges = function (changes) {
             var currentForm = changes.form.currentValue;
             this.formDefinition = currentForm;
-            this.loadUserLanguageSetting();
             this.reloadForm();
             if (this.formHasLegacyUpload(currentForm)) {
                 this.setInitialToken();
@@ -3776,17 +3883,14 @@
             }
         };
         FormioComponent.prototype.ngOnDestroy = function () {
+            var _a, _b;
             this.unsubscribeFormRefresh();
-            if (this.tokenRefreshTimerSubscription) {
-                this.tokenRefreshTimerSubscription.unsubscribe();
-            }
-        };
-        FormioComponent.prototype.loadUserLanguageSetting = function () {
-            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();
         };
         FormioComponent.prototype.reloadForm = function () {
             this.refreshForm.emit({
-                form: this.formDefinition
+                form: this.formDefinition,
             });
         };
         FormioComponent.prototype.showErrors = function (errors) {
@@ -3851,12 +3955,18 @@
                 this.formRefreshSubscription.unsubscribe();
             }
         };
+        FormioComponent.prototype.openLanguageSubscription = function () {
+            var _this = this;
+            this.languageSubscription = this.translateService.stream('key').subscribe(function () {
+                _this.currentLanguage$.next(_this.translateService.currentLang);
+            });
+        };
         return FormioComponent;
     }());
     FormioComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -3864,7 +3974,8 @@
         { type: i3.UserProviderService },
         { type: i4.NGXLogger },
         { type: FormIoStateService },
-        { type: i1.ActivatedRoute }
+        { type: i1.ActivatedRoute },
+        { type: core.TranslateService }
     ]; };
     FormioComponent.propDecorators = {
         form: [{ type: i0.Input }],
@@ -3894,8 +4005,7 @@
         function FormioBuilderComponent() {
             this.change = new i0.EventEmitter();
         }
-        FormioBuilderComponent.prototype.ngOnInit = function () {
-        };
+        FormioBuilderComponent.prototype.ngOnInit = function () { };
         FormioBuilderComponent.prototype.onChange = function (event) {
             this.change.emit(event);
         };
@@ -3904,7 +4014,7 @@
     FormioBuilderComponent.decorators = [
         { type: i0.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: [""]
                 },] }
     ];
@@ -3933,7 +4043,7 @@
         appUrl: 'http://localhost:4200',
         apiUrl: 'http://localhost:4200',
         icons: 'fontawesome',
-        formOnly: false
+        formOnly: false,
     };
 
     var FormIoDomService = /** @class */ (function () {
@@ -3981,7 +4091,9 @@
         });
         FormIoUploaderComponent.prototype.downloadFile = function (resourceFile) {
             var _this = this;
-            this.uploadProviderService.getResource(resourceFile.data.resourceId).subscribe(function (resource) {
+            this.uploadProviderService
+                .getResource(resourceFile.data.resourceId)
+                .subscribe(function (resource) {
                 _this.downloadService.downloadFile(resource.url, resource.resource.name);
             });
         };
@@ -4008,7 +4120,7 @@
     FormIoUploaderComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4046,13 +4158,13 @@
             this.error$ = new rxjs.BehaviorSubject('');
             this.errorMessagesStrings = {
                 tooBig: 'too big',
-                wrongType: 'this type'
+                wrongType: 'this type',
             };
             this.errorMessage$ = rxjs.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(operators.map(function (_a) {
                 var _b = __read(_a, 4), dropzoneError = _b[0], generic = _b[1], tooBig = _b[2], wrongType = _b[3];
                 var strings = _this.errorMessagesStrings;
@@ -4107,7 +4219,7 @@
                 accept: function (file) {
                     _this.dropzone.removeAllFiles();
                     _this.setFile(file);
-                }
+                },
             });
             this.setDropzoneEvents();
         };
@@ -4135,7 +4247,7 @@
     DropzoneComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4182,7 +4294,7 @@
     ProgressBarComponent.decorators = [
         { type: i0.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%}}"]
                 },] }
     ];
@@ -4210,10 +4322,8 @@
     ProgressBarModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [ProgressBarComponent],
-                    imports: [
-                        common.CommonModule,
-                    ],
-                    exports: [ProgressBarComponent]
+                    imports: [common.CommonModule],
+                    exports: [ProgressBarComponent],
                 },] }
     ];
 
@@ -4246,8 +4356,7 @@
                 _this.toggleFade();
             });
             if (navigator.mediaDevices.getUserMedia) {
-                navigator.mediaDevices.getUserMedia({ video: true })
-                    .then(function (stream) {
+                navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
                     video.srcObject = stream;
                     _this.stream$.next(stream);
                 });
@@ -4313,7 +4422,7 @@
     WebcamComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4344,11 +4453,8 @@
     WebcamModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [WebcamComponent],
-                    imports: [
-                        common.CommonModule,
-                        core.TranslateModule
-                    ],
-                    exports: [WebcamComponent]
+                    imports: [common.CommonModule, core.TranslateModule],
+                    exports: [WebcamComponent],
                 },] }
     ];
 
@@ -4376,7 +4482,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [DropzoneComponent],
                     imports: [common.CommonModule, core.TranslateModule, FileSizeModule, ProgressBarModule, WebcamModule],
-                    exports: [DropzoneComponent]
+                    exports: [DropzoneComponent],
                 },] }
     ];
 
@@ -4411,14 +4517,14 @@
                         i2.DocumentModule,
                         FileSizeModule,
                         resource.ResourceModule,
-                        i1.RouterModule
+                        i1.RouterModule,
                     ],
                     declarations: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
                     exports: [FormioComponent, FormioBuilderComponent, FormIoUploaderComponent],
                     providers: [
                         FormIoStateService,
                         FormIoDomService,
-                        { provide: angularFormio.FormioAppConfig, useValue: ɵ0$1 }
+                        { provide: angularFormio.FormioAppConfig, useValue: ɵ0$1 },
                     ],
                 },] }
     ];
@@ -4495,7 +4601,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [ModalComponent],
                     imports: [common.CommonModule],
-                    exports: [ModalComponent]
+                    exports: [ModalComponent],
                 },] }
     ];
 
@@ -4529,7 +4635,7 @@
     SpinnerComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4567,14 +4673,8 @@
     SpinnerModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: [SpinnerComponent],
-                    exports: [
-                        SpinnerComponent
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        ngxSpinner.NgxSpinnerModule,
-                        core.TranslateModule
-                    ]
+                    exports: [SpinnerComponent],
+                    imports: [common.CommonModule, ngxSpinner.NgxSpinnerModule, core.TranslateModule],
                 },] }
     ];
 
@@ -4679,7 +4779,8 @@
                             }
                             // 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);
@@ -4705,7 +4806,8 @@
                         var filteredItems = _this.items.filter(function (item) { return 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(function (item) { return item.id === focusedItemId; })) {
+                        if (filteredItems.length === 0 ||
+                            !filteredItems.some(function (item) { return item.id === focusedItemId; })) {
                             _this.resetFocus();
                         }
                     }
@@ -4731,7 +4833,7 @@
     SearchableDropdownComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4773,7 +4875,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [SearchableDropdownComponent],
                     imports: [common.CommonModule, forms.ReactiveFormsModule],
-                    exports: [SearchableDropdownComponent]
+                    exports: [SearchableDropdownComponent],
                 },] }
     ];
 
@@ -4799,7 +4901,7 @@
                 tooltip: 'The name of this field in the API endpoint.',
                 validate: {
                     required: true,
-                }
+                },
             },
             {
                 type: 'textfield',
@@ -4863,7 +4965,7 @@
                 validate: {
                     required: false,
                 },
-            }
+            },
         ],
     }); };
 
@@ -4927,7 +5029,7 @@
     SearchableDropdownSelectComponent.decorators = [
         { type: i0.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}"]
                 },] }
     ];
@@ -4971,7 +5073,7 @@
         { type: i0.NgModule, args: [{
                     declarations: [SearchableDropdownSelectComponent],
                     imports: [common.CommonModule, forms.ReactiveFormsModule, SearchableDropdownModule],
-                    exports: [SearchableDropdownSelectComponent]
+                    exports: [SearchableDropdownSelectComponent],
                 },] }
     ];
 
@@ -4995,9 +5097,11 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.Alert = Alert;
     exports.AlertComponent = AlertComponent;
     exports.AlertModule = AlertModule;
     exports.AlertService = AlertService;
+    exports.AlertsOptionsImpl = AlertsOptionsImpl;
     exports.BpmnJsDiagramComponent = BpmnJsDiagramComponent;
     exports.BpmnJsDiagramModule = BpmnJsDiagramModule;
     exports.BreadcrumbNavigationComponent = BreadcrumbNavigationComponent;
@@ -5021,6 +5125,7 @@
     exports.FormIoUploaderComponent = FormIoUploaderComponent;
     exports.FormioBuilderComponent = FormioBuilderComponent;
     exports.FormioComponent = FormioComponent;
+    exports.FormioOptionsImpl = FormioOptionsImpl;
     exports.LeftSidebarComponent = LeftSidebarComponent;
     exports.LeftSidebarModule = LeftSidebarModule;
     exports.ListComponent = ListComponent;
@@ -5045,6 +5150,7 @@
     exports.SearchableDropdownSelectModule = SearchableDropdownSelectModule;
     exports.SpinnerModule = SpinnerModule;
     exports.TimelineComponent = TimelineComponent;
+    exports.TimelineItemImpl = TimelineItemImpl;
     exports.TimelineModule = TimelineModule;
     exports.TopbarComponent = TopbarComponent;
     exports.TopbarModule = TopbarModule;