@hmcts/ccd-case-ui-toolkit 4.9.8-state-machine → 4.9.9-state-machine

package/dist/index.umd.js

@@ -1,19 +1,19 @@
 /**
  * @hmcts/ccd-case-ui-toolkit - Case UI Toolkit
- * @version v4.9.8-state-machine
+ * @version v4.9.9-state-machine
  * @link undefined
  * @license MIT
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("rxjs"), require("@angular/common/http"), require("rxjs/operators"), require("@angular/platform-browser"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/cdk/portal"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"), require("@angular/compiler/src/util"));
+		module.exports = factory(require("@angular/cdk/portal"), require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("@angular/common/http"), require("rxjs"), require("rxjs/operators"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("@angular/platform-browser"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"), require("@angular/compiler/src/util"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@angular/core", "@angular/common", "@angular/router", "@angular/forms", "rxjs", "@angular/common/http", "rxjs/operators", "@angular/platform-browser", "rxjs/operator/publish", "rxjs/Rx", "rxjs/internal/operators", "rxjs/Subject", "rxjs/add/operator/map", "@angular/material", "@angular/cdk/coercion", "@angular/cdk/overlay", "@angular/cdk/bidi", "@angular/cdk/keycodes", "@angular/material/form-field", "@angular/cdk/portal", "@angular/material/datepicker", "@angular/material/dialog", "@angular/material/button", "@angular/material/icon", "@angular/material/input", "@angular/material/core", "@angular/cdk/platform", "rxjs/index", "rxjs/observable/throw", "rxjs/add/operator/do", "@angular/compiler/src/util"], factory);
+		define(["@angular/cdk/portal", "@angular/core", "@angular/common", "@angular/router", "@angular/forms", "@angular/common/http", "rxjs", "rxjs/operators", "rxjs/operator/publish", "rxjs/Rx", "rxjs/internal/operators", "rxjs/Subject", "rxjs/add/operator/map", "@angular/material", "@angular/cdk/coercion", "@angular/cdk/overlay", "@angular/cdk/bidi", "@angular/cdk/keycodes", "@angular/material/form-field", "@angular/material/datepicker", "@angular/material/dialog", "@angular/material/button", "@angular/material/icon", "@angular/material/input", "@angular/material/core", "@angular/cdk/platform", "rxjs/index", "@angular/platform-browser", "rxjs/observable/throw", "rxjs/add/operator/do", "@angular/compiler/src/util"], factory);
 	else if(typeof exports === 'object')
-		exports["case-ui-toolkit"] = factory(require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("rxjs"), require("@angular/common/http"), require("rxjs/operators"), require("@angular/platform-browser"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/cdk/portal"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"), require("@angular/compiler/src/util"));
+		exports["case-ui-toolkit"] = factory(require("@angular/cdk/portal"), require("@angular/core"), require("@angular/common"), require("@angular/router"), require("@angular/forms"), require("@angular/common/http"), require("rxjs"), require("rxjs/operators"), require("rxjs/operator/publish"), require("rxjs/Rx"), require("rxjs/internal/operators"), require("rxjs/Subject"), require("rxjs/add/operator/map"), require("@angular/material"), require("@angular/cdk/coercion"), require("@angular/cdk/overlay"), require("@angular/cdk/bidi"), require("@angular/cdk/keycodes"), require("@angular/material/form-field"), require("@angular/material/datepicker"), require("@angular/material/dialog"), require("@angular/material/button"), require("@angular/material/icon"), require("@angular/material/input"), require("@angular/material/core"), require("@angular/cdk/platform"), require("rxjs/index"), require("@angular/platform-browser"), require("rxjs/observable/throw"), require("rxjs/add/operator/do"), require("@angular/compiler/src/util"));
 	else
-		root["case-ui-toolkit"] = factory(root["ng"]["core"], root["ng"]["common"], root["ng"]["router"], root["ng"]["forms"], root["rxjs"], root["ng"]["commonHttp"], root["rxjs"]["operators"], root["ng"]["platformBrowser"], root["rxjs"]["operator"]["publish"], root["rxjs"]["Rx"], root["rxjs"]["internal"]["operators"], root["rxjs"]["Subject"], root["rxjs"]["add"]["operator"]["map"], root["ng"]["material"], root["ng"]["cdkCoercion"], root["ng"]["cdkOverlay"], root["ng"]["cdkBidi"], root["ng"]["cdkKeycodes"], root["ng"]["materialFormField"], root["ng"]["cdkPortal"], root["ng"]["materialDatepicker"], root["ng"]["materialDialog"], root["ng"]["materialButton"], root["ng"]["materialIcon"], root["ng"]["materialInput"], root["ng"]["materialCore"], root["ng"]["cdkPlatform"], root["rxjs"]["index"], root["rxjs"]["observable"]["throw"], root["rxjs"]["add"]["operator"]["do"], root["ng"]["compilerSrcUtil"]);
-})(self, function(__WEBPACK_EXTERNAL_MODULE__57208__, __WEBPACK_EXTERNAL_MODULE__91216__, __WEBPACK_EXTERNAL_MODULE__92302__, __WEBPACK_EXTERNAL_MODULE__92985__, __WEBPACK_EXTERNAL_MODULE__87318__, __WEBPACK_EXTERNAL_MODULE__17103__, __WEBPACK_EXTERNAL_MODULE__19443__, __WEBPACK_EXTERNAL_MODULE__3125__, __WEBPACK_EXTERNAL_MODULE__49570__, __WEBPACK_EXTERNAL_MODULE__22016__, __WEBPACK_EXTERNAL_MODULE__41163__, __WEBPACK_EXTERNAL_MODULE__66284__, __WEBPACK_EXTERNAL_MODULE__88091__, __WEBPACK_EXTERNAL_MODULE__69451__, __WEBPACK_EXTERNAL_MODULE__26482__, __WEBPACK_EXTERNAL_MODULE__22083__, __WEBPACK_EXTERNAL_MODULE__99183__, __WEBPACK_EXTERNAL_MODULE__39739__, __WEBPACK_EXTERNAL_MODULE__27959__, __WEBPACK_EXTERNAL_MODULE__13571__, __WEBPACK_EXTERNAL_MODULE__93560__, __WEBPACK_EXTERNAL_MODULE__44999__, __WEBPACK_EXTERNAL_MODULE__31106__, __WEBPACK_EXTERNAL_MODULE__21495__, __WEBPACK_EXTERNAL_MODULE__22839__, __WEBPACK_EXTERNAL_MODULE__36080__, __WEBPACK_EXTERNAL_MODULE__31250__, __WEBPACK_EXTERNAL_MODULE__91996__, __WEBPACK_EXTERNAL_MODULE__8215__, __WEBPACK_EXTERNAL_MODULE__36964__, __WEBPACK_EXTERNAL_MODULE__18427__) {
+		root["case-ui-toolkit"] = factory(root["ng"]["cdkPortal"], root["ng"]["core"], root["ng"]["common"], root["ng"]["router"], root["ng"]["forms"], root["ng"]["commonHttp"], root["rxjs"], root["rxjs"]["operators"], root["rxjs"]["operator"]["publish"], root["rxjs"]["Rx"], root["rxjs"]["internal"]["operators"], root["rxjs"]["Subject"], root["rxjs"]["add"]["operator"]["map"], root["ng"]["material"], root["ng"]["cdkCoercion"], root["ng"]["cdkOverlay"], root["ng"]["cdkBidi"], root["ng"]["cdkKeycodes"], root["ng"]["materialFormField"], root["ng"]["materialDatepicker"], root["ng"]["materialDialog"], root["ng"]["materialButton"], root["ng"]["materialIcon"], root["ng"]["materialInput"], root["ng"]["materialCore"], root["ng"]["cdkPlatform"], root["rxjs"]["index"], root["ng"]["platformBrowser"], root["rxjs"]["observable"]["throw"], root["rxjs"]["add"]["operator"]["do"], root["ng"]["compilerSrcUtil"]);
+})(self, function(__WEBPACK_EXTERNAL_MODULE__13571__, __WEBPACK_EXTERNAL_MODULE__57208__, __WEBPACK_EXTERNAL_MODULE__91216__, __WEBPACK_EXTERNAL_MODULE__92302__, __WEBPACK_EXTERNAL_MODULE__92985__, __WEBPACK_EXTERNAL_MODULE__17103__, __WEBPACK_EXTERNAL_MODULE__87318__, __WEBPACK_EXTERNAL_MODULE__19443__, __WEBPACK_EXTERNAL_MODULE__49570__, __WEBPACK_EXTERNAL_MODULE__22016__, __WEBPACK_EXTERNAL_MODULE__41163__, __WEBPACK_EXTERNAL_MODULE__66284__, __WEBPACK_EXTERNAL_MODULE__88091__, __WEBPACK_EXTERNAL_MODULE__69451__, __WEBPACK_EXTERNAL_MODULE__26482__, __WEBPACK_EXTERNAL_MODULE__22083__, __WEBPACK_EXTERNAL_MODULE__99183__, __WEBPACK_EXTERNAL_MODULE__39739__, __WEBPACK_EXTERNAL_MODULE__27959__, __WEBPACK_EXTERNAL_MODULE__93560__, __WEBPACK_EXTERNAL_MODULE__44999__, __WEBPACK_EXTERNAL_MODULE__31106__, __WEBPACK_EXTERNAL_MODULE__21495__, __WEBPACK_EXTERNAL_MODULE__22839__, __WEBPACK_EXTERNAL_MODULE__36080__, __WEBPACK_EXTERNAL_MODULE__31250__, __WEBPACK_EXTERNAL_MODULE__91996__, __WEBPACK_EXTERNAL_MODULE__3125__, __WEBPACK_EXTERNAL_MODULE__8215__, __WEBPACK_EXTERNAL_MODULE__36964__, __WEBPACK_EXTERNAL_MODULE__18427__) {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -12033,38 +12033,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
+var portal_1 = __webpack_require__(13571);
 var core_1 = __webpack_require__(57208);
 var ngx_pagination_1 = __webpack_require__(42664);
-var headers_module_1 = __webpack_require__(79322);
-var footers_module_1 = __webpack_require__(84051);
+var alert_component_1 = __webpack_require__(11733);
+var banners_module_1 = __webpack_require__(56933);
+var body_component_1 = __webpack_require__(4079);
 var body_module_1 = __webpack_require__(96739);
-var phase_component_1 = __webpack_require__(79577);
-var header_bar_component_1 = __webpack_require__(80886);
-var navigation_component_1 = __webpack_require__(77773);
-var navigation_item_component_1 = __webpack_require__(37587);
 var footer_component_1 = __webpack_require__(4560);
-var body_component_1 = __webpack_require__(4079);
-var form_module_1 = __webpack_require__(43153);
+var footers_module_1 = __webpack_require__(84051);
 var date_input_component_1 = __webpack_require__(13424);
-var tabs_module_1 = __webpack_require__(93737);
-var tabs_component_1 = __webpack_require__(21532);
+var form_module_1 = __webpack_require__(43153);
+var header_bar_component_1 = __webpack_require__(80886);
+var headers_module_1 = __webpack_require__(79322);
+var navigation_item_component_1 = __webpack_require__(37587);
+var navigation_component_1 = __webpack_require__(77773);
+var phase_component_1 = __webpack_require__(79577);
 var tab_component_1 = __webpack_require__(65635);
-var alert_component_1 = __webpack_require__(11733);
-var banners_module_1 = __webpack_require__(56933);
-var case_editor_module_1 = __webpack_require__(20039);
-var case_viewer_module_1 = __webpack_require__(45296);
-var case_edit_component_1 = __webpack_require__(78101);
-var callback_errors_component_1 = __webpack_require__(27468);
+var tabs_component_1 = __webpack_require__(21532);
+var tabs_module_1 = __webpack_require__(93737);
+var shared_1 = __webpack_require__(51472);
 var case_create_component_1 = __webpack_require__(19119);
+var case_edit_component_1 = __webpack_require__(78101);
+var case_editor_module_1 = __webpack_require__(20039);
 var case_progress_component_1 = __webpack_require__(88430);
-var palette_module_1 = __webpack_require__(70527);
+var case_history_1 = __webpack_require__(30542);
+var case_viewer_module_1 = __webpack_require__(45296);
+var delete_or_cancel_dialog_component_1 = __webpack_require__(92271);
 var dialogs_module_1 = __webpack_require__(82328);
 var document_dialog_component_1 = __webpack_require__(46139);
-var delete_or_cancel_dialog_component_1 = __webpack_require__(92271);
-var save_or_discard_dialog_component_1 = __webpack_require__(70654);
 var remove_dialog_component_1 = __webpack_require__(86675);
-var shared_1 = __webpack_require__(51472);
-var case_history_1 = __webpack_require__(30542);
+var save_or_discard_dialog_component_1 = __webpack_require__(70654);
+var callback_errors_component_1 = __webpack_require__(27468);
+var palette_module_1 = __webpack_require__(70527);
 var CaseUIToolkitModule = /** @class */ (function () {
     function CaseUIToolkitModule() {
     }
@@ -12089,7 +12090,8 @@ var CaseUIToolkitModule = /** @class */ (function () {
                 shared_1.SearchFiltersModule,
                 shared_1.FocusElementModule,
                 shared_1.LoadingModule,
-                shared_1.PaginationModule
+                shared_1.PaginationModule,
+                portal_1.PortalModule
             ],
             exports: [
                 alert_component_1.AlertComponent,
@@ -13274,7 +13276,7 @@ exports.CallbackErrorsContext = components_1.CallbackErrorsContext;
 exports.CasesService = components_1.CasesService;
 exports.ActivityModule = components_1.ActivityModule;
 exports.CaseHeaderModule = components_1.CaseHeaderModule;
-exports.EventStartModule = components_1.EventStartModule;
+exports.EventTriggerModule = components_1.EventTriggerModule;
 exports.EventLogModule = components_1.EventLogModule;
 exports.SearchFiltersModule = components_1.SearchFiltersModule;
 exports.CaseResolver = components_1.CaseResolver;
@@ -14231,6 +14233,7 @@ var CaseEditPageComponent = /** @class */ (function () {
         if (this.currentPageIsNotValid()) {
             this.generateErrorMessage(this.currentPage.case_fields);
         }
+        this.showSpinner = true;
         if (!this.isSubmitting && !this.currentPageIsNotValid()) {
             this.isSubmitting = true;
             this.error = null;
@@ -14274,7 +14277,7 @@ var CaseEditPageComponent = /** @class */ (function () {
     };
     CaseEditPageComponent.prototype.updateFormControlsValue = function (formGroup, caseFieldId, value) {
         var theControl = formGroup.controls['data'].get(caseFieldId);
-        if (theControl && theControl['status'] !== 'DISABLED') {
+        if (theControl) {
             if (Array.isArray(theControl.value) && Array.isArray(value)
                 && theControl.value.length > value.length && theControl['caseField']
                 && theControl['caseField']['display_context'] && theControl['caseField']['display_context'] === 'OPTIONAL'
@@ -14514,7 +14517,7 @@ var case_edit_component_1 = __webpack_require__(78101);
 var domain_1 = __webpack_require__(29808);
 // @dynamic
 var CaseEditSubmitComponent = /** @class */ (function () {
-    function CaseEditSubmitComponent(caseEdit, formValueService, formErrorService, fieldsUtils, caseFieldService, route, orderService, profileService, profileNotifier, sessionStorageService) {
+    function CaseEditSubmitComponent(caseEdit, formValueService, formErrorService, fieldsUtils, caseFieldService, route, orderService, profileService, profileNotifier) {
         this.caseEdit = caseEdit;
         this.formValueService = formValueService;
         this.formErrorService = formErrorService;
@@ -14524,11 +14527,9 @@ var CaseEditSubmitComponent = /** @class */ (function () {
         this.orderService = orderService;
         this.profileService = profileService;
         this.profileNotifier = profileNotifier;
-        this.sessionStorageService = sessionStorageService;
         this.callbackErrorsSubject = new rxjs_1.Subject();
         this.ignoreWarning = false;
         this.paletteContext = palette_1.PaletteContext.CHECK_YOUR_ANSWER;
-        this.eventCompletionChecksRequired = false;
     }
     CaseEditSubmitComponent_1 = CaseEditSubmitComponent;
     Object.defineProperty(CaseEditSubmitComponent.prototype, "isDisabled", {
@@ -14558,54 +14559,9 @@ var CaseEditSubmitComponent = /** @class */ (function () {
             this.profileSubscription.unsubscribe();
         }
     };
-    /**
-     * Handler function for event completion
-     *
-     * @memberof CaseEditSubmitComponent
-     */
     CaseEditSubmitComponent.prototype.submit = function () {
+        var _this = this;
         this.isSubmitting = true;
-        // We have to run the event completion checks if task in session storage
-        var taskStr = this.sessionStorageService.getItem('taskToComplete');
-        if (taskStr) {
-            // Task is in session storage
-            var task = JSON.parse(taskStr);
-            this.task = task;
-            // Show event completion component to perform event completion checks
-            this.eventCompletionParams = {
-                caseId: this.getCaseId(),
-                eventId: this.getEventId(),
-                task: task
-            };
-            this.eventCompletionChecksRequired = true;
-        }
-        else {
-            // Task not in session storage, proceed to submit
-            var caseEventData = this.generateCaseEventData();
-            this.caseSubmit(caseEventData);
-        }
-    };
-    /**
-     * Handler function for event emitted from case event completion component
-     *
-     * @param {boolean} eventCanBeCompleted
-     * @memberof CaseEditSubmitComponent
-     */
-    CaseEditSubmitComponent.prototype.onEventCanBeCompleted = function (eventCanBeCompleted) {
-        if (eventCanBeCompleted) {
-            // Submit
-            var caseEventData = this.generateCaseEventData();
-            this.caseSubmit(caseEventData);
-        }
-    };
-    /**
-     * Function to generate and return case event data for completing the event
-     *
-     * @private
-     * @return {*}  {CaseEventData}
-     * @memberof CaseEditSubmitComponent
-     */
-    CaseEditSubmitComponent.prototype.generateCaseEventData = function () {
         var caseEventData = {
             data: this.replaceEmptyComplexFieldValues(this.formValueService.sanitise(this.replaceHiddenFormValuesWithOriginalCaseData(this.editForm.get('data'), this.eventTrigger.case_fields))),
             event: this.editForm.value.event
@@ -14618,17 +14574,6 @@ var CaseEditSubmitComponent = /** @class */ (function () {
         this.formValueService.removeEmptyCollectionsWithMinValidation(caseEventData.data, this.eventTrigger.case_fields);
         caseEventData.event_token = this.eventTrigger.event_token;
         caseEventData.ignore_warning = this.ignoreWarning;
-        return caseEventData;
-    };
-    /**
-     * Function to complete the event
-     *
-     * @private
-     * @param {CaseEventData} caseEventData
-     * @memberof CaseEditSubmitComponent
-     */
-    CaseEditSubmitComponent.prototype.caseSubmit = function (caseEventData) {
-        var _this = this;
         this.caseEdit.submit(caseEventData)
             .subscribe(function (response) {
             var confirmation = _this.buildConfirmation(response);
@@ -14881,9 +14826,6 @@ var CaseEditSubmitComponent = /** @class */ (function () {
     CaseEditSubmitComponent.prototype.getCaseId = function () {
         return (this.caseEdit.caseDetails ? this.caseEdit.caseDetails.case_id : '');
     };
-    CaseEditSubmitComponent.prototype.getEventId = function () {
-        return this.editForm.value.event.id;
-    };
     CaseEditSubmitComponent.prototype.getCaseTitle = function () {
         return (this.caseEdit.caseDetails && this.caseEdit.caseDetails.state &&
             this.caseEdit.caseDetails.state.title_display ? this.caseEdit.caseDetails.state.title_display : '');
@@ -14922,8 +14864,7 @@ var CaseEditSubmitComponent = /** @class */ (function () {
             router_1.ActivatedRoute,
             services_1.OrderService,
             services_1.ProfileService,
-            services_1.ProfileNotifier,
-            services_1.SessionStorageService])
+            services_1.ProfileNotifier])
     ], CaseEditSubmitComponent);
     return CaseEditSubmitComponent;
 }());
@@ -15118,11 +15059,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
+var portal_1 = __webpack_require__(13571);
 var common_1 = __webpack_require__(91216);
 var core_1 = __webpack_require__(57208);
 var forms_1 = __webpack_require__(92985);
 var router_1 = __webpack_require__(92302);
-var event_completion_state_machine_service_1 = __webpack_require__(75585);
 var error_1 = __webpack_require__(51585);
 var markdown_module_1 = __webpack_require__(41582);
 var conditional_show_1 = __webpack_require__(71170);
@@ -15151,13 +15092,10 @@ var case_edit_form_component_1 = __webpack_require__(9106);
 var case_edit_page_component_1 = __webpack_require__(56534);
 var case_edit_submit_component_1 = __webpack_require__(17663);
 var case_edit_component_1 = __webpack_require__(78101);
-var case_event_completion_component_1 = __webpack_require__(9349);
 var case_progress_component_1 = __webpack_require__(88430);
 var case_edit_wizard_guard_1 = __webpack_require__(8894);
-var event_trigger_service_1 = __webpack_require__(17051);
-var page_validation_service_1 = __webpack_require__(54417);
-var wizard_factory_service_1 = __webpack_require__(13125);
-var work_allocation_service_1 = __webpack_require__(93603);
+var case_event_completion_1 = __webpack_require__(73933);
+var services_2 = __webpack_require__(25961);
 var CaseEditorModule = /** @class */ (function () {
     function CaseEditorModule() {
     }
@@ -15174,7 +15112,8 @@ var CaseEditorModule = /** @class */ (function () {
                 conditional_show_1.ConditionalShowModule,
                 substitutor_1.LabelSubstitutorModule,
                 errors_module_1.ErrorsModule,
-                palette_1.ComplexModule
+                palette_1.ComplexModule,
+                portal_1.PortalModule
             ],
             declarations: [
                 case_edit_confirm_component_1.CaseEditConfirmComponent,
@@ -15182,35 +15121,40 @@ var CaseEditorModule = /** @class */ (function () {
                 case_edit_page_component_1.CaseEditPageComponent,
                 case_edit_form_component_1.CaseEditFormComponent,
                 case_edit_submit_component_1.CaseEditSubmitComponent,
-                case_event_completion_component_1.CaseEventCompletionComponent,
+                case_event_completion_1.CaseEventCompletionComponent,
+                case_event_completion_1.CaseEventCompletionTaskCancelledComponent,
+                case_event_completion_1.CaseEventCompletionTaskReassignedComponent,
                 case_create_component_1.CaseCreateComponent,
                 case_progress_component_1.CaseProgressComponent,
                 loading_spinner_component_1.LoadingSpinnerComponent
             ],
+            entryComponents: [
+                case_event_completion_1.CaseEventCompletionTaskCancelledComponent,
+                case_event_completion_1.CaseEventCompletionTaskReassignedComponent,
+            ],
             exports: [
                 case_edit_confirm_component_1.CaseEditConfirmComponent,
                 case_edit_component_1.CaseEditComponent,
                 case_edit_page_component_1.CaseEditPageComponent,
                 case_edit_form_component_1.CaseEditFormComponent,
                 case_edit_submit_component_1.CaseEditSubmitComponent,
-                case_event_completion_component_1.CaseEventCompletionComponent,
                 case_create_component_1.CaseCreateComponent,
                 case_progress_component_1.CaseProgressComponent,
                 error_1.CallbackErrorsComponent,
-                loading_spinner_component_1.LoadingSpinnerComponent
+                loading_spinner_component_1.LoadingSpinnerComponent,
             ],
             providers: [
                 fields_utils_1.FieldsUtils,
                 fields_purger_1.FieldsPurger,
                 conditional_show_registrar_service_1.ConditionalShowRegistrarService,
-                wizard_factory_service_1.WizardFactoryService,
+                services_2.WizardFactoryService,
                 form_1.FieldTypeSanitiser,
                 form_value_service_1.FormValueService,
                 form_error_service_1.FormErrorService,
-                page_validation_service_1.PageValidationService,
+                services_2.PageValidationService,
                 case_field_service_1.CaseFieldService,
                 order_service_1.OrderService,
-                event_trigger_service_1.EventTriggerService,
+                services_2.EventTriggerService,
                 profile_service_1.ProfileService,
                 profile_1.ProfileNotifier,
                 addresses_1.AddressesService,
@@ -15218,9 +15162,9 @@ var CaseEditorModule = /** @class */ (function () {
                 router_2.RouterHelperService,
                 profile_service_1.ProfileService,
                 case_edit_wizard_guard_1.CaseEditWizardGuard,
-                work_allocation_service_1.WorkAllocationService,
+                services_2.WorkAllocationService,
                 services_1.SessionStorageService,
-                event_completion_state_machine_service_1.EventCompletionStateMachineService
+                services_2.EventCompletionStateMachineService
             ]
         })
     ], CaseEditorModule);
@@ -15246,17 +15190,22 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
+var portal_1 = __webpack_require__(13571);
 var core_1 = __webpack_require__(57208);
 var router_1 = __webpack_require__(92302);
-var services_1 = __webpack_require__(25961);
-var services_2 = __webpack_require__(65010);
+var _1 = __webpack_require__(73933);
+var services_1 = __webpack_require__(65010);
+var event_completion_portal_types_model_1 = __webpack_require__(79396);
+var services_2 = __webpack_require__(25961);
+exports.COMPONENT_PORTAL_INJECTION_TOKEN = new core_1.InjectionToken('');
 var CaseEventCompletionComponent = /** @class */ (function () {
-    function CaseEventCompletionComponent(service, router, route, sessionStorageService, workAllocationService) {
+    function CaseEventCompletionComponent(service, router, route, sessionStorageService, workAllocationService, alertService) {
         this.service = service;
         this.router = router;
         this.route = route;
         this.sessionStorageService = sessionStorageService;
         this.workAllocationService = workAllocationService;
+        this.alertService = alertService;
         this.eventCanBeCompleted = new core_1.EventEmitter();
     }
     CaseEventCompletionComponent.prototype.ngOnChanges = function (changes) {
@@ -15270,6 +15219,7 @@ var CaseEventCompletionComponent = /** @class */ (function () {
                 route: this.route,
                 sessionStorageService: this.sessionStorageService,
                 workAllocationService: this.workAllocationService,
+                alertService: this.alertService,
                 canBeCompleted: false,
                 component: this
             };
@@ -15283,6 +15233,21 @@ var CaseEventCompletionComponent = /** @class */ (function () {
             this.service.startStateMachine(this.stateMachine);
         }
     };
+    CaseEventCompletionComponent.prototype.showPortal = function (portalType) {
+        var injector = core_1.Injector.create({
+            providers: [
+                { provide: exports.COMPONENT_PORTAL_INJECTION_TOKEN, useValue: this }
+            ]
+        });
+        switch (portalType) {
+            case event_completion_portal_types_model_1.EventCompletionPortalTypes.TaskCancelled:
+                this.selectedComponentPortal = new portal_1.ComponentPortal(_1.CaseEventCompletionTaskCancelledComponent, null, injector);
+                break;
+            case event_completion_portal_types_model_1.EventCompletionPortalTypes.TaskReassigned:
+                this.selectedComponentPortal = new portal_1.ComponentPortal(_1.CaseEventCompletionTaskReassignedComponent, null, injector);
+                break;
+        }
+    };
     __decorate([
         core_1.Input(),
         __metadata("design:type", Object)
@@ -15296,17 +15261,196 @@ var CaseEventCompletionComponent = /** @class */ (function () {
             selector: 'ccd-case-event-completion',
             template: __webpack_require__(45479)
         }),
-        __metadata("design:paramtypes", [services_1.EventCompletionStateMachineService,
+        __metadata("design:paramtypes", [services_2.EventCompletionStateMachineService,
             router_1.Router,
             router_1.ActivatedRoute,
-            services_2.SessionStorageService,
-            services_1.WorkAllocationService])
+            services_1.SessionStorageService,
+            services_2.WorkAllocationService,
+            services_1.AlertService])
     ], CaseEventCompletionComponent);
     return CaseEventCompletionComponent;
 }());
 exports.CaseEventCompletionComponent = CaseEventCompletionComponent;
 
 
+/***/ }),
+
+/***/ 43716:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var router_1 = __webpack_require__(92302);
+var case_event_completion_component_1 = __webpack_require__(9349);
+var CaseEventCompletionTaskCancelledComponent = /** @class */ (function () {
+    function CaseEventCompletionTaskCancelledComponent(parentComponent, route) {
+        this.parentComponent = parentComponent;
+        this.route = route;
+        this.caseId = this.route.snapshot.params['cid'];
+    }
+    CaseEventCompletionTaskCancelledComponent.prototype.onContinue = function () {
+        // Emit event can be completed event
+        this.parentComponent.eventCanBeCompleted.emit(true);
+    };
+    CaseEventCompletionTaskCancelledComponent = __decorate([
+        core_1.Component({
+            selector: 'app-case-event-completion-task-cancelled',
+            template: __webpack_require__(69675)
+        }),
+        __param(0, core_1.Inject(case_event_completion_component_1.COMPONENT_PORTAL_INJECTION_TOKEN)),
+        __metadata("design:paramtypes", [case_event_completion_component_1.CaseEventCompletionComponent,
+            router_1.ActivatedRoute])
+    ], CaseEventCompletionTaskCancelledComponent);
+    return CaseEventCompletionTaskCancelledComponent;
+}());
+exports.CaseEventCompletionTaskCancelledComponent = CaseEventCompletionTaskCancelledComponent;
+
+
+/***/ }),
+
+/***/ 87204:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var router_1 = __webpack_require__(92302);
+var rxjs_1 = __webpack_require__(87318);
+var services_1 = __webpack_require__(65010);
+var services_2 = __webpack_require__(25961);
+var case_worker_service_1 = __webpack_require__(3911);
+var case_event_completion_component_1 = __webpack_require__(9349);
+var CaseEventCompletionTaskReassignedComponent = /** @class */ (function () {
+    function CaseEventCompletionTaskReassignedComponent(parentComponent, route, workAllocationService, sessionStorageService, judicialworkerService, caseworkerService, alertService) {
+        this.parentComponent = parentComponent;
+        this.route = route;
+        this.workAllocationService = workAllocationService;
+        this.sessionStorageService = sessionStorageService;
+        this.judicialworkerService = judicialworkerService;
+        this.caseworkerService = caseworkerService;
+        this.alertService = alertService;
+    }
+    CaseEventCompletionTaskReassignedComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        // Get the assigned user id from the parent component
+        this.assignedUserId = this.parentComponent.context.task.assignee;
+        // Get the caseworker based on the assigned user id
+        var caseworkers$ = this.caseworkerService.getCaseworkers([this.assignedUserId]);
+        this.caseworkerSubscription = caseworkers$.subscribe(function (caseworkers) {
+            if (caseworkers && caseworkers[0].firstName && caseworkers[0].lastName) {
+                _this.assignedUserName = caseworkers[0].firstName + " " + caseworkers[0].lastName;
+            }
+            else {
+                // Get the judicial worker based on the assigned user id
+                var judicialworkers$ = _this.judicialworkerService.getJudicialworkers([_this.assignedUserId]);
+                _this.judicialworkerSubscription = judicialworkers$.subscribe(function (judicialworkers) {
+                    if (judicialworkers && judicialworkers[0].firstName && judicialworkers[0].lastName) {
+                        _this.assignedUserName = judicialworkers[0].firstName + " " + judicialworkers[0].lastName;
+                    }
+                    else {
+                        // As a fail safe display assigned user name as 'another user'
+                        _this.assignedUserName = 'another user';
+                    }
+                });
+            }
+        });
+    };
+    CaseEventCompletionTaskReassignedComponent.prototype.ngOnDestroy = function () {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+        if (this.caseworkerSubscription) {
+            this.caseworkerSubscription.unsubscribe();
+        }
+        if (this.judicialworkerSubscription) {
+            this.judicialworkerSubscription.unsubscribe();
+        }
+    };
+    CaseEventCompletionTaskReassignedComponent.prototype.onContinue = function () {
+        var _this = this;
+        // Get task details
+        var taskStr = this.sessionStorageService.getItem('taskToComplete');
+        if (taskStr) {
+            // Task is in session storage
+            var task = JSON.parse(taskStr);
+            // Assign and complete task
+            this.subscription = this.workAllocationService.assignAndCompleteTask(task.id).subscribe(function (response) {
+                // Emit event can be completed event
+                _this.parentComponent.eventCanBeCompleted.emit(true);
+            }, function (error) {
+                // Emit event cannot be completed event
+                _this.parentComponent.eventCanBeCompleted.emit(false);
+                _this.alertService.error(error.message);
+                return rxjs_1.throwError(error);
+            });
+        }
+        else {
+            // Emit event cannot be completed event
+            this.parentComponent.eventCanBeCompleted.emit(false);
+        }
+    };
+    CaseEventCompletionTaskReassignedComponent = __decorate([
+        core_1.Component({
+            selector: 'app-case-event-completion-task-reassigned',
+            template: __webpack_require__(63504)
+        }),
+        __param(0, core_1.Inject(case_event_completion_component_1.COMPONENT_PORTAL_INJECTION_TOKEN)),
+        __metadata("design:paramtypes", [case_event_completion_component_1.CaseEventCompletionComponent,
+            router_1.ActivatedRoute,
+            services_2.WorkAllocationService,
+            services_1.SessionStorageService,
+            services_2.JudicialworkerService,
+            case_worker_service_1.CaseworkerService,
+            services_1.AlertService])
+    ], CaseEventCompletionTaskReassignedComponent);
+    return CaseEventCompletionTaskReassignedComponent;
+}());
+exports.CaseEventCompletionTaskReassignedComponent = CaseEventCompletionTaskReassignedComponent;
+
+
+/***/ }),
+
+/***/ 73933:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(9349));
+__export(__webpack_require__(43716));
+__export(__webpack_require__(87204));
+
+
 /***/ }),
 
 /***/ 88430:
@@ -15447,6 +15591,21 @@ var Confirmation = /** @class */ (function () {
 exports.Confirmation = Confirmation;
 
 
+/***/ }),
+
+/***/ 79396:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var EventCompletionPortalTypes;
+(function (EventCompletionPortalTypes) {
+    EventCompletionPortalTypes[EventCompletionPortalTypes["TaskCancelled"] = 0] = "TaskCancelled";
+    EventCompletionPortalTypes[EventCompletionPortalTypes["TaskReassigned"] = 1] = "TaskReassigned";
+})(EventCompletionPortalTypes = exports.EventCompletionPortalTypes || (exports.EventCompletionPortalTypes = {}));
+
+
 /***/ }),
 
 /***/ 2345:
@@ -15497,12 +15656,12 @@ function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-__export(__webpack_require__(55430));
 __export(__webpack_require__(44178));
-__export(__webpack_require__(25460));
-__export(__webpack_require__(26378));
 __export(__webpack_require__(2345));
 __export(__webpack_require__(5578));
+__export(__webpack_require__(26378));
+__export(__webpack_require__(25460));
+__export(__webpack_require__(55430));
 
 
 /***/ }),
@@ -15825,6 +15984,55 @@ var CaseEditWizardGuard = /** @class */ (function () {
 exports.CaseEditWizardGuard = CaseEditWizardGuard;
 
 
+/***/ }),
+
+/***/ 3911:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var rxjs_1 = __webpack_require__(87318);
+var operators_1 = __webpack_require__(19443);
+var app_config_1 = __webpack_require__(35185);
+var services_1 = __webpack_require__(65010);
+var CaseworkerService = /** @class */ (function () {
+    function CaseworkerService(http, appConfig, errorService) {
+        this.http = http;
+        this.appConfig = appConfig;
+        this.errorService = errorService;
+    }
+    CaseworkerService.prototype.getCaseworkers = function (userIds) {
+        var _this = this;
+        var url = this.appConfig.getWorkAllocationApiUrl() + "/caseworker";
+        return this.http
+            .post(url, { userIds: userIds })
+            .pipe(operators_1.catchError(function (error) {
+            _this.errorService.setError(error);
+            return rxjs_1.throwError(error);
+        }));
+    };
+    CaseworkerService = __decorate([
+        core_1.Injectable(),
+        __metadata("design:paramtypes", [services_1.HttpService,
+            app_config_1.AbstractAppConfig,
+            services_1.HttpErrorService])
+    ], CaseworkerService);
+    return CaseworkerService;
+}());
+exports.CaseworkerService = CaseworkerService;
+
+
 /***/ }),
 
 /***/ 21190:
@@ -16158,7 +16366,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var fsm_1 = __webpack_require__(5937);
+var rxjs_1 = __webpack_require__(87318);
+var Task_1 = __webpack_require__(60796);
 var domain_1 = __webpack_require__(29808);
+var event_completion_portal_types_model_1 = __webpack_require__(79396);
 var EVENT_COMPLETION_STATE_MACHINE = 'EVENT COMPLETION STATE MACHINE';
 var EventCompletionStateMachineService = /** @class */ (function () {
     function EventCompletionStateMachineService() {
@@ -16182,6 +16393,7 @@ var EventCompletionStateMachineService = /** @class */ (function () {
     EventCompletionStateMachineService.prototype.addTransitions = function () {
         // Initial transition
         this.addTransitionsForStateCheckTasksCanBeCompleted();
+        this.addTransitionsForStateTaskCompletedOrCancelled();
         this.addTransitionsForStateCompleteEventAndTask();
         this.addTransitionsForStateTaskAssignedToAnotherUser();
         this.addTransitionsForStateTaskUnassigned();
@@ -16191,35 +16403,43 @@ var EventCompletionStateMachineService = /** @class */ (function () {
             var taskPayLoad = payload;
             if (taskPayLoad.task_required_for_event) {
                 var task = taskPayLoad.tasks.find(function (x) { return x.id === context.task.id; });
-                if (task) {
-                    if (!task.assignee && task.task_state === 'unassigned') {
-                        // Task unassigned
-                        state.trigger(domain_1.EventCompletionStates.TaskUnassigned);
-                    }
-                    else if (task.assignee === context.task.assignee) {
-                        // Task assigned to current user
-                        if (task.task_state === 'assigned') {
+                if (task && task.task_state) {
+                    switch (task.task_state.toUpperCase()) {
+                        case Task_1.TaskState.Unassigned:
+                            // Task unassigned
+                            state.trigger(domain_1.EventCompletionStates.TaskUnassigned);
+                            break;
+                        case Task_1.TaskState.Completed:
+                        case Task_1.TaskState.Cancelled:
+                            // Task completed or cancelled
+                            state.trigger(domain_1.EventCompletionStates.TaskCompetedOrCancelled);
+                            break;
+                        case Task_1.TaskState.Assigned:
                             // Task is in assigned state
-                            state.trigger(domain_1.EventCompletionStates.CompleteEventAndTask);
-                        }
-                        else {
-                            if (task.task_state === 'completed' || task.task_state === 'cancelled') {
-                                state.trigger(domain_1.EventCompletionStates.TaskCompetedOrCancelled);
-                            }
-                        }
-                    }
-                    else {
-                        // Task not assigned to user
-                        state.trigger(domain_1.EventCompletionStates.TaskAssignedToAnotherUser);
+                            task.assignee === context.task.assignee
+                                ? state.trigger(domain_1.EventCompletionStates.CompleteEventAndTask)
+                                : state.trigger(domain_1.EventCompletionStates.TaskAssignedToAnotherUser);
+                            break;
+                        default:
+                            // Task not assigned to user
+                            state.trigger(domain_1.EventCompletionStates.TaskAssignedToAnotherUser);
+                            break;
                     }
                 }
             }
+            else {
+                // This code should never be hit, as checks are aleady in place in the parent component
+                // This is just a fail safe code
+                // Event completion checks not required, inform parent to complete the event
+                state.trigger(domain_1.EventCompletionStates.CompleteEventAndTask);
+            }
         });
     };
     EventCompletionStateMachineService.prototype.entryActionForStateTaskCompletedOrCancelled = function (state, context) {
         // Trigger final state to complete processing of state machine
         state.trigger(domain_1.EventCompletionStates.Final);
-        // Navigate to no task available error page
+        // Load case event completion task cancelled component
+        context.component.showPortal(event_completion_portal_types_model_1.EventCompletionPortalTypes.TaskCancelled);
     };
     EventCompletionStateMachineService.prototype.entryActionForStateCompleteEventAndTask = function (state, context) {
         // Trigger final state to complete processing of state machine
@@ -16230,11 +16450,32 @@ var EventCompletionStateMachineService = /** @class */ (function () {
     EventCompletionStateMachineService.prototype.entryActionForStateTaskAssignedToAnotherUser = function (state, context) {
         // Trigger final state to complete processing of state machine
         state.trigger(domain_1.EventCompletionStates.Final);
+        // Load case event completion task reassigned component
+        context.component.showPortal(event_completion_portal_types_model_1.EventCompletionPortalTypes.TaskReassigned);
     };
     EventCompletionStateMachineService.prototype.entryActionForStateTaskUnassigned = function (state, context) {
         // Trigger final state to complete processing of state machine
         state.trigger(domain_1.EventCompletionStates.Final);
-        // Navigate to tasks tab on case details page
+        // Get task details
+        var taskStr = context.sessionStorageService.getItem('taskToComplete');
+        if (taskStr) {
+            // Task is in session storage
+            var task = JSON.parse(taskStr);
+            // Assign and complete task
+            context.workAllocationService.assignAndCompleteTask(task.id).subscribe(function (response) {
+                // Emit event can be completed event
+                context.component.eventCanBeCompleted.emit(true);
+            }, function (error) {
+                // Emit event cannot be completed event
+                context.component.eventCanBeCompleted.emit(false);
+                context.alertService.error(error.message);
+                return rxjs_1.throwError(error);
+            });
+        }
+        else {
+            // Emit event cannot be completed event
+            context.component.eventCanBeCompleted.emit(false);
+        }
     };
     EventCompletionStateMachineService.prototype.entryActionForStateFinal = function (state, context) {
         // Final actions can be performed here, the state machine finished running
@@ -16243,8 +16484,12 @@ var EventCompletionStateMachineService = /** @class */ (function () {
     EventCompletionStateMachineService.prototype.addTransitionsForStateCheckTasksCanBeCompleted = function () {
         // Complete event and task
         this.stateCheckTasksCanBeCompleted.addTransition(domain_1.EventCompletionStates.CompleteEventAndTask, this.stateCompleteEventAndTask);
+        // Task completed or cancelled
+        this.stateCheckTasksCanBeCompleted.addTransition(domain_1.EventCompletionStates.TaskCompetedOrCancelled, this.stateTaskCompletedOrCancelled);
         // Task assigned to another user
         this.stateCheckTasksCanBeCompleted.addTransition(domain_1.EventCompletionStates.TaskAssignedToAnotherUser, this.stateTaskAssignedToAnotherUser);
+        // Task unassigned
+        this.stateCheckTasksCanBeCompleted.addTransition(domain_1.EventCompletionStates.TaskUnassigned, this.stateTaskUnassigned);
     };
     EventCompletionStateMachineService.prototype.addTransitionsForStateTaskCompletedOrCancelled = function () {
         this.stateTaskCompletedOrCancelled.addTransition(domain_1.EventCompletionStates.Final, this.stateFinal);
@@ -16308,14 +16553,65 @@ function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-__export(__webpack_require__(13125));
-__export(__webpack_require__(54417));
 __export(__webpack_require__(8894));
-__export(__webpack_require__(17051));
+__export(__webpack_require__(3911));
 __export(__webpack_require__(21190));
 __export(__webpack_require__(53294));
-__export(__webpack_require__(93603));
 __export(__webpack_require__(75585));
+__export(__webpack_require__(17051));
+__export(__webpack_require__(51111));
+__export(__webpack_require__(54417));
+__export(__webpack_require__(13125));
+__export(__webpack_require__(93603));
+
+
+/***/ }),
+
+/***/ 51111:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var rxjs_1 = __webpack_require__(87318);
+var operators_1 = __webpack_require__(19443);
+var app_config_1 = __webpack_require__(35185);
+var services_1 = __webpack_require__(65010);
+var JudicialworkerService = /** @class */ (function () {
+    function JudicialworkerService(http, appConfig, errorService) {
+        this.http = http;
+        this.appConfig = appConfig;
+        this.errorService = errorService;
+    }
+    JudicialworkerService.prototype.getJudicialworkers = function (userIds) {
+        var _this = this;
+        var url = this.appConfig.getWorkAllocationApiUrl() + "/roles/getJudicialUsers";
+        return this.http
+            .post(url, { userIds: userIds })
+            .pipe(operators_1.catchError(function (error) {
+            _this.errorService.setError(error);
+            return rxjs_1.throwError(error);
+        }));
+    };
+    JudicialworkerService = __decorate([
+        core_1.Injectable(),
+        __metadata("design:paramtypes", [services_1.HttpService,
+            app_config_1.AbstractAppConfig,
+            services_1.HttpErrorService])
+    ], JudicialworkerService);
+    return JudicialworkerService;
+}());
+exports.JudicialworkerService = JudicialworkerService;
 
 
 /***/ }),
@@ -16589,6 +16885,21 @@ var WorkAllocationService = /** @class */ (function () {
             }
         }));
     };
+    /**
+     * Call the API to assign a task.
+     * @param taskId specifies which task should be assigned.
+     * @param userId specifies the user the task should be assigned to.
+     */
+    WorkAllocationService.prototype.assignTask = function (taskId, userId) {
+        var _this = this;
+        var url = this.appConfig.getWorkAllocationApiUrl() + "/task/" + taskId + "/assign";
+        return this.http
+            .post(url, { userId: userId })
+            .pipe(operators_1.catchError(function (error) {
+            _this.errorService.setError(error);
+            return rxjs_1.throwError(error);
+        }));
+    };
     /**
      * Call the API to complete a task.
      * @param taskId specifies which task should be completed.
@@ -16607,6 +16918,28 @@ var WorkAllocationService = /** @class */ (function () {
             return rxjs_1.throwError(error);
         }));
     };
+    /**
+     * Call the API to assign and complete a task.
+     * @param taskId specifies which task should be completed.
+     */
+    WorkAllocationService.prototype.assignAndCompleteTask = function (taskId) {
+        var _this = this;
+        var url = this.appConfig.getWorkAllocationApiUrl() + "/task/" + taskId + "/complete";
+        return this.http
+            .post(url, {
+            'completion_options': {
+                'assign_and_complete': true
+            }
+        })
+            .pipe(operators_1.catchError(function (error) {
+            _this.errorService.setError(error);
+            // this will subscribe to get the user details and decide whether to display an error message
+            _this.http.get(_this.appConfig.getUserInfoApiUrl()).map(function (response) { return response; }).subscribe(function (response) {
+                _this.handleTaskCompletionError(response);
+            });
+            return rxjs_1.throwError(error);
+        }));
+    };
     /**
      * Handles the response from the observable to get the user details when task is completed.
      * @param response is the response given from the observable which contains the user detaild.
@@ -16665,8 +16998,14 @@ var WorkAllocationService = /** @class */ (function () {
             return rxjs_1.throwError(error);
         }));
     };
+    /**
+     * Return tasks for case and event.
+     *
+     * @param eventId The ID of the event to find tasks for.
+     * @param caseId The ID of the case to find tasks for.
+     */
     WorkAllocationService.prototype.getTasksByCaseIdAndEventId = function (eventId, caseId) {
-        return this.http.get("/workallocation2/case/tasks/" + caseId + "/event/" + eventId);
+        return this.http.get(this.appConfig.getWorkAllocationApiUrl() + "/case/tasks/" + caseId + "/event/" + eventId);
     };
     var WorkAllocationService_1;
     WorkAllocationService.IACCaseOfficer = 'caseworker-ia-caseofficer';
@@ -19096,21 +19435,21 @@ var case_header_1 = __webpack_require__(75150);
 var case_history_1 = __webpack_require__(30542);
 var error_message_component_1 = __webpack_require__(67679);
 var errors_module_1 = __webpack_require__(61386);
-var event_start_module_1 = __webpack_require__(76210);
 var event_trigger_1 = __webpack_require__(7108);
 var palette_1 = __webpack_require__(22212);
 var case_basic_access_view_component_1 = __webpack_require__(42906);
 var case_challenged_access_request_component_1 = __webpack_require__(70776);
 var case_challenged_access_success_component_1 = __webpack_require__(41969);
+var case_specific_access_request_component_1 = __webpack_require__(38692);
+var case_review_specific_access_request_component_1 = __webpack_require__(24212);
 var case_event_trigger_1 = __webpack_require__(92100);
 var case_full_access_view_component_1 = __webpack_require__(76764);
-var case_review_specific_access_reject_1 = __webpack_require__(84766);
-var case_review_specific_access_request_component_1 = __webpack_require__(24212);
-var case_specific_access_request_component_1 = __webpack_require__(38692);
 var case_view_1 = __webpack_require__(65389);
 var case_viewer_component_1 = __webpack_require__(89554);
 var printer_1 = __webpack_require__(65773);
 var services_2 = __webpack_require__(50137);
+var case_review_specific_access_reject_1 = __webpack_require__(84766);
+var event_start_1 = __webpack_require__(61319);
 var CaseViewerModule = /** @class */ (function () {
     function CaseViewerModule() {
     }
@@ -19122,7 +19461,7 @@ var CaseViewerModule = /** @class */ (function () {
                 errors_module_1.ErrorsModule,
                 activity_1.ActivityModule,
                 case_header_1.CaseHeaderModule,
-                event_start_module_1.EventStartModule,
+                event_start_1.EventStartModule,
                 event_trigger_1.EventTriggerModule,
                 tabs_1.TabsModule,
                 palette_1.PaletteModule,
@@ -19154,7 +19493,7 @@ var CaseViewerModule = /** @class */ (function () {
             ],
             exports: [
                 case_viewer_component_1.CaseViewerComponent,
-                case_view_1.CaseViewComponent
+                case_view_1.CaseViewComponent,
             ],
             providers: [
                 case_editor_1.CaseNotifier,
@@ -19603,7 +19942,7 @@ var event_tasks_resolver_service_1 = __webpack_require__(26745);
 var file_upload_progress_guard_1 = __webpack_require__(27667);
 var case_challenged_access_request_1 = __webpack_require__(38403);
 var case_challenged_access_success_1 = __webpack_require__(26840);
-var case_event_trigger_1 = __webpack_require__(92100);
+var case_event_trigger_component_1 = __webpack_require__(83645);
 var case_review_specific_access_reject_1 = __webpack_require__(84766);
 var case_review_specific_access_request_1 = __webpack_require__(83444);
 var case_specific_access_request_1 = __webpack_require__(73343);
@@ -19619,7 +19958,7 @@ exports.viewerRouting = [
         resolve: {
             eventTrigger: services_1.EventTriggerResolver,
         },
-        component: case_event_trigger_1.CaseEventTriggerComponent,
+        component: case_event_trigger_component_1.CaseEventTriggerComponent,
         children: case_editor_1.editorRouting,
         canActivate: [event_start_guard_1.EventStartGuard],
         canDeactivate: [file_upload_progress_guard_1.FileUploadProgressGuard],
@@ -19659,14 +19998,6 @@ exports.viewerRouting = [
         path: 'event/:eid/history',
         component: case_history_1.CaseHistoryComponent,
     },
-    {
-        path: 'access-request',
-        component: case_challenged_access_request_1.CaseChallengedAccessRequestComponent
-    },
-    {
-        path: 'event/:eid/history',
-        component: case_history_1.CaseHistoryComponent,
-    },
     {
         path: 'challenged-access-request',
         children: [
@@ -20637,23 +20968,46 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var router_1 = __webpack_require__(92302);
-var services_1 = __webpack_require__(65010);
+var services_1 = __webpack_require__(25961);
 var TaskAssignedComponent = /** @class */ (function () {
-    function TaskAssignedComponent(route, sessionStorageService) {
+    function TaskAssignedComponent(route, judicialworkerService, caseworkerService) {
         this.route = route;
-        this.sessionStorageService = sessionStorageService;
+        this.judicialworkerService = judicialworkerService;
+        this.caseworkerService = caseworkerService;
         this.task = null;
         this.caseId = this.route.snapshot.data.case.case_id;
         this.task = this.route.snapshot.queryParams;
     }
     TaskAssignedComponent.prototype.ngOnInit = function () {
         var _this = this;
-        var caseworkers = JSON.parse(this.sessionStorageService.getItem('caseworkers'));
-        var caseworker = caseworkers.find(function (x) { return x.idamId === _this.task.assignee; });
-        this.assignedUserName = caseworker !== undefined ? caseworker.firstName + " " + caseworker.lastName : 'another user';
-        // TODO: If the task is not assigned to a caseworker, then
-        // we have to perform an api call to check whether the task is assigned to judicial user
-        // and display the judicial user name instead of 'another user'
+        // Get the caseworker based on the assigned user id
+        var caseworkers$ = this.caseworkerService.getCaseworkers([this.task.assignee]);
+        this.caseworkerSubscription = caseworkers$.subscribe(function (caseworkers) {
+            if (caseworkers && caseworkers[0].firstName && caseworkers[0].lastName) {
+                _this.assignedUserName = caseworkers[0].firstName + " " + caseworkers[0].lastName;
+            }
+            else {
+                // Get the judicial worker based on the assigned user id
+                var judicialworkers$ = _this.judicialworkerService.getJudicialworkers([_this.task.assignee]);
+                _this.judicialworkerSubscription = judicialworkers$.subscribe(function (judicialworkers) {
+                    if (judicialworkers && judicialworkers[0].firstName && judicialworkers[0].lastName) {
+                        _this.assignedUserName = judicialworkers[0].firstName + " " + judicialworkers[0].lastName;
+                    }
+                    else {
+                        // As a fail safe display assigned user name as 'another user'
+                        _this.assignedUserName = 'another user';
+                    }
+                });
+            }
+        });
+    };
+    TaskAssignedComponent.prototype.ngOnDestroy = function () {
+        if (this.caseworkerSubscription) {
+            this.caseworkerSubscription.unsubscribe();
+        }
+        if (this.judicialworkerSubscription) {
+            this.judicialworkerSubscription.unsubscribe();
+        }
     };
     TaskAssignedComponent = __decorate([
         core_1.Component({
@@ -20661,7 +21015,8 @@ var TaskAssignedComponent = /** @class */ (function () {
             template: __webpack_require__(66199)
         }),
         __metadata("design:paramtypes", [router_1.ActivatedRoute,
-            services_1.SessionStorageService])
+            services_1.JudicialworkerService,
+            services_1.CaseworkerService])
     ], TaskAssignedComponent);
     return TaskAssignedComponent;
 }());
@@ -20918,7 +21273,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-var portal_1 = __webpack_require__(13571);
 var common_1 = __webpack_require__(91216);
 var core_1 = __webpack_require__(57208);
 var forms_1 = __webpack_require__(92985);
@@ -20941,7 +21295,6 @@ var EventStartModule = /** @class */ (function () {
             imports: [
                 common_1.CommonModule,
                 forms_1.ReactiveFormsModule,
-                portal_1.PortalModule,
                 router_1.RouterModule
             ],
             declarations: [
@@ -21465,7 +21818,7 @@ __export(__webpack_require__(64633));
 __export(__webpack_require__(84573));
 __export(__webpack_require__(51585));
 __export(__webpack_require__(21470));
-__export(__webpack_require__(61319));
+__export(__webpack_require__(7108));
 __export(__webpack_require__(47174));
 __export(__webpack_require__(22212));
 __export(__webpack_require__(96292));
@@ -22812,12 +23165,12 @@ var WriteCaseLinkFieldComponent = /** @class */ (function (_super) {
     WriteCaseLinkFieldComponent.prototype.ngOnInit = function () {
         if (this.caseField.value) {
             this.caseLinkGroup = this.registerControl(new forms_1.FormGroup({
-                'CaseReference': new forms_1.FormControl(this.caseField.value.CaseReference, forms_1.Validators.required),
+                'CaseReference': new forms_1.FormControl(this.caseField.value.CaseReference),
             }), true);
         }
         else {
             this.caseLinkGroup = this.registerControl(new forms_1.FormGroup({
-                'CaseReference': new forms_1.FormControl(null, forms_1.Validators.required),
+                'CaseReference': new forms_1.FormControl(),
             }), true);
         }
         this.caseReferenceControl = this.caseLinkGroup.controls['CaseReference'];
@@ -22840,11 +23193,6 @@ var WriteCaseLinkFieldComponent = /** @class */ (function (_super) {
                 }
                 return { 'error': 'Please use a valid 16 Digit Case Reference' };
             }
-            else {
-                if (control.touched) {
-                    return { 'error': 'Please use a valid 16 Digit Case Reference' };
-                }
-            }
             return null;
         };
     };
@@ -23425,10 +23773,6 @@ var ReadFieldsFilterPipe = /** @class */ (function () {
         return !!hasChildrenWithValue;
     };
     ReadFieldsFilterPipe.isValidCollection = function (field, values) {
-        // if field is collection and it has complex/collection child field; parent field doesnt have value defined
-        if (!Array.isArray(field.value) && values && values.hasOwnProperty(field.id)) {
-            return true;
-        }
         var isNotEmpty = Array.isArray(field.value) && field.value.length > 0;
         if (isNotEmpty && field.field_type.collection_field_type.type === 'Complex') {
             return !!field.value.find(function (item) {
@@ -34044,6 +34388,36 @@ var SortParameters = /** @class */ (function () {
 exports.SortParameters = SortParameters;
 
 
+/***/ }),
+
+/***/ 60796:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var Permissions;
+(function (Permissions) {
+    Permissions["Own"] = "OWN";
+    Permissions["Execute"] = "EXECUTE";
+    Permissions["Read"] = "READ";
+    Permissions["Manage"] = "MANAGE";
+    Permissions["Cancel"] = "CANCEL";
+})(Permissions = exports.Permissions || (exports.Permissions = {}));
+var TaskState;
+(function (TaskState) {
+    TaskState["UnConfigured"] = "UNCONFIGURED";
+    TaskState["PendingAutoAssign"] = "PENDING_AUTO_ASSIGN";
+    TaskState["Assigned"] = "ASSIGNED";
+    TaskState["Configured"] = "CONFIGURED";
+    TaskState["Unassigned"] = "UNASSIGNED";
+    TaskState["Completed"] = "COMPLETED";
+    TaskState["Cancelled"] = "CANCELLED";
+    TaskState["Terminated"] = "TERMINATED";
+    TaskState["PendingReConfiguration"] = "PENDING_RECONFIGURATION";
+})(TaskState = exports.TaskState || (exports.TaskState = {}));
+
+
 /***/ }),
 
 /***/ 11399:
@@ -83730,7 +84104,7 @@ module.exports = "<ccd-loading-spinner  *ngIf=\"showSpinner\"></ccd-loading-spin
 /***/ 81278:
 /***/ ((module) => {
 
-module.exports = "<div *ngIf=\"!eventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{ eventTrigger.name}}</h1>\n\n  <!--Case ID or Title -->\n  <div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n  <ng-template #titleBlock>\n    <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n  </ng-template>\n  <ng-template #idBlock>\n    <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n  </ng-template>\n\n  <!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n  <div *ngIf=\"error && (!(error.callbackErrors || error.callbackWarnings || error.details) && !error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      Something went wrong\n    </h1>\n    <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n      <p>We're working to fix the problem. Try again shortly.</p>\n      <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n    </div>\n  </div>\n  <!-- Event error heading and error message to be displayed if there are specific error details -->\n  <div *ngIf=\"error && (error.details || error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      The event could not be created\n    </h3>\n    <p>{{error.message}}</p>\n    <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let fieldError of error.details.field_errors\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n    </ul>\n  </div>\n  <ccd-callback-errors [callbackErrorsSubject]=\"callbackErrorsSubject\"\n                      (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n  <form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n      <h2 class=\"heading-h2\">Check your answers</h2>\n      <span class=\"text-16\">Check the information below carefully.</span>\n\n      <table class=\"form-table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of this.wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm.controls['data']\n            | ccdReadFieldsFilter: false :undefined :true : editForm.controls['data']\n            | ccdCYAPageLabelFilter\">\n              <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n                <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                    [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th *ngIf=\"!isLabel(field)\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                  <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                    <ccd-field-read\n                      [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                      [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                  <td class=\"valign-top check-your-answers__change case-field-change\">\n                    <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                      href=\"javascript:void(0)\"><span class=\"text-16\">Change</span></a>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n      <table class=\"summary-fields\">\n        <tbody>\n          <ng-container *ngFor=\"let field of this.showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th>{{field.label}}</th>\n                  <td class=\"form-cell\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                  </td>\n                </tr>\n                <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <td colspan=\"2\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"showEventNotes()\">\n      <fieldset id=\"fieldset-event\" formGroupName=\"event\" *ngIf=\"profile && !isSolicitor()\">\n        <div class=\"form-group\">\n          <label for=\"field-trigger-summary\" class=\"form-label\">\n            Event summary (optional)\n            <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n          </label>\n          <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n          <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                    maxlength=\"65536\"></textarea>\n        </div>\n      </fieldset>\n    </ng-container>\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || isSubmitting\" (click)=\"previous()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">{{triggerText}}</button>\n    </div>\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"isSubmitting\">{{getCancelText()}}</a></p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"eventCompletionChecksRequired\"\n  [eventCompletionParams]=\"eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n"
+module.exports = "<!-- Event trigger name -->\n<h1 class=\"govuk-heading-l\">{{ eventTrigger.name}}</h1>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && (!(error.callbackErrors || error.callbackWarnings || error.details) && !error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    Something went wrong\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>We're working to fix the problem. Try again shortly.</p>\n    <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n  </div>\n</div>\n<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && (error.details || error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    The event could not be created\n  </h3>\n  <p>{{error.message}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n  </ul>\n</div>\n<ccd-callback-errors [callbackErrorsSubject]=\"callbackErrorsSubject\"\n                     (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n<form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n  <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n    <h2 class=\"heading-h2\">Check your answers</h2>\n    <span class=\"text-16\">Check the information below carefully.</span>\n\n    <table class=\"form-table\">\n      <tbody>\n      <ng-container *ngFor=\"let page of this.wizard.pages\">\n        <ng-container *ngIf=\"isShown(page)\">\n          <ng-container *ngFor=\"let field of page\n          | ccdPageFields: editForm.controls['data']\n          | ccdReadFieldsFilter: false :undefined :true : editForm.controls['data']\n          | ccdCYAPageLabelFilter\">\n            <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n              <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                  [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <th *ngIf=\"!isLabel(field)\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                  <ccd-field-read\n                    [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                    [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                </td>\n                <td class=\"valign-top check-your-answers__change case-field-change\">\n                  <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                     href=\"javascript:void(0)\"><span class=\"text-16\">Change</span></a>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n      </ng-container>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n    <table class=\"summary-fields\">\n      <tbody>\n        <ng-container *ngFor=\"let field of this.showSummaryFields\">\n            <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n              <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <th>{{field.label}}</th>\n                <td class=\"form-cell\">\n                  <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                </td>\n              </tr>\n              <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                <td colspan=\"2\">\n                  <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                </td>\n              </tr>\n            </ng-container>\n          </ng-container>\n      </tbody>\n    </table>\n  </ng-container>\n  <ng-container *ngIf=\"showEventNotes()\">\n    <fieldset id=\"fieldset-event\" formGroupName=\"event\" *ngIf=\"profile && !isSolicitor()\">\n      <div class=\"form-group\">\n        <label for=\"field-trigger-summary\" class=\"form-label\">\n          Event summary (optional)\n          <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n        </label>\n        <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n      </div>\n      <div class=\"form-group\">\n        <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n        <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                  maxlength=\"65536\"></textarea>\n      </div>\n    </fieldset>\n  </ng-container>\n  <div class=\"form-group form-group-related\">\n    <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || isSubmitting\" (click)=\"previous()\">Previous</button>\n    <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">{{triggerText}}</button>\n  </div>\n  <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"isSubmitting\">{{getCancelText()}}</a></p>\n</form>\n"
 
 /***/ }),
 
@@ -83744,7 +84118,21 @@ module.exports = "<router-outlet></router-outlet>\n"
 /***/ 45479:
 /***/ ((module) => {
 
-module.exports = ""
+module.exports = "<ng-template [cdkPortalOutlet]=\"selectedComponentPortal\"></ng-template>\n"
+
+/***/ }),
+
+/***/ 69675:
+/***/ ((module) => {
+
+module.exports = "<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\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</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</h2>\n\n    <p>This task has been cancelled or marked as done.</p>\n\n    <p>Click Continue to complete the task and save your progress.</p>\n\n    <p>Alternatively, click Cancel to return to the tasks tab without saving your progress.</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()\">Continue</button>\n      <a [routerLink]=\"['/', 'cases', 'case-details', caseId, 'tasks']\"\n              class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">Cancel</a>\n    </div>\n  </div>\n</div>\n"
+
+/***/ }),
+
+/***/ 63504:
+/***/ ((module) => {
+
+module.exports = "<div class=\"govuk-!-margin-9\">\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\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</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</h2>\n\n    <p>This task has been reassigned to {{assignedUserName}}.</p>\n\n    <p>Click Continue to reassign the task to you and save your progress.</p>\n\n    <p>Alternatively, click Cancel to return to the tasks tab without saving your progress.</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()\">Continue</button>\n      <a  [routerLink]=\"['/', 'cases', 'case-details', caseId, 'tasks']\"\n              class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">Cancel</a>\n    </div>\n  </div>\n</div>\n"
 
 /***/ }),
 
@@ -83856,7 +84244,7 @@ module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ccd-case-viewer [hasPrint
 /***/ 67025:
 /***/ ((module) => {
 
-module.exports = "<div *ngIf=\"isDataLoaded()\">\n  <ccd-case-basic-access-view *ngIf=\"!hasStandardAccess()\" [accessType]=\"userAccessType\" [caseDetails]=\"caseDetails\"></ccd-case-basic-access-view>\n  <ccd-case-full-access-view *ngIf=\"hasStandardAccess()\" [caseDetails]=\"caseDetails\" [hasPrint]=\"hasPrint\" [hasEventSelector]=\"hasEventSelector\" [prependedTabs]=\"prependedTabs\" [appendedTabs]=\"appendedTabs\"></ccd-case-full-access-view>\n</div>\n"
+module.exports = "<div *ngIf=\"isDataLoaded()\">\n  <ccd-case-basic-access-view *ngIf=\"!hasStandardAccess()\"\n                              [accessType]=\"userAccessType\"\n                              [caseDetails]=\"caseDetails\">\n  </ccd-case-basic-access-view>\n  <ccd-case-full-access-view *ngIf=\"hasStandardAccess()\"\n                             [caseDetails]=\"caseDetails\"\n                             [hasPrint]=\"hasPrint\"\n                             [hasEventSelector]=\"hasEventSelector\"\n                             [prependedTabs]=\"prependedTabs\"\n                             [appendedTabs]=\"appendedTabs\">\n  </ccd-case-full-access-view>\n  <ccd-case-full-access-view *ngIf=\"hasStandardAccess()\" [caseDetails]=\"caseDetails\" [hasPrint]=\"hasPrint\" [hasEventSelector]=\"hasEventSelector\" [prependedTabs]=\"prependedTabs\" [appendedTabs]=\"appendedTabs\"></ccd-case-full-access-view>\n</div>\n"
 
 /***/ }),