@hmcts/ccd-case-ui-toolkit 7.0.61-exui-2086-rc1 → 7.0.61-task-changed-on-completion

package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ViewChildren, ContentChildren, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, Injector, ViewChild, HostListener, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ViewChildren, ContentChildren, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, HostListener, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, DOCUMENT, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -24,7 +24,6 @@ import { StateMachine } from '@edium/fsm';
 import * as i1$3 from '@angular/material/legacy-dialog';
 import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule } from '@angular/material/legacy-dialog';
 import { MatDialogConfig } from '@angular/material/dialog';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i2 from '@nicky-lenaers/ngx-scroll-to';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 import * as marked from 'marked';
@@ -52,6 +51,7 @@ import * as i15 from '@angular/material/legacy-input';
 import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i14 from '@hmcts/media-viewer';
 import { MediaViewerModule } from '@hmcts/media-viewer';
+import { PortalModule } from '@angular/cdk/portal';
 import * as i2$3 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 import * as i10 from '@angular/material/legacy-tabs';
@@ -8676,11 +8676,11 @@ var TaskState;
     TaskState["PendingReConfiguration"] = "PENDING_RECONFIGURATION";
 })(TaskState || (TaskState = {}));
 
-var EventCompletionPortalTypes;
-(function (EventCompletionPortalTypes) {
-    EventCompletionPortalTypes[EventCompletionPortalTypes["TaskCancelled"] = 0] = "TaskCancelled";
-    EventCompletionPortalTypes[EventCompletionPortalTypes["TaskReassigned"] = 1] = "TaskReassigned";
-})(EventCompletionPortalTypes || (EventCompletionPortalTypes = {}));
+var EventCompletionTaskStates;
+(function (EventCompletionTaskStates) {
+    EventCompletionTaskStates[EventCompletionTaskStates["TaskCancelled"] = 0] = "TaskCancelled";
+    EventCompletionTaskStates[EventCompletionTaskStates["TaskReassigned"] = 1] = "TaskReassigned";
+})(EventCompletionTaskStates || (EventCompletionTaskStates = {}));
 
 const EVENT_COMPLETION_STATE_MACHINE = 'EVENT COMPLETION STATE MACHINE';
 class EventCompletionStateMachineService {
@@ -8719,6 +8719,7 @@ class EventCompletionStateMachineService {
         this.addTransitionsForStateTaskUnassigned();
     }
     entryActionForStateCheckTasksCanBeCompleted(state, context) {
+        const assignNeeded = context.sessionStorageService.getItem('assignNeeded');
         context.workAllocationService.getTask(context.task.id).subscribe(taskResponse => {
             if (taskResponse && taskResponse.task && taskResponse.task.task_state) {
                 switch (taskResponse.task.task_state.toUpperCase()) {
@@ -8738,6 +8739,11 @@ class EventCompletionStateMachineService {
                             // Task still assigned to current user, complete event and task
                             state.trigger(EventCompletionStates.CompleteEventAndTask);
                         }
+                        else if (assignNeeded === 'true - override') {
+                            // this will treat task as unassigned instead of reassigned to complete after user confirmation
+                            // assignNeeded will also be immediately overwritten to true
+                            state.trigger(EventCompletionStates.TaskUnassigned);
+                        }
                         else {
                             // Task has been reassigned to another user, display error message
                             context.reassignedTask = taskResponse.task;
@@ -8759,7 +8765,7 @@ class EventCompletionStateMachineService {
         // Trigger final state to complete processing of state machine
         state.trigger(EventCompletionStates.Final);
         // Load case event completion task cancelled component
-        context.component.showPortal(EventCompletionPortalTypes.TaskCancelled);
+        context.component.setTaskState(EventCompletionTaskStates.TaskCancelled);
     }
     entryActionForStateCompleteEventAndTask(state, context) {
         // Trigger final state to complete processing of state machine
@@ -8779,7 +8785,7 @@ class EventCompletionStateMachineService {
         // Trigger final state to complete processing of state machine
         state.trigger(EventCompletionStates.Final);
         // Load case event completion task reassigned component
-        context.component.showPortal(EventCompletionPortalTypes.TaskReassigned);
+        context.component.setTaskState(EventCompletionTaskStates.TaskReassigned);
     }
     entryActionForStateTaskUnassigned(state, context) {
         // Trigger final state to complete processing of state machine
@@ -10958,20 +10964,118 @@ class CallbackErrorsComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CallbackErrorsComponent, { className: "CallbackErrorsComponent", filePath: "lib/shared/components/error/callback-errors.component.ts", lineNumber: 10 }); })();
 
+function CaseEventCompletionComponent_app_case_event_completion_task_cancelled_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-case-event-completion-task-cancelled", 2);
+    i0.ɵɵlistener("notifyEventCompletionCancelled", function CaseEventCompletionComponent_app_case_event_completion_task_cancelled_0_Template_app_case_event_completion_task_cancelled_notifyEventCompletionCancelled_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setEventCanBeCompleted($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("context", ctx_r1.context);
+} }
+function CaseEventCompletionComponent_app_case_event_completion_task_reassigned_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "app-case-event-completion-task-reassigned", 3);
+    i0.ɵɵlistener("notifyEventCompletionReassigned", function CaseEventCompletionComponent_app_case_event_completion_task_reassigned_1_Template_app_case_event_completion_task_reassigned_notifyEventCompletionReassigned_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setEventCanBeCompleted($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("context", ctx_r1.context);
+} }
+const COMPONENT_PORTAL_INJECTION_TOKEN = new InjectionToken('');
+class CaseEventCompletionComponent {
+    service;
+    router;
+    route;
+    sessionStorageService;
+    workAllocationService;
+    alertService;
+    eventCompletionParams;
+    eventCanBeCompleted = new EventEmitter();
+    eventCompletionTaskStates = EventCompletionTaskStates;
+    stateMachine;
+    context;
+    taskState;
+    constructor(service, router, route, sessionStorageService, workAllocationService, alertService) {
+        this.service = service;
+        this.router = router;
+        this.route = route;
+        this.sessionStorageService = sessionStorageService;
+        this.workAllocationService = workAllocationService;
+        this.alertService = alertService;
+    }
+    ngOnChanges(changes) {
+        if (changes.eventCompletionParams?.currentValue) {
+            // Setup the context
+            this.context = {
+                task: this.eventCompletionParams.task,
+                caseId: this.eventCompletionParams.caseId,
+                eventId: this.eventCompletionParams.eventId,
+                reassignedTask: null,
+                router: this.router,
+                route: this.route,
+                sessionStorageService: this.sessionStorageService,
+                workAllocationService: this.workAllocationService,
+                alertService: this.alertService,
+                canBeCompleted: false,
+                component: this
+            };
+            // Initialise state machine
+            this.stateMachine = this.service.initialiseStateMachine(this.context);
+            // Create states
+            this.service.createStates(this.stateMachine);
+            // Add transitions for the states
+            this.service.addTransitions();
+            // Start state machine
+            this.service.startStateMachine(this.stateMachine);
+        }
+    }
+    setTaskState(taskState) {
+        this.taskState = taskState;
+    }
+    setEventCanBeCompleted(completable) {
+        // note: event not completed from here as will then skip task completion
+        if (!completable) {
+            // if event cannot be completed ensure that this is communicated
+            // otherwise this will be handled via onchanges
+            this.eventCanBeCompleted.emit(completable);
+        }
+    }
+    static ɵfac = function CaseEventCompletionComponent_Factory(t) { return new (t || CaseEventCompletionComponent)(i0.ɵɵdirectiveInject(EventCompletionStateMachineService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(AlertService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionComponent, selectors: [["ccd-case-event-completion"]], inputs: { eventCompletionParams: "eventCompletionParams" }, outputs: { eventCanBeCompleted: "eventCanBeCompleted" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [[3, "context", "notifyEventCompletionCancelled", 4, "ngIf"], [3, "context", "notifyEventCompletionReassigned", 4, "ngIf"], [3, "notifyEventCompletionCancelled", "context"], [3, "notifyEventCompletionReassigned", "context"]], template: function CaseEventCompletionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CaseEventCompletionComponent_app_case_event_completion_task_cancelled_0_Template, 1, 1, "app-case-event-completion-task-cancelled", 0)(1, CaseEventCompletionComponent_app_case_event_completion_task_reassigned_1_Template, 1, 1, "app-case-event-completion-task-reassigned", 1);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.taskState === ctx.eventCompletionTaskStates.TaskCancelled);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.taskState === ctx.eventCompletionTaskStates.TaskReassigned);
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionComponent, [{
+        type: Component,
+        args: [{ selector: 'ccd-case-event-completion', template: "<app-case-event-completion-task-cancelled\n    *ngIf=\"taskState === eventCompletionTaskStates.TaskCancelled\"\n    [context]=\"context\"\n    (notifyEventCompletionCancelled)=\"setEventCanBeCompleted($event)\">\n</app-case-event-completion-task-cancelled>\n<app-case-event-completion-task-reassigned\n    *ngIf=\"taskState === eventCompletionTaskStates.TaskReassigned\"\n    [context]=\"context\"\n    (notifyEventCompletionReassigned)=\"setEventCanBeCompleted($event)\">\n</app-case-event-completion-task-reassigned>" }]
+    }], () => [{ type: EventCompletionStateMachineService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: SessionStorageService }, { type: WorkAllocationService }, { type: AlertService }], { eventCompletionParams: [{
+            type: Input
+        }], eventCanBeCompleted: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionComponent, { className: "CaseEventCompletionComponent", filePath: "lib/shared/components/case-editor/case-event-completion/case-event-completion.component.ts", lineNumber: 20 }); })();
+
 const _c0$X = a0 => ["/", "cases", "case-details", a0, "tasks"];
 class CaseEventCompletionTaskCancelledComponent {
-    parentComponent;
+    context;
+    notifyEventCompletionCancelled = new EventEmitter();
     caseId;
-    constructor(parentComponent) {
-        this.parentComponent = parentComponent;
-        this.caseId = this.parentComponent.context.caseId;
+    ngOnInit() {
+        this.caseId = this.context.caseId;
     }
     onContinue() {
-        // Emit event can be completed event
-        this.parentComponent.eventCanBeCompleted.emit(true);
+        // Removes task to complete so event completes without task
+        this.context.sessionStorageService.removeItem('taskToComplete');
+        // may be able to remove this call below since it is now unneccesary
+        this.notifyEventCompletionCancelled.emit(true);
     }
-    static ɵfac = function CaseEventCompletionTaskCancelledComponent_Factory(t) { return new (t || CaseEventCompletionTaskCancelledComponent)(i0.ɵɵdirectiveInject(COMPONENT_PORTAL_INJECTION_TOKEN)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskCancelledComponent, selectors: [["app-case-event-completion-task-cancelled"]], decls: 31, vars: 27, consts: [[1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskCancelledComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function CaseEventCompletionTaskCancelledComponent_Factory(t) { return new (t || CaseEventCompletionTaskCancelledComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskCancelledComponent, selectors: [["app-case-event-completion-task-cancelled"]], inputs: { context: "context" }, outputs: { notifyEventCompletionCancelled: "notifyEventCompletionCancelled" }, decls: 31, vars: 27, consts: [[1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskCancelledComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
@@ -11029,11 +11133,12 @@ class CaseEventCompletionTaskCancelledComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionTaskCancelledComponent, [{
         type: Component,
         args: [{ selector: 'app-case-event-completion-task-cancelled', template: "<div class=\"govuk-!-margin-9\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n      {{'There is a problem' | rpxTranslate}}\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a href=\"#\">{{'Task cancelled/marked as done' | rpxTranslate}}</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"govuk-form-group govuk-form-group--error\">\n    <h2 class=\"govuk-heading-m\">{{'Task cancelled/marked as done' | rpxTranslate}}</h2>\n    <p>{{'This task has been cancelled or marked as done.' | rpxTranslate}}</p>\n    <p>{{'Click Continue to complete the event and save your progress.' | rpxTranslate}}</p>\n\n    <p>{{'Alternatively, click Cancel to return to the tasks tab without saving your progress.' | rpxTranslate}}</p>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"govuk-button govuk-!-margin-right-2\" data-module=\"govuk-button\" (click)=\"onContinue()\">\n        {{'Continue' | rpxTranslate}}\n      </button>\n      <a [routerLink]=\"['/', 'cases', 'case-details', caseId, 'tasks']\"\n              class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n        {{'Cancel' | rpxTranslate}}\n      </a>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: CaseEventCompletionComponent, decorators: [{
-                type: Inject,
-                args: [COMPONENT_PORTAL_INJECTION_TOKEN]
-            }] }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskCancelledComponent, { className: "CaseEventCompletionTaskCancelledComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-cancelled/case-event-completion-task-cancelled.component.ts", lineNumber: 8 }); })();
+    }], null, { context: [{
+            type: Input
+        }], notifyEventCompletionCancelled: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskCancelledComponent, { className: "CaseEventCompletionTaskCancelledComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-cancelled/case-event-completion-task-cancelled.component.ts", lineNumber: 9 }); })();
 
 const _c0$W = a0 => ["/", "cases", "case-details", a0, "tasks"];
 function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if (rf & 1) {
@@ -11093,32 +11198,26 @@ function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 24, "Cancel"), " ");
 } }
 class CaseEventCompletionTaskReassignedComponent {
-    parentComponent;
-    route;
-    workAllocationService;
     sessionStorageService;
     judicialworkerService;
     caseworkerService;
-    alertService;
+    context;
+    notifyEventCompletionReassigned = new EventEmitter();
     caseId;
     assignedUserId;
     assignedUserName;
     subscription;
     caseworkerSubscription;
     judicialworkerSubscription;
-    constructor(parentComponent, route, workAllocationService, sessionStorageService, judicialworkerService, caseworkerService, alertService) {
-        this.parentComponent = parentComponent;
-        this.route = route;
-        this.workAllocationService = workAllocationService;
+    constructor(sessionStorageService, judicialworkerService, caseworkerService) {
         this.sessionStorageService = sessionStorageService;
         this.judicialworkerService = judicialworkerService;
         this.caseworkerService = caseworkerService;
-        this.alertService = alertService;
     }
     ngOnInit() {
         // Get case id and task from the parent component
-        this.caseId = this.parentComponent.context.caseId;
-        const task = this.parentComponent.context.reassignedTask;
+        this.caseId = this.context.caseId;
+        const task = this.context.reassignedTask;
         // Current user is a caseworker?
         this.caseworkerSubscription = this.caseworkerService.getCaseworkers(task.jurisdiction).subscribe(result => {
             if (result && result[0].service === task.jurisdiction && result[0].caseworkers) {
@@ -11159,17 +11258,17 @@ class CaseEventCompletionTaskReassignedComponent {
         // Get task details
         const taskStr = this.sessionStorageService.getItem('taskToComplete');
         if (taskStr) {
-            this.sessionStorageService.setItem('assignNeeded', 'true');
-            // set event can be completed to true
-            this.parentComponent.eventCanBeCompleted.emit(true);
+            // Set session to override reassignment settings so code flow does not return to this component
+            this.sessionStorageService.setItem('assignNeeded', 'true - override');
+            this.notifyEventCompletionReassigned.emit(true);
         }
         else {
             // Emit event cannot be completed event
-            this.parentComponent.eventCanBeCompleted.emit(false);
+            this.notifyEventCompletionReassigned.emit(false);
         }
     }
-    static ɵfac = function CaseEventCompletionTaskReassignedComponent_Factory(t) { return new (t || CaseEventCompletionTaskReassignedComponent)(i0.ɵɵdirectiveInject(COMPONENT_PORTAL_INJECTION_TOKEN), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(JudicialworkerService), i0.ɵɵdirectiveInject(CaseworkerService), i0.ɵɵdirectiveInject(AlertService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskReassignedComponent, selectors: [["app-case-event-completion-task-reassigned"]], decls: 1, vars: 1, consts: [["class", "govuk-!-margin-9", 4, "ngIf"], [1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskReassignedComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function CaseEventCompletionTaskReassignedComponent_Factory(t) { return new (t || CaseEventCompletionTaskReassignedComponent)(i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(JudicialworkerService), i0.ɵɵdirectiveInject(CaseworkerService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionTaskReassignedComponent, selectors: [["app-case-event-completion-task-reassigned"]], inputs: { context: "context" }, outputs: { notifyEventCompletionReassigned: "notifyEventCompletionReassigned" }, decls: 1, vars: 1, consts: [["class", "govuk-!-margin-9", 4, "ngIf"], [1, "govuk-!-margin-9"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["href", "#"], [1, "govuk-form-group", "govuk-form-group--error"], [1, "govuk-heading-m"], [1, "form-group", "form-group-related"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-!-margin-right-2", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "routerLink"]], template: function CaseEventCompletionTaskReassignedComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseEventCompletionTaskReassignedComponent_div_0_Template, 31, 28, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.assignedUserName);
@@ -11178,92 +11277,12 @@ class CaseEventCompletionTaskReassignedComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionTaskReassignedComponent, [{
         type: Component,
         args: [{ selector: 'app-case-event-completion-task-reassigned', template: "<div class=\"govuk-!-margin-9\" *ngIf=\"assignedUserName\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\"\n    data-module=\"error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n      {{'There is a problem' | rpxTranslate}}\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a href=\"#\">{{'Task reassigned' | rpxTranslate}}</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"govuk-form-group govuk-form-group--error\">\n    <h2 class=\"govuk-heading-m\">{{'Task reassigned' | rpxTranslate}}</h2>\n    <p>{{'This task has been reassigned to' | rpxTranslate}} {{assignedUserName}}.</p>\n    <p>{{'Click Continue to reassign the task to you and save your progress.' | rpxTranslate}}</p>\n    <p>{{'Alternatively, click Cancel to return to the tasks tab without saving your progress.' | rpxTranslate}}</p>\n    <div class=\"form-group form-group-related\">\n      <button class=\"govuk-button govuk-!-margin-right-2\" data-module=\"govuk-button\" (click)=\"onContinue()\">\n        {{'Continue' | rpxTranslate}}\n      </button>\n      <a [routerLink]=\"['/', 'cases', 'case-details', caseId, 'tasks']\"\n              class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n        {{'Cancel' | rpxTranslate}}\n      </a>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: CaseEventCompletionComponent, decorators: [{
-                type: Inject,
-                args: [COMPONENT_PORTAL_INJECTION_TOKEN]
-            }] }, { type: i1$1.ActivatedRoute }, { type: WorkAllocationService }, { type: SessionStorageService }, { type: JudicialworkerService }, { type: CaseworkerService }, { type: AlertService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskReassignedComponent, { className: "CaseEventCompletionTaskReassignedComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-reassigned/case-event-completion-task-reassigned.component.ts", lineNumber: 16 }); })();
-
-function CaseEventCompletionComponent_ng_template_0_Template(rf, ctx) { }
-const COMPONENT_PORTAL_INJECTION_TOKEN = new InjectionToken('');
-class CaseEventCompletionComponent {
-    service;
-    router;
-    route;
-    sessionStorageService;
-    workAllocationService;
-    alertService;
-    eventCompletionParams;
-    eventCanBeCompleted = new EventEmitter();
-    stateMachine;
-    context;
-    selectedComponentPortal;
-    constructor(service, router, route, sessionStorageService, workAllocationService, alertService) {
-        this.service = service;
-        this.router = router;
-        this.route = route;
-        this.sessionStorageService = sessionStorageService;
-        this.workAllocationService = workAllocationService;
-        this.alertService = alertService;
-    }
-    ngOnChanges(changes) {
-        if (changes.eventCompletionParams && changes.eventCompletionParams.currentValue) {
-            // Setup the context
-            this.context = {
-                task: this.eventCompletionParams.task,
-                caseId: this.eventCompletionParams.caseId,
-                eventId: this.eventCompletionParams.eventId,
-                reassignedTask: null,
-                router: this.router,
-                route: this.route,
-                sessionStorageService: this.sessionStorageService,
-                workAllocationService: this.workAllocationService,
-                alertService: this.alertService,
-                canBeCompleted: false,
-                component: this
-            };
-            // Initialise state machine
-            this.stateMachine = this.service.initialiseStateMachine(this.context);
-            // Create states
-            this.service.createStates(this.stateMachine);
-            // Add transitions for the states
-            this.service.addTransitions();
-            // Start state machine
-            this.service.startStateMachine(this.stateMachine);
-        }
-    }
-    showPortal(portalType) {
-        const injector = Injector.create({
-            providers: [
-                { provide: COMPONENT_PORTAL_INJECTION_TOKEN, useValue: this }
-            ]
-        });
-        // tslint:disable-next-line:switch-default
-        switch (portalType) {
-            case EventCompletionPortalTypes.TaskCancelled:
-                this.selectedComponentPortal = new ComponentPortal(CaseEventCompletionTaskCancelledComponent, null, injector);
-                break;
-            case EventCompletionPortalTypes.TaskReassigned:
-                this.selectedComponentPortal = new ComponentPortal(CaseEventCompletionTaskReassignedComponent, null, injector);
-                break;
-        }
-    }
-    static ɵfac = function CaseEventCompletionComponent_Factory(t) { return new (t || CaseEventCompletionComponent)(i0.ɵɵdirectiveInject(EventCompletionStateMachineService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(AlertService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventCompletionComponent, selectors: [["ccd-case-event-completion"]], inputs: { eventCompletionParams: "eventCompletionParams" }, outputs: { eventCanBeCompleted: "eventCanBeCompleted" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "cdkPortalOutlet"]], template: function CaseEventCompletionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseEventCompletionComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
-        } if (rf & 2) {
-            i0.ɵɵproperty("cdkPortalOutlet", ctx.selectedComponentPortal);
-        } }, encapsulation: 2 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventCompletionComponent, [{
-        type: Component,
-        args: [{ selector: 'ccd-case-event-completion', template: "<ng-template [cdkPortalOutlet]=\"selectedComponentPortal\"></ng-template>\n" }]
-    }], () => [{ type: EventCompletionStateMachineService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: SessionStorageService }, { type: WorkAllocationService }, { type: AlertService }], { eventCompletionParams: [{
+    }], () => [{ type: SessionStorageService }, { type: JudicialworkerService }, { type: CaseworkerService }], { context: [{
             type: Input
-        }], eventCanBeCompleted: [{
+        }], notifyEventCompletionReassigned: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionComponent, { className: "CaseEventCompletionComponent", filePath: "lib/shared/components/case-editor/case-event-completion/case-event-completion.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskReassignedComponent, { className: "CaseEventCompletionTaskReassignedComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-reassigned/case-event-completion-task-reassigned.component.ts", lineNumber: 17 }); })();
 
 class AddressOption {
     description;
@@ -11917,7 +11936,7 @@ function CaseFileViewFieldComponent_div_2_ng_container_8_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("url", ctx_r1.currentDocument.document_binary_url)("downloadFileName", ctx_r1.currentDocument.document_filename)("showToolbar", true)("contentType", ctx_r1.currentDocument.content_type)("enableAnnotations", true)("enableRedactions", true)("height", "94.5vh")("caseId", ctx_r1.caseId)("enableICP", ctx_r1.isIcpEnabled());
+    i0.ɵɵproperty("url", ctx_r1.currentDocument.document_binary_url)("downloadFileName", ctx_r1.currentDocument.document_filename)("showToolbar", true)("contentType", ctx_r1.currentDocument.content_type)("enableAnnotations", true)("enableRedactions", true)("height", "94.5vh")("enableICP", ctx_r1.isIcpEnabled());
 } }
 function CaseFileViewFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -11929,7 +11948,7 @@ function CaseFileViewFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     i0.ɵɵelement(6, "div", 16);
     i0.ɵɵelementStart(7, "div", 17);
-    i0.ɵɵtemplate(8, CaseFileViewFieldComponent_div_2_ng_container_8_Template, 2, 9, "ng-container", 0);
+    i0.ɵɵtemplate(8, CaseFileViewFieldComponent_div_2_ng_container_8_Template, 2, 8, "ng-container", 0);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -11958,7 +11977,6 @@ class CaseFileViewFieldComponent {
     caseField;
     icp_jurisdictions = [];
     icpEnabled = false;
-    caseId;
     constructor(elementRef, route, caseFileViewService, documentManagementService, loadingService, sessionStorageService, caseNotifier, abstractConfig) {
         this.elementRef = elementRef;
         this.route = route;
@@ -11970,8 +11988,8 @@ class CaseFileViewFieldComponent {
         this.abstractConfig = abstractConfig;
     }
     ngOnInit() {
-        this.caseId = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
-        this.categoriesAndDocuments$ = this.caseFileViewService.getCategoriesAndDocuments(this.caseId);
+        const cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
+        this.categoriesAndDocuments$ = this.caseFileViewService.getCategoriesAndDocuments(cid);
         this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments$.subscribe({
             next: data => {
                 this.caseVersion = data.case_version;
@@ -12048,7 +12066,7 @@ class CaseFileViewFieldComponent {
         return this.icpEnabled && ((this.icp_jurisdictions?.length < 1) || this.icp_jurisdictions.includes(this.caseNotifier?.cachedCaseView?.case_type?.jurisdiction.id));
     }
     static ɵfac = function CaseFileViewFieldComponent_Factory(t) { return new (t || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 3, vars: 3, consts: [[4, "ngIf"], ["class", "govuk-grid-column-two-thirds", 4, "ngIf"], ["id", "case-file-view-field-errors", "data-module", "govuk-error-summary", 1, "govuk-error-summary", "govuk-!-margin-bottom-4"], ["role", "alert"], [1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["href", "javascript:void(0);"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [1, "document-tree-container__tree", 3, "clickedDocument", "moveDocument", "categoriesAndDocuments", "allowMoving"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType", "enableAnnotations", "enableRedactions", "height", "caseId", "enableICP"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 3, vars: 3, consts: [[4, "ngIf"], ["class", "govuk-grid-column-two-thirds", 4, "ngIf"], ["id", "case-file-view-field-errors", "data-module", "govuk-error-summary", 1, "govuk-error-summary", "govuk-!-margin-bottom-4"], ["role", "alert"], [1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["href", "javascript:void(0);"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [1, "document-tree-container__tree", 3, "clickedDocument", "moveDocument", "categoriesAndDocuments", "allowMoving"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType", "enableAnnotations", "enableRedactions", "height", "enableICP"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseFileViewFieldComponent_ng_container_0_Template, 8, 1, "ng-container", 0)(1, CaseFileViewFieldComponent_div_1_Template, 5, 0, "div", 1)(2, CaseFileViewFieldComponent_div_2_Template, 9, 3, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.errorMessages == null ? null : ctx.errorMessages.length);
@@ -12060,7 +12078,7 @@ class CaseFileViewFieldComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-field', template: "<ng-container *ngIf=\"errorMessages?.length\">\n  <div\n    id=\"case-file-view-field-errors\"\n    class=\"govuk-error-summary govuk-!-margin-bottom-4\" data-module=\"govuk-error-summary\">\n    <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title\">\n        There is a problem\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li *ngFor=\"let errorMessage of errorMessages\">\n            <a href=\"javascript:void(0);\">{{ errorMessage }}</a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div *ngIf=\"getCategoriesAndDocumentsError\" class=\"govuk-grid-column-two-thirds\">\n  <h1 class=\"govuk-heading-xl\">Sorry, there is a problem with the service</h1>\n  <p class=\"govuk-body\">Try again later.</p>\n</div>\n<div *ngIf=\"!getCategoriesAndDocumentsError\">\n  <h2 class=\"govuk-heading-l\">Case file</h2>\n  <div class=\"govuk-form-group\" id=\"case-file-view\">\n    <!-- Document tree -->\n    <div class=\"document-tree-container\">\n      <ccd-case-file-view-folder\n        class=\"document-tree-container__tree\"\n        [categoriesAndDocuments]=\"categoriesAndDocuments$\"\n        (clickedDocument)=\"setMediaViewerFile($event); resetErrorMessages()\"\n        (moveDocument)=\"moveDocument($event)\"\n        [allowMoving]=\"allowMoving\"\n      ></ccd-case-file-view-folder>\n    </div>\n    <!-- Slider -->\n    <div class=\"slider\"></div>\n    <!-- Media viewer -->\n    <div class=\"media-viewer-container\">\n      <ng-container *ngIf=\"currentDocument\">\n        <mv-media-viewer [url]=\"currentDocument.document_binary_url\"\n                         [downloadFileName]=\"currentDocument.document_filename\"\n                         [showToolbar]=\"true\"\n                         [contentType]=\"currentDocument.content_type\"\n                         [enableAnnotations]=\"true\"\n                         [enableRedactions]=\"true\"\n                         [height]=\"'94.5vh'\"\n                         [caseId]=\"caseId\"\n                         [enableICP]=\"isIcpEnabled()\">\n        </mv-media-viewer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: ["#case-file-view{display:flex;border:2px solid #C9C9C9;height:100vh;position:relative}#case-file-view .document-tree-container{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view .slider{width:.2%;background-color:#6b6b6b}#case-file-view .slider:hover,#case-file-view .slider:focus{cursor:col-resize}#case-file-view .media-viewer-container{background-color:#dee0e2;flex:1 1 0;overflow:hidden}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-field', template: "<ng-container *ngIf=\"errorMessages?.length\">\n  <div\n    id=\"case-file-view-field-errors\"\n    class=\"govuk-error-summary govuk-!-margin-bottom-4\" data-module=\"govuk-error-summary\">\n    <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title\">\n        There is a problem\n      </h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li *ngFor=\"let errorMessage of errorMessages\">\n            <a href=\"javascript:void(0);\">{{ errorMessage }}</a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div *ngIf=\"getCategoriesAndDocumentsError\" class=\"govuk-grid-column-two-thirds\">\n  <h1 class=\"govuk-heading-xl\">Sorry, there is a problem with the service</h1>\n  <p class=\"govuk-body\">Try again later.</p>\n</div>\n<div *ngIf=\"!getCategoriesAndDocumentsError\">\n  <h2 class=\"govuk-heading-l\">Case file</h2>\n  <div class=\"govuk-form-group\" id=\"case-file-view\">\n    <!-- Document tree -->\n    <div class=\"document-tree-container\">\n      <ccd-case-file-view-folder\n        class=\"document-tree-container__tree\"\n        [categoriesAndDocuments]=\"categoriesAndDocuments$\"\n        (clickedDocument)=\"setMediaViewerFile($event); resetErrorMessages()\"\n        (moveDocument)=\"moveDocument($event)\"\n        [allowMoving]=\"allowMoving\"\n      ></ccd-case-file-view-folder>\n    </div>\n    <!-- Slider -->\n    <div class=\"slider\"></div>\n    <!-- Media viewer -->\n    <div class=\"media-viewer-container\">\n      <ng-container *ngIf=\"currentDocument\">\n        <mv-media-viewer [url]=\"currentDocument.document_binary_url\"\n                         [downloadFileName]=\"currentDocument.document_filename\"\n                         [showToolbar]=\"true\"\n                         [contentType]=\"currentDocument.content_type\"\n                         [enableAnnotations]=\"true\"\n                         [enableRedactions]=\"true\"\n                         [height]=\"'94.5vh'\"\n                         [enableICP]=\"isIcpEnabled()\">\n        </mv-media-viewer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: ["#case-file-view{display:flex;border:2px solid #C9C9C9;height:100vh;position:relative}#case-file-view .document-tree-container{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view .slider{width:.2%;background-color:#6b6b6b}#case-file-view .slider:hover,#case-file-view .slider:focus{cursor:col-resize}#case-file-view .media-viewer-container{background-color:#dee0e2;flex:1 1 0;overflow:hidden}\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i1$1.ActivatedRoute }, { type: CaseFileViewService }, { type: DocumentManagementService }, { type: LoadingService }, { type: SessionStorageService }, { type: CaseNotifier }, { type: AbstractAppConfig }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 17 }); })();
 
@@ -28491,6 +28509,10 @@ i0.ɵɵsetComponentScope(QueryAttachmentsReadComponent, function () { return [i5
 i0.ɵɵsetComponentScope(QueryEventCompletionComponent, function () { return [
     // Case event completion
     CaseEventCompletionComponent]; }, []);
+i0.ɵɵsetComponentScope(
+// Case event completion
+CaseEventCompletionComponent, function () { return [i5.NgIf, CaseEventCompletionTaskCancelledComponent,
+    CaseEventCompletionTaskReassignedComponent]; }, []);
 
 var CaseEditSubmitTitles;
 (function (CaseEditSubmitTitles) {