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

package/bundles/valtimo-dossier.umd.js

@@ -1,8 +1,148 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@ngx-translate/core'), require('@valtimo/document'), require('moment'), require('rxjs'), require('@valtimo/config'), require('@valtimo/contract'), require('@angular/common'), require('@valtimo/process'), require('@valtimo/task'), require('@valtimo/form'), require('@valtimo/security'), require('ngx-spinner'), require('ngx-toastr'), require('@valtimo/resource'), require('rxjs/operators'), require('@valtimo/contact-moment'), require('@valtimo/components'), require('@ng-bootstrap/ng-bootstrap'), require('@valtimo/form-link'), require('ngx-logger'), require('@angular/forms'), require('@angular/common/http')) :
-    typeof define === 'function' && define.amd ? define('@valtimo/dossier', ['exports', '@angular/core', '@angular/router', '@ngx-translate/core', '@valtimo/document', 'moment', 'rxjs', '@valtimo/config', '@valtimo/contract', '@angular/common', '@valtimo/process', '@valtimo/task', '@valtimo/form', '@valtimo/security', 'ngx-spinner', 'ngx-toastr', '@valtimo/resource', 'rxjs/operators', '@valtimo/contact-moment', '@valtimo/components', '@ng-bootstrap/ng-bootstrap', '@valtimo/form-link', 'ngx-logger', '@angular/forms', '@angular/common/http'], factory) :
-    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.dossier = {}), global.ng.core, global.ng.router, global.core$1, global.document, global.moment, global.rxjs, global.config, global.contract, global.ng.common, global.process, global.task, global.form, global.security, global.ngxSpinner, global.ngxToastr, global.resource, global.rxjs.operators, global.contactMoment, global.components, global.ngBootstrap, global.formLink, global.ngxLogger, global.ng.forms, global.ng.common.http));
-}(this, (function (exports, i0, router, core, document, moment_, rxjs, i1, contract, common, process, task, form, security, ngxSpinner, ngxToastr, resource, operators, contactMoment, components, ngBootstrap, formLink, ngxLogger, forms, http) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@ngx-translate/core'), require('@valtimo/document'), require('moment'), require('rxjs'), require('@valtimo/config'), require('@angular/common'), require('@valtimo/process'), require('@valtimo/task'), require('@valtimo/form'), require('@valtimo/components'), require('@valtimo/security'), require('ngx-spinner'), require('ngx-toastr'), require('@valtimo/resource'), require('rxjs/operators'), require('@valtimo/contact-moment'), require('@ng-bootstrap/ng-bootstrap'), require('@valtimo/form-link'), require('ngx-logger'), require('@angular/forms'), require('@angular/common/http')) :
+    typeof define === 'function' && define.amd ? define('@valtimo/dossier', ['exports', '@angular/core', '@angular/router', '@ngx-translate/core', '@valtimo/document', 'moment', 'rxjs', '@valtimo/config', '@angular/common', '@valtimo/process', '@valtimo/task', '@valtimo/form', '@valtimo/components', '@valtimo/security', 'ngx-spinner', 'ngx-toastr', '@valtimo/resource', 'rxjs/operators', '@valtimo/contact-moment', '@ng-bootstrap/ng-bootstrap', '@valtimo/form-link', 'ngx-logger', '@angular/forms', '@angular/common/http'], factory) :
+    (global = global || self, factory((global.valtimo = global.valtimo || {}, global.valtimo.dossier = {}), global.ng.core, global.ng.router, global.core$1, global.document, global.moment, global.rxjs, global.config, global.ng.common, global.process, global.task, global.form, global.components, global.security, global.ngxSpinner, global.ngxToastr, global.resource, global.rxjs.operators, global.contactMoment, global.ngBootstrap, global.formLink, global.ngxLogger, global.ng.forms, global.ng.common.http));
+}(this, (function (exports, i0, router, core, document, moment_, rxjs, i1, common, process, task, form, components, security, ngxSpinner, ngxToastr, resource, operators, contactMoment, ngBootstrap, formLink, ngxLogger, forms, http) { 'use strict';
+
+    /*
+     * 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 TabLoaderImpl = /** @class */ (function () {
+        function TabLoaderImpl(tabs, componentFactoryResolver, viewContainerRef, translateService, router, location) {
+            this._tabs = null;
+            this._componentFactoryResolver = null;
+            this._viewContainerRef = null;
+            this._activeComponent = null;
+            this._activeTab = null;
+            this._translateService = null;
+            this._tabs = tabs;
+            this._componentFactoryResolver = componentFactoryResolver;
+            this._viewContainerRef = viewContainerRef;
+            this._translateService = translateService;
+            this._router = router;
+            this._location = location;
+        }
+        TabLoaderImpl.prototype.initial = function (tabName) {
+            var initialTab;
+            if (tabName) {
+                initialTab = this._tabs.find(function (tab) { return tab.name === tabName; });
+            }
+            else {
+                initialTab = this._tabs[0] || null;
+            }
+            this.load(initialTab);
+        };
+        TabLoaderImpl.prototype.load = function (newTab) {
+            if (newTab !== this._activeTab) {
+                this._tabs.forEach(function (tab) { return tab.deactivate(); });
+                this.replaceView(newTab);
+                this.replaceUrlState(newTab);
+                this.setActive(newTab);
+            }
+        };
+        TabLoaderImpl.prototype.refreshView = function () {
+            this.replaceView(this._activeTab);
+        };
+        TabLoaderImpl.prototype.replaceView = function (tab) {
+            var componentFactory = this._componentFactoryResolver.resolveComponentFactory(tab.component);
+            this._viewContainerRef.clear();
+            if (this._activeTab !== null) {
+                this._activeComponent.destroy();
+            }
+            this._activeComponent = this._viewContainerRef.createComponent(componentFactory);
+        };
+        TabLoaderImpl.prototype.replaceUrlState = function (tab) {
+            var currentUrl = this._router.url;
+            var urlParts = currentUrl.split('/');
+            urlParts.splice(urlParts.length - 1, 1, tab.name);
+            var newUrl = urlParts.join('/');
+            this._location.replaceState(newUrl);
+        };
+        TabLoaderImpl.prototype.setActive = function (tab) {
+            tab.activate();
+            this._activeTab = tab;
+        };
+        Object.defineProperty(TabLoaderImpl.prototype, "tabs", {
+            get: function () {
+                return this._tabs;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TabLoaderImpl.prototype.translateTabName = function (tab) {
+            return this._translateService.instant('dossier.tabs.' + tab.name);
+        };
+        return TabLoaderImpl;
+    }());
+    var TabImpl = /** @class */ (function () {
+        function TabImpl(name, sequence, component) {
+            this._active = false;
+            this._name = name;
+            this._sequence = sequence;
+            this._component = component;
+        }
+        Object.defineProperty(TabImpl.prototype, "name", {
+            get: function () {
+                return this._name;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TabImpl.prototype, "sequence", {
+            get: function () {
+                return this._sequence;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(TabImpl.prototype, "component", {
+            get: function () {
+                return this._component;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TabImpl.prototype.activate = function () {
+            this._active = true;
+        };
+        TabImpl.prototype.deactivate = function () {
+            this._active = false;
+        };
+        TabImpl.prototype.isActive = function () {
+            return this._active;
+        };
+        return TabImpl;
+    }());
+
+    /*
+     *
+     *  * 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 (c) Microsoft Corporation.
@@ -28,6 +168,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 __());
@@ -213,11 +355,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;
@@ -226,7 +370,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);
     }
@@ -291,18 +445,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;
     }
 
     /*
@@ -360,7 +517,10 @@
             var defaultColumn = columns.find(function (column) { return column.default; });
             return {
                 isSorting: false,
-                state: { name: defaultColumn ? defaultColumn.propertyName : columns[0].propertyName, direction: 'DESC' }
+                state: {
+                    name: defaultColumn ? defaultColumn.propertyName : columns[0].propertyName,
+                    direction: 'DESC',
+                },
             };
         };
         return DossierService;
@@ -368,7 +528,7 @@
     DossierService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DossierService_Factory() { return new DossierService(i0.ɵɵinject(i1.ConfigService)); }, token: DossierService, providedIn: "root" });
     DossierService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     DossierService.ctorParameters = function () { return [
@@ -410,7 +570,7 @@
                 page: 1,
                 size: 10,
                 maxPaginationItemSize: 5,
-                sort: undefined
+                sort: undefined,
             };
             this.selectedProcessDocumentDefinition = null;
             this.modalListenerAdded = false;
@@ -485,8 +645,8 @@
                 _this.processDefinitionListFields = [
                     {
                         key: 'processName',
-                        label: 'Proces'
-                    }
+                        label: 'Proces',
+                    },
                 ];
             });
         };
@@ -495,7 +655,9 @@
             return new document.DocumentSearchRequestImpl(json.definitionName, this.pagination.page - 1, this.pagination.size, json.sequence, json.createdBy, json.globalSearchFilter, json.sort);
         };
         DossierListComponent.prototype.buildDocumentSearchRequest = function () {
-            return new document.DocumentSearchRequestImpl(this.documentDefinitionName, this.pagination.page - 1, this.pagination.size, this.sequence, this.createdBy, this.globalSearchFilter, this.pagination.sort && this.pagination.sort.isSorting ? this.pagination.sort : this.initialSortState);
+            return new document.DocumentSearchRequestImpl(this.documentDefinitionName, this.pagination.page - 1, this.pagination.size, this.sequence, this.createdBy, this.globalSearchFilter, this.pagination.sort && this.pagination.sort.isSorting
+                ? this.pagination.sort
+                : this.initialSortState);
         };
         DossierListComponent.prototype.storeSearch = function (documentSearchRequest) {
             localStorage.setItem(this.getCachedKey(), JSON.stringify(documentSearchRequest));
@@ -510,7 +672,9 @@
             return 'list-search-' + this.documentDefinitionName;
         };
         DossierListComponent.prototype.rowClick = function (document) {
-            this.router.navigate(["/dossiers/" + this.documentDefinitionName + "/document/" + document.id + "/" + exports.DefaultTabs.summary]);
+            this.router.navigate([
+                "/dossiers/" + this.documentDefinitionName + "/document/" + document.id + "/" + exports.DefaultTabs.summary,
+            ]);
         };
         DossierListComponent.prototype.startDossier = function () {
             if (this.processDocumentDefinitions.length > 1) {
@@ -568,7 +732,7 @@
     DossierListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-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<ng-container *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">{{ 'dashboard.startProcess.title' | translate }}</h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{ documents?.content.length || 0 }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\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 *ngTemplateOutlet=\"sidebar\"></ng-container>\n\n<div class=\"main-content pt-0\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <div>\n        <div class=\"text-right mt-m3px mb-3\">\n          <button\n            type=\"button\"\n            class=\"btn btn-space btn-primary mr-0\"\n            (click)=\"startDossier()\"\n            [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n            placement=\"bottom\"\n            [disabled]=\"processDocumentDefinitions.length === 0\"\n          >\n            {{ 'Start Dossier' | translate }}\n          </button>\n        </div>\n\n        <div\n          class=\"modal fade\"\n          id=\"startProcess\"\n          tabindex=\"-1\"\n          role=\"dialog\"\n          aria-labelledby=\"startProcessLabel\"\n          aria-hidden=\"true\"\n        >\n          <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h3 class=\"modal-title\" id=\"startProcessLabel\">\n                  {{ 'dashboard.startProcess.title' | translate }}\n                </h3>\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                  <span aria-hidden=\"true\">&times;</span>\n                </button>\n              </div>\n              <div class=\"modal-body\">\n                <div class=\"table-responsive\">\n                  <table class=\"table m-0\">\n                    <tr\n                      *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                      (click)=\"selectProcess(processDocumentDefinition)\"\n                      style=\"cursor: pointer\"\n                    >\n                      <td>{{ processDocumentDefinition.processName }}</td>\n                    </tr>\n                  </table>\n                </div>\n              </div>\n              <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">\n                  {{ 'cta.close' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <valtimo-widget>\n        <valtimo-list\n          [items]=\"items\"\n          [fields]=\"fields\"\n          (rowClicked)=\"rowClick($event)\"\n          [pagination]=\"pagination\"\n          [viewMode]=\"true\"\n          [header]=\"true\"\n          paginationIdentifier=\"dossierList\"\n          (paginationClicked)=\"paginationClicked($event)\"\n          (paginationSet)=\"paginationSet()\"\n          [initialSortState]=\"getInitialSortState()\"\n          (sortChanged)=\"sortChanged($event)\"\n        >\n          <div header>\n            <h3 class=\"list-header-title\">\n              {{ schema?.title }}\n              <sup class=\"ml-1 badge badge-pill badge-primary\">{{\n                documents?.content.length || 0\n              }}</sup>\n            </h3>\n          </div>\n        </valtimo-list>\n      </valtimo-widget>\n    </div>\n  </div>\n  <valtimo-dossier-process-start-modal #processStartModal></valtimo-dossier-process-start-modal>\n</div>\n\n<ng-template #sidebar>\n  <valtimo-filter-sidebar>\n    <h4 class=\"title\">Search</h4>\n    <div class=\"mb-4\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.globalSearchPlaceHolder' | translate }}\"\n        [(ngModel)]=\"globalSearchFilter\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n\n    <div class=\"mb-4\">\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        placeholder=\"{{ 'dossier.forms.referenceNumberPlaceHolder' | translate }}\"\n        [(ngModel)]=\"sequence\"\n        (blur)=\"doSearch()\"\n        (keyup.enter)=\"doSearch()\"\n      />\n    </div>\n  </valtimo-filter-sidebar>\n</ng-template>\n",
                     styles: [""]
                 },] }
     ];
@@ -604,7 +768,7 @@
             this.snapshot = this.route.snapshot.paramMap;
             this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
             this.documentId = this.snapshot.get('documentId') || '';
-            this.options = new contract.FormioOptionsImpl();
+            this.options = new components.FormioOptionsImpl();
             this.options.disableAlerts = true;
         }
         DossierDetailTabSummaryComponent.prototype.ngOnInit = function () {
@@ -629,7 +793,9 @@
         };
         DossierDetailTabSummaryComponent.prototype.loadProcessDocumentInstances = function (documentId) {
             var _this = this;
-            this.documentService.findProcessDocumentInstances(documentId).subscribe(function (processDocumentInstances) {
+            this.documentService
+                .findProcessDocumentInstances(documentId)
+                .subscribe(function (processDocumentInstances) {
                 _this.processDocumentInstances = processDocumentInstances;
                 _this.processDocumentInstances.forEach(function (instance) {
                     _this.loadProcessInstanceTasks(instance.id.processInstanceId);
@@ -678,7 +844,7 @@
     DossierDetailTabSummaryComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail-tab-summary',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"container-fluid\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">User tasks</h4>\n      <ng-container *ngIf=\"!tasks.length\">\n        <valtimo-widget>\n          <div class=\"p-3\">\n            <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n            <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n            <div class=\"clearfix\"></div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <ng-container *ngFor=\"let task of tasks\">\n        <valtimo-widget>\n          <div class=\"p-3 clickable hoverable\" (click)=\"rowTaskClick(task)\" *ngIf=\"!task.isLocked()\">\n            <span class=\"float-right badge badge-pill badge-primary\">Open</span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n          <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked()\">\n            <span class=\"float-right badge badge-pill badge-secondary bg-grey\"\n                  ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\">\n              <i class=\"icon mdi mdi-lock\"></i>\n            </span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\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=\"container-fluid\">\n  <div class=\"row py-4\">\n    <div class=\"col-sm-12 col-md-8 col-xl-9\">\n      <div *ngIf=\"document\">\n        <div *ngIf=\"formDefinition\" class=\"summaryForm\">\n          <div class=\"mb-4\">\n            <valtimo-form-io [form]=\"formDefinition\" [options]=\"options\"></valtimo-form-io>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!--Current user tasks right side-->\n    <div class=\"col-sm-12 col-md-4 col-xl-3\">\n      <h4 class=\"user-tasks-title\">User tasks</h4>\n      <ng-container *ngIf=\"!tasks.length\">\n        <valtimo-widget>\n          <div class=\"p-3\">\n            <img class=\"float-left\" src=\"assets/audit-2.png\" height=\"25\" />\n            <span class=\"float-right\">{{ 'summary.userTasksDoneState' | translate }}</span>\n            <div class=\"clearfix\"></div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <ng-container *ngFor=\"let task of tasks\">\n        <valtimo-widget>\n          <div\n            class=\"p-3 clickable hoverable\"\n            (click)=\"rowTaskClick(task)\"\n            *ngIf=\"!task.isLocked()\"\n          >\n            <span class=\"float-right badge badge-pill badge-primary\">Open</span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n          <div class=\"p-3 hoverable\" *ngIf=\"task.isLocked()\">\n            <span\n              class=\"float-right badge badge-pill badge-secondary bg-grey\"\n              ngbTooltip=\"{{ 'summary.taskLocked' | translate }}\"\n            >\n              <i class=\"icon mdi mdi-lock\"></i>\n            </span>\n            <strong>{{ task.name }}</strong>\n            <div>Created {{ task.created }}</div>\n          </div>\n        </valtimo-widget>\n      </ng-container>\n      <valtimo-task-detail-modal\n        #taskDetail\n        (formSubmit)=\"init()\"\n        (assignmentOfTaskChanged)=\"init()\"\n      ></valtimo-task-detail-modal>\n    </div>\n  </div>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     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 */.hoverable:hover{background-color:#eee}.summaryForm .formio-component{margin-bottom:0!important}.summaryForm .formio-component div[ref=element] .form-control{background-color:#fff;border:0;font-size:13px;height:24px!important;margin:0;padding:0!important}.summaryForm .formio-field div[ref=element] .form-control{font-weight:400}.summaryForm .formio-value div[ref=element] .form-control{font-weight:700}.user-tasks-title{color:#000;font-weight:400;height:20px;margin-bottom:12px;margin-top:0}"]
                 },] }
@@ -722,7 +888,9 @@
         }
         DossierDetailTabProgressComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.documentService.findProcessDocumentInstances(this.documentId).subscribe(function (processDocumentInstances) {
+            this.documentService
+                .findProcessDocumentInstances(this.documentId)
+                .subscribe(function (processDocumentInstances) {
                 _this.processDocumentInstances = processDocumentInstances;
                 _this.selectedProcessInstanceId = processDocumentInstances[0].id.processInstanceId;
             });
@@ -735,7 +903,7 @@
     DossierDetailTabProgressComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail-tab-progress',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"full-height-tab-content\" *ngIf=\"processDocumentInstances\">\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label><br/>\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n              [value]=\"processDocumentInstance.id.processInstanceId\"\n              [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\">\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram [processInstanceId]=\"selectedProcessInstanceId\"></valtimo-process-diagram>\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=\"full-height-tab-content\" *ngIf=\"processDocumentInstances\">\n  <div class=\"col-3\">\n    <label><strong>Process</strong></label\n    ><br />\n    <select class=\"form-control\" (change)=\"loadProcessInstance($event.target.value)\">\n      <option\n        *ngFor=\"let processDocumentInstance of processDocumentInstances\"\n        [value]=\"processDocumentInstance.id.processInstanceId\"\n        [selected]=\"selectedProcessInstanceId === processDocumentInstance.id.processInstanceId\"\n      >\n        {{ processDocumentInstance.processName }}\n      </option>\n    </select>\n  </div>\n  <valtimo-process-diagram\n    [processInstanceId]=\"selectedProcessInstanceId\"\n  ></valtimo-process-diagram>\n</div>\n",
                     styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}"]
                 },] }
     ];
@@ -788,7 +956,7 @@
                 page.content.forEach(function (auditRecord) {
                     var occurredOn = moment$2(auditRecord.metaData.occurredOn);
                     var fromNow = occurredOn.fromNow();
-                    timelineItems.push(new contract.TimelineItemImpl(occurredOn.format('DD MMM YYYY'), occurredOn.format('HH:mm'), auditRecord.metaData.user, fromNow, DossierDetailTabAuditComponent.getTranslationKey(auditRecord.auditEvent), auditRecord.auditEvent));
+                    timelineItems.push(new components.TimelineItemImpl(occurredOn.format('DD MMM YYYY'), occurredOn.format('HH:mm'), auditRecord.metaData.user, fromNow, DossierDetailTabAuditComponent.getTranslationKey(auditRecord.auditEvent), auditRecord.auditEvent));
                 });
                 _this.timelineItems = timelineItems;
                 _this.spinnerService.hide('auditSpinner');
@@ -806,7 +974,7 @@
     DossierDetailTabAuditComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail-tab-audit',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n        class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n        *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{ 'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages} }}</strong>\n    <br />\n    {{\n    pagination.totalElements === 1\n            ? ('list.showingResult' | translate: {number: pagination.content.length})\n            : ('list.showingResults'\n                    | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n            *ngIf=\"pagination.totalElements > pagination.size\"\n            class=\"float-right\"\n            [collectionSize]=\"pagination.totalElements\"\n            [(page)]=\"pagination.number\"\n            [pageSize]=\"pagination.size\"\n            [maxSize]=\"pagination.size\"\n            [rotate]=\"true\"\n            (pageChange)=\"onChangePagination(pagination.number)\"></ngb-pagination>\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 *ngIf=\"timelineItems\">\n  <valtimo-timeline [items]=\"timelineItems\"></valtimo-timeline>\n</div>\n<valtimo-spinner\n  [useBootstrapSpinner]=\"false\"\n  name=\"auditSpinner\"\n  bdColor=\"rgba(125, 125, 125, 0.35)\"\n  color=\"#264251\"\n  type=\"square-jelly-box\"\n>\n</valtimo-spinner>\n<div\n  class=\"pagination-holder audit-pagination bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n  *ngIf=\"pagination && pagination.totalElements > pagination.size\"\n>\n  <div class=\"float-left page-count col-4\">\n    <strong>{{\n      'list.currentPage' | translate: {current: pagination.number, total: pagination.totalPages}\n    }}</strong>\n    <br />\n    {{\n      pagination.totalElements === 1\n        ? ('list.showingResult' | translate: {number: pagination.content.length})\n        : ('list.showingResults'\n          | translate: {number: pagination.content.length, total: pagination.totalElements})\n    }}\n  </div>\n  <div class=\"col-8\">\n    <ngb-pagination\n      *ngIf=\"pagination.totalElements > pagination.size\"\n      class=\"float-right\"\n      [collectionSize]=\"pagination.totalElements\"\n      [(page)]=\"pagination.number\"\n      [pageSize]=\"pagination.size\"\n      [maxSize]=\"pagination.size\"\n      [rotate]=\"true\"\n      (pageChange)=\"onChangePagination(pagination.number)\"\n    ></ngb-pagination>\n  </div>\n</div>\n",
                     styles: [".audit-pagination{border-top:1px solid #dee2e6;margin:0 -1.923rem -1.923rem!important}"]
                 },] }
     ];
@@ -819,46 +987,47 @@
         paginationClicked: [{ type: i0.Output }]
     };
 
-    /*
-     * Copyright 2015-2020 Ritense BV, the Netherlands.
-     *
-     * Licensed under EUPL, Version 1.2 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" basis,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * See the License for the specific language governing permissions and
-     * limitations under the License.
-     */
     var DossierDetailTabDocumentsComponent = /** @class */ (function () {
-        function DossierDetailTabDocumentsComponent(route, documentService, toastrService, uploadProviderService, downloadService) {
+        function DossierDetailTabDocumentsComponent(route, documentService, toastrService, uploadProviderService, downloadService, translateService, configService) {
+            var _this = this;
+            var _a, _b;
             this.route = route;
             this.documentService = documentService;
             this.toastrService = toastrService;
             this.uploadProviderService = uploadProviderService;
             this.downloadService = downloadService;
-            this.relatedFiles = [];
+            this.translateService = translateService;
+            this.configService = configService;
+            this.maxFileSize = ((_b = (_a = this.configService) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.caseFileSizeUploadLimitMB) || 5;
+            this.refetch$ = new rxjs.BehaviorSubject(null);
+            this.relatedFiles$ = this.refetch$.pipe(operators.switchMap(function () { return rxjs.combineLatest([
+                _this.documentService.getDocument(_this.documentId),
+                _this.translateService.stream('key'),
+            ]); }), operators.map(function (_c) {
+                var _d = __read(_c, 1), document = _d[0];
+                var relatedFiles = (document === null || document === void 0 ? void 0 : document.relatedFiles) || [];
+                var translatedFiles = relatedFiles.map(function (file) {
+                    return Object.assign(Object.assign({}, file), { createdBy: file.createdBy || _this.translateService.instant('list.automaticallyGenerated') });
+                });
+                return translatedFiles || [];
+            }));
             this.fields = [
                 { key: 'fileName', label: 'File name' },
                 { key: 'sizeInBytes', label: 'Size in bytes' },
                 { key: 'createdOn', label: 'Created on', viewType: 'date' },
-                { key: 'createdBy', label: 'Created by' }
+                { key: 'createdBy', label: 'Created by' },
             ];
             this.actions = [
                 {
                     columnName: '',
                     iconClass: 'fas fa-external-link-alt',
-                    callback: this.downloadDocument.bind(this)
+                    callback: this.downloadDocument.bind(this),
                 },
                 {
                     columnName: '',
                     iconClass: 'fas fa-trash-alt',
-                    callback: this.removeRelatedFile.bind(this)
-                }
+                    callback: this.removeRelatedFile.bind(this),
+                },
             ];
             this.uploading$ = new rxjs.BehaviorSubject(false);
             var snapshot = this.route.snapshot.paramMap;
@@ -866,29 +1035,28 @@
             this.documentDefinitionName = snapshot.get('documentDefinitionName') || '';
         }
         DossierDetailTabDocumentsComponent.prototype.ngOnInit = function () {
-            this.loadDocuments();
+            this.refetchDocuments();
         };
         DossierDetailTabDocumentsComponent.prototype.fileSelected = function (file) {
             var _this = this;
             this.uploading$.next(true);
-            this.uploadProviderService.uploadFile(file, this.documentDefinitionName).pipe(operators.switchMap(function (resourceFile) { return _this.documentService.assignResource(_this.documentId, resourceFile.data.resourceId); })).subscribe(function () {
+            this.uploadProviderService
+                .uploadFile(file, this.documentDefinitionName)
+                .pipe(operators.switchMap(function (resourceFile) { return _this.documentService.assignResource(_this.documentId, resourceFile.data.resourceId); }))
+                .subscribe(function () {
                 _this.toastrService.success('Successfully uploaded document to dossier');
-                _this.loadDocuments();
+                _this.refetchDocuments();
                 _this.uploading$.next(false);
             }, function () {
                 _this.toastrService.error('Failed to upload document to dossier');
                 _this.uploading$.next(false);
             });
         };
-        DossierDetailTabDocumentsComponent.prototype.loadDocuments = function () {
-            var _this = this;
-            this.documentService.getDocument(this.documentId).subscribe(function (document) {
-                _this.relatedFiles = document.relatedFiles;
-            });
-        };
         DossierDetailTabDocumentsComponent.prototype.downloadDocument = function (relatedFile) {
             var _this = this;
-            this.uploadProviderService.getResource(relatedFile.fileId).subscribe(function (resource) {
+            this.uploadProviderService
+                .getResource(relatedFile.fileId)
+                .subscribe(function (resource) {
                 _this.downloadService.downloadFile(resource.url, resource.resource.name);
             });
         };
@@ -896,17 +1064,20 @@
             var _this = this;
             this.documentService.removeResource(this.documentId, relatedFile.fileId).subscribe(function () {
                 _this.toastrService.success('Successfully removed document from dossier');
-                _this.loadDocuments();
+                _this.refetchDocuments();
             }, function () {
                 _this.toastrService.error('Failed to remove document from dossier');
             });
         };
+        DossierDetailTabDocumentsComponent.prototype.refetchDocuments = function () {
+            this.refetch$.next(null);
+        };
         return DossierDetailTabDocumentsComponent;
     }());
     DossierDetailTabDocumentsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail-tab-documents',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"5\"\n  [showMaxFileSize]=\"false\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{'Related documents' | translate}}</h3>\n      <h5 class=\"list-header-description\">{{ 'Overview of all documents in this dossier' | translate }}</h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\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<valtimo-dropzone\n  (fileSelected)=\"fileSelected($event)\"\n  [acceptedFiles]=\"null\"\n  [hideFilePreview]=\"true\"\n  [hideTitle]=\"true\"\n  [maxFileSize]=\"maxFileSize\"\n  [showMaxFileSize]=\"true\"\n  [camera]=\"false\"\n  [uploading]=\"uploading$ | async\"\n></valtimo-dropzone>\n\n<valtimo-widget>\n  <valtimo-list\n    [fields]=\"fields\"\n    [items]=\"relatedFiles$ | async\"\n    [header]=\"true\"\n    [isSearchable]=\"true\"\n    [viewMode]=\"true\"\n    [actions]=\"actions\"\n  >\n    <div header>\n      <h3 class=\"list-header-title\">{{ 'Related documents' | translate }}</h3>\n      <h5 class=\"list-header-description\">\n        {{ 'Overview of all documents in this dossier' | translate }}\n      </h5>\n    </div>\n  </valtimo-list>\n</valtimo-widget>\n",
                     styles: [""]
                 },] }
     ];
@@ -915,7 +1086,9 @@
         { type: document.DocumentService },
         { type: ngxToastr.ToastrService },
         { type: resource.UploadProviderService },
-        { type: resource.DownloadService }
+        { type: resource.DownloadService },
+        { type: core.TranslateService },
+        { type: i1.ConfigService }
     ]; };
 
     /*
@@ -938,7 +1111,7 @@
         [exports.DefaultTabs.summary, DossierDetailTabSummaryComponent],
         [exports.DefaultTabs.progress, DossierDetailTabProgressComponent],
         [exports.DefaultTabs.audit, DossierDetailTabAuditComponent],
-        [exports.DefaultTabs.documents, DossierDetailTabDocumentsComponent]
+        [exports.DefaultTabs.documents, DossierDetailTabDocumentsComponent],
     ]);
 
     /*
@@ -964,7 +1137,7 @@
             this.tabMap = tabMap;
             var i = 0;
             this.tabMap.forEach(function (component, name, map) {
-                _this.tabs.push(new contract.TabImpl(name, i, component));
+                _this.tabs.push(new TabImpl(name, i, component));
                 i++;
             });
         }
@@ -976,7 +1149,7 @@
     TabService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TabService_Factory() { return new TabService(i0.ɵɵinject(TAB_MAP)); }, token: TabService, providedIn: "root" });
     TabService.decorators = [
         { type: i0.Injectable, args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 },] }
     ];
     TabService.ctorParameters = function () { return [
@@ -1018,8 +1191,10 @@
         }
         DossierDetailComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.tabLoader = new contract.TabLoaderImpl(this.tabService.getTabs(), this.componentFactoryResolver, this.viewContainerRef, this.translateService, this.router, this.location);
-            this.documentService.getDocumentDefinition(this.documentDefinitionName).subscribe(function (definition) {
+            this.tabLoader = new TabLoaderImpl(this.tabService.getTabs(), this.componentFactoryResolver, this.viewContainerRef, this.translateService, this.router, this.location);
+            this.documentService
+                .getDocumentDefinition(this.documentDefinitionName)
+                .subscribe(function (definition) {
                 _this.documentDefinitionNameTitle = definition.schema.title;
             });
             this.initialTabName = this.snapshot.get('tab');
@@ -1028,13 +1203,16 @@
         };
         DossierDetailComponent.prototype.getAllAssociatedProcessDefinitions = function () {
             var _this = this;
-            this.documentService.findProcessDocumentDefinitions(this.documentDefinitionName).subscribe(function (processDocumentDefinitions) {
-                _this.processDocumentDefinitions = processDocumentDefinitions
-                    .filter(function (processDocumentDefinition) { return processDocumentDefinition.startableByUser; });
-                _this.processDefinitionListFields = [{
+            this.documentService
+                .findProcessDocumentDefinitions(this.documentDefinitionName)
+                .subscribe(function (processDocumentDefinitions) {
+                _this.processDocumentDefinitions = processDocumentDefinitions.filter(function (processDocumentDefinition) { return processDocumentDefinition.startableByUser; });
+                _this.processDefinitionListFields = [
+                    {
                         key: 'processName',
-                        label: 'Proces'
-                    }];
+                        label: 'Proces',
+                    },
+                ];
             });
         };
         DossierDetailComponent.prototype.startProcess = function (processDocumentDefinition) {
@@ -1045,7 +1223,7 @@
     DossierDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-5\">\n          {{ documentDefinitionNameTitle }}\n          <div class=\"btn-group mt-m3px mb-3 float-right\">\n            <valtimo-extension\n              module=\"dossier\"\n              page=\"dossier-detail\"\n              section=\"card-header\"\n            ></valtimo-extension>\n            <div class=\"dropdown\">\n              <button class=\"btn btn-primary dropdown-toggle\" type=\"button\"\n                      id=\"startProcessDropdown\" placement=\"bottom\"\n                      [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                      [disabled]=\"processDocumentDefinitions.length === 0\"\n                      data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n                <span>Start</span>\n                <i class=\"pl-2 fas fa-caret-down\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"startProcessDropdown\">\n                <button *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\" class=\"dropdown-item p\"\n                        href=\"#\"\n                        (click)=\"startProcess(processDocumentDefinition)\">{{processDocumentDefinition.processName}}</button>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a id=\"{{ tab.name }}-tab\" class=\"nav-link clickable\"\n               [ngClass]=\"{'active' : tab.isActive()}\"\n               data-toggle=\"tab\"\n               (click)=\"tabLoader.load(tab)\">\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal (formSubmit)=\"tabLoader.refreshView()\"\n            #supportingProcessStartModal></valtimo-dossier-supporting-process-start-modal>\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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget>\n        <div class=\"card-header bg-light card-header-divider pb-5\">\n          {{ documentDefinitionNameTitle }}\n          <div class=\"btn-group mt-m3px mb-3 float-right\">\n            <valtimo-extension\n              module=\"dossier\"\n              page=\"dossier-detail\"\n              section=\"card-header\"\n            ></valtimo-extension>\n            <div class=\"dropdown\">\n              <button\n                class=\"btn btn-primary dropdown-toggle\"\n                type=\"button\"\n                id=\"startProcessDropdown\"\n                placement=\"bottom\"\n                [ngbTooltip]=\"processDocumentDefinitions.length === 0 ? 'No action' : null\"\n                [disabled]=\"processDocumentDefinitions.length === 0\"\n                data-toggle=\"dropdown\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"false\"\n              >\n                <span>Start</span>\n                <i class=\"pl-2 fas fa-caret-down\"></i>\n              </button>\n              <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"startProcessDropdown\">\n                <button\n                  *ngFor=\"let processDocumentDefinition of processDocumentDefinitions\"\n                  class=\"dropdown-item p\"\n                  href=\"#\"\n                  (click)=\"startProcess(processDocumentDefinition)\"\n                >\n                  {{ processDocumentDefinition.processName }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n        <ul class=\"nav nav-tabs\">\n          <li class=\"nav-item\" *ngFor=\"let tab of tabLoader.tabs\">\n            <a\n              id=\"{{ tab.name }}-tab\"\n              class=\"nav-link clickable\"\n              [ngClass]=\"{active: tab.isActive()}\"\n              data-toggle=\"tab\"\n              (click)=\"tabLoader.load(tab)\"\n            >\n              {{ tabLoader.translateTabName(tab) }}\n            </a>\n          </li>\n        </ul>\n        <div class=\"card-body bg-white p-5 position-relative tab-container\">\n          <ng-template #tabContainer>Loading...</ng-template>\n          <div class=\"clearfix\"></div>\n        </div>\n      </valtimo-widget>\n    </div>\n    <valtimo-dossier-supporting-process-start-modal\n      (formSubmit)=\"tabLoader.refreshView()\"\n      #supportingProcessStartModal\n    ></valtimo-dossier-supporting-process-start-modal>\n  </div>\n</div>\n",
                     styles: [".tab-container{min-height:300px}"]
                 },] }
     ];
@@ -1064,53 +1242,79 @@
         supportingProcessStart: [{ type: i0.ViewChild, args: ['supportingProcessStartModal',] }]
     };
 
-    /*
-     * Copyright 2015-2021 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 moment$3 = moment_;
     moment$3.locale(localStorage.getItem('langKey') || '');
     var DossierDetailTabContactMomentsComponent = /** @class */ (function () {
-        function DossierDetailTabContactMomentsComponent(contactMomentService) {
+        function DossierDetailTabContactMomentsComponent(contactMomentService, alertService, translateService) {
+            var _this = this;
             this.contactMomentService = contactMomentService;
-            this.contactMoments = [];
+            this.alertService = alertService;
+            this.translateService = translateService;
+            this.refetchContactMoments$ = new rxjs.BehaviorSubject('');
+            this.contactMoments$ = this.refetchContactMoments$.pipe(operators.switchMap(function () { return _this.contactMomentService.getContactMoments(); }), operators.map(function (contactMoments) { return contactMoments.map(function (contactMoment) {
+                var registratieDatum = moment$3(contactMoment.registratiedatum);
+                return new components.TimelineItemImpl(registratieDatum.format('DD MMM YYYY'), registratieDatum.format('HH:mm'), contactMoment.medewerkerIdentificatie.achternaam, contactMoment.kanaal, contactMoment.tekst, null);
+            }); }));
+            this.text$ = new rxjs.BehaviorSubject('');
+            this.channel$ = new rxjs.BehaviorSubject('MAIL');
+            this.requestData$ = rxjs.combineLatest([this.text$, this.channel$]);
+            this.valid$ = this.requestData$.pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), text = _b[0], channel = _b[1];
+                return !!(text && channel);
+            }));
+            this.disabled$ = new rxjs.BehaviorSubject(false);
         }
-        DossierDetailTabContactMomentsComponent.prototype.ngOnInit = function () {
-            this.loadContactMoments();
+        DossierDetailTabContactMomentsComponent.prototype.textChange = function (text) {
+            this.text$.next(text);
         };
-        DossierDetailTabContactMomentsComponent.prototype.loadContactMoments = function () {
-            var _this = this;
-            this.contactMomentService.getContactMoments().subscribe(function (contactMoments) { return _this.handleContactMomentsResult(contactMoments); });
+        DossierDetailTabContactMomentsComponent.prototype.buttonClick = function () {
+            this.modal.show();
         };
-        DossierDetailTabContactMomentsComponent.prototype.handleContactMomentsResult = function (contactMoments) {
-            this.contactMoments = contactMoments.map(function (contactMoment) {
-                var registratieDatum = moment$3(contactMoment.registratiedatum);
-                return new contract.TimelineItemImpl(registratieDatum.format('DD MMM YYYY'), registratieDatum.format('HH:mm'), contactMoment.medewerkerIdentificatie.achternaam, contactMoment.kanaal, contactMoment.tekst, null);
+        DossierDetailTabContactMomentsComponent.prototype.saveNote = function () {
+            var _this = this;
+            this.disable();
+            this.requestData$.pipe(operators.take(1)).subscribe(function (_a) {
+                var _b = __read(_a, 2), text = _b[0], channel = _b[1];
+                _this.contactMomentService.saveContactMoment({ kanaal: channel, tekst: text }).subscribe(function () {
+                    _this.alertService.success(_this.translateService.instant('dossier.contactMoments.saveSuccess'));
+                    _this.enable();
+                    _this.clear();
+                    _this.modal.hide();
+                    _this.refetchContactMoments();
+                }, function () {
+                    _this.enable();
+                });
             });
         };
+        DossierDetailTabContactMomentsComponent.prototype.disable = function () {
+            this.disabled$.next(true);
+        };
+        DossierDetailTabContactMomentsComponent.prototype.enable = function () {
+            this.disabled$.next(false);
+        };
+        DossierDetailTabContactMomentsComponent.prototype.clear = function () {
+            this.text$.next('');
+        };
+        DossierDetailTabContactMomentsComponent.prototype.refetchContactMoments = function () {
+            this.refetchContactMoments$.next('');
+        };
         return DossierDetailTabContactMomentsComponent;
     }());
     DossierDetailTabContactMomentsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-detail-tab-contact-moments',
-                    template: "<!--\n  ~ Copyright 2015-2021 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div *ngIf=\"contactMoments\">\n  <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n</div>\n\n",
-                    styles: ["/*!\n * Copyright 2015-2021 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */"]
+                    template: "<!--\n  ~ Copyright 2015-2021 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"contact-moments-container\">\n  <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"moments\"></ng-container>\n</div>\n\n<valtimo-modal\n  #contactMomentsNoteModal\n  [title]=\"'dossier.contactMoments.popupTitle' | translate\"\n  [showFooter]=\"true\"\n  [elementId]=\"'contact-moments-modal'\"\n>\n  <div class=\"mt-2\" body>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n  <div footer>\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n</valtimo-modal>\n\n<ng-template #body>\n  <form>\n    <div class=\"form-group row\">\n      <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"body\">\n        {{ 'dossier.contactMoments.noteText' | translate }}\n      </label>\n      <div class=\"col-12 col-sm-8 col-lg-6\">\n        <textarea\n          [disabled]=\"disabled$ | async\"\n          class=\"form-control\"\n          id=\"body\"\n          name=\"body\"\n          [ngModel]=\"text$ | async\"\n          (ngModelChange)=\"textChange($event)\"\n        ></textarea>\n      </div>\n    </div>\n  </form>\n</ng-template>\n\n<ng-template #footer>\n  <button\n    *ngIf=\"(disabled$ | async) === false; else loading\"\n    class=\"btn btn-primary\"\n    [disabled]=\"(valid$ | async) === false || (disabled$ | async)\"\n    (click)=\"saveNote()\"\n  >\n    {{ 'dossier.contactMoments.saveButtonText' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #loading>\n  <valtimo-spinner [noMarginTop]=\"true\"></valtimo-spinner>\n</ng-template>\n\n<ng-template #buttons>\n  <div class=\"btn-group mt-m3px mb-3 button-container\">\n    <button class=\"btn btn-primary btn-space\" (click)=\"buttonClick()\">\n      <i class=\"icon mdi mdi-calendar-note\"></i>\n      &nbsp;{{ 'dossier.contactMoments.makeNoteButton' | translate }}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #moments>\n  <div *ngIf=\"contactMoments$ | async as contactMoments; else loading\">\n    <valtimo-timeline [items]=\"contactMoments\"></valtimo-timeline>\n  </div>\n</ng-template>\n",
+                    styles: ["/*!\n * Copyright 2015-2021 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */.contact-moments-container{display:flex;flex-direction:column}.button-container{align-self:flex-end;display:inline}"]
                 },] }
     ];
     DossierDetailTabContactMomentsComponent.ctorParameters = function () { return [
-        { type: contactMoment.ContactMomentService }
+        { type: contactMoment.ContactMomentService },
+        { type: components.AlertService },
+        { type: core.TranslateService }
     ]; };
+    DossierDetailTabContactMomentsComponent.propDecorators = {
+        modal: [{ type: i0.ViewChild, args: ['contactMomentsNoteModal',] }]
+    };
 
     /*
      * Copyright 2015-2020 Ritense BV, the Netherlands.
@@ -1170,7 +1374,7 @@
                 _this.task.task.created = moment$4(_this.task.task.created).format('DD MMM YYYY HH:mm');
                 _this.page = {
                     title: _this.task.task.name,
-                    subtitle: "Created " + moment$4(_this.task.task.created).fromNow()
+                    subtitle: "Created " + moment$4(_this.task.task.created).fromNow(),
                 };
             });
         };
@@ -1185,7 +1389,7 @@
             var document = {
                 documentId: this.document.id,
                 content: this.document.content,
-                versionBasedOn: this.document.version
+                versionBasedOn: this.document.version,
             };
             this.documentService.modifyDocument(document).subscribe(function (result) {
                 _this.document = result.document;
@@ -1201,9 +1405,9 @@
                 request: {
                     documentId: this.document.id,
                     content: mergedData,
-                    versionBasedOn: this.document.version
+                    versionBasedOn: this.document.version,
                 },
-                taskId: this.task.task.id
+                taskId: this.task.task.id,
             };
             this.documentService.modifyDocumentAndCompleteTask(documentData).subscribe(function (result) {
                 _this.toastr.success(_this.task.task.name + ' has successfully been completed');
@@ -1218,7 +1422,7 @@
     DossierUpdateComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-update',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY 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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div class=\"mb-4\" *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\">\n            </div>\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\">Back</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\" type=\"button\" (click)=\"save()\" id=\"save-button\">Save</button>\n                  <button class=\"btn btn-space btn-primary\" type=\"submit\" (click)=\"submit({})\" id=\"submit-button\">Submit</button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form *ngIf=\"task?.formFields && !this.customDefinitions\"\n                                (submitted)=\"submit($event)\"\n                                [formFields]=\"task.formFields\"\n                                [componentName]=\"task.formLocation\"></valtimo-camunda-form>\n\n        </div>\n      </valtimo-widget>\n    </div>\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=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget [title]=\"page?.title\" [subtitle]=\"page?.subtitle\" [divider]=\"true\">\n        <div class=\"card-body\">\n          <!--view with custom definitions-->\n          <div *ngIf=\"this.customDefinitions\">\n            <div\n              class=\"mb-4\"\n              *ngFor=\"let definition of this.customDefinitions | keyvalue: returnZero\"\n            ></div>\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                    type=\"button\"\n                    (click)=\"save()\"\n                    id=\"save-button\"\n                  >\n                    Save\n                  </button>\n                  <button\n                    class=\"btn btn-space btn-primary\"\n                    type=\"submit\"\n                    (click)=\"submit({})\"\n                    id=\"submit-button\"\n                  >\n                    Submit\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <valtimo-camunda-form\n            *ngIf=\"task?.formFields && !this.customDefinitions\"\n            (submitted)=\"submit($event)\"\n            [formFields]=\"task.formFields\"\n            [componentName]=\"task.formLocation\"\n          ></valtimo-camunda-form>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n",
                     styles: [""]
                 },] }
     ];
@@ -1246,26 +1450,30 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      */
-    var ɵ0 = { title: 'Dossiers', roles: [contract.ROLE_USER] }, ɵ1 = { title: 'Dossiers', parentPath: 'dossiers/:documentDefinitionName', roles: [contract.ROLE_USER] }, ɵ2 = { title: 'Task details', parentPath: 'dossiers/:documentDefinitionName/document/:documentId/:tab', roles: [contract.ROLE_USER] };
+    var ɵ0 = { title: 'Dossiers', roles: [i1.ROLE_USER] }, ɵ1 = { title: 'Dossiers', parentPath: 'dossiers/:documentDefinitionName', roles: [i1.ROLE_USER] }, ɵ2 = {
+        title: 'Task details',
+        parentPath: 'dossiers/:documentDefinitionName/document/:documentId/:tab',
+        roles: [i1.ROLE_USER],
+    };
     var routes = [
         {
             path: 'dossiers/:documentDefinitionName',
             component: DossierListComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ0
+            data: ɵ0,
         },
         {
             path: 'dossiers/:documentDefinitionName/document/:documentId/:tab',
             component: DossierDetailComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ1
+            data: ɵ1,
         },
         {
             path: 'dossiers/:documentDefinitionName/document/:documentId/:tab/tasks/:taskId',
             component: DossierUpdateComponent,
             canActivate: [security.AuthGuardService],
-            data: ɵ2
-        }
+            data: ɵ2,
+        },
     ];
     var DossierRoutingModule = /** @class */ (function () {
         function DossierRoutingModule() {
@@ -1274,11 +1482,8 @@
     }());
     DossierRoutingModule.decorators = [
         { type: i0.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        router.RouterModule.forChild(routes),
-                    ],
-                    exports: [router.RouterModule]
+                    imports: [common.CommonModule, router.RouterModule.forChild(routes)],
+                    exports: [router.RouterModule],
                 },] }
     ];
 
@@ -1313,7 +1518,8 @@
         DossierProcessStartModalComponent.prototype.loadFormDefinition = function () {
             var _this = this;
             this.formDefinition = null;
-            this.formLinkService.getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
+            this.formLinkService
+                .getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
                 .subscribe(function (formDefinition) {
                 _this.formAssociation = formDefinition.formAssociation;
                 var className = _this.formAssociation.formLink.className.split('.');
@@ -1352,7 +1558,7 @@
             this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
             this.documentDefinitionName = processDocumentDefinition.id.documentDefinitionId.name;
             this.processName = processDocumentDefinition.processName;
-            this.options = new contract.FormioOptionsImpl();
+            this.options = new components.FormioOptionsImpl();
             this.options.disableAlerts = true;
             var formioBeforeSubmit = function (submission, callback) {
                 callback(null, submission);
@@ -1363,9 +1569,17 @@
         DossierProcessStartModalComponent.prototype.onSubmit = function (submission) {
             var _this = this;
             this.formioSubmission = submission;
-            this.formLinkService.onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data).subscribe(function (formSubmissionResult) {
+            this.formLinkService
+                .onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data)
+                .subscribe(function (formSubmissionResult) {
                 _this.modal.hide();
-                _this.router.navigate(['dossiers', _this.documentDefinitionName, 'document', formSubmissionResult.documentId, 'summary']);
+                _this.router.navigate([
+                    'dossiers',
+                    _this.documentDefinitionName,
+                    'document',
+                    formSubmissionResult.documentId,
+                    'summary',
+                ]);
             }, function (errors) {
                 _this.form.showErrors(errors);
             });
@@ -1384,7 +1598,7 @@
     DossierProcessStartModalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-process-start-modal',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\"\n                     [options]=\"options\"\n                     (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && isAdmin\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\" [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\">\n    </div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button class=\"btn btn-secondary btn-space\" type=\"button\"\n              (click)=\"gotoFormLinkScreen();\"\n              id=\"form-link-button\">{{'formManagement.gotoFormLinksButton' | translate}}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formDefinition && !isAdmin\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\" [translate]=\"'formManagement.noFormDefinitionFoundUser'\">\n    </div>\n  </div>\n</valtimo-modal>\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<valtimo-modal #processStartModal elementId=\"processStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form [form]=\"formDefinition\" [options]=\"options\" (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundAdmin'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n  <div body *ngIf=\"!formDefinition && !isAdmin\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFoundUser'\"\n    ></div>\n  </div>\n</valtimo-modal>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     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 */#processStartModal .formio-component-submit{text-align:right}"]
                 },] }
@@ -1431,7 +1645,8 @@
         DossierSupportingProcessStartModalComponent.prototype.loadFormDefinition = function () {
             var _this = this;
             this.formDefinition = null;
-            this.formLinkService.getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
+            this.formLinkService
+                .getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
                 .subscribe(function (formDefinition) {
                 _this.formAssociation = formDefinition.formAssociation;
                 var className = _this.formAssociation.formLink.className.split('.');
@@ -1441,7 +1656,7 @@
                         _this.formDefinition = formDefinition;
                         _this.documentService.getDocument(_this.documentId).subscribe(function (document) {
                             _this.submission = {
-                                data: document.content
+                                data: document.content,
                             };
                         }, function () { return rxjs.noop(); });
                         _this.modal.show();
@@ -1451,7 +1666,12 @@
                         window.open(url, '_blank');
                         break;
                     case 'BpmnElementAngularStateUrlLink':
-                        _this.router.navigate([formDefinition.formAssociation.formLink.url]);
+                        _this.route.params.pipe(operators.take(1)).subscribe(function (params) {
+                            var documentId = params === null || params === void 0 ? void 0 : params.documentId;
+                            _this.router.navigate([formDefinition.formAssociation.formLink.url], {
+                                state: Object.assign({}, (documentId && { documentId: documentId })),
+                            });
+                        });
                         break;
                     default:
                         _this.logger.fatal('Unsupported class name');
@@ -1472,7 +1692,7 @@
             this.documentDefinitionName = processDocumentDefinition.id.documentDefinitionId.name;
             this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
             this.processName = processDocumentDefinition.processName;
-            this.options = new contract.FormioOptionsImpl();
+            this.options = new components.FormioOptionsImpl();
             this.options.disableAlerts = true;
             var formioBeforeSubmit = function (submission, callback) {
                 callback(null, submission);
@@ -1483,7 +1703,9 @@
         DossierSupportingProcessStartModalComponent.prototype.onSubmit = function (submission) {
             var _this = this;
             this.formioSubmission = submission;
-            this.formLinkService.onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data, this.documentId).subscribe(function (formSubmissionResult) {
+            this.formLinkService
+                .onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data, this.documentId)
+                .subscribe(function (formSubmissionResult) {
                 _this.modal.hide();
                 _this.formSubmit.emit();
             }, function (errors) {
@@ -1499,7 +1721,7 @@
     DossierSupportingProcessStartModalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'valtimo-dossier-supporting-process-start-modal',
-                    template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<valtimo-modal #supportingProcessStartModal elementId=\"supportingProcessStartModal\" [title]=\"modalTitle\">\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io #form\n                     [submission]=\"submission\"\n                     [form]=\"formDefinition\"\n                     [options]=\"options\"\n                     (submit)=\"onSubmit($event)\">\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\" [translate]=\"'formManagement.noFormDefinitionFound'\">\n    </div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button class=\"btn btn-secondary btn-space\" type=\"button\"\n              (click)=\"gotoFormLinkScreen();\"\n              id=\"form-link-button\">{{'formManagement.gotoFormLinksButton' | translate}}\n      </button>\n    </div>\n  </div>\n</valtimo-modal>\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<valtimo-modal\n  #supportingProcessStartModal\n  elementId=\"supportingProcessStartModal\"\n  [title]=\"modalTitle\"\n>\n  <div body *ngIf=\"formDefinition\">\n    <valtimo-form-io\n      #form\n      [submission]=\"submission\"\n      [form]=\"formDefinition\"\n      [options]=\"options\"\n      (submit)=\"onSubmit($event)\"\n    >\n    </valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition\">\n    <div\n      class=\"bg-warning text-black mb-0 p-3 text-center\"\n      [translate]=\"'formManagement.noFormDefinitionFound'\"\n    ></div>\n    <div class=\"mb-0 mt-4 p-3 text-center\">\n      <button\n        class=\"btn btn-secondary btn-space\"\n        type=\"button\"\n        (click)=\"gotoFormLinkScreen()\"\n        id=\"form-link-button\"\n      >\n        {{ 'formManagement.gotoFormLinksButton' | translate }}\n      </button>\n    </div>\n  </div>\n</valtimo-modal>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     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 */#supportingProcessStartModal .formio-component-submit{text-align:right}"]
                 },] }
@@ -1533,7 +1755,7 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      */
-    var ɵ0$1 = contract.HttpLoaderFactory;
+    var ɵ0$1 = i1.HttpLoaderFactory;
     var DossierModule = /** @class */ (function () {
         function DossierModule() {
         }
@@ -1545,14 +1767,14 @@
                     TabService,
                     {
                         provide: TAB_MAP,
-                        useFactory: tabsFactory
+                        useFactory: tabsFactory,
                     },
                     {
                         provide: i0.ANALYZE_FOR_ENTRY_COMPONENTS,
                         useValue: Array.from(tabsFactory().values()),
-                        multi: true
-                    }
-                ]
+                        multi: true,
+                    },
+                ],
             };
         };
         return DossierModule;
@@ -1569,7 +1791,7 @@
                         DossierDetailTabContactMomentsComponent,
                         DossierUpdateComponent,
                         DossierProcessStartModalComponent,
-                        DossierSupportingProcessStartModalComponent
+                        DossierSupportingProcessStartModalComponent,
                     ],
                     imports: [
                         common.CommonModule,
@@ -1592,8 +1814,8 @@
                             loader: {
                                 provide: core.TranslateLoader,
                                 useFactory: ɵ0$1,
-                                deps: [http.HttpClient]
-                            }
+                                deps: [http.HttpClient],
+                            },
                         }),
                         task.TaskModule,
                         components.ModalModule,
@@ -1601,19 +1823,16 @@
                         components.UploaderModule,
                         components.DropzoneModule,
                         ngBootstrap.NgbPaginationModule,
-                        i1.ConfigModule
-                    ],
-                    exports: [
-                        DossierListComponent,
-                        DossierDetailComponent
+                        i1.ConfigModule,
                     ],
+                    exports: [DossierListComponent, DossierDetailComponent],
                     entryComponents: [
                         DossierDetailTabSummaryComponent,
                         DossierDetailTabProgressComponent,
                         DossierDetailTabAuditComponent,
                         DossierDetailTabDocumentsComponent,
-                        DossierDetailTabContactMomentsComponent
-                    ]
+                        DossierDetailTabContactMomentsComponent,
+                    ],
                 },] }
     ];
 
@@ -1648,6 +1867,8 @@
     exports.DossierModule = DossierModule;
     exports.DossierService = DossierService;
     exports.TAB_MAP = TAB_MAP;
+    exports.TabImpl = TabImpl;
+    exports.TabLoaderImpl = TabLoaderImpl;
     exports.TabService = TabService;
     exports.ɵ0 = ɵ0$1;
     exports.ɵa = DossierUpdateComponent;