@valtimo/task 12.5.1 → 12.7.0

package/fesm2022/valtimo-task.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, ViewContainerRef, ChangeDetectionStrategy, Optional, Inject, ViewChild, signal, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
 import * as i9 from '@valtimo/components';
 import { ViewType, SearchableDropdownSelectModule, FormioOptionsImpl, FormIoModule, ConfirmationModalModule, TooltipModule, CarbonListModule, PageHeaderModule, WidgetModule, SpinnerModule, CamundaFormModule, RenderInPageHeaderDirectiveModule, SearchFieldsModule } from '@valtimo/components';
-import { BehaviorSubject, combineLatest, tap, filter, switchMap, of, map as map$1, Subscription, take as take$1, distinctUntilChanged, Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, tap, filter, switchMap, of, map as map$1, catchError, Subscription, take as take$1, distinctUntilChanged, Subject } from 'rxjs';
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@ngx-translate/core';
@@ -18,7 +18,7 @@ import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { RecentlyViewed16 } from '@carbon/icons';
 import * as i7 from '@valtimo/process-link';
-import { ProcessLinkModule, formSizeToCarbonModalSizeMap } from '@valtimo/process-link';
+import { FORM_CUSTOM_COMPONENT_TOKEN, ProcessLinkModule, formSizeToCarbonModalSizeMap } from '@valtimo/process-link';
 import * as i2 from '@valtimo/document';
 import * as i12 from 'carbon-components-angular';
 import { ButtonModule, IconModule, ModalModule, LinkModule, TabsModule, ContentSwitcherModule, DropdownModule, TooltipModule as TooltipModule$1 } from 'carbon-components-angular';
@@ -713,12 +713,14 @@ class TaskIntermediateSaveService extends BaseApiService {
         this._formIoFormData$ = new BehaviorSubject({});
     }
     getIntermediateSubmission(taskInstanceId) {
-        return this.httpClient.get(this.getApiUrl('/v1/form/intermediate/submission'), {
+        return this.httpClient
+            .get(this.getApiUrl('/v1/form/intermediate/submission'), {
             params: {
                 taskInstanceId,
             },
             headers: new HttpHeaders().set(InterceptorSkip, '404'),
-        });
+        })
+            .pipe(catchError(() => of(null)));
     }
     storeIntermediateSubmission(request) {
         return this.httpClient.post(this.getApiUrl('/v1/form/intermediate/submission'), request, {
@@ -864,11 +866,11 @@ class AssignUserToTaskComponent {
         this.disabled$.next(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AssignUserToTaskComponent, deps: [{ token: TaskService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AssignUserToTaskComponent, isStandalone: true, selector: "valtimo-assign-user-to-task", inputs: { taskId: "taskId", assigneeId: "assigneeId" }, outputs: { assignmentOfTaskChanged: "assignmentOfTaskChanged" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    idOnServer: assignedIdOnServer$ | async,\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userIdToAssign === obs.idOnServer && obs.idOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}i{font-size:13px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SearchableDropdownSelectModule }, { kind: "component", type: i9.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission", "showClearSelection"], outputs: ["itemSelected", "clearSelection"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AssignUserToTaskComponent, isStandalone: true, selector: "valtimo-assign-user-to-task", inputs: { taskId: "taskId", assigneeId: "assigneeId" }, outputs: { assignmentOfTaskChanged: "assignmentOfTaskChanged" }, usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    idOnServer: assignedIdOnServer$ | async,\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userIdToAssign === obs.idOnServer && obs.idOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595;padding:0;margin:0}i{font-size:13px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: SearchableDropdownSelectModule }, { kind: "component", type: i9.SearchableDropdownSelectComponent, selector: "valtimo-searchable-dropdown-select", inputs: ["style", "items", "buttonText", "searchText", "noResultsText", "disabled", "selectedText", "selectedTextValue", "clearSelectionButtonTitle", "hasSelection", "width", "hasPermission", "showClearSelection"], outputs: ["itemSelected", "clearSelection"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AssignUserToTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-assign-user-to-task', standalone: true, imports: [CommonModule, TranslateModule, SearchableDropdownSelectModule], template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    idOnServer: assignedIdOnServer$ | async,\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userIdToAssign === obs.idOnServer && obs.idOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595}i{font-size:13px}\n/*!\n * Copyright 2015-2024 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"] }]
+            args: [{ selector: 'valtimo-assign-user-to-task', standalone: true, imports: [CommonModule, TranslateModule, SearchableDropdownSelectModule], template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    candidateUsers: candidateUsersForTask$ | async,\n    disabled: disabled$ | async,\n    idOnServer: assignedIdOnServer$ | async,\n  } as obs\"\n>\n  <div class=\"container-fluid\">\n    <div class=\"mt-2 mb-2\">\n      <div class=\"col-12 pl-0 d-flex flex-row align-items-center\">\n        <valtimo-searchable-dropdown-select\n          *ngIf=\"obs.candidateUsers; else loading\"\n          [style]=\"'underlinedText'\"\n          [items]=\"mapUsersForDropdown(obs.candidateUsers)\"\n          [buttonText]=\"'assignTask.header' | translate\"\n          [searchText]=\"'interface.typeToSearch' | translate\"\n          [noResultsText]=\"'interface.noSearchResults' | translate\"\n          [disabled]=\"obs.disabled\"\n          [selectedText]=\"'assignTask.assignedTo' | translate\"\n          [selectedTextValue]=\"assignedUserFullName$ | async\"\n          [clearSelectionButtonTitle]=\"'assignTask.remove' | translate\"\n          [hasSelection]=\"userIdToAssign === obs.idOnServer && obs.idOnServer !== null\"\n          [width]=\"250\"\n          (itemSelected)=\"assignTask($event)\"\n          (clearSelection)=\"unassignTask()\"\n        >\n        </valtimo-searchable-dropdown-select>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <h5>\n    <b>{{ 'assignTask.fetchingUsers' | translate }}</b>\n  </h5>\n</ng-template>\n", styles: [".container-fluid{color:#959595;padding:0;margin:0}i{font-size:13px}\n/*!\n * Copyright 2015-2024 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"] }]
         }], ctorParameters: () => [{ type: TaskService }], propDecorators: { taskId: [{
                 type: Input
             }], assigneeId: [{
@@ -936,7 +938,20 @@ class TaskDetailContentComponent {
             return;
         this.loadTaskDetails(value);
     }
-    constructor(configService, documentService, iconService, logger, modalService, permissionService, processLinkService, router, stateService, taskIntermediateSaveService, taskService, toastr, translateService, formViewModel, urlResolverService) {
+    set taskAndProcessLink(value) {
+        if (!value)
+            return;
+        this.loadTaskDetails(value.task, value.processLinkActivityResult);
+    }
+    set modalClosed(_) {
+        // save form flow data on modal closed
+        if (this.formFlow)
+            this.formFlow.saveData();
+    }
+    get viewInitialized$() {
+        return this._viewInitialized$.pipe(filter(initialized => initialized));
+    }
+    constructor(configService, documentService, iconService, logger, modalService, permissionService, processLinkService, router, stateService, taskIntermediateSaveService, taskService, toastr, translateService, formViewModel, formCustomComponentConfig, urlResolverService) {
         this.configService = configService;
         this.documentService = documentService;
         this.iconService = iconService;
@@ -951,6 +966,7 @@ class TaskDetailContentComponent {
         this.toastr = toastr;
         this.translateService = translateService;
         this.formViewModel = formViewModel;
+        this.formCustomComponentConfig = formCustomComponentConfig;
         this.urlResolverService = urlResolverService;
         this.closeModalEvent = new EventEmitter();
         this.formSubmit = new EventEmitter();
@@ -973,13 +989,17 @@ class TaskDetailContentComponent {
         this.processLinkIsForm$ = this._taskProcessLinkType$.pipe(map$1((type) => type === 'form'));
         this.processLinkIsFormViewModel$ = this._taskProcessLinkType$.pipe(map$1((type) => type === 'form-view-model'));
         this.processLinkIsFormFlow$ = this._taskProcessLinkType$.pipe(map$1((type) => type === 'form-flow'));
+        this.processLinkIsUiComponent$ = this._taskProcessLinkType$.pipe(map$1((type) => type === 'ui-component'));
         this._processLinkId$ = new BehaviorSubject(null);
         this._subscriptions = new Subscription();
+        this._formCustomComponentConfig$ = new BehaviorSubject({});
+        this._viewInitialized$ = new BehaviorSubject(false);
         this.intermediateSaveEnabled = !!this.configService.featureToggles?.enableIntermediateSave;
         this.iconService.registerAll([RecentlyViewed16]);
         const options = new FormioOptionsImpl();
         options.disableAlerts = true;
         this.formioOptions$.next(options);
+        this._formCustomComponentConfig$.next(formCustomComponentConfig);
     }
     ngOnInit() {
         this.openPermissionSubscription();
@@ -987,6 +1007,10 @@ class TaskDetailContentComponent {
     ngOnDestroy() {
         this._subscriptions.unsubscribe();
         this.taskIntermediateSaveService.setSubmission({});
+        this._viewInitialized$.next(false);
+    }
+    ngAfterViewInit() {
+        this._viewInitialized$.next(true);
     }
     onSubmit(submission) {
         if (submission.data) {
@@ -1036,15 +1060,20 @@ class TaskDetailContentComponent {
     onFormFlowChangeEvent() {
         this.activeChange.emit(true);
     }
-    loadTaskDetails(task) {
+    loadTaskDetails(task, processLink) {
         this.resetTaskProcessLinkType();
         this.resetFormDefinition();
-        this.getTaskProcessLink(task.id);
+        this.taskInstanceId$.next(task.id);
+        if (!processLink) {
+            this.getTaskProcessLink(task.id);
+        }
+        else {
+            this.setTaskProcessLink(processLink);
+        }
         this.setDocumentDefinitionNameInService(task);
         const documentId = task.businessKey;
         this.stateService.setDocumentId(documentId);
         this.task$.next(task);
-        this.taskInstanceId$.next(task.id);
         this.page$.next({
             title: task.name,
             subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${task.created}`,
@@ -1052,10 +1081,12 @@ class TaskDetailContentComponent {
     }
     getCurrentProgress(formViewModelComponentRef) {
         this.taskInstanceId$
-            .pipe(take$1(1), switchMap((taskInstanceId) => this.taskIntermediateSaveService.getIntermediateSubmission(taskInstanceId ?? '')))
+            .pipe(filter(value => !!value), take$1(1), switchMap((taskInstanceId) => this.taskIntermediateSaveService.getIntermediateSubmission(taskInstanceId ?? '')))
             .subscribe({
             next: (intermediateSubmission) => {
-                this.taskIntermediateSaveService.setSubmission({ data: intermediateSubmission.submission });
+                this.taskIntermediateSaveService.setSubmission({
+                    data: intermediateSubmission?.submission || {},
+                });
                 if (formViewModelComponentRef) {
                     formViewModelComponentRef.instance.submission = {
                         data: intermediateSubmission.submission,
@@ -1067,50 +1098,60 @@ class TaskDetailContentComponent {
     getTaskProcessLink(taskId) {
         this.taskService.getTaskProcessLink(taskId).subscribe({
             next: res => {
-                if (res !== null) {
-                    switch (res?.type) {
-                        case 'form':
-                            this._taskProcessLinkType$.next('form');
-                            this._processLinkId$.next(res.processLinkId);
-                            if (this.intermediateSaveEnabled)
-                                this.getCurrentProgress();
-                            this.setFormDefinition(res.properties.prefilledForm);
-                            break;
-                        case 'form-flow':
-                            this._taskProcessLinkType$.next('form-flow');
-                            this.formFlowInstanceId$.next(res.properties.formFlowInstanceId ?? '');
-                            break;
-                        case 'form-view-model':
-                            this._taskProcessLinkType$.next('form-view-model');
-                            this._processLinkId$.next(res.processLinkId);
-                            this.formDefinition$.next(res.properties.formDefinition);
-                            this.formName$.next(res.properties.formName ?? '');
-                            this.setFormViewModelComponent();
-                            break;
-                        case 'url':
-                            this._taskProcessLinkType$.next('url');
-                            this._processLinkId$.next(res.processLinkId);
-                            combineLatest([this.processLinkService.getVariables(), this.task$])
-                                .pipe(take$1(1))
-                                .subscribe(([variables, task]) => {
-                                let url = this.urlResolverService.resolveUrlVariables(res.properties.url, variables.variables);
-                                window.open(url, '_blank').focus();
-                                this.processLinkService
-                                    .submitURLProcessLink(res.processLinkId, task.businessKey, task.id)
-                                    .subscribe(() => {
-                                    this.completeTask(task);
-                                });
-                            });
-                            break;
-                    }
-                    this.loading$.next(false);
-                }
+                this.setTaskProcessLink(res);
             },
             error: _ => {
                 this.loading$.next(false);
             },
         });
     }
+    setTaskProcessLink(processLinkResult) {
+        if (processLinkResult !== null) {
+            switch (processLinkResult?.type) {
+                case 'form':
+                    this._taskProcessLinkType$.next('form');
+                    this._processLinkId$.next(processLinkResult.processLinkId);
+                    if (this.intermediateSaveEnabled)
+                        this.getCurrentProgress();
+                    this.setFormDefinition(processLinkResult.properties.prefilledForm);
+                    break;
+                case 'form-flow':
+                    this._taskProcessLinkType$.next('form-flow');
+                    this.formFlowInstanceId$.next(processLinkResult.properties.formFlowInstanceId ?? '');
+                    break;
+                case 'form-view-model':
+                    this._taskProcessLinkType$.next('form-view-model');
+                    this._processLinkId$.next(processLinkResult.processLinkId);
+                    this.formDefinition$.next(processLinkResult.properties.formDefinition);
+                    this.formName$.next(processLinkResult.properties.formName ?? '');
+                    this.setFormViewModelComponent();
+                    break;
+                case 'url':
+                    this._taskProcessLinkType$.next('url');
+                    this._processLinkId$.next(processLinkResult.processLinkId);
+                    combineLatest([this.processLinkService.getVariables(), this.task$])
+                        .pipe(take$1(1))
+                        .subscribe(([variables, task]) => {
+                        let url = this.urlResolverService.resolveUrlVariables(processLinkResult.properties.url, variables.variables);
+                        window.open(url, '_blank').focus();
+                        this.processLinkService
+                            .submitURLProcessLink(processLinkResult.processLinkId, task.businessKey, task.id)
+                            .subscribe(() => {
+                            this.completeTask(task);
+                        });
+                    });
+                    break;
+                case 'ui-component':
+                    this._taskProcessLinkType$.next('ui-component');
+                    this._processLinkId$.next(processLinkResult.processLinkId);
+                    this.formDefinition$.next(null);
+                    this.formName$.next('');
+                    this.setFormCustomComponent(processLinkResult.properties.componentKey);
+                    break;
+            }
+            this.loading$.next(false);
+        }
+    }
     openPermissionSubscription() {
         this._subscriptions.add(this.task$.subscribe(task => {
             if (task) {
@@ -1135,30 +1176,51 @@ class TaskDetailContentComponent {
         this.formDefinition$.next(formDefinition);
     }
     setFormViewModelComponent() {
-        this.formViewModelDynamicContainer.clear();
-        if (!this.formViewModel)
-            return;
-        const formViewModelComponent = this.formViewModelDynamicContainer.createComponent(this.formViewModel.component);
-        formViewModelComponent.instance.form = this.formDefinition$.getValue();
-        formViewModelComponent.instance.formName = this.formName$.getValue();
-        formViewModelComponent.instance.taskInstanceId = this.taskInstanceId$.getValue();
-        formViewModelComponent.instance.isStartForm = false;
-        formViewModelComponent.instance.formSubmit
-            .pipe(take$1(1), switchMap(() => this.task$))
-            .subscribe((task) => {
-            this.completeTask(task);
-        });
-        if (this.intermediateSaveEnabled) {
-            this._subscriptions.add(formViewModelComponent.instance.submission$.subscribe(submission => {
-                this.taskIntermediateSaveService.setSubmission(submission);
-            }));
-            this._subscriptions.add(this.submission$.pipe(distinctUntilChanged()).subscribe((submission) => {
-                if (submission?.data && Object.keys(submission.data).length === 0) {
-                    formViewModelComponent.instance.submission = { data: {} };
+        this._viewInitialized$.subscribe((viewInitialized) => {
+            if (viewInitialized) {
+                this.formViewModelDynamicContainer.clear();
+                if (!this.formViewModel)
+                    return;
+                const formViewModelComponent = this.formViewModelDynamicContainer.createComponent(this.formViewModel.component);
+                formViewModelComponent.instance.form = this.formDefinition$.getValue();
+                formViewModelComponent.instance.formName = this.formName$.getValue();
+                formViewModelComponent.instance.taskInstanceId = this.taskInstanceId$.getValue();
+                formViewModelComponent.instance.isStartForm = false;
+                formViewModelComponent.instance.formSubmit
+                    .pipe(take$1(1), switchMap(() => this.task$))
+                    .subscribe((task) => {
+                    this.completeTask(task);
+                });
+                if (this.intermediateSaveEnabled) {
+                    this._subscriptions.add(formViewModelComponent.instance.submission$.subscribe(submission => {
+                        this.taskIntermediateSaveService.setSubmission(submission);
+                    }));
+                    this._subscriptions.add(this.submission$.pipe(distinctUntilChanged()).subscribe((submission) => {
+                        if (submission?.data && Object.keys(submission.data).length === 0) {
+                            formViewModelComponent.instance.submission = { data: {} };
+                        }
+                    }));
+                    this.getCurrentProgress(formViewModelComponent);
                 }
-            }));
-            this.getCurrentProgress(formViewModelComponent);
-        }
+            }
+        });
+    }
+    setFormCustomComponent(formCustomComponentKey) {
+        this._viewInitialized$.subscribe((viewInitialized) => {
+            if (viewInitialized) {
+                this.formCustomComponentDynamicContainer.clear();
+                if (!this.formCustomComponentConfig)
+                    return;
+                this._subscriptions.add(this._formCustomComponentConfig$.subscribe((formCustomComponentConfig) => {
+                    const customComponent = formCustomComponentConfig[formCustomComponentKey];
+                    const renderedComponent = this.formCustomComponentDynamicContainer.createComponent(customComponent);
+                    renderedComponent.instance.taskInstanceId = this.taskInstanceId$.value;
+                    renderedComponent.instance.submitEvent.subscribe(() => {
+                        this.closeModalEvent.emit();
+                    });
+                }));
+            }
+        });
     }
     resetFormDefinition() {
         this.formDefinition$.next(null);
@@ -1177,17 +1239,22 @@ class TaskDetailContentComponent {
             this.stateService.setDocumentDefinitionName(documentDefinitionName);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailContentComponent, deps: [{ token: i1$1.ConfigService }, { token: i2.DocumentService }, { token: i12.IconService }, { token: i4.NGXLogger }, { token: i9.ValtimoModalService }, { token: i3$1.PermissionService }, { token: i7.ProcessLinkService }, { token: i1$2.Router }, { token: i9.FormIoStateService }, { token: TaskIntermediateSaveService }, { token: TaskService }, { token: i10.ToastrService }, { token: i3.TranslateService }, { token: FORM_VIEW_MODEL_TOKEN, optional: true }, { token: i7.UrlResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskDetailContentComponent, isStandalone: true, selector: "valtimo-task-detail-content", inputs: { task: "task" }, outputs: { closeModalEvent: "closeModalEvent", formSubmit: "formSubmit", activeChange: "activeChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "formFlow", first: true, predicate: ["formFlow"], descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    taskId: taskInstanceId$ | async,\n    formDefinition: formDefinition$ | async,\n    formDefinitionId: formDefinitionId$ | async,\n    formName: formName$ | async,\n    formIoFormData: formIoFormData$ | async,\n    submission: submission$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    processLinkIsFormViewModel: processLinkIsFormViewModel$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async,\n    canAssignUserToTask: canAssignUserToTask$ | async,\n  } as obs\"\n>\n  <valtimo-form-io\n    #form\n    *ngIf=\"obs.formDefinition && obs.processLinkIsForm\"\n    [form]=\"obs.formDefinition\"\n    [submission]=\"obs.submission\"\n    (submit)=\"onSubmit($event)\"\n    (change)=\"onChange($event)\"\n    [options]=\"obs.formioOptions\"\n  ></valtimo-form-io>\n\n  <valtimo-form-flow\n    #formFlow\n    *ngIf=\"obs.processLinkIsFormFlow\"\n    [formIoFormData]=\"formIoFormData$\"\n    [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n    (formFlowComplete)=\"completeTask(obs.task)\"\n    (formFlowChange)=\"onFormFlowChangeEvent()\"\n  ></valtimo-form-flow>\n\n  <div *ngIf=\"obs.loading\" class=\"text-black mb-0 p-3 text-center\">\n    {{ 'formManagement.loading' | translate }}\n  </div>\n\n  <div\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage\n    \"\n    class=\"bg-warning text-black mb-0 p-3 text-center\"\n  >\n    {{\n      (isAdmin$ | async)\n        ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n        : ('formManagement.noFormDefinitionFoundUser' | translate)\n    }}\n  </div>\n\n  <div *ngIf=\"obs.errorMessage\" class=\"bg-danger text-black mb-0 p-3 text-center\">\n    {{ obs.errorMessage }}\n  </div>\n\n  <div class=\"m-2\">\n    <ng-template #formViewModelComponent></ng-template>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i9.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i7.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete", "formFlowChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailContentComponent, deps: [{ token: i1$1.ConfigService }, { token: i2.DocumentService }, { token: i12.IconService }, { token: i4.NGXLogger }, { token: i9.ValtimoModalService }, { token: i3$1.PermissionService }, { token: i7.ProcessLinkService }, { token: i1$2.Router }, { token: i9.FormIoStateService }, { token: TaskIntermediateSaveService }, { token: TaskService }, { token: i10.ToastrService }, { token: i3.TranslateService }, { token: FORM_VIEW_MODEL_TOKEN, optional: true }, { token: FORM_CUSTOM_COMPONENT_TOKEN, optional: true }, { token: i7.UrlResolverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskDetailContentComponent, isStandalone: true, selector: "valtimo-task-detail-content", inputs: { task: "task", taskAndProcessLink: "taskAndProcessLink", modalClosed: "modalClosed" }, outputs: { closeModalEvent: "closeModalEvent", formSubmit: "formSubmit", activeChange: "activeChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "formViewModelDynamicContainer", first: true, predicate: ["formViewModelComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "formFlow", first: true, predicate: ["formFlow"], descendants: true }, { propertyName: "formCustomComponentDynamicContainer", first: true, predicate: ["formCustomComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    taskId: taskInstanceId$ | async,\n    formDefinition: formDefinition$ | async,\n    formDefinitionId: formDefinitionId$ | async,\n    formName: formName$ | async,\n    formIoFormData: formIoFormData$ | async,\n    submission: submission$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    processLinkIsFormViewModel: processLinkIsFormViewModel$ | async,\n    processLinkIsUiComponent: processLinkIsUiComponent$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async,\n    canAssignUserToTask: canAssignUserToTask$ | async,\n  } as obs\"\n>\n  <valtimo-form-io\n    #form\n    *ngIf=\"obs.formDefinition && obs.processLinkIsForm\"\n    [form]=\"obs.formDefinition\"\n    [submission]=\"obs.submission\"\n    (submit)=\"onSubmit($event)\"\n    (change)=\"onChange($event)\"\n    [options]=\"obs.formioOptions\"\n  ></valtimo-form-io>\n\n  <valtimo-form-flow\n    #formFlow\n    *ngIf=\"obs.processLinkIsFormFlow\"\n    [formIoFormData]=\"formIoFormData$\"\n    [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n    (formFlowComplete)=\"completeTask(obs.task)\"\n    (formFlowChange)=\"onFormFlowChangeEvent()\"\n  ></valtimo-form-flow>\n\n  <div *ngIf=\"obs.loading\" class=\"text-black mb-0 p-3 text-center\">\n    {{ 'formManagement.loading' | translate }}\n  </div>\n\n  <div\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage && !obs.processLinkIsUiComponent\n    \"\n    class=\"bg-warning text-black mb-0 p-3 text-center\"\n  >\n    {{\n      (isAdmin$ | async)\n        ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n        : ('formManagement.noFormDefinitionFoundUser' | translate)\n    }}\n  </div>\n\n  <div *ngIf=\"obs.errorMessage\" class=\"bg-danger text-black mb-0 p-3 text-center\">\n    {{ obs.errorMessage }}\n  </div>\n\n  <div class=\"m-2\">\n    <ng-template #formViewModelComponent></ng-template>\n    <ng-template #formCustomComponent></ng-template>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormIoModule }, { kind: "component", type: i9.FormioComponent, selector: "valtimo-form-io", inputs: ["options", "submission", "form", "readOnly", "formRefresh$"], outputs: ["submit", "change", "event"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ProcessLinkModule }, { kind: "component", type: i7.FormFlowComponent, selector: "valtimo-form-flow", inputs: ["formIoFormData", "formFlowInstanceId"], outputs: ["formFlowComplete", "formFlowChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-task-detail-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormIoModule, TranslateModule, ProcessLinkModule], template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    taskId: taskInstanceId$ | async,\n    formDefinition: formDefinition$ | async,\n    formDefinitionId: formDefinitionId$ | async,\n    formName: formName$ | async,\n    formIoFormData: formIoFormData$ | async,\n    submission: submission$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    processLinkIsFormViewModel: processLinkIsFormViewModel$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async,\n    canAssignUserToTask: canAssignUserToTask$ | async,\n  } as obs\"\n>\n  <valtimo-form-io\n    #form\n    *ngIf=\"obs.formDefinition && obs.processLinkIsForm\"\n    [form]=\"obs.formDefinition\"\n    [submission]=\"obs.submission\"\n    (submit)=\"onSubmit($event)\"\n    (change)=\"onChange($event)\"\n    [options]=\"obs.formioOptions\"\n  ></valtimo-form-io>\n\n  <valtimo-form-flow\n    #formFlow\n    *ngIf=\"obs.processLinkIsFormFlow\"\n    [formIoFormData]=\"formIoFormData$\"\n    [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n    (formFlowComplete)=\"completeTask(obs.task)\"\n    (formFlowChange)=\"onFormFlowChangeEvent()\"\n  ></valtimo-form-flow>\n\n  <div *ngIf=\"obs.loading\" class=\"text-black mb-0 p-3 text-center\">\n    {{ 'formManagement.loading' | translate }}\n  </div>\n\n  <div\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage\n    \"\n    class=\"bg-warning text-black mb-0 p-3 text-center\"\n  >\n    {{\n      (isAdmin$ | async)\n        ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n        : ('formManagement.noFormDefinitionFoundUser' | translate)\n    }}\n  </div>\n\n  <div *ngIf=\"obs.errorMessage\" class=\"bg-danger text-black mb-0 p-3 text-center\">\n    {{ obs.errorMessage }}\n  </div>\n\n  <div class=\"m-2\">\n    <ng-template #formViewModelComponent></ng-template>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'valtimo-task-detail-content', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormIoModule, TranslateModule, ProcessLinkModule], template: "<!--\n  ~ Copyright 2015-2024 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\n  *ngIf=\"{\n    loading: loading$ | async,\n    page: page$ | async,\n    task: task$ | async,\n    taskId: taskInstanceId$ | async,\n    formDefinition: formDefinition$ | async,\n    formDefinitionId: formDefinitionId$ | async,\n    formName: formName$ | async,\n    formIoFormData: formIoFormData$ | async,\n    submission: submission$ | async,\n    processLinkIsForm: processLinkIsForm$ | async,\n    processLinkIsFormViewModel: processLinkIsFormViewModel$ | async,\n    processLinkIsUiComponent: processLinkIsUiComponent$ | async,\n    formioOptions: formioOptions$ | async,\n    processLinkIsFormFlow: processLinkIsFormFlow$ | async,\n    formFlowInstanceId: formFlowInstanceId$ | async,\n    errorMessage: errorMessage$ | async,\n    canAssignUserToTask: canAssignUserToTask$ | async,\n  } as obs\"\n>\n  <valtimo-form-io\n    #form\n    *ngIf=\"obs.formDefinition && obs.processLinkIsForm\"\n    [form]=\"obs.formDefinition\"\n    [submission]=\"obs.submission\"\n    (submit)=\"onSubmit($event)\"\n    (change)=\"onChange($event)\"\n    [options]=\"obs.formioOptions\"\n  ></valtimo-form-io>\n\n  <valtimo-form-flow\n    #formFlow\n    *ngIf=\"obs.processLinkIsFormFlow\"\n    [formIoFormData]=\"formIoFormData$\"\n    [formFlowInstanceId]=\"obs.formFlowInstanceId\"\n    (formFlowComplete)=\"completeTask(obs.task)\"\n    (formFlowChange)=\"onFormFlowChangeEvent()\"\n  ></valtimo-form-flow>\n\n  <div *ngIf=\"obs.loading\" class=\"text-black mb-0 p-3 text-center\">\n    {{ 'formManagement.loading' | translate }}\n  </div>\n\n  <div\n    *ngIf=\"\n      obs.loading === false && !obs.formDefinition && !obs.formFlowInstanceId && !obs.errorMessage && !obs.processLinkIsUiComponent\n    \"\n    class=\"bg-warning text-black mb-0 p-3 text-center\"\n  >\n    {{\n      (isAdmin$ | async)\n        ? ('formManagement.noFormDefinitionFoundAdmin' | translate)\n        : ('formManagement.noFormDefinitionFoundUser' | translate)\n    }}\n  </div>\n\n  <div *ngIf=\"obs.errorMessage\" class=\"bg-danger text-black mb-0 p-3 text-center\">\n    {{ obs.errorMessage }}\n  </div>\n\n  <div class=\"m-2\">\n    <ng-template #formViewModelComponent></ng-template>\n    <ng-template #formCustomComponent></ng-template>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ConfigService }, { type: i2.DocumentService }, { type: i12.IconService }, { type: i4.NGXLogger }, { type: i9.ValtimoModalService }, { type: i3$1.PermissionService }, { type: i7.ProcessLinkService }, { type: i1$2.Router }, { type: i9.FormIoStateService }, { type: TaskIntermediateSaveService }, { type: TaskService }, { type: i10.ToastrService }, { type: i3.TranslateService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [FORM_VIEW_MODEL_TOKEN]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [FORM_CUSTOM_COMPONENT_TOKEN]
                 }] }, { type: i7.UrlResolverService }], propDecorators: { form: [{
                 type: ViewChild,
                 args: ['form']
@@ -1197,8 +1264,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], formFlow: [{
                 type: ViewChild,
                 args: ['formFlow']
+            }], formCustomComponentDynamicContainer: [{
+                type: ViewChild,
+                args: ['formCustomComponent', { static: false, read: ViewContainerRef }]
             }], task: [{
                 type: Input
+            }], taskAndProcessLink: [{
+                type: Input
+            }], modalClosed: [{
+                type: Input
             }], closeModalEvent: [{
                 type: Output
             }], formSubmit: [{
@@ -1230,8 +1304,7 @@ class TaskDetailIntermediateSaveComponent {
             .getTaskProcessLink(value.id)
             .pipe(take$1(1))
             .subscribe(res => {
-            if (res !== null && res.type === 'form-flow')
-                this.formFlowInstanceId$.next(res.properties.formFlowInstanceId);
+            this.setFormFlow(res);
         });
         this.taskValue.set(value);
         this.page.set({
@@ -1240,6 +1313,17 @@ class TaskDetailIntermediateSaveComponent {
         });
         this.getCurrentProgress(value);
     }
+    set taskAndProcessLink(value) {
+        if (!value)
+            return;
+        this.setFormFlow(value.processLinkActivityResult);
+        this.taskValue.set(value.task);
+        this.page.set({
+            title: value?.task.name,
+            subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${value?.task.created}`,
+        });
+        this.getCurrentProgress(value.task);
+    }
     constructor(configService, iconService, translateService, taskIntermediateSaveService, taskService, toastr) {
         this.configService = configService;
         this.iconService = iconService;
@@ -1298,6 +1382,11 @@ class TaskDetailIntermediateSaveComponent {
             this.currentIntermediateSaveEvent.emit(this.currentIntermediateSave);
         });
     }
+    setFormFlow(processLink) {
+        if (processLink !== null && processLink.type === 'form-flow') {
+            this.formFlowInstanceId$.next(processLink.properties.formFlowInstanceId);
+        }
+    }
     formatIntermediateSubmission(intermediateSubmission) {
         intermediateSubmission.createdOn = moment(intermediateSubmission.createdOn).format('DD MMM YYYY HH:mm');
         if (intermediateSubmission.editedOn) {
@@ -1310,11 +1399,18 @@ class TaskDetailIntermediateSaveComponent {
             .getIntermediateSubmission(task.id ?? '')
             .pipe(take$1(1))
             .subscribe(intermediateSave => {
-            this.currentIntermediateSave = this.formatIntermediateSubmission(intermediateSave);
+            if (intermediateSave !== null) {
+                this.currentIntermediateSave = this.formatIntermediateSubmission(intermediateSave);
+            }
+            else {
+                this.currentIntermediateSave = null;
+                this.taskIntermediateSaveService.setSubmission({});
+            }
+            this.currentIntermediateSaveEvent.emit(this.currentIntermediateSave);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailIntermediateSaveComponent, deps: [{ token: i1$1.ConfigService }, { token: i12.IconService }, { token: i3.TranslateService }, { token: TaskIntermediateSaveService }, { token: TaskService }, { token: i10.ToastrService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TaskDetailIntermediateSaveComponent, isStandalone: true, selector: "valtimo-task-detail-intermediate-save", inputs: { task: "task" }, outputs: { currentIntermediateSaveEvent: "currentIntermediateSaveEvent", showModalEvent: "showModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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@if (intermediateSaveEnabled && (formFlowInstanceId$ | async) === undefined) {\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    cdsIcon=\"save\"\n    [vTooltip]=\"'formManagement.intermediateSave.save' | translate\"\n    (click)=\"saveCurrentProgress()\"\n  ></button>\n\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    cdsIcon=\"recently-viewed\"\n    [disabled]=\"!currentIntermediateSave\"\n    [vTooltip]=\"'formManagement.intermediateSave.clear' | translate\"\n    (click)=\"revertSaveClick()\"\n  ></button>\n}\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i9.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i12.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i9.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TaskDetailIntermediateSaveComponent, isStandalone: true, selector: "valtimo-task-detail-intermediate-save", inputs: { task: "task", taskAndProcessLink: "taskAndProcessLink" }, outputs: { currentIntermediateSaveEvent: "currentIntermediateSaveEvent", showModalEvent: "showModalEvent" }, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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@if (intermediateSaveEnabled && (formFlowInstanceId$ | async) === undefined) {\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    cdsIcon=\"save\"\n    [vTooltip]=\"'formManagement.intermediateSave.save' | translate\"\n    (click)=\"saveCurrentProgress()\"\n  ></button>\n\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    cdsIcon=\"recently-viewed\"\n    [disabled]=\"!currentIntermediateSave\"\n    [vTooltip]=\"'formManagement.intermediateSave.clear' | translate\"\n    (click)=\"revertSaveClick()\"\n  ></button>\n}\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "ngmodule", type: ConfirmationModalModule }, { kind: "component", type: i9.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "ngmodule", type: IconModule }, { kind: "directive", type: i12.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i9.TooltipDirective, selector: "[vTooltip]", inputs: ["vTooltip", "onBottom", "tooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailIntermediateSaveComponent, decorators: [{
             type: Component,
@@ -1329,6 +1425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     ], template: "<!--\n  ~ Copyright 2015-2024 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@if (intermediateSaveEnabled && (formFlowInstanceId$ | async) === undefined) {\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    cdsIcon=\"save\"\n    [vTooltip]=\"'formManagement.intermediateSave.save' | translate\"\n    (click)=\"saveCurrentProgress()\"\n  ></button>\n\n  <button\n    cdsButton=\"ghost\"\n    iconOnly=\"true\"\n    cdsIcon=\"recently-viewed\"\n    [disabled]=\"!currentIntermediateSave\"\n    [vTooltip]=\"'formManagement.intermediateSave.clear' | translate\"\n    (click)=\"revertSaveClick()\"\n  ></button>\n}\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ConfigService }, { type: i12.IconService }, { type: i3.TranslateService }, { type: TaskIntermediateSaveService }, { type: TaskService }, { type: i10.ToastrService }], propDecorators: { task: [{
                 type: Input
+            }], taskAndProcessLink: [{
+                type: Input
             }], currentIntermediateSaveEvent: [{
                 type: Output
             }], showModalEvent: [{
@@ -1365,12 +1463,16 @@ class TaskDetailModalComponent {
         this.formSubmit = new EventEmitter();
         this.assignmentOfTaskChanged = new EventEmitter();
         this.currentIntermediateSave$ = new BehaviorSubject(null);
+        this.processLinkPreloaded$ = new BehaviorSubject(false);
         this.task$ = new BehaviorSubject(null);
+        this.taskAndProcessLink$ = new BehaviorSubject(null);
+        this.task = new BehaviorSubject(null);
         this.submission$ = new BehaviorSubject({});
         this.page$ = new BehaviorSubject(null);
         this.showConfirmationModal$ = new BehaviorSubject(false);
         this.size$ = new BehaviorSubject('md');
         this.canAssignUserToTask$ = new BehaviorSubject(false);
+        this.modalCloseEvent$ = new BehaviorSubject(false);
         this._subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -1403,6 +1505,16 @@ class TaskDetailModalComponent {
         });
         this.openModal();
     }
+    openTaskAndProcessLinkDetails(taskWithProcessLink) {
+        this.processLinkPreloaded$.next(true);
+        this.taskAndProcessLink$.next(taskWithProcessLink);
+        this.task$.next({ ...taskWithProcessLink.task });
+        this.page$.next({
+            title: taskWithProcessLink.task?.name,
+            subtitle: `${this.translateService.instant('taskDetail.taskCreated')} ${taskWithProcessLink.task?.created}`,
+        });
+        this.openModal();
+    }
     gotoProcessLinkScreen() {
         this.closeModal();
         this.router.navigate(['process-links']);
@@ -1419,16 +1531,17 @@ class TaskDetailModalComponent {
     closeModal() {
         this._modal.open = false;
         this.taskIntermediateSaveService.setSubmission({});
+        this.modalCloseEvent$.next(!this.modalCloseEvent$.getValue());
     }
     openModal() {
         this._modal.open = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailModalComponent, deps: [{ token: i1$2.Router }, { token: i3.TranslateService }, { token: i3$1.PermissionService }, { token: i4.NGXLogger }, { token: TaskIntermediateSaveService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", inputs: { modalSize: "modalSize" }, outputs: { formSubmit: "formSubmit", assignmentOfTaskChanged: "assignmentOfTaskChanged" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["taskDetailModal"], descendants: true }, { propertyName: "_intermediateSaveComponent", first: true, predicate: TaskDetailIntermediateSaveComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal #taskDetailModal id=\"taskDetailModal\" [size]=\"size$ | async\">\n  <cds-modal-header (closeSelect)=\"closeModal()\">\n    <div class=\"title-container\">\n      <p class=\"cds--modal-header__heading cds--type-beta\">{{ (page$ | async)?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ (page$ | async)?.subtitle }}</p>\n\n      <p\n        class=\"cds--modal-header__label cds--type-delta\"\n        *ngIf=\"currentIntermediateSave$ | async as currentIntermediateSave\"\n      >\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedBy\n            ? currentIntermediateSave?.editedBy\n            : currentIntermediateSave.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedOn\n            ? currentIntermediateSave?.editedOn\n            : currentIntermediateSave.createdOn\n        }}\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"assignUserToTask\"></ng-container>\n    </div>\n\n    <valtimo-task-detail-intermediate-save\n      class=\"save-buttons-margin\"\n      [task]=\"task$ | async\"\n      (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n      (showModalEvent)=\"onShowModalEvent()\"\n    ></valtimo-task-detail-intermediate-save>\n  </cds-modal-header>\n\n  <div body class=\"cds--modal-content pb-1\">\n    <valtimo-task-detail-content\n      [task]=\"task$ | async\"\n      (formSubmit)=\"onFormSubmit()\"\n      (closeModalEvent)=\"closeModal()\"\n    ></valtimo-task-detail-content>\n  </div>\n</cds-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container\n    *ngIf=\"{\n      task: task$ | async,\n      canAssignUserToTask: canAssignUserToTask$ | async,\n    } as obs\"\n  >\n    <valtimo-assign-user-to-task\n      *ngIf=\"obs.task && obs.canAssignUserToTask && assignmentOfTaskChanged\"\n      [taskId]=\"obs.task.id\"\n      [assigneeId]=\"obs.task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["#taskDetailModal .formio-component-submit{text-align:right}cds-modal-header .cds--modal-header{display:flex;justify-content:space-between}.save-buttons-margin{margin-top:-15px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i12.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeId"], outputs: ["assignmentOfTaskChanged"] }, { kind: "component", type: TaskDetailContentComponent, selector: "valtimo-task-detail-content", inputs: ["task"], outputs: ["closeModalEvent", "formSubmit", "activeChange"] }, { kind: "component", type: TaskDetailIntermediateSaveComponent, selector: "valtimo-task-detail-intermediate-save", inputs: ["task"], outputs: ["currentIntermediateSaveEvent", "showModalEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: TaskDetailModalComponent, selector: "valtimo-task-detail-modal", inputs: { modalSize: "modalSize" }, outputs: { formSubmit: "formSubmit", assignmentOfTaskChanged: "assignmentOfTaskChanged" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["taskDetailModal"], descendants: true }, { propertyName: "_intermediateSaveComponent", first: true, predicate: TaskDetailIntermediateSaveComponent, descendants: true }], ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal #taskDetailModal id=\"taskDetailModal\" [size]=\"size$ | async\">\n  <cds-modal-header (closeSelect)=\"closeModal()\">\n    <div class=\"title-container\">\n      <p class=\"cds--modal-header__heading cds--type-beta\">{{ (page$ | async)?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ (page$ | async)?.subtitle }}</p>\n\n      <p\n        class=\"cds--modal-header__label cds--type-delta\"\n        *ngIf=\"currentIntermediateSave$ | async as currentIntermediateSave\"\n      >\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedBy\n            ? currentIntermediateSave?.editedBy\n            : currentIntermediateSave.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedOn\n            ? currentIntermediateSave?.editedOn\n            : currentIntermediateSave.createdOn\n        }}\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"assignUserToTask\"></ng-container>\n    </div>\n\n    @if (processLinkPreloaded$ | async) {\n      <valtimo-task-detail-intermediate-save\n        class=\"save-buttons-margin\"\n        [taskAndProcessLink]=\"taskAndProcessLink$ | async\"\n        (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n        (showModalEvent)=\"onShowModalEvent()\"\n      ></valtimo-task-detail-intermediate-save>\n    } @else {\n      <valtimo-task-detail-intermediate-save\n        class=\"save-buttons-margin\"\n        [task]=\"task$ | async\"\n        (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n        (showModalEvent)=\"onShowModalEvent()\"\n      ></valtimo-task-detail-intermediate-save>\n    }\n  </cds-modal-header>\n\n  <div body class=\"cds--modal-content pb-1\">\n    @if (processLinkPreloaded$ | async) {\n      <valtimo-task-detail-content\n        [taskAndProcessLink]=\"taskAndProcessLink$ | async\"\n        [modalClosed]=\"modalCloseEvent$ | async\"\n        (formSubmit)=\"onFormSubmit()\"\n        (closeModalEvent)=\"closeModal()\"\n      ></valtimo-task-detail-content>\n    } @else {\n      <valtimo-task-detail-content\n        [task]=\"task$ | async\"\n        [modalClosed]=\"modalCloseEvent$ | async\"\n        (formSubmit)=\"onFormSubmit()\"\n        (closeModalEvent)=\"closeModal()\"\n      ></valtimo-task-detail-content>\n    }\n  </div>\n</cds-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container\n    *ngIf=\"{\n      task: task$ | async,\n      canAssignUserToTask: canAssignUserToTask$ | async,\n    } as obs\"\n  >\n    <valtimo-assign-user-to-task\n      *ngIf=\"obs.task && obs.canAssignUserToTask && assignmentOfTaskChanged\"\n      [taskId]=\"obs.task.id\"\n      [assigneeId]=\"obs.task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["#taskDetailModal .formio-component-submit{text-align:right}cds-modal-header .cds--modal-header{display:flex;justify-content:space-between}.save-buttons-margin{margin-top:-15px}\n/*!\n * Copyright 2015-2024 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"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.Modal, selector: "cds-modal, ibm-modal", inputs: ["size", "theme", "ariaLabel", "open", "trigger", "hasScrollingContent"], outputs: ["overlaySelected", "close"] }, { kind: "component", type: i12.ModalHeader, selector: "cds-modal-header, ibm-modal-header", inputs: ["theme", "closeLabel", "showCloseButton"], outputs: ["closeSelect"] }, { kind: "component", type: i9.ConfirmationModalComponent, selector: "valtimo-confirmation-modal", inputs: ["titleTranslationKey", "title", "content", "contentTranslationKey", "confirmButtonText", "confirmButtonTextTranslationKey", "confirmButtonType", "showOptionalButton", "optionalButtonText", "optionalButtonTextTranslationKey", "optionalButtonType", "cancelButtonText", "cancelButtonTextTranslationKey", "cancelButtonType", "showModalSubject$", "outputOnConfirm", "outputOnOptional", "spacerAfterCancelButton"], outputs: ["confirmEvent", "optionalEvent", "cancelEvent"] }, { kind: "component", type: AssignUserToTaskComponent, selector: "valtimo-assign-user-to-task", inputs: ["taskId", "assigneeId"], outputs: ["assignmentOfTaskChanged"] }, { kind: "component", type: TaskDetailContentComponent, selector: "valtimo-task-detail-content", inputs: ["task", "taskAndProcessLink", "modalClosed"], outputs: ["closeModalEvent", "formSubmit", "activeChange"] }, { kind: "component", type: TaskDetailIntermediateSaveComponent, selector: "valtimo-task-detail-intermediate-save", inputs: ["task", "taskAndProcessLink"], outputs: ["currentIntermediateSaveEvent", "showModalEvent"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TaskDetailModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'valtimo-task-detail-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal #taskDetailModal id=\"taskDetailModal\" [size]=\"size$ | async\">\n  <cds-modal-header (closeSelect)=\"closeModal()\">\n    <div class=\"title-container\">\n      <p class=\"cds--modal-header__heading cds--type-beta\">{{ (page$ | async)?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ (page$ | async)?.subtitle }}</p>\n\n      <p\n        class=\"cds--modal-header__label cds--type-delta\"\n        *ngIf=\"currentIntermediateSave$ | async as currentIntermediateSave\"\n      >\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedBy\n            ? currentIntermediateSave?.editedBy\n            : currentIntermediateSave.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedOn\n            ? currentIntermediateSave?.editedOn\n            : currentIntermediateSave.createdOn\n        }}\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"assignUserToTask\"></ng-container>\n    </div>\n\n    <valtimo-task-detail-intermediate-save\n      class=\"save-buttons-margin\"\n      [task]=\"task$ | async\"\n      (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n      (showModalEvent)=\"onShowModalEvent()\"\n    ></valtimo-task-detail-intermediate-save>\n  </cds-modal-header>\n\n  <div body class=\"cds--modal-content pb-1\">\n    <valtimo-task-detail-content\n      [task]=\"task$ | async\"\n      (formSubmit)=\"onFormSubmit()\"\n      (closeModalEvent)=\"closeModal()\"\n    ></valtimo-task-detail-content>\n  </div>\n</cds-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container\n    *ngIf=\"{\n      task: task$ | async,\n      canAssignUserToTask: canAssignUserToTask$ | async,\n    } as obs\"\n  >\n    <valtimo-assign-user-to-task\n      *ngIf=\"obs.task && obs.canAssignUserToTask && assignmentOfTaskChanged\"\n      [taskId]=\"obs.task.id\"\n      [assigneeId]=\"obs.task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["#taskDetailModal .formio-component-submit{text-align:right}cds-modal-header .cds--modal-header{display:flex;justify-content:space-between}.save-buttons-margin{margin-top:-15px}\n/*!\n * Copyright 2015-2024 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"] }]
+            args: [{ selector: 'valtimo-task-detail-modal', encapsulation: ViewEncapsulation.None, template: "<!--\n  ~ Copyright 2015-2024 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<cds-modal #taskDetailModal id=\"taskDetailModal\" [size]=\"size$ | async\">\n  <cds-modal-header (closeSelect)=\"closeModal()\">\n    <div class=\"title-container\">\n      <p class=\"cds--modal-header__heading cds--type-beta\">{{ (page$ | async)?.title }}</p>\n\n      <p class=\"cds--modal-header__label cds--type-delta\">{{ (page$ | async)?.subtitle }}</p>\n\n      <p\n        class=\"cds--modal-header__label cds--type-delta\"\n        *ngIf=\"currentIntermediateSave$ | async as currentIntermediateSave\"\n      >\n        {{ 'formManagement.intermediateSave.lastSavedBy' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedBy\n            ? currentIntermediateSave?.editedBy\n            : currentIntermediateSave.createdBy\n        }}\n\n        {{ 'formManagement.intermediateSave.on' | translate }}:\n\n        {{\n          currentIntermediateSave?.editedOn\n            ? currentIntermediateSave?.editedOn\n            : currentIntermediateSave.createdOn\n        }}\n      </p>\n\n      <ng-container *ngTemplateOutlet=\"assignUserToTask\"></ng-container>\n    </div>\n\n    @if (processLinkPreloaded$ | async) {\n      <valtimo-task-detail-intermediate-save\n        class=\"save-buttons-margin\"\n        [taskAndProcessLink]=\"taskAndProcessLink$ | async\"\n        (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n        (showModalEvent)=\"onShowModalEvent()\"\n      ></valtimo-task-detail-intermediate-save>\n    } @else {\n      <valtimo-task-detail-intermediate-save\n        class=\"save-buttons-margin\"\n        [task]=\"task$ | async\"\n        (currentIntermediateSaveEvent)=\"onCurrentIntermediateSaveEvent($event)\"\n        (showModalEvent)=\"onShowModalEvent()\"\n      ></valtimo-task-detail-intermediate-save>\n    }\n  </cds-modal-header>\n\n  <div body class=\"cds--modal-content pb-1\">\n    @if (processLinkPreloaded$ | async) {\n      <valtimo-task-detail-content\n        [taskAndProcessLink]=\"taskAndProcessLink$ | async\"\n        [modalClosed]=\"modalCloseEvent$ | async\"\n        (formSubmit)=\"onFormSubmit()\"\n        (closeModalEvent)=\"closeModal()\"\n      ></valtimo-task-detail-content>\n    } @else {\n      <valtimo-task-detail-content\n        [task]=\"task$ | async\"\n        [modalClosed]=\"modalCloseEvent$ | async\"\n        (formSubmit)=\"onFormSubmit()\"\n        (closeModalEvent)=\"closeModal()\"\n      ></valtimo-task-detail-content>\n    }\n  </div>\n</cds-modal>\n\n<valtimo-confirmation-modal\n  [showModalSubject$]=\"showConfirmationModal$\"\n  (confirmEvent)=\"clearCurrentProgress()\"\n  (cancelEvent)=\"showConfirmationModal$.next(false)\"\n  cancelButtonType=\"ghost\"\n  confirmButtonTextTranslationKey=\"interface.confirm\"\n  titleTranslationKey=\"formManagement.intermediateSave.clear\"\n  contentTranslationKey=\"formManagement.intermediateSave.clearConfirm\"\n></valtimo-confirmation-modal>\n\n<ng-template #assignUserToTask>\n  <ng-container\n    *ngIf=\"{\n      task: task$ | async,\n      canAssignUserToTask: canAssignUserToTask$ | async,\n    } as obs\"\n  >\n    <valtimo-assign-user-to-task\n      *ngIf=\"obs.task && obs.canAssignUserToTask && assignmentOfTaskChanged\"\n      [taskId]=\"obs.task.id\"\n      [assigneeId]=\"obs.task.assignee\"\n      (assignmentOfTaskChanged)=\"assignmentOfTaskChanged.emit()\"\n    ></valtimo-assign-user-to-task>\n  </ng-container>\n</ng-template>\n", styles: ["#taskDetailModal .formio-component-submit{text-align:right}cds-modal-header .cds--modal-header{display:flex;justify-content:space-between}.save-buttons-margin{margin-top:-15px}\n/*!\n * Copyright 2015-2024 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"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: i3.TranslateService }, { type: i3$1.PermissionService }, { type: i4.NGXLogger }, { type: TaskIntermediateSaveService }], propDecorators: { _modal: [{
                 type: ViewChild,
                 args: ['taskDetailModal']
@@ -2106,7 +2219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TaskDetailContentComponent,
                         TaskDetailIntermediateSaveComponent,
                     ],
-                    exports: [TaskListComponent, TaskDetailModalComponent]
+                    exports: [TaskListComponent, TaskDetailModalComponent],
                 }]
         }] });