@valtimo/dossier 4.15.2-next-main.15 → 4.15.3-next-main.16

package/fesm2015/valtimo-dossier.js

@@ -7,7 +7,7 @@ import * as moment_ from 'moment';
 import { combineLatest, BehaviorSubject, noop } from 'rxjs';
 import { FormioOptionsImpl, TimelineItemImpl, TabImpl, TabLoaderImpl, ROLE_USER, HttpLoaderFactory } from '@valtimo/contract';
 import { ProcessService, ProcessModule } from '@valtimo/process';
-import { ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule } from '@valtimo/components';
+import { AlertService, ListModule, WidgetModule, BpmnJsDiagramModule, TimelineModule, CamundaFormModule, FilterSidebarModule, DataListModule, FormIoModule, ModalModule, SpinnerModule, UploaderModule, DropzoneModule } from '@valtimo/components';
 import { FormLinkService } from '@valtimo/form-link';
 import { NGXLogger } from 'ngx-logger';
 import { UserProviderService, AuthGuardService } from '@valtimo/security';
@@ -18,1292 +18,1375 @@ import { FormService, FormModule } from '@valtimo/form';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { ToastrService } from 'ngx-toastr';
 import { UploadProviderService, DownloadService } from '@valtimo/resource';
-import { switchMap } from 'rxjs/operators';
+import { switchMap, map, take } from 'rxjs/operators';
 import { ContactMomentService } from '@valtimo/contact-moment';
 import { NgbButtonsModule, NgbTooltipModule, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 
-/*
- * 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 DefaultTabs;
-(function (DefaultTabs) {
-    DefaultTabs["summary"] = "summary";
-    DefaultTabs["progress"] = "progress";
-    DefaultTabs["audit"] = "audit";
-    DefaultTabs["documents"] = "documents";
-    DefaultTabs["contactMoments"] = "contact-moments";
+/*
+ * 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 DefaultTabs;
+(function (DefaultTabs) {
+    DefaultTabs["summary"] = "summary";
+    DefaultTabs["progress"] = "progress";
+    DefaultTabs["audit"] = "audit";
+    DefaultTabs["documents"] = "documents";
+    DefaultTabs["contactMoments"] = "contact-moments";
 })(DefaultTabs || (DefaultTabs = {}));
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class DossierProcessStartModalComponent {
-    constructor(route, router, processService, documentService, formLinkService, userProviderService, logger) {
-        this.route = route;
-        this.router = router;
-        this.processService = processService;
-        this.documentService = documentService;
-        this.formLinkService = formLinkService;
-        this.userProviderService = userProviderService;
-        this.logger = logger;
-    }
-    ngOnInit() {
-        this.isUserAdmin();
-    }
-    loadFormDefinition() {
-        this.formDefinition = null;
-        this.formLinkService.getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
-            .subscribe(formDefinition => {
-            this.formAssociation = formDefinition.formAssociation;
-            const className = this.formAssociation.formLink.className.split('.');
-            const linkType = className[className.length - 1];
-            switch (linkType) {
-                case 'BpmnElementFormIdLink':
-                    this.formDefinition = formDefinition;
-                    this.modal.show();
-                    break;
-                case 'BpmnElementUrlLink':
-                    const url = this.router.serializeUrl(this.router.createUrlTree([formDefinition.formAssociation.formLink.url]));
-                    window.open(url, '_blank');
-                    break;
-                case 'BpmnElementAngularStateUrlLink':
-                    this.router.navigate([formDefinition.formAssociation.formLink.url]);
-                    break;
-                default:
-                    this.logger.fatal('Unsupported class name');
-            }
-        }, errors => {
-            this.modal.show();
-        });
-    }
-    gotoFormLinkScreen() {
-        this.modal.hide();
-        this.router.navigate(['form-links'], { queryParams: { process: this.processDefinitionKey } });
-    }
-    get modalTitle() {
-        return `Start - ${this.processName}`;
-    }
-    openModal(processDocumentDefinition) {
-        this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
-        this.documentDefinitionName = processDocumentDefinition.id.documentDefinitionId.name;
-        this.processName = processDocumentDefinition.processName;
-        this.options = new FormioOptionsImpl();
-        this.options.disableAlerts = true;
-        const formioBeforeSubmit = function (submission, callback) {
-            callback(null, submission);
-        };
-        this.options.setHooks(formioBeforeSubmit);
-        this.loadFormDefinition();
-    }
-    onSubmit(submission) {
-        this.formioSubmission = submission;
-        this.formLinkService.onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data).subscribe((formSubmissionResult) => {
-            this.modal.hide();
-            this.router.navigate(['dossiers', this.documentDefinitionName, 'document', formSubmissionResult.documentId, 'summary']);
-        }, errors => {
-            this.form.showErrors(errors);
-        });
-    }
-    isUserAdmin() {
-        this.userProviderService.getUserSubject().subscribe((userIdentity) => {
-            this.isAdmin = userIdentity.roles.includes('ROLE_ADMIN');
-        }, error => {
-            this.logger.error('Failed to retrieve user identity', error);
-            this.isAdmin = false;
-        });
-    }
-}
-DossierProcessStartModalComponent.decorators = [
-    { type: 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",
-                encapsulation: 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}"]
-            },] }
-];
-DossierProcessStartModalComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: ProcessService },
-    { type: DocumentService },
-    { type: FormLinkService },
-    { type: UserProviderService },
-    { type: NGXLogger }
-];
-DossierProcessStartModalComponent.propDecorators = {
-    form: [{ type: ViewChild, args: ['form', { static: false },] }],
-    modal: [{ type: ViewChild, args: ['processStartModal', { static: false },] }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierProcessStartModalComponent {
+    constructor(route, router, processService, documentService, formLinkService, userProviderService, logger) {
+        this.route = route;
+        this.router = router;
+        this.processService = processService;
+        this.documentService = documentService;
+        this.formLinkService = formLinkService;
+        this.userProviderService = userProviderService;
+        this.logger = logger;
+    }
+    ngOnInit() {
+        this.isUserAdmin();
+    }
+    loadFormDefinition() {
+        this.formDefinition = null;
+        this.formLinkService
+            .getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
+            .subscribe(formDefinition => {
+            this.formAssociation = formDefinition.formAssociation;
+            const className = this.formAssociation.formLink.className.split('.');
+            const linkType = className[className.length - 1];
+            switch (linkType) {
+                case 'BpmnElementFormIdLink':
+                    this.formDefinition = formDefinition;
+                    this.modal.show();
+                    break;
+                case 'BpmnElementUrlLink':
+                    const url = this.router.serializeUrl(this.router.createUrlTree([formDefinition.formAssociation.formLink.url]));
+                    window.open(url, '_blank');
+                    break;
+                case 'BpmnElementAngularStateUrlLink':
+                    this.router.navigate([formDefinition.formAssociation.formLink.url]);
+                    break;
+                default:
+                    this.logger.fatal('Unsupported class name');
+            }
+        }, errors => {
+            this.modal.show();
+        });
+    }
+    gotoFormLinkScreen() {
+        this.modal.hide();
+        this.router.navigate(['form-links'], { queryParams: { process: this.processDefinitionKey } });
+    }
+    get modalTitle() {
+        return `Start - ${this.processName}`;
+    }
+    openModal(processDocumentDefinition) {
+        this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
+        this.documentDefinitionName = processDocumentDefinition.id.documentDefinitionId.name;
+        this.processName = processDocumentDefinition.processName;
+        this.options = new FormioOptionsImpl();
+        this.options.disableAlerts = true;
+        const formioBeforeSubmit = function (submission, callback) {
+            callback(null, submission);
+        };
+        this.options.setHooks(formioBeforeSubmit);
+        this.loadFormDefinition();
+    }
+    onSubmit(submission) {
+        this.formioSubmission = submission;
+        this.formLinkService
+            .onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data)
+            .subscribe((formSubmissionResult) => {
+            this.modal.hide();
+            this.router.navigate([
+                'dossiers',
+                this.documentDefinitionName,
+                'document',
+                formSubmissionResult.documentId,
+                'summary',
+            ]);
+        }, errors => {
+            this.form.showErrors(errors);
+        });
+    }
+    isUserAdmin() {
+        this.userProviderService.getUserSubject().subscribe(userIdentity => {
+            this.isAdmin = userIdentity.roles.includes('ROLE_ADMIN');
+        }, error => {
+            this.logger.error('Failed to retrieve user identity', error);
+            this.isAdmin = false;
+        });
+    }
+}
+DossierProcessStartModalComponent.decorators = [
+    { type: 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\" [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: 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}"]
+            },] }
+];
+DossierProcessStartModalComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: Router },
+    { type: ProcessService },
+    { type: DocumentService },
+    { type: FormLinkService },
+    { type: UserProviderService },
+    { type: NGXLogger }
+];
+DossierProcessStartModalComponent.propDecorators = {
+    form: [{ type: ViewChild, args: ['form', { static: false },] }],
+    modal: [{ type: ViewChild, args: ['processStartModal', { static: false },] }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class DossierService {
-    constructor(configService) {
-        this.configService = configService;
-        this.definitions = configService.config.definitions;
-    }
-    getImplementationEnvironmentDefinitions(name) {
-        return this.definitions.dossiers.find(definition => definition.name === name);
-    }
-    getDefinitionColumns(definitionNameId) {
-        const config = this.configService.config;
-        const customDefinitionTable = config.customDefinitionTables[definitionNameId];
-        return customDefinitionTable || config.defaultDefinitionTable;
-    }
-    getInitialSortState(columns) {
-        const defaultColumn = columns.find(column => column.default);
-        return {
-            isSorting: false,
-            state: { name: defaultColumn ? defaultColumn.propertyName : columns[0].propertyName, direction: 'DESC' }
-        };
-    }
-}
-DossierService.ɵprov = ɵɵdefineInjectable({ factory: function DossierService_Factory() { return new DossierService(ɵɵinject(ConfigService)); }, token: DossierService, providedIn: "root" });
-DossierService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-DossierService.ctorParameters = () => [
-    { type: ConfigService }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierService {
+    constructor(configService) {
+        this.configService = configService;
+        this.definitions = configService.config.definitions;
+    }
+    getImplementationEnvironmentDefinitions(name) {
+        return this.definitions.dossiers.find(definition => definition.name === name);
+    }
+    getDefinitionColumns(definitionNameId) {
+        const config = this.configService.config;
+        const customDefinitionTable = config.customDefinitionTables[definitionNameId];
+        return customDefinitionTable || config.defaultDefinitionTable;
+    }
+    getInitialSortState(columns) {
+        const defaultColumn = columns.find(column => column.default);
+        return {
+            isSorting: false,
+            state: {
+                name: defaultColumn ? defaultColumn.propertyName : columns[0].propertyName,
+                direction: 'DESC',
+            },
+        };
+    }
+}
+DossierService.ɵprov = ɵɵdefineInjectable({ factory: function DossierService_Factory() { return new DossierService(ɵɵinject(ConfigService)); }, token: DossierService, providedIn: "root" });
+DossierService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+DossierService.ctorParameters = () => [
+    { type: ConfigService }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const moment = moment_;
-moment.locale(localStorage.getItem('langKey') || '');
-class DossierListComponent {
-    constructor(route, router, documentService, translateService, dossierService) {
-        this.route = route;
-        this.router = router;
-        this.documentService = documentService;
-        this.translateService = translateService;
-        this.dossierService = dossierService;
-        this.documentDefinitionName = '';
-        this.showCreateDocument = false;
-        this.items = [];
-        this.fields = [];
-        this.processDefinitionListFields = [];
-        this.processDocumentDefinitions = [];
-        this.pagination = {
-            collectionSize: 0,
-            page: 1,
-            size: 10,
-            maxPaginationItemSize: 5,
-            sort: undefined
-        };
-        this.selectedProcessDocumentDefinition = null;
-        this.modalListenerAdded = false;
-    }
-    ngOnInit() {
-        this.doInit();
-        this.routeEvent(this.router);
-        this.modalListenerAdded = false;
-    }
-    ngOnDestroy() {
-        this.routerSubscription.unsubscribe();
-        this.translationSubscription.unsubscribe();
-    }
-    paginationSet() {
-        this.getData();
-    }
-    routeEvent(router) {
-        this.routerSubscription = router.events.subscribe(e => {
-            if (e instanceof NavigationEnd) {
-                this.doInit();
-                this.getData();
-            }
-        });
-    }
-    doInit() {
-        const documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName') || '';
-        const columns = this.dossierService.getDefinitionColumns(documentDefinitionName);
-        this.documentDefinitionName = documentDefinitionName;
-        this.initialSortState = this.dossierService.getInitialSortState(columns);
-        this.openTranslationSubscription(columns);
-    }
-    openTranslationSubscription(columns) {
-        this.translationSubscription = combineLatest(columns.map(column => this.translateService.stream(`fieldLabels.${column.translationKey}`))).subscribe(labels => {
-            this.fields = columns.map((column, index) => (Object.assign({ key: column.propertyName, label: labels[index], sortable: column.sortable }, (column.viewType && { viewType: column.viewType }))));
-        });
-    }
-    getData() {
-        this.findDocumentDefinition(this.documentDefinitionName);
-        if (this.hasCachedSearchRequest()) {
-            const documentSearchRequest = this.getCachedSearch();
-            this.globalSearchFilter = documentSearchRequest.globalSearchFilter;
-            this.sequence = documentSearchRequest.sequence;
-            this.createdBy = documentSearchRequest.createdBy;
-            this.findDocuments(documentSearchRequest);
-        }
-        else {
-            this.doSearch();
-        }
-        this.getAllAssociatedProcessDefinitions();
-    }
-    doSearch() {
-        const documentSearchRequest = this.buildDocumentSearchRequest();
-        this.findDocuments(documentSearchRequest);
-    }
-    findDocuments(documentSearchRequest) {
-        return this.documentService.getDocuments(documentSearchRequest).subscribe(documents => {
-            this.documents = documents;
-            this.transformDocuments(this.documents.content);
-            this.pagination.collectionSize = this.documents.totalElements;
-            this.storeSearch(documentSearchRequest);
-        });
-    }
-    getAllAssociatedProcessDefinitions() {
-        this.documentService
-            .findProcessDocumentDefinitions(this.documentDefinitionName)
-            .subscribe(processDocumentDefinitions => {
-            this.processDocumentDefinitions = processDocumentDefinitions.filter(processDocumentDefinition => processDocumentDefinition.canInitializeDocument);
-            this.processDefinitionListFields = [
-                {
-                    key: 'processName',
-                    label: 'Proces'
-                }
-            ];
-        });
-    }
-    getCachedSearch() {
-        const json = JSON.parse(this.getCachedDocumentSearchRequest());
-        return new DocumentSearchRequestImpl(json.definitionName, this.pagination.page - 1, this.pagination.size, json.sequence, json.createdBy, json.globalSearchFilter, json.sort);
-    }
-    buildDocumentSearchRequest() {
-        return new 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);
-    }
-    storeSearch(documentSearchRequest) {
-        localStorage.setItem(this.getCachedKey(), JSON.stringify(documentSearchRequest));
-    }
-    getCachedDocumentSearchRequest() {
-        return localStorage.getItem(this.getCachedKey()) || '';
-    }
-    hasCachedSearchRequest() {
-        return localStorage.getItem(this.getCachedKey()) !== null;
-    }
-    getCachedKey() {
-        return 'list-search-' + this.documentDefinitionName;
-    }
-    rowClick(document) {
-        this.router.navigate([`/dossiers/${this.documentDefinitionName}/document/${document.id}/${DefaultTabs.summary}`]);
-    }
-    startDossier() {
-        if (this.processDocumentDefinitions.length > 1) {
-            $('#startProcess').modal('show');
-        }
-        else {
-            this.selectedProcessDocumentDefinition = this.processDocumentDefinitions[0];
-            this.showStartProcessModal();
-        }
-    }
-    showStartProcessModal() {
-        if (this.selectedProcessDocumentDefinition !== null) {
-            this.processStart.openModal(this.selectedProcessDocumentDefinition);
-            this.selectedProcessDocumentDefinition = null;
-        }
-    }
-    selectProcess(processDocumentDefinition) {
-        const modal = $('#startProcess');
-        if (!this.modalListenerAdded) {
-            modal.on('hidden.bs.modal', this.showStartProcessModal.bind(this));
-            this.modalListenerAdded = true;
-        }
-        this.selectedProcessDocumentDefinition = processDocumentDefinition;
-        modal.modal('hide');
-    }
-    findDocumentDefinition(documentDefinitionName) {
-        this.documentService.getDocumentDefinition(documentDefinitionName).subscribe(definition => {
-            this.schema = definition.schema;
-        });
-    }
-    transformDocuments(documentsContent) {
-        this.items = documentsContent.map(document => {
-            const { content } = document, others = __rest(document, ["content"]);
-            return Object.assign(Object.assign({}, content), others);
-        });
-    }
-    paginationClicked(page) {
-        this.pagination.page = page;
-        this.doSearch();
-    }
-    sortChanged(sortState) {
-        this.pagination.sort = sortState;
-        this.doSearch();
-    }
-    getInitialSortState() {
-        if (this.hasCachedSearchRequest()) {
-            const cachedRequest = JSON.parse(this.getCachedDocumentSearchRequest());
-            return cachedRequest.sort ? cachedRequest.sort : this.initialSortState;
-        }
-        return this.initialSortState;
-    }
-}
-DossierListComponent.decorators = [
-    { type: 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",
-                styles: [""]
-            },] }
-];
-DossierListComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: DocumentService },
-    { type: TranslateService },
-    { type: DossierService }
-];
-DossierListComponent.propDecorators = {
-    processStart: [{ type: ViewChild, args: ['processStartModal',] }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const moment = moment_;
+moment.locale(localStorage.getItem('langKey') || '');
+class DossierListComponent {
+    constructor(route, router, documentService, translateService, dossierService) {
+        this.route = route;
+        this.router = router;
+        this.documentService = documentService;
+        this.translateService = translateService;
+        this.dossierService = dossierService;
+        this.documentDefinitionName = '';
+        this.showCreateDocument = false;
+        this.items = [];
+        this.fields = [];
+        this.processDefinitionListFields = [];
+        this.processDocumentDefinitions = [];
+        this.pagination = {
+            collectionSize: 0,
+            page: 1,
+            size: 10,
+            maxPaginationItemSize: 5,
+            sort: undefined,
+        };
+        this.selectedProcessDocumentDefinition = null;
+        this.modalListenerAdded = false;
+    }
+    ngOnInit() {
+        this.doInit();
+        this.routeEvent(this.router);
+        this.modalListenerAdded = false;
+    }
+    ngOnDestroy() {
+        this.routerSubscription.unsubscribe();
+        this.translationSubscription.unsubscribe();
+    }
+    paginationSet() {
+        this.getData();
+    }
+    routeEvent(router) {
+        this.routerSubscription = router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                this.doInit();
+                this.getData();
+            }
+        });
+    }
+    doInit() {
+        const documentDefinitionName = this.route.snapshot.paramMap.get('documentDefinitionName') || '';
+        const columns = this.dossierService.getDefinitionColumns(documentDefinitionName);
+        this.documentDefinitionName = documentDefinitionName;
+        this.initialSortState = this.dossierService.getInitialSortState(columns);
+        this.openTranslationSubscription(columns);
+    }
+    openTranslationSubscription(columns) {
+        this.translationSubscription = combineLatest(columns.map(column => this.translateService.stream(`fieldLabels.${column.translationKey}`))).subscribe(labels => {
+            this.fields = columns.map((column, index) => (Object.assign({ key: column.propertyName, label: labels[index], sortable: column.sortable }, (column.viewType && { viewType: column.viewType }))));
+        });
+    }
+    getData() {
+        this.findDocumentDefinition(this.documentDefinitionName);
+        if (this.hasCachedSearchRequest()) {
+            const documentSearchRequest = this.getCachedSearch();
+            this.globalSearchFilter = documentSearchRequest.globalSearchFilter;
+            this.sequence = documentSearchRequest.sequence;
+            this.createdBy = documentSearchRequest.createdBy;
+            this.findDocuments(documentSearchRequest);
+        }
+        else {
+            this.doSearch();
+        }
+        this.getAllAssociatedProcessDefinitions();
+    }
+    doSearch() {
+        const documentSearchRequest = this.buildDocumentSearchRequest();
+        this.findDocuments(documentSearchRequest);
+    }
+    findDocuments(documentSearchRequest) {
+        return this.documentService.getDocuments(documentSearchRequest).subscribe(documents => {
+            this.documents = documents;
+            this.transformDocuments(this.documents.content);
+            this.pagination.collectionSize = this.documents.totalElements;
+            this.storeSearch(documentSearchRequest);
+        });
+    }
+    getAllAssociatedProcessDefinitions() {
+        this.documentService
+            .findProcessDocumentDefinitions(this.documentDefinitionName)
+            .subscribe(processDocumentDefinitions => {
+            this.processDocumentDefinitions = processDocumentDefinitions.filter(processDocumentDefinition => processDocumentDefinition.canInitializeDocument);
+            this.processDefinitionListFields = [
+                {
+                    key: 'processName',
+                    label: 'Proces',
+                },
+            ];
+        });
+    }
+    getCachedSearch() {
+        const json = JSON.parse(this.getCachedDocumentSearchRequest());
+        return new DocumentSearchRequestImpl(json.definitionName, this.pagination.page - 1, this.pagination.size, json.sequence, json.createdBy, json.globalSearchFilter, json.sort);
+    }
+    buildDocumentSearchRequest() {
+        return new 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);
+    }
+    storeSearch(documentSearchRequest) {
+        localStorage.setItem(this.getCachedKey(), JSON.stringify(documentSearchRequest));
+    }
+    getCachedDocumentSearchRequest() {
+        return localStorage.getItem(this.getCachedKey()) || '';
+    }
+    hasCachedSearchRequest() {
+        return localStorage.getItem(this.getCachedKey()) !== null;
+    }
+    getCachedKey() {
+        return 'list-search-' + this.documentDefinitionName;
+    }
+    rowClick(document) {
+        this.router.navigate([
+            `/dossiers/${this.documentDefinitionName}/document/${document.id}/${DefaultTabs.summary}`,
+        ]);
+    }
+    startDossier() {
+        if (this.processDocumentDefinitions.length > 1) {
+            $('#startProcess').modal('show');
+        }
+        else {
+            this.selectedProcessDocumentDefinition = this.processDocumentDefinitions[0];
+            this.showStartProcessModal();
+        }
+    }
+    showStartProcessModal() {
+        if (this.selectedProcessDocumentDefinition !== null) {
+            this.processStart.openModal(this.selectedProcessDocumentDefinition);
+            this.selectedProcessDocumentDefinition = null;
+        }
+    }
+    selectProcess(processDocumentDefinition) {
+        const modal = $('#startProcess');
+        if (!this.modalListenerAdded) {
+            modal.on('hidden.bs.modal', this.showStartProcessModal.bind(this));
+            this.modalListenerAdded = true;
+        }
+        this.selectedProcessDocumentDefinition = processDocumentDefinition;
+        modal.modal('hide');
+    }
+    findDocumentDefinition(documentDefinitionName) {
+        this.documentService.getDocumentDefinition(documentDefinitionName).subscribe(definition => {
+            this.schema = definition.schema;
+        });
+    }
+    transformDocuments(documentsContent) {
+        this.items = documentsContent.map(document => {
+            const { content } = document, others = __rest(document, ["content"]);
+            return Object.assign(Object.assign({}, content), others);
+        });
+    }
+    paginationClicked(page) {
+        this.pagination.page = page;
+        this.doSearch();
+    }
+    sortChanged(sortState) {
+        this.pagination.sort = sortState;
+        this.doSearch();
+    }
+    getInitialSortState() {
+        if (this.hasCachedSearchRequest()) {
+            const cachedRequest = JSON.parse(this.getCachedDocumentSearchRequest());
+            return cachedRequest.sort ? cachedRequest.sort : this.initialSortState;
+        }
+        return this.initialSortState;
+    }
+}
+DossierListComponent.decorators = [
+    { type: 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\">\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: [""]
+            },] }
+];
+DossierListComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: Router },
+    { type: DocumentService },
+    { type: TranslateService },
+    { type: DossierService }
+];
+DossierListComponent.propDecorators = {
+    processStart: [{ type: ViewChild, args: ['processStartModal',] }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const moment$1 = moment_;
-moment$1.locale(localStorage.getItem('langKey') || '');
-moment$1.defaultFormat = 'DD MMM YYYY HH:mm';
-class DossierDetailTabSummaryComponent {
-    constructor(router, documentService, taskService, processService, el, renderer, route, formService, userProviderService) {
-        this.router = router;
-        this.documentService = documentService;
-        this.taskService = taskService;
-        this.processService = processService;
-        this.el = el;
-        this.renderer = renderer;
-        this.route = route;
-        this.formService = formService;
-        this.userProviderService = userProviderService;
-        this.processDocumentInstances = [];
-        this.tasks = [];
-        this.formDefinition = null;
-        this.roles = [];
-        this.snapshot = this.route.snapshot.paramMap;
-        this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
-        this.documentId = this.snapshot.get('documentId') || '';
-        this.options = new FormioOptionsImpl();
-        this.options.disableAlerts = true;
-    }
-    ngOnInit() {
-        this.moment = moment$1;
-        this.init();
-    }
-    init() {
-        this.documentService.getDocument(this.documentId).subscribe(document => {
-            this.document = document;
-        });
-        this.formService
-            .getFormDefinitionByNamePreFilled(`${this.documentDefinitionName}.summary`, this.documentId)
-            .subscribe(formDefinition => {
-            this.formDefinition = formDefinition;
-        });
-        this.userProviderService.getUserSubject().subscribe(user => {
-            this.roles = user.roles;
-            this.tasks = [];
-            this.loadProcessDocumentInstances(this.documentId);
-        });
-    }
-    loadProcessDocumentInstances(documentId) {
-        this.documentService.findProcessDocumentInstances(documentId).subscribe(processDocumentInstances => {
-            this.processDocumentInstances = processDocumentInstances;
-            this.processDocumentInstances.forEach(instance => {
-                this.loadProcessInstanceTasks(instance.id.processInstanceId);
-            });
-        });
-    }
-    loadProcessInstanceTasks(processInstanceId) {
-        this.processService.getProcessInstanceTasks(processInstanceId).subscribe(tasks => {
-            tasks.forEach(task => {
-                task.createdUnix = this.moment(task.created).unix();
-                task.created = this.moment(task.created).format('DD MMM YYYY HH:mm');
-                task.isLocked = () => {
-                    let locked = true;
-                    for (const link of task.identityLinks) {
-                        if (link.type === 'candidate' && link.groupId) {
-                            if (this.roles.includes(link.groupId)) {
-                                locked = false;
-                                break;
-                            }
-                        }
-                    }
-                    return locked;
-                };
-            });
-            this.tasks = this.tasks.concat(tasks);
-            this.tasks.sort((t1, t2) => t2.createdUnix - t1.createdUnix);
-        });
-    }
-    rowTaskClick(task) {
-        this.taskDetail.openTaskDetails(task);
-    }
-}
-DossierDetailTabSummaryComponent.decorators = [
-    { type: 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",
-                encapsulation: 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}"]
-            },] }
-];
-DossierDetailTabSummaryComponent.ctorParameters = () => [
-    { type: Router },
-    { type: DocumentService },
-    { type: TaskService },
-    { type: ProcessService },
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: ActivatedRoute },
-    { type: FormService },
-    { type: UserProviderService }
-];
-DossierDetailTabSummaryComponent.propDecorators = {
-    taskDetail: [{ type: ViewChild, args: ['taskDetail',] }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const moment$1 = moment_;
+moment$1.locale(localStorage.getItem('langKey') || '');
+moment$1.defaultFormat = 'DD MMM YYYY HH:mm';
+class DossierDetailTabSummaryComponent {
+    constructor(router, documentService, taskService, processService, el, renderer, route, formService, userProviderService) {
+        this.router = router;
+        this.documentService = documentService;
+        this.taskService = taskService;
+        this.processService = processService;
+        this.el = el;
+        this.renderer = renderer;
+        this.route = route;
+        this.formService = formService;
+        this.userProviderService = userProviderService;
+        this.processDocumentInstances = [];
+        this.tasks = [];
+        this.formDefinition = null;
+        this.roles = [];
+        this.snapshot = this.route.snapshot.paramMap;
+        this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
+        this.documentId = this.snapshot.get('documentId') || '';
+        this.options = new FormioOptionsImpl();
+        this.options.disableAlerts = true;
+    }
+    ngOnInit() {
+        this.moment = moment$1;
+        this.init();
+    }
+    init() {
+        this.documentService.getDocument(this.documentId).subscribe(document => {
+            this.document = document;
+        });
+        this.formService
+            .getFormDefinitionByNamePreFilled(`${this.documentDefinitionName}.summary`, this.documentId)
+            .subscribe(formDefinition => {
+            this.formDefinition = formDefinition;
+        });
+        this.userProviderService.getUserSubject().subscribe(user => {
+            this.roles = user.roles;
+            this.tasks = [];
+            this.loadProcessDocumentInstances(this.documentId);
+        });
+    }
+    loadProcessDocumentInstances(documentId) {
+        this.documentService
+            .findProcessDocumentInstances(documentId)
+            .subscribe(processDocumentInstances => {
+            this.processDocumentInstances = processDocumentInstances;
+            this.processDocumentInstances.forEach(instance => {
+                this.loadProcessInstanceTasks(instance.id.processInstanceId);
+            });
+        });
+    }
+    loadProcessInstanceTasks(processInstanceId) {
+        this.processService.getProcessInstanceTasks(processInstanceId).subscribe(tasks => {
+            tasks.forEach(task => {
+                task.createdUnix = this.moment(task.created).unix();
+                task.created = this.moment(task.created).format('DD MMM YYYY HH:mm');
+                task.isLocked = () => {
+                    let locked = true;
+                    for (const link of task.identityLinks) {
+                        if (link.type === 'candidate' && link.groupId) {
+                            if (this.roles.includes(link.groupId)) {
+                                locked = false;
+                                break;
+                            }
+                        }
+                    }
+                    return locked;
+                };
+            });
+            this.tasks = this.tasks.concat(tasks);
+            this.tasks.sort((t1, t2) => t2.createdUnix - t1.createdUnix);
+        });
+    }
+    rowTaskClick(task) {
+        this.taskDetail.openTaskDetails(task);
+    }
+}
+DossierDetailTabSummaryComponent.decorators = [
+    { type: 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\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: 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}"]
+            },] }
+];
+DossierDetailTabSummaryComponent.ctorParameters = () => [
+    { type: Router },
+    { type: DocumentService },
+    { type: TaskService },
+    { type: ProcessService },
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: ActivatedRoute },
+    { type: FormService },
+    { type: UserProviderService }
+];
+DossierDetailTabSummaryComponent.propDecorators = {
+    taskDetail: [{ type: ViewChild, args: ['taskDetail',] }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class DossierDetailTabProgressComponent {
-    constructor(route, documentService) {
-        this.route = route;
-        this.documentService = documentService;
-        const snapshot = this.route.snapshot.paramMap;
-        this.documentId = snapshot.get('documentId') || '';
-    }
-    ngOnInit() {
-        this.documentService.findProcessDocumentInstances(this.documentId).subscribe(processDocumentInstances => {
-            this.processDocumentInstances = processDocumentInstances;
-            this.selectedProcessInstanceId = processDocumentInstances[0].id.processInstanceId;
-        });
-    }
-    loadProcessInstance(processInstanceId) {
-        this.selectedProcessInstanceId = processInstanceId;
-    }
-}
-DossierDetailTabProgressComponent.decorators = [
-    { type: 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",
-                styles: [".full-height-tab-content{height:calc(100vh - 380px);width:100%}"]
-            },] }
-];
-DossierDetailTabProgressComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: DocumentService }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierDetailTabProgressComponent {
+    constructor(route, documentService) {
+        this.route = route;
+        this.documentService = documentService;
+        const snapshot = this.route.snapshot.paramMap;
+        this.documentId = snapshot.get('documentId') || '';
+    }
+    ngOnInit() {
+        this.documentService
+            .findProcessDocumentInstances(this.documentId)
+            .subscribe(processDocumentInstances => {
+            this.processDocumentInstances = processDocumentInstances;
+            this.selectedProcessInstanceId = processDocumentInstances[0].id.processInstanceId;
+        });
+    }
+    loadProcessInstance(processInstanceId) {
+        this.selectedProcessInstanceId = processInstanceId;
+    }
+}
+DossierDetailTabProgressComponent.decorators = [
+    { type: 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\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%}"]
+            },] }
+];
+DossierDetailTabProgressComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: DocumentService }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const moment$2 = moment_;
-moment$2.locale(localStorage.getItem('langKey') || '');
-moment$2.defaultFormat = 'DD MMM YYYY HH:mm';
-class DossierDetailTabAuditComponent {
-    constructor(route, documentService, spinnerService) {
-        this.route = route;
-        this.documentService = documentService;
-        this.spinnerService = spinnerService;
-        this.paginationClicked = new EventEmitter();
-        this.defaultAuditPage = 0;
-        this.spinnerService.show('auditSpinner');
-        const snapshot = this.route.snapshot.paramMap;
-        this.documentId = snapshot.get('documentId') || '';
-    }
-    static getTranslationKey(auditEvent) {
-        const classNameArray = auditEvent.className.split('.');
-        const eventName = classNameArray[classNameArray.length - 1];
-        return 'events.' + eventName;
-    }
-    ngOnInit() {
-        this.loadAuditPage(this.defaultAuditPage);
-    }
-    loadAuditPage(pageNumber) {
-        this.documentService.getAuditLog(this.documentId, pageNumber).subscribe(page => {
-            const timelineItems = [];
-            page.content.forEach(auditRecord => {
-                const occurredOn = moment$2(auditRecord.metaData.occurredOn);
-                const fromNow = occurredOn.fromNow();
-                timelineItems.push(new 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');
-            this.pagination = page;
-            this.pagination.number += 1;
-        });
-    }
-    onChangePagination(page) {
-        this.paginationClicked.emit(page);
-        this.currentAuditPage = page - 1;
-        this.loadAuditPage(this.currentAuditPage);
-    }
-}
-DossierDetailTabAuditComponent.decorators = [
-    { type: 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",
-                styles: [".audit-pagination{border-top:1px solid #dee2e6;margin:0 -1.923rem -1.923rem!important}"]
-            },] }
-];
-DossierDetailTabAuditComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: DocumentService },
-    { type: NgxSpinnerService }
-];
-DossierDetailTabAuditComponent.propDecorators = {
-    paginationClicked: [{ type: Output }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const moment$2 = moment_;
+moment$2.locale(localStorage.getItem('langKey') || '');
+moment$2.defaultFormat = 'DD MMM YYYY HH:mm';
+class DossierDetailTabAuditComponent {
+    constructor(route, documentService, spinnerService) {
+        this.route = route;
+        this.documentService = documentService;
+        this.spinnerService = spinnerService;
+        this.paginationClicked = new EventEmitter();
+        this.defaultAuditPage = 0;
+        this.spinnerService.show('auditSpinner');
+        const snapshot = this.route.snapshot.paramMap;
+        this.documentId = snapshot.get('documentId') || '';
+    }
+    static getTranslationKey(auditEvent) {
+        const classNameArray = auditEvent.className.split('.');
+        const eventName = classNameArray[classNameArray.length - 1];
+        return 'events.' + eventName;
+    }
+    ngOnInit() {
+        this.loadAuditPage(this.defaultAuditPage);
+    }
+    loadAuditPage(pageNumber) {
+        this.documentService.getAuditLog(this.documentId, pageNumber).subscribe(page => {
+            const timelineItems = [];
+            page.content.forEach(auditRecord => {
+                const occurredOn = moment$2(auditRecord.metaData.occurredOn);
+                const fromNow = occurredOn.fromNow();
+                timelineItems.push(new 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');
+            this.pagination = page;
+            this.pagination.number += 1;
+        });
+    }
+    onChangePagination(page) {
+        this.paginationClicked.emit(page);
+        this.currentAuditPage = page - 1;
+        this.loadAuditPage(this.currentAuditPage);
+    }
+}
+DossierDetailTabAuditComponent.decorators = [
+    { type: 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>{{\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}"]
+            },] }
+];
+DossierDetailTabAuditComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: DocumentService },
+    { type: NgxSpinnerService }
+];
+DossierDetailTabAuditComponent.propDecorators = {
+    paginationClicked: [{ type: Output }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class DossierDetailTabDocumentsComponent {
-    constructor(route, documentService, toastrService, uploadProviderService, downloadService) {
-        this.route = route;
-        this.documentService = documentService;
-        this.toastrService = toastrService;
-        this.uploadProviderService = uploadProviderService;
-        this.downloadService = downloadService;
-        this.relatedFiles = [];
-        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' }
-        ];
-        this.actions = [
-            {
-                columnName: '',
-                iconClass: 'fas fa-external-link-alt',
-                callback: this.downloadDocument.bind(this)
-            },
-            {
-                columnName: '',
-                iconClass: 'fas fa-trash-alt',
-                callback: this.removeRelatedFile.bind(this)
-            }
-        ];
-        this.uploading$ = new BehaviorSubject(false);
-        const snapshot = this.route.snapshot.paramMap;
-        this.documentId = snapshot.get('documentId') || '';
-        this.documentDefinitionName = snapshot.get('documentDefinitionName') || '';
-    }
-    ngOnInit() {
-        this.loadDocuments();
-    }
-    fileSelected(file) {
-        this.uploading$.next(true);
-        this.uploadProviderService.uploadFile(file, this.documentDefinitionName).pipe(switchMap((resourceFile) => this.documentService.assignResource(this.documentId, resourceFile.data.resourceId))).subscribe(() => {
-            this.toastrService.success('Successfully uploaded document to dossier');
-            this.loadDocuments();
-            this.uploading$.next(false);
-        }, () => {
-            this.toastrService.error('Failed to upload document to dossier');
-            this.uploading$.next(false);
-        });
-    }
-    loadDocuments() {
-        this.documentService.getDocument(this.documentId).subscribe((document) => {
-            this.relatedFiles = document.relatedFiles;
-        });
-    }
-    downloadDocument(relatedFile) {
-        this.uploadProviderService.getResource(relatedFile.fileId).subscribe((resource) => {
-            this.downloadService.downloadFile(resource.url, resource.resource.name);
-        });
-    }
-    removeRelatedFile(relatedFile) {
-        this.documentService.removeResource(this.documentId, relatedFile.fileId).subscribe(() => {
-            this.toastrService.success('Successfully removed document from dossier');
-            this.loadDocuments();
-        }, () => {
-            this.toastrService.error('Failed to remove document from dossier');
-        });
-    }
-}
-DossierDetailTabDocumentsComponent.decorators = [
-    { type: 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",
-                styles: [""]
-            },] }
-];
-DossierDetailTabDocumentsComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: DocumentService },
-    { type: ToastrService },
-    { type: UploadProviderService },
-    { type: DownloadService }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierDetailTabDocumentsComponent {
+    constructor(route, documentService, toastrService, uploadProviderService, downloadService, translateService, configService) {
+        var _a, _b;
+        this.route = route;
+        this.documentService = documentService;
+        this.toastrService = toastrService;
+        this.uploadProviderService = uploadProviderService;
+        this.downloadService = downloadService;
+        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 BehaviorSubject(null);
+        this.relatedFiles$ = this.refetch$.pipe(switchMap(() => combineLatest([this.documentService.getDocument(this.documentId), this.translateService.stream('key')])), map(([document]) => {
+            const relatedFiles = (document === null || document === void 0 ? void 0 : document.relatedFiles) || [];
+            const translatedFiles = relatedFiles.map(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' },
+        ];
+        this.actions = [
+            {
+                columnName: '',
+                iconClass: 'fas fa-external-link-alt',
+                callback: this.downloadDocument.bind(this),
+            },
+            {
+                columnName: '',
+                iconClass: 'fas fa-trash-alt',
+                callback: this.removeRelatedFile.bind(this),
+            },
+        ];
+        this.uploading$ = new BehaviorSubject(false);
+        const snapshot = this.route.snapshot.paramMap;
+        this.documentId = snapshot.get('documentId') || '';
+        this.documentDefinitionName = snapshot.get('documentDefinitionName') || '';
+    }
+    ngOnInit() {
+        this.refetchDocuments();
+    }
+    fileSelected(file) {
+        this.uploading$.next(true);
+        this.uploadProviderService
+            .uploadFile(file, this.documentDefinitionName)
+            .pipe(switchMap(resourceFile => this.documentService.assignResource(this.documentId, resourceFile.data.resourceId)))
+            .subscribe(() => {
+            this.toastrService.success('Successfully uploaded document to dossier');
+            this.refetchDocuments();
+            this.uploading$.next(false);
+        }, () => {
+            this.toastrService.error('Failed to upload document to dossier');
+            this.uploading$.next(false);
+        });
+    }
+    downloadDocument(relatedFile) {
+        this.uploadProviderService
+            .getResource(relatedFile.fileId)
+            .subscribe((resource) => {
+            this.downloadService.downloadFile(resource.url, resource.resource.name);
+        });
+    }
+    removeRelatedFile(relatedFile) {
+        this.documentService.removeResource(this.documentId, relatedFile.fileId).subscribe(() => {
+            this.toastrService.success('Successfully removed document from dossier');
+            this.refetchDocuments();
+        }, () => {
+            this.toastrService.error('Failed to remove document from dossier');
+        });
+    }
+    refetchDocuments() {
+        this.refetch$.next(null);
+    }
+}
+DossierDetailTabDocumentsComponent.decorators = [
+    { type: 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]=\"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: [""]
+            },] }
+];
+DossierDetailTabDocumentsComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: DocumentService },
+    { type: ToastrService },
+    { type: UploadProviderService },
+    { type: DownloadService },
+    { type: TranslateService },
+    { type: ConfigService }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const TAB_MAP = new InjectionToken('TabMap');
-const DEFAULT_TABS = new Map([
-    [DefaultTabs.summary, DossierDetailTabSummaryComponent],
-    [DefaultTabs.progress, DossierDetailTabProgressComponent],
-    [DefaultTabs.audit, DossierDetailTabAuditComponent],
-    [DefaultTabs.documents, DossierDetailTabDocumentsComponent]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const TAB_MAP = new InjectionToken('TabMap');
+const DEFAULT_TABS = new Map([
+    [DefaultTabs.summary, DossierDetailTabSummaryComponent],
+    [DefaultTabs.progress, DossierDetailTabProgressComponent],
+    [DefaultTabs.audit, DossierDetailTabAuditComponent],
+    [DefaultTabs.documents, DossierDetailTabDocumentsComponent],
 ]);
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class TabService {
-    constructor(tabMap = DEFAULT_TABS) {
-        this.tabs = [];
-        this.tabMap = tabMap;
-        let i = 0;
-        this.tabMap.forEach((component, name, map) => {
-            this.tabs.push(new TabImpl(name, i, component));
-            i++;
-        });
-    }
-    getTabs() {
-        return this.tabs;
-    }
-}
-TabService.ɵprov = ɵɵdefineInjectable({ factory: function TabService_Factory() { return new TabService(ɵɵinject(TAB_MAP)); }, token: TabService, providedIn: "root" });
-TabService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-TabService.ctorParameters = () => [
-    { type: Map, decorators: [{ type: Inject, args: [TAB_MAP,] }] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class TabService {
+    constructor(tabMap = DEFAULT_TABS) {
+        this.tabs = [];
+        this.tabMap = tabMap;
+        let i = 0;
+        this.tabMap.forEach((component, name, map) => {
+            this.tabs.push(new TabImpl(name, i, component));
+            i++;
+        });
+    }
+    getTabs() {
+        return this.tabs;
+    }
+}
+TabService.ɵprov = ɵɵdefineInjectable({ factory: function TabService_Factory() { return new TabService(ɵɵinject(TAB_MAP)); }, token: TabService, providedIn: "root" });
+TabService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+TabService.ctorParameters = () => [
+    { type: Map, decorators: [{ type: Inject, args: [TAB_MAP,] }] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class DossierSupportingProcessStartModalComponent {
-    constructor(route, router, processService, documentService, formLinkService, logger) {
-        this.route = route;
-        this.router = router;
-        this.processService = processService;
-        this.documentService = documentService;
-        this.formLinkService = formLinkService;
-        this.logger = logger;
-        this.formSubmit = new EventEmitter();
-    }
-    loadFormDefinition() {
-        this.formDefinition = null;
-        this.formLinkService.getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
-            .subscribe(formDefinition => {
-            this.formAssociation = formDefinition.formAssociation;
-            const className = this.formAssociation.formLink.className.split('.');
-            const linkType = className[className.length - 1];
-            switch (linkType) {
-                case 'BpmnElementFormIdLink':
-                    this.formDefinition = formDefinition;
-                    this.documentService.getDocument(this.documentId).subscribe(document => {
-                        this.submission = {
-                            data: document.content
-                        };
-                    }, () => noop());
-                    this.modal.show();
-                    break;
-                case 'BpmnElementUrlLink':
-                    const url = this.router.serializeUrl(this.router.createUrlTree([formDefinition.formAssociation.formLink.url]));
-                    window.open(url, '_blank');
-                    break;
-                case 'BpmnElementAngularStateUrlLink':
-                    this.router.navigate([formDefinition.formAssociation.formLink.url]);
-                    break;
-                default:
-                    this.logger.fatal('Unsupported class name');
-            }
-        }, errors => {
-            this.modal.show();
-        });
-    }
-    get modalTitle() {
-        return `Start - ${this.processName}`;
-    }
-    openModal(processDocumentDefinition, documentId) {
-        this.documentId = documentId;
-        this.documentDefinitionName = processDocumentDefinition.id.documentDefinitionId.name;
-        this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
-        this.processName = processDocumentDefinition.processName;
-        this.options = new FormioOptionsImpl();
-        this.options.disableAlerts = true;
-        const formioBeforeSubmit = function (submission, callback) {
-            callback(null, submission);
-        };
-        this.options.setHooks(formioBeforeSubmit);
-        this.loadFormDefinition();
-    }
-    onSubmit(submission) {
-        this.formioSubmission = submission;
-        this.formLinkService.onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data, this.documentId).subscribe((formSubmissionResult) => {
-            this.modal.hide();
-            this.formSubmit.emit();
-        }, errors => {
-            this.form.showErrors(errors);
-        });
-    }
-    gotoFormLinkScreen() {
-        this.modal.hide();
-        this.router.navigate(['form-links'], { queryParams: { process: this.processDefinitionKey } });
-    }
-}
-DossierSupportingProcessStartModalComponent.decorators = [
-    { type: 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",
-                encapsulation: 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}"]
-            },] }
-];
-DossierSupportingProcessStartModalComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: ProcessService },
-    { type: DocumentService },
-    { type: FormLinkService },
-    { type: NGXLogger }
-];
-DossierSupportingProcessStartModalComponent.propDecorators = {
-    form: [{ type: ViewChild, args: ['form', { static: false },] }],
-    modal: [{ type: ViewChild, args: ['supportingProcessStartModal', { static: false },] }],
-    formSubmit: [{ type: Output }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierSupportingProcessStartModalComponent {
+    constructor(route, router, processService, documentService, formLinkService, logger) {
+        this.route = route;
+        this.router = router;
+        this.processService = processService;
+        this.documentService = documentService;
+        this.formLinkService = formLinkService;
+        this.logger = logger;
+        this.formSubmit = new EventEmitter();
+    }
+    loadFormDefinition() {
+        this.formDefinition = null;
+        this.formLinkService
+            .getStartEventFormDefinitionByProcessDefinitionKey(this.processDefinitionKey)
+            .subscribe(formDefinition => {
+            this.formAssociation = formDefinition.formAssociation;
+            const className = this.formAssociation.formLink.className.split('.');
+            const linkType = className[className.length - 1];
+            switch (linkType) {
+                case 'BpmnElementFormIdLink':
+                    this.formDefinition = formDefinition;
+                    this.documentService.getDocument(this.documentId).subscribe(document => {
+                        this.submission = {
+                            data: document.content,
+                        };
+                    }, () => noop());
+                    this.modal.show();
+                    break;
+                case 'BpmnElementUrlLink':
+                    const url = this.router.serializeUrl(this.router.createUrlTree([formDefinition.formAssociation.formLink.url]));
+                    window.open(url, '_blank');
+                    break;
+                case 'BpmnElementAngularStateUrlLink':
+                    this.route.params.pipe(take(1)).subscribe(params => {
+                        const documentId = params === null || params === void 0 ? void 0 : params.documentId;
+                        this.router.navigate([formDefinition.formAssociation.formLink.url], {
+                            state: Object.assign({}, (documentId && { documentId })),
+                        });
+                    });
+                    break;
+                default:
+                    this.logger.fatal('Unsupported class name');
+            }
+        }, errors => {
+            this.modal.show();
+        });
+    }
+    get modalTitle() {
+        return `Start - ${this.processName}`;
+    }
+    openModal(processDocumentDefinition, documentId) {
+        this.documentId = documentId;
+        this.documentDefinitionName = processDocumentDefinition.id.documentDefinitionId.name;
+        this.processDefinitionKey = processDocumentDefinition.id.processDefinitionKey;
+        this.processName = processDocumentDefinition.processName;
+        this.options = new FormioOptionsImpl();
+        this.options.disableAlerts = true;
+        const formioBeforeSubmit = function (submission, callback) {
+            callback(null, submission);
+        };
+        this.options.setHooks(formioBeforeSubmit);
+        this.loadFormDefinition();
+    }
+    onSubmit(submission) {
+        this.formioSubmission = submission;
+        this.formLinkService
+            .onSubmit(this.processDefinitionKey, this.formAssociation.formLink.id, submission.data, this.documentId)
+            .subscribe((formSubmissionResult) => {
+            this.modal.hide();
+            this.formSubmit.emit();
+        }, errors => {
+            this.form.showErrors(errors);
+        });
+    }
+    gotoFormLinkScreen() {
+        this.modal.hide();
+        this.router.navigate(['form-links'], { queryParams: { process: this.processDefinitionKey } });
+    }
+}
+DossierSupportingProcessStartModalComponent.decorators = [
+    { type: 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\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: 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}"]
+            },] }
+];
+DossierSupportingProcessStartModalComponent.ctorParameters = () => [
+    { type: ActivatedRoute },
+    { type: Router },
+    { type: ProcessService },
+    { type: DocumentService },
+    { type: FormLinkService },
+    { type: NGXLogger }
+];
+DossierSupportingProcessStartModalComponent.propDecorators = {
+    form: [{ type: ViewChild, args: ['form', { static: false },] }],
+    modal: [{ type: ViewChild, args: ['supportingProcessStartModal', { static: false },] }],
+    formSubmit: [{ type: Output }]
 };
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-class DossierDetailComponent {
-    constructor(componentFactoryResolver, translateService, documentService, processService, route, router, location, tabService) {
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.translateService = translateService;
-        this.documentService = documentService;
-        this.processService = processService;
-        this.route = route;
-        this.router = router;
-        this.location = location;
-        this.tabService = tabService;
-        this.document = null;
-        this.tabLoader = null;
-        this.processDefinitionListFields = [];
-        this.processDocumentDefinitions = [];
-        this.snapshot = this.route.snapshot.paramMap;
-        this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
-        this.documentId = this.snapshot.get('documentId') || '';
-    }
-    ngOnInit() {
-        this.tabLoader = new TabLoaderImpl(this.tabService.getTabs(), this.componentFactoryResolver, this.viewContainerRef, this.translateService, this.router, this.location);
-        this.documentService.getDocumentDefinition(this.documentDefinitionName).subscribe(definition => {
-            this.documentDefinitionNameTitle = definition.schema.title;
-        });
-        this.initialTabName = this.snapshot.get('tab');
-        this.tabLoader.initial(this.initialTabName);
-        this.getAllAssociatedProcessDefinitions();
-    }
-    getAllAssociatedProcessDefinitions() {
-        this.documentService.findProcessDocumentDefinitions(this.documentDefinitionName).subscribe(processDocumentDefinitions => {
-            this.processDocumentDefinitions = processDocumentDefinitions
-                .filter(processDocumentDefinition => processDocumentDefinition.startableByUser);
-            this.processDefinitionListFields = [{
-                    key: 'processName',
-                    label: 'Proces'
-                }];
-        });
-    }
-    startProcess(processDocumentDefinition) {
-        this.supportingProcessStart.openModal(processDocumentDefinition, this.documentId);
-    }
-}
-DossierDetailComponent.decorators = [
-    { type: 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",
-                styles: [".tab-container{min-height:300px}"]
-            },] }
-];
-DossierDetailComponent.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: TranslateService },
-    { type: DocumentService },
-    { type: ProcessService },
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: Location },
-    { type: TabService }
-];
-DossierDetailComponent.propDecorators = {
-    viewContainerRef: [{ type: ViewChild, args: ['tabContainer', { read: ViewContainerRef, static: true },] }],
-    supportingProcessStart: [{ type: ViewChild, args: ['supportingProcessStartModal',] }]
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+class DossierDetailComponent {
+    constructor(componentFactoryResolver, translateService, documentService, processService, route, router, location, tabService) {
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.translateService = translateService;
+        this.documentService = documentService;
+        this.processService = processService;
+        this.route = route;
+        this.router = router;
+        this.location = location;
+        this.tabService = tabService;
+        this.document = null;
+        this.tabLoader = null;
+        this.processDefinitionListFields = [];
+        this.processDocumentDefinitions = [];
+        this.snapshot = this.route.snapshot.paramMap;
+        this.documentDefinitionName = this.snapshot.get('documentDefinitionName') || '';
+        this.documentId = this.snapshot.get('documentId') || '';
+    }
+    ngOnInit() {
+        this.tabLoader = new TabLoaderImpl(this.tabService.getTabs(), this.componentFactoryResolver, this.viewContainerRef, this.translateService, this.router, this.location);
+        this.documentService
+            .getDocumentDefinition(this.documentDefinitionName)
+            .subscribe(definition => {
+            this.documentDefinitionNameTitle = definition.schema.title;
+        });
+        this.initialTabName = this.snapshot.get('tab');
+        this.tabLoader.initial(this.initialTabName);
+        this.getAllAssociatedProcessDefinitions();
+    }
+    getAllAssociatedProcessDefinitions() {
+        this.documentService
+            .findProcessDocumentDefinitions(this.documentDefinitionName)
+            .subscribe(processDocumentDefinitions => {
+            this.processDocumentDefinitions = processDocumentDefinitions.filter(processDocumentDefinition => processDocumentDefinition.startableByUser);
+            this.processDefinitionListFields = [
+                {
+                    key: 'processName',
+                    label: 'Proces',
+                },
+            ];
+        });
+    }
+    startProcess(processDocumentDefinition) {
+        this.supportingProcessStart.openModal(processDocumentDefinition, this.documentId);
+    }
+}
+DossierDetailComponent.decorators = [
+    { type: 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\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}"]
+            },] }
+];
+DossierDetailComponent.ctorParameters = () => [
+    { type: ComponentFactoryResolver },
+    { type: TranslateService },
+    { type: DocumentService },
+    { type: ProcessService },
+    { type: ActivatedRoute },
+    { type: Router },
+    { type: Location },
+    { type: TabService }
+];
+DossierDetailComponent.propDecorators = {
+    viewContainerRef: [{ type: ViewChild, args: ['tabContainer', { read: ViewContainerRef, static: true },] }],
+    supportingProcessStart: [{ type: 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.
- */
-const moment$3 = moment_;
-moment$3.locale(localStorage.getItem('langKey') || '');
-class DossierDetailTabContactMomentsComponent {
-    constructor(contactMomentService) {
-        this.contactMomentService = contactMomentService;
-        this.contactMoments = [];
-    }
-    ngOnInit() {
-        this.loadContactMoments();
-    }
-    loadContactMoments() {
-        this.contactMomentService.getContactMoments().subscribe(contactMoments => this.handleContactMomentsResult(contactMoments));
-    }
-    handleContactMomentsResult(contactMoments) {
-        this.contactMoments = contactMoments.map(contactMoment => {
-            const registratieDatum = moment$3(contactMoment.registratiedatum);
-            return new TimelineItemImpl(registratieDatum.format('DD MMM YYYY'), registratieDatum.format('HH:mm'), contactMoment.medewerkerIdentificatie.achternaam, contactMoment.kanaal, contactMoment.tekst, null);
-        });
-    }
-}
-DossierDetailTabContactMomentsComponent.decorators = [
-    { type: 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 */"]
-            },] }
-];
-DossierDetailTabContactMomentsComponent.ctorParameters = () => [
-    { type: ContactMomentService }
-];
+/*
+ * 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.
+ */
+const moment$3 = moment_;
+moment$3.locale(localStorage.getItem('langKey') || '');
+class DossierDetailTabContactMomentsComponent {
+    constructor(contactMomentService, alertService, translateService) {
+        this.contactMomentService = contactMomentService;
+        this.alertService = alertService;
+        this.translateService = translateService;
+        this.refetchContactMoments$ = new BehaviorSubject('');
+        this.contactMoments$ = this.refetchContactMoments$.pipe(switchMap(() => this.contactMomentService.getContactMoments()), map(contactMoments => contactMoments.map(contactMoment => {
+            const registratieDatum = moment$3(contactMoment.registratiedatum);
+            return new TimelineItemImpl(registratieDatum.format('DD MMM YYYY'), registratieDatum.format('HH:mm'), contactMoment.medewerkerIdentificatie.achternaam, contactMoment.kanaal, contactMoment.tekst, null);
+        })));
+        this.text$ = new BehaviorSubject('');
+        this.channel$ = new BehaviorSubject('MAIL');
+        this.requestData$ = combineLatest([this.text$, this.channel$]);
+        this.valid$ = this.requestData$.pipe(map(([text, channel]) => !!(text && channel)));
+        this.disabled$ = new BehaviorSubject(false);
+    }
+    textChange(text) {
+        this.text$.next(text);
+    }
+    buttonClick() {
+        this.modal.show();
+    }
+    saveNote() {
+        this.disable();
+        this.requestData$.pipe(take(1)).subscribe(([text, channel]) => {
+            this.contactMomentService.saveContactMoment({ kanaal: channel, tekst: text }).subscribe(() => {
+                this.alertService.success(this.translateService.instant('dossier.contactMoments.saveSuccess'));
+                this.enable();
+                this.clear();
+                this.modal.hide();
+                this.refetchContactMoments();
+            }, () => {
+                this.enable();
+            });
+        });
+    }
+    disable() {
+        this.disabled$.next(true);
+    }
+    enable() {
+        this.disabled$.next(false);
+    }
+    clear() {
+        this.text$.next('');
+    }
+    refetchContactMoments() {
+        this.refetchContactMoments$.next('');
+    }
+}
+DossierDetailTabContactMomentsComponent.decorators = [
+    { type: 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 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 = () => [
+    { type: ContactMomentService },
+    { type: AlertService },
+    { type: TranslateService }
+];
+DossierDetailTabContactMomentsComponent.propDecorators = {
+    modal: [{ type: ViewChild, args: ['contactMomentsNoteModal',] }]
+};
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const moment$4 = moment_;
-moment$4.locale(localStorage.getItem('langKey') || '');
-class DossierUpdateComponent {
-    constructor(taskService, documentService, route, toastr, location, dossierService) {
-        this.taskService = taskService;
-        this.documentService = documentService;
-        this.route = route;
-        this.toastr = toastr;
-        this.location = location;
-        this.customDefinitions = {};
-        const snapshot = this.route.snapshot.paramMap;
-        this.documentDefinitionName = snapshot.get('documentDefinitionName') || '';
-        this.documentId = snapshot.get('documentId') || '';
-        this.taskId = snapshot.get('taskId') || '';
-        this.implementationDefinitions = dossierService.getImplementationEnvironmentDefinitions(this.documentDefinitionName);
-        this.loadDocumentDefinition(this.documentDefinitionName);
-        this.loadDocument(this.documentId);
-    }
-    ngOnInit() {
-        this.getTask(this.taskId);
-        if (this.implementationDefinitions.definitions.detail.summary) {
-            this.customDefinitions = this.implementationDefinitions.definitions.detail.summary;
-        }
-    }
-    loadDocumentDefinition(name) {
-        this.documentService.getDocumentDefinition(name).subscribe(definition => {
-            this.schema = definition.schema;
-        });
-    }
-    loadDocument(id) {
-        this.documentService.getDocument(id).subscribe(document => {
-            this.document = document;
-        });
-    }
-    getTask(id) {
-        this.taskService.getTask(id).subscribe(task => {
-            this.task = task;
-            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()}`
-            };
-        });
-    }
-    reset() {
-        this.loadDocument(this.documentId);
-    }
-    back() {
-        this.location.back();
-    }
-    save() {
-        const document = {
-            documentId: this.document.id,
-            content: this.document.content,
-            versionBasedOn: this.document.version
-        };
-        this.documentService.modifyDocument(document).subscribe(result => {
-            this.document = result.document;
-            this.toastr.success('Document aangepast');
-            this.location.back();
-        });
-    }
-    submit(data) {
-        // merge document content with formdata
-        const mergedData = Object.assign({}, this.document.content, data);
-        const documentData = {
-            request: {
-                documentId: this.document.id,
-                content: mergedData,
-                versionBasedOn: this.document.version
-            },
-            taskId: this.task.task.id
-        };
-        this.documentService.modifyDocumentAndCompleteTask(documentData).subscribe(result => {
-            this.toastr.success(this.task.task.name + ' has successfully been completed');
-            this.location.back();
-        });
-    }
-    returnZero() {
-        return 0;
-    }
-}
-DossierUpdateComponent.decorators = [
-    { type: 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",
-                styles: [""]
-            },] }
-];
-DossierUpdateComponent.ctorParameters = () => [
-    { type: TaskService },
-    { type: DocumentService },
-    { type: ActivatedRoute },
-    { type: ToastrService },
-    { type: Location },
-    { type: DossierService }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const moment$4 = moment_;
+moment$4.locale(localStorage.getItem('langKey') || '');
+class DossierUpdateComponent {
+    constructor(taskService, documentService, route, toastr, location, dossierService) {
+        this.taskService = taskService;
+        this.documentService = documentService;
+        this.route = route;
+        this.toastr = toastr;
+        this.location = location;
+        this.customDefinitions = {};
+        const snapshot = this.route.snapshot.paramMap;
+        this.documentDefinitionName = snapshot.get('documentDefinitionName') || '';
+        this.documentId = snapshot.get('documentId') || '';
+        this.taskId = snapshot.get('taskId') || '';
+        this.implementationDefinitions = dossierService.getImplementationEnvironmentDefinitions(this.documentDefinitionName);
+        this.loadDocumentDefinition(this.documentDefinitionName);
+        this.loadDocument(this.documentId);
+    }
+    ngOnInit() {
+        this.getTask(this.taskId);
+        if (this.implementationDefinitions.definitions.detail.summary) {
+            this.customDefinitions = this.implementationDefinitions.definitions.detail.summary;
+        }
+    }
+    loadDocumentDefinition(name) {
+        this.documentService.getDocumentDefinition(name).subscribe(definition => {
+            this.schema = definition.schema;
+        });
+    }
+    loadDocument(id) {
+        this.documentService.getDocument(id).subscribe(document => {
+            this.document = document;
+        });
+    }
+    getTask(id) {
+        this.taskService.getTask(id).subscribe(task => {
+            this.task = task;
+            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()}`,
+            };
+        });
+    }
+    reset() {
+        this.loadDocument(this.documentId);
+    }
+    back() {
+        this.location.back();
+    }
+    save() {
+        const document = {
+            documentId: this.document.id,
+            content: this.document.content,
+            versionBasedOn: this.document.version,
+        };
+        this.documentService.modifyDocument(document).subscribe(result => {
+            this.document = result.document;
+            this.toastr.success('Document aangepast');
+            this.location.back();
+        });
+    }
+    submit(data) {
+        // merge document content with formdata
+        const mergedData = Object.assign({}, this.document.content, data);
+        const documentData = {
+            request: {
+                documentId: this.document.id,
+                content: mergedData,
+                versionBasedOn: this.document.version,
+            },
+            taskId: this.task.task.id,
+        };
+        this.documentService.modifyDocumentAndCompleteTask(documentData).subscribe(result => {
+            this.toastr.success(this.task.task.name + ' has successfully been completed');
+            this.location.back();
+        });
+    }
+    returnZero() {
+        return 0;
+    }
+}
+DossierUpdateComponent.decorators = [
+    { type: 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          <!--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: [""]
+            },] }
+];
+DossierUpdateComponent.ctorParameters = () => [
+    { type: TaskService },
+    { type: DocumentService },
+    { type: ActivatedRoute },
+    { type: ToastrService },
+    { type: Location },
+    { type: DossierService }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const ɵ0 = { title: 'Dossiers', roles: [ROLE_USER] }, ɵ1 = { title: 'Dossiers', parentPath: 'dossiers/:documentDefinitionName', roles: [ROLE_USER] }, ɵ2 = { title: 'Task details', parentPath: 'dossiers/:documentDefinitionName/document/:documentId/:tab', roles: [ROLE_USER] };
-const routes = [
-    {
-        path: 'dossiers/:documentDefinitionName',
-        component: DossierListComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ0
-    },
-    {
-        path: 'dossiers/:documentDefinitionName/document/:documentId/:tab',
-        component: DossierDetailComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ1
-    },
-    {
-        path: 'dossiers/:documentDefinitionName/document/:documentId/:tab/tasks/:taskId',
-        component: DossierUpdateComponent,
-        canActivate: [AuthGuardService],
-        data: ɵ2
-    }
-];
-class DossierRoutingModule {
-}
-DossierRoutingModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    RouterModule.forChild(routes),
-                ],
-                exports: [RouterModule]
-            },] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const ɵ0 = { title: 'Dossiers', roles: [ROLE_USER] }, ɵ1 = { title: 'Dossiers', parentPath: 'dossiers/:documentDefinitionName', roles: [ROLE_USER] }, ɵ2 = {
+    title: 'Task details',
+    parentPath: 'dossiers/:documentDefinitionName/document/:documentId/:tab',
+    roles: [ROLE_USER],
+};
+const routes = [
+    {
+        path: 'dossiers/:documentDefinitionName',
+        component: DossierListComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ0,
+    },
+    {
+        path: 'dossiers/:documentDefinitionName/document/:documentId/:tab',
+        component: DossierDetailComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ1,
+    },
+    {
+        path: 'dossiers/:documentDefinitionName/document/:documentId/:tab/tasks/:taskId',
+        component: DossierUpdateComponent,
+        canActivate: [AuthGuardService],
+        data: ɵ2,
+    },
+];
+class DossierRoutingModule {
+}
+DossierRoutingModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [CommonModule, RouterModule.forChild(routes)],
+                exports: [RouterModule],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-const ɵ0$1 = HttpLoaderFactory;
-class DossierModule {
-    static forRoot(tabsFactory) {
-        return {
-            ngModule: DossierModule,
-            providers: [
-                DossierService,
-                TabService,
-                {
-                    provide: TAB_MAP,
-                    useFactory: tabsFactory
-                },
-                {
-                    provide: ANALYZE_FOR_ENTRY_COMPONENTS,
-                    useValue: Array.from(tabsFactory().values()),
-                    multi: true
-                }
-            ]
-        };
-    }
-}
-DossierModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    DossierListComponent,
-                    DossierDetailComponent,
-                    DossierDetailTabSummaryComponent,
-                    DossierDetailTabProgressComponent,
-                    DossierDetailTabAuditComponent,
-                    DossierDetailTabDocumentsComponent,
-                    DossierDetailTabContactMomentsComponent,
-                    DossierUpdateComponent,
-                    DossierProcessStartModalComponent,
-                    DossierSupportingProcessStartModalComponent
-                ],
-                imports: [
-                    CommonModule,
-                    DossierRoutingModule,
-                    ListModule,
-                    WidgetModule,
-                    BpmnJsDiagramModule,
-                    TimelineModule,
-                    CamundaFormModule,
-                    ProcessModule,
-                    FilterSidebarModule,
-                    NgbButtonsModule,
-                    DataListModule,
-                    FormsModule,
-                    FormModule,
-                    FormIoModule,
-                    ModalModule,
-                    SpinnerModule,
-                    TranslateModule.forRoot({
-                        loader: {
-                            provide: TranslateLoader,
-                            useFactory: ɵ0$1,
-                            deps: [HttpClient]
-                        }
-                    }),
-                    TaskModule,
-                    ModalModule,
-                    NgbTooltipModule,
-                    UploaderModule,
-                    DropzoneModule,
-                    NgbPaginationModule,
-                    ConfigModule
-                ],
-                exports: [
-                    DossierListComponent,
-                    DossierDetailComponent
-                ],
-                entryComponents: [
-                    DossierDetailTabSummaryComponent,
-                    DossierDetailTabProgressComponent,
-                    DossierDetailTabAuditComponent,
-                    DossierDetailTabDocumentsComponent,
-                    DossierDetailTabContactMomentsComponent
-                ]
-            },] }
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const ɵ0$1 = HttpLoaderFactory;
+class DossierModule {
+    static forRoot(tabsFactory) {
+        return {
+            ngModule: DossierModule,
+            providers: [
+                DossierService,
+                TabService,
+                {
+                    provide: TAB_MAP,
+                    useFactory: tabsFactory,
+                },
+                {
+                    provide: ANALYZE_FOR_ENTRY_COMPONENTS,
+                    useValue: Array.from(tabsFactory().values()),
+                    multi: true,
+                },
+            ],
+        };
+    }
+}
+DossierModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    DossierListComponent,
+                    DossierDetailComponent,
+                    DossierDetailTabSummaryComponent,
+                    DossierDetailTabProgressComponent,
+                    DossierDetailTabAuditComponent,
+                    DossierDetailTabDocumentsComponent,
+                    DossierDetailTabContactMomentsComponent,
+                    DossierUpdateComponent,
+                    DossierProcessStartModalComponent,
+                    DossierSupportingProcessStartModalComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    DossierRoutingModule,
+                    ListModule,
+                    WidgetModule,
+                    BpmnJsDiagramModule,
+                    TimelineModule,
+                    CamundaFormModule,
+                    ProcessModule,
+                    FilterSidebarModule,
+                    NgbButtonsModule,
+                    DataListModule,
+                    FormsModule,
+                    FormModule,
+                    FormIoModule,
+                    ModalModule,
+                    SpinnerModule,
+                    TranslateModule.forRoot({
+                        loader: {
+                            provide: TranslateLoader,
+                            useFactory: ɵ0$1,
+                            deps: [HttpClient],
+                        },
+                    }),
+                    TaskModule,
+                    ModalModule,
+                    NgbTooltipModule,
+                    UploaderModule,
+                    DropzoneModule,
+                    NgbPaginationModule,
+                    ConfigModule,
+                ],
+                exports: [DossierListComponent, DossierDetailComponent],
+                entryComponents: [
+                    DossierDetailTabSummaryComponent,
+                    DossierDetailTabProgressComponent,
+                    DossierDetailTabAuditComponent,
+                    DossierDetailTabDocumentsComponent,
+                    DossierDetailTabContactMomentsComponent,
+                ],
+            },] }
 ];
 
-/*
- * Copyright 2015-2020 Ritense BV, the Netherlands.
- *
- * Licensed under EUPL, Version 1.2 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" basis,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
+/*
+ * Copyright 2015-2020 Ritense BV, the Netherlands.
+ *
+ * Licensed under EUPL, Version 1.2 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { DEFAULT_TABS, DefaultTabs, DossierDetailComponent, DossierDetailTabAuditComponent, DossierDetailTabContactMomentsComponent, DossierDetailTabDocumentsComponent, DossierDetailTabProgressComponent, DossierDetailTabSummaryComponent, DossierListComponent, DossierModule, DossierService, TAB_MAP, TabService, ɵ0$1 as ɵ0, DossierUpdateComponent as ɵa, DossierProcessStartModalComponent as ɵb, DossierSupportingProcessStartModalComponent as ɵc, DossierRoutingModule as ɵd };