@valtimo/task 10.5.0 → 10.6.0

package/fesm2015/valtimo-task.mjs

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, ViewEncapsulation, ViewChild, NgModule } from '@angular/core';
+import * as i6 from '@valtimo/security';
+import { InterceptorSkip, AuthGuardService } from '@valtimo/security';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import * as i2 from '@valtimo/config';
@@ -20,11 +22,10 @@ import moment from 'moment';
 import { take, tap, map } from 'rxjs/operators';
 import { BehaviorSubject, Subscription, combineLatest, distinctUntilChanged, tap as tap$1 } from 'rxjs';
 import * as i2$2 from '@valtimo/form-link';
+import { FormLinkModule } from '@valtimo/form-link';
 import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i4$1 from 'ngx-logger';
-import * as i6 from '@valtimo/security';
-import { AuthGuardService } from '@valtimo/security';
 import * as i8 from '@valtimo/document';
 import * as i10 from 'carbon-components-angular';
 import { LinkModule } from 'carbon-components-angular';
@@ -120,6 +121,11 @@ class TaskService {
         });
     }
     getTaskProcessLink(taskId) {
+        return this.http.get(`${this.valtimoEndpointUri}v2/process-link/task/${taskId}`, {
+            headers: { [InterceptorSkip]: '' },
+        });
+    }
+    getTaskProcessLinkV1(taskId) {
         return this.http.get(`${this.valtimoEndpointUri}v1/process-link/task/${taskId}`);
     }
     getConfigCustomTaskList() {
@@ -271,9 +277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  */
 moment.locale(localStorage.getItem('langKey') || '');
 class TaskDetailModalComponent {
-    constructor(toastr, formLinkService, formFlowService, router, logger, route, taskService, userProviderService, modalService, documentService, translateService) {
+    constructor(toastr, formLinkService, processLinkService, formFlowService, router, logger, route, taskService, userProviderService, modalService, documentService, translateService) {
         this.toastr = toastr;
         this.formLinkService = formLinkService;
+        this.processLinkService = processLinkService;
         this.formFlowService = formFlowService;
         this.router = router;
         this.logger = logger;
@@ -294,8 +301,6 @@ class TaskDetailModalComponent {
         this.taskProcessLinkType$ = new BehaviorSubject(null);
         this.processLinkIsForm$ = this.taskProcessLinkType$.pipe(map(type => type === 'form'));
         this.processLinkIsFormFlow$ = this.taskProcessLinkType$.pipe(map(type => type === 'form-flow'));
-        this.formFlowStepType$ = new BehaviorSubject(null);
-        this.formFlowStepTypeIsForm$ = this.formFlowStepType$.pipe(map(type => type === 'form'));
         this.formIoFormData$ = new BehaviorSubject(null);
         this._subscriptions = new Subscription();
         this.formioOptions = new FormioOptionsImpl();
@@ -304,10 +309,9 @@ class TaskDetailModalComponent {
     ngAfterViewInit() {
         this._subscriptions.add(this.modal.modalShowing$
             .pipe(distinctUntilChanged(), tap$1(modalShowing => {
-            const formIoFormData = this.formIoFormData$.getValue();
-            if (!modalShowing && formIoFormData && this.formFlowInstanceId) {
-                if (this.taskProcessLinkType$.getValue() === 'form-flow') {
-                    this.formFlowService.save(this.formFlowInstanceId, formIoFormData).subscribe(() => null, errors => this.form.showErrors(errors));
+            if (!modalShowing) {
+                if (this.formFlow) {
+                    this.formFlow.saveData();
                 }
             }
         }))
@@ -326,37 +330,41 @@ class TaskDetailModalComponent {
             title: task.name,
             subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${task.created}`,
         };
-        this.formLinkService
-            .getPreFilledFormDefinitionByFormLinkId(task.processDefinitionKey, task.businessKey, task.taskDefinitionKey, task.id // taskInstanceId
-        )
-            .subscribe(formDefinition => {
-            this.formAssociation = formDefinition.formAssociation;
-            const className = this.formAssociation.formLink.className.split('.');
-            const linkType = className[className.length - 1];
-            switch (linkType) {
-                case 'BpmnElementFormIdLink':
-                    this.setFormDefinitionAndOpenModal(formDefinition);
-                    break;
-                case 'BpmnElementFormFlowIdLink':
-                    // We can't use the formDefinition here because the form definition is provided per form flow step
-                    // I'm still leaving this in here in case we want to add form flow specific code.
-                    break;
-                case 'BpmnElementUrlLink':
-                    this.openUrlLink(formDefinition);
-                    break;
-                case 'BpmnElementAngularStateUrlLink':
-                    this.openAngularStateUrlLink(task, formDefinition);
-                    break;
-                default:
-                    this.logger.fatal('Unsupported class name');
-            }
-        }, errors => {
-            var _a;
-            if ((_a = errors === null || errors === void 0 ? void 0 : errors.error) === null || _a === void 0 ? void 0 : _a.detail) {
-                this.errorMessage = errors.error.detail;
-            }
-            this.modal.show();
-        });
+        //only load from formlink when process link failed for backwards compatibility
+        if (!this.taskProcessLinkType$.getValue()) {
+            this.formLinkService
+                .getPreFilledFormDefinitionByFormLinkId(task.processDefinitionKey, task.businessKey, task.taskDefinitionKey, task.id // taskInstanceId
+            )
+                .subscribe(formDefinition => {
+                this.formAssociation = formDefinition.formAssociation;
+                const className = this.formAssociation.formLink.className.split('.');
+                const linkType = className[className.length - 1];
+                switch (linkType) {
+                    case 'BpmnElementFormIdLink':
+                        this.setFormDefinitionAndOpenModal(formDefinition);
+                        break;
+                    case 'BpmnElementFormFlowIdLink':
+                        // We can't use the formDefinition here because the form definition is provided per form flow step
+                        // I'm still leaving this in here in case we want to add form flow specific code.
+                        this.modal.show();
+                        break;
+                    case 'BpmnElementUrlLink':
+                        this.openUrlLink(formDefinition);
+                        break;
+                    case 'BpmnElementAngularStateUrlLink':
+                        this.openAngularStateUrlLink(task, formDefinition);
+                        break;
+                    default:
+                        this.logger.fatal('Unsupported class name');
+                }
+            }, errors => {
+                var _a;
+                if ((_a = errors === null || errors === void 0 ? void 0 : errors.error) === null || _a === void 0 ? void 0 : _a.detail) {
+                    this.errorMessage = errors.error.detail;
+                }
+                this.modal.show();
+            });
+        }
     }
     gotoFormLinkScreen() {
         this.modal.hide();
@@ -372,22 +380,26 @@ class TaskDetailModalComponent {
             this.formIoFormData$.next(submission.data);
         }
         if (this.taskProcessLinkType$.getValue() === 'form') {
-            this.formLinkService
-                .onSubmit(this.task.processDefinitionKey, this.formAssociation.formLink.id, submission.data, this.task.businessKey, this.task.id)
-                .subscribe((_) => {
-                this.completeTask();
-            }, errors => {
-                this.form.showErrors(errors);
-            });
-        }
-        if (this.taskProcessLinkType$.getValue() === 'form-flow') {
-            if (submission.data.submit) {
-                this.formFlowService
-                    .submitStep(this.formFlowInstanceId, this.formFlowStepInstanceId, submission.data)
-                    .subscribe((result) => this.handleFormFlowStep(result), errors => this.form.showErrors(errors));
+            if (this.processLinkId) {
+                this.processLinkService
+                    .submitForm(this.processLinkId, submission.data, this.task.businessKey, this.task.id)
+                    .subscribe({
+                    next: (_) => {
+                        this.completeTask();
+                    },
+                    error: errors => {
+                        this.form.showErrors(errors);
+                    },
+                });
             }
-            else if (submission.data['back']) {
-                this.formFlowService.back(this.formFlowInstanceId, submission.data).subscribe((result) => this.handleFormFlowStep(result), errors => this.form.showErrors(errors));
+            else {
+                this.formLinkService
+                    .onSubmit(this.task.processDefinitionKey, this.formAssociation.formLink.id, submission.data, this.task.businessKey, this.task.id)
+                    .subscribe((_) => {
+                    this.completeTask();
+                }, errors => {
+                    this.form.showErrors(errors);
+                });
             }
         }
     }
@@ -395,50 +407,56 @@ class TaskDetailModalComponent {
         this.formDefinition = null;
     }
     getTaskProcessLink(taskId) {
-        this.taskService.getTaskProcessLink(taskId).subscribe(res => {
-            switch (res === null || res === void 0 ? void 0 : res.type) {
+        this.taskService.getTaskProcessLink(taskId).subscribe({
+            next: res => {
+                if (res != null) {
+                    switch (res === null || res === void 0 ? void 0 : res.type) {
+                        case 'form':
+                            this.taskProcessLinkType$.next('form');
+                            this.processLinkId = res.processLinkId;
+                            this.setFormDefinitionAndOpenModal(res.properties.prefilledForm);
+                            break;
+                        case 'form-flow':
+                            this.taskProcessLinkType$.next('form-flow');
+                            this.formFlowInstanceId = res.properties.formFlowInstanceId;
+                            break;
+                    }
+                }
+                else {
+                    this.getLegacyTaskProcessLink(taskId);
+                }
+            },
+            error: _ => {
+                this.getLegacyTaskProcessLink(taskId);
+            },
+        });
+    }
+    completeTask() {
+        this.toastr.success(`${this.task.name} ${this.translateService.instant('taskDetail.taskCompleted')}`);
+        this.modal.hide();
+        this.task = null;
+        this.formSubmit.emit();
+    }
+    getLegacyTaskProcessLink(taskId) {
+        this.taskService.getTaskProcessLinkV1(taskId).subscribe(resV1 => {
+            switch (resV1 === null || resV1 === void 0 ? void 0 : resV1.type) {
                 case 'form':
                     this.taskProcessLinkType$.next('form');
                     break;
                 case 'form-flow':
                     this.taskProcessLinkType$.next('form-flow');
-                    this.getFormFlowStep(res === null || res === void 0 ? void 0 : res.properties.formFlowInstanceId);
+                    this.formFlowInstanceId = resV1.properties.formFlowInstanceId;
                     break;
             }
         });
     }
-    getFormFlowStep(formFlowInstanceId) {
-        this.formFlowService
-            .getFormFlowStep(formFlowInstanceId)
-            .subscribe((result) => {
-            this.handleFormFlowStep(result);
-        });
-    }
-    handleFormFlowStep(formFlowInstance) {
-        if (formFlowInstance.step === null) {
-            this.formFlowStepType$.next(null);
-            this.formFlowInstanceId = null;
-            this.formFlowStepInstanceId = null;
-            this.completeTask();
-        }
-        else {
-            this.modalService.scrollToTop();
-            this.formFlowStepType$.next(formFlowInstance.step.type);
-            this.formFlowInstanceId = formFlowInstance.id;
-            this.formFlowStepInstanceId = formFlowInstance.step.id;
-            this.setFormDefinitionAndOpenModal(formFlowInstance.step.typeProperties.definition);
-        }
-    }
-    completeTask() {
-        this.toastr.success(`${this.task.name} ${this.translateService.instant('taskDetail.taskCompleted')}`);
-        this.modal.hide();
-        this.task = null;
-        this.formSubmit.emit();
-    }
     resetTaskProcessLinkType() {
         this.taskProcessLinkType$.next(null);
+        this.processLinkId = null;
+        this.formAssociation = null;
     }
     setFormDefinitionAndOpenModal(formDefinition) {
+        this.taskProcessLinkType$.next('form');
         this.formDefinition = formDefinition;
         this.modal.show();
     }
@@ -463,14 +481,17 @@ class TaskDetailModalComponent {
         });
     }
 }
-TaskDetailModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TaskDetailModalComponent, deps: [{ token: i1$1.ToastrService }, { token: i2$2.FormLinkService }, { token: i2$2.FormFlowService }, { token: i3.Router }, { token: i4$1.NGXLogger }, { token: i3.ActivatedRoute }, { token: TaskService }, { token: i6.UserProviderService }, { token: i7.ValtimoModalService }, { token: i8.DocumentService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-TaskDetailModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: { formSubmit: "formSubmit", assignmentOfTaskChanged: "assignmentOfTaskChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "modal", first: true, predicate: ["taskDetailModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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  #taskDetailModal\n  elementId=\"taskDetailModal\"\n  [title]=\"page?.title\"\n  [subtitle]=\"page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div\n    body\n    *ngIf=\"formDefinition && ((processLinkIsForm$ | async) || (formFlowStepTypeIsForm$ | async))\"\n  >\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && !errorMessage\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n      {{\n        (isAdmin$ | async)\n          ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n          : ('formManagement.noFormDefinitionFoundUser' | translate)\n      }}\n    </div>\n  </div>\n  <div body *ngIf=\"errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!formDefinition\">\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\n<ng-template #assignUserToTask>\n  <valtimo-assign-user-to-task\n    *ngIf=\"task && assignmentOfTaskChanged\"\n    [taskId]=\"task.id\"\n    [assigneeEmail]=\"task.assignee\"\n    (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n  ></valtimo-assign-user-to-task>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#taskDetailModal .formio-component-submit{text-align:right}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i7.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeEmail"], outputs: ["assignmentOfTaskChanged"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+TaskDetailModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TaskDetailModalComponent, deps: [{ token: i1$1.ToastrService }, { token: i2$2.FormLinkService }, { token: i2$2.ProcessLinkService }, { token: i2$2.FormFlowService }, { token: i3.Router }, { token: i4$1.NGXLogger }, { token: i3.ActivatedRoute }, { token: TaskService }, { token: i6.UserProviderService }, { token: i7.ValtimoModalService }, { token: i8.DocumentService }, { token: i4.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+TaskDetailModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", outputs: { formSubmit: "formSubmit", assignmentOfTaskChanged: "assignmentOfTaskChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formFlow", first: true, predicate: ["formFlow"], descendants: true }, { propertyName: "modal", first: true, predicate: ["taskDetailModal"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2023 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  #taskDetailModal\n  elementId=\"taskDetailModal\"\n  [title]=\"page?.title\"\n  [subtitle]=\"page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div body *ngIf=\"formDefinition && (processLinkIsForm$ | async)\">\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"processLinkIsFormFlow$ | async\">\n    <valtimo-form-flow\n      #formFlow\n      [formIoFormData]=\"formIoFormData$\"\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"completeTask()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formDefinition && !formFlowInstanceId && !errorMessage\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n      {{\n        (isAdmin$ | async)\n          ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n          : ('formManagement.noFormDefinitionFoundUser' | translate)\n      }}\n    </div>\n  </div>\n  <div body *ngIf=\"errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!formDefinition\">\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\n<ng-template #assignUserToTask>\n  <valtimo-assign-user-to-task\n    *ngIf=\"task && assignmentOfTaskChanged\"\n    [taskId]=\"task.id\"\n    [assigneeEmail]=\"task.assignee\"\n    (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n  ></valtimo-assign-user-to-task>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#taskDetailModal .formio-component-submit{text-align:right}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.FormioComponent, selector: "valtimo-form-io", inputs: ["form", "options", "submission", "readOnly", "formRefresh$"], outputs: ["submit", "change"] }, { kind: "component", type: i7.ModalComponent, selector: "valtimo-modal", inputs: ["elementId", "title", "subtitle", "templateBelowSubtitle", "showFooter"] }, { kind: "component", type: i2$2.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeEmail"], outputs: ["assignmentOfTaskChanged"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TaskDetailModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-task-detail-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 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  #taskDetailModal\n  elementId=\"taskDetailModal\"\n  [title]=\"page?.title\"\n  [subtitle]=\"page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div\n    body\n    *ngIf=\"formDefinition && ((processLinkIsForm$ | async) || (formFlowStepTypeIsForm$ | async))\"\n  >\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"!formDefinition && !errorMessage\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n      {{\n        (isAdmin$ | async)\n          ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n          : ('formManagement.noFormDefinitionFoundUser' | translate)\n      }}\n    </div>\n  </div>\n  <div body *ngIf=\"errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!formDefinition\">\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\n<ng-template #assignUserToTask>\n  <valtimo-assign-user-to-task\n    *ngIf=\"task && assignmentOfTaskChanged\"\n    [taskId]=\"task.id\"\n    [assigneeEmail]=\"task.assignee\"\n    (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n  ></valtimo-assign-user-to-task>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#taskDetailModal .formio-component-submit{text-align:right}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ToastrService }, { type: i2$2.FormLinkService }, { type: i2$2.FormFlowService }, { type: i3.Router }, { type: i4$1.NGXLogger }, { type: i3.ActivatedRoute }, { type: TaskService }, { type: i6.UserProviderService }, { type: i7.ValtimoModalService }, { type: i8.DocumentService }, { type: i4.TranslateService }]; }, propDecorators: { form: [{
+            args: [{ selector: 'valtimo-task-detail-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2023 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  #taskDetailModal\n  elementId=\"taskDetailModal\"\n  [title]=\"page?.title\"\n  [subtitle]=\"page?.subtitle\"\n  [templateBelowSubtitle]=\"assignUserToTask\"\n>\n  <div body *ngIf=\"formDefinition && (processLinkIsForm$ | async)\">\n    <valtimo-form-io\n      #form\n      [form]=\"formDefinition\"\n      (submit)=\"onSubmit($event)\"\n      (change)=\"onChange($event)\"\n      [options]=\"formioOptions\"\n    ></valtimo-form-io>\n  </div>\n  <div body *ngIf=\"processLinkIsFormFlow$ | async\">\n    <valtimo-form-flow\n      #formFlow\n      [formIoFormData]=\"formIoFormData$\"\n      [formFlowInstanceId]=\"formFlowInstanceId\"\n      (formFlowComplete)=\"completeTask()\"\n    ></valtimo-form-flow>\n  </div>\n  <div body *ngIf=\"!formDefinition && !formFlowInstanceId && !errorMessage\">\n    <div class=\"bg-warning text-black mb-0 p-3 text-center\">\n      {{\n        (isAdmin$ | async)\n          ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n          : ('formManagement.noFormDefinitionFoundUser' | translate)\n      }}\n    </div>\n  </div>\n  <div body *ngIf=\"errorMessage\">\n    <div class=\"bg-danger text-black mb-0 p-3 text-center\">\n      {{ errorMessage }}\n    </div>\n  </div>\n  <div footer>\n    <div class=\"mb-0 p-3 text-center\" *ngIf=\"!formDefinition\">\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\n<ng-template #assignUserToTask>\n  <valtimo-assign-user-to-task\n    *ngIf=\"task && assignmentOfTaskChanged\"\n    [taskId]=\"task.id\"\n    [assigneeEmail]=\"task.assignee\"\n    (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n  ></valtimo-assign-user-to-task>\n</ng-template>\n", styles: ["/*!\n * Copyright 2015-2023 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 */#taskDetailModal .formio-component-submit{text-align:right}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ToastrService }, { type: i2$2.FormLinkService }, { type: i2$2.ProcessLinkService }, { type: i2$2.FormFlowService }, { type: i3.Router }, { type: i4$1.NGXLogger }, { type: i3.ActivatedRoute }, { type: TaskService }, { type: i6.UserProviderService }, { type: i7.ValtimoModalService }, { type: i8.DocumentService }, { type: i4.TranslateService }]; }, propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form']
+            }], formFlow: [{
+                type: ViewChild,
+                args: ['formFlow']
             }], modal: [{
                 type: ViewChild,
                 args: ['taskDetailModal']
@@ -748,7 +769,8 @@ TaskModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14
         FormsModule, i1$1.ToastrModule, i4.TranslateModule, NgbModule,
         FormIoModule,
         ModalModule,
-        LinkModule], exports: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent] });
+        LinkModule,
+        FormLinkModule], exports: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent] });
 TaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TaskModule, imports: [CommonModule,
         TaskRoutingModule,
         ListModule,
@@ -773,7 +795,8 @@ TaskModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14
         NgbModule,
         FormIoModule,
         ModalModule,
-        LinkModule] });
+        LinkModule,
+        FormLinkModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TaskModule, decorators: [{
             type: NgModule,
             args: [{
@@ -804,6 +827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         FormIoModule,
                         ModalModule,
                         LinkModule,
+                        FormLinkModule,
                     ],
                     exports: [TaskListComponent, TaskDetailModalComponent, AssignUserToTaskComponent],
                 }]