@valtimo/task 12.6.0 → 12.7.0

package/fesm2022/valtimo-task.mjs

@@ -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';
@@ -948,7 +948,10 @@ class TaskDetailContentComponent {
         if (this.formFlow)
             this.formFlow.saveData();
     }
-    constructor(configService, documentService, iconService, logger, modalService, permissionService, processLinkService, router, stateService, taskIntermediateSaveService, taskService, toastr, translateService, formViewModel, urlResolverService) {
+    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;
@@ -963,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();
@@ -985,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();
@@ -999,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) {
@@ -1129,6 +1141,13 @@ class TaskDetailContentComponent {
                         });
                     });
                     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);
         }
@@ -1157,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);
@@ -1199,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", 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 }], 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']
@@ -1219,6 +1264,9 @@ 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: [{