@hmcts/ccd-case-ui-toolkit 7.0.37 → 7.0.38-client-context

package/fesm2015/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, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } 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 * as i4 from '@angular/common';
 import { CommonModule, DOCUMENT, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -27,6 +27,7 @@ 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';
 import * as i1$4 from 'ngx-md';
 import { NgxMdModule } from 'ngx-md';
 import * as i5 from '@angular/material/legacy-autocomplete';
@@ -133,11 +134,11 @@ function FooterComponent_div_3_Template(rf, ctx) {
     }
 }
 const _c0$14 = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
-const _c1$t = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
+const _c1$u = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
 class FooterComponent {
 }
 FooterComponent.ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(); };
-FooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$t, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) {
+FooterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$u, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$14);
             i0.ɵɵelementStart(0, "footer", 0)(1, "div", 1);
@@ -211,7 +212,7 @@ function HeaderBarComponent_div_10_Template(rf, ctx) {
     }
 }
 const _c0$13 = [[["", "headerNavigation", ""]]];
-const _c1$s = ["[headerNavigation]"];
+const _c1$t = ["[headerNavigation]"];
 class HeaderBarComponent {
     constructor() {
         this.signOutRequest = new EventEmitter();
@@ -221,7 +222,7 @@ class HeaderBarComponent {
     }
 }
 HeaderBarComponent.ɵfac = function HeaderBarComponent_Factory(t) { return new (t || HeaderBarComponent)(); };
-HeaderBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$s, decls: 17, vars: 14, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) {
+HeaderBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$t, decls: 17, vars: 14, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$13);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
@@ -277,11 +278,11 @@ HeaderBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBa
 })();
 
 const _c0$12 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
-const _c1$r = ["[leftNavLinks]", "[rightNavLinks]"];
+const _c1$s = ["[leftNavLinks]", "[rightNavLinks]"];
 class NavigationComponent {
 }
 NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(); };
-NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$r, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) {
+NavigationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$s, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$12);
             i0.ɵɵelementStart(0, "div")(1, "nav", 0);
@@ -412,11 +413,11 @@ HeadersModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModu
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(HeadersModule, { declarations: [PhaseComponent, HeaderBarComponent, NavigationComponent, NavigationItemComponent], imports: [CommonModule, RouterModule, i1.RpxTranslationModule], exports: [PhaseComponent, HeaderBarComponent, NavigationComponent, NavigationItemComponent] }); })();
 
 const _c0$11 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
-const _c1$q = ["[topBody]", "[leftBody]", "[rightBody]"];
+const _c1$r = ["[topBody]", "[leftBody]", "[rightBody]"];
 class BodyComponent {
 }
 BodyComponent.ɵfac = function BodyComponent_Factory(t) { return new (t || BodyComponent)(); };
-BodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$q, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) {
+BodyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$r, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$11);
             i0.ɵɵelementStart(0, "div", 0);
@@ -1085,11 +1086,11 @@ NotificationBannerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 })();
 
 const _c0$_ = function (a0) { return { "js-hidden": a0 }; };
-const _c1$p = ["*"];
+const _c1$q = ["*"];
 class TabComponent {
 }
 TabComponent.ɵfac = function TabComponent_Factory(t) { return new (t || TabComponent)(); };
-TabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, ngContentSelectors: _c1$p, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) {
+TabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, ngContentSelectors: _c1$q, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
@@ -1115,8 +1116,8 @@ TabComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent,
 })();
 
 const _c0$Z = ["tab"];
-const _c1$o = function () { return ["."]; };
-const _c2$3 = function (a0) { return { "tabs-toggle-selected": a0 }; };
+const _c1$p = function () { return ["."]; };
+const _c2$4 = function (a0) { return { "tabs-toggle-selected": a0 }; };
 function TabsComponent_li_2_Template(rf, ctx) {
     if (rf & 1) {
         const _r4 = i0.ɵɵgetCurrentView();
@@ -1129,7 +1130,7 @@ function TabsComponent_li_2_Template(rf, ctx) {
     if (rf & 2) {
         const panel_r1 = ctx.$implicit;
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction0(8, _c1$o))("fragment", panel_r1.id)("ngClass", i0.ɵɵpureFunction1(9, _c2$3, panel_r1.selected));
+        i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction0(8, _c1$p))("fragment", panel_r1.id)("ngClass", i0.ɵɵpureFunction1(9, _c2$4, panel_r1.selected));
         i0.ɵɵattribute("aria-controls", panel_r1.id)("aria-selected", panel_r1.selected);
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 6, panel_r1.title));
@@ -2702,6 +2703,9 @@ class FirstErrorPipe {
         else if (keys[0] === 'pattern') {
             errorMessage = 'The data entered is not valid for %FIELDLABEL%';
         }
+        else if (keys[0] === 'markDownPattern') {
+            errorMessage = 'The data entered is not valid for %FIELDLABEL%. Link mark up characters are not allowed in this field';
+        }
         else if (keys[0] === 'minlength') {
             errorMessage = '%FIELDLABEL% is below the minimum length';
         }
@@ -3025,7 +3029,10 @@ class CaseField {
         }
     }
     set list_items(items) {
-        this._list_items = items;
+        var _a;
+        if ((items && !this._list_items) || ((items === null || items === void 0 ? void 0 : items.length) > ((_a = this._list_items) === null || _a === void 0 ? void 0 : _a.length))) {
+            this._list_items = items;
+        }
     }
     get dateTimeEntryFormat() {
         if (this.isComplexDisplay()) {
@@ -3896,6 +3903,13 @@ class FieldsUtils {
                 return '';
         }
     }
+    static getUserTaskFromClientContext(clientContextStr) {
+        if (clientContextStr) {
+            let clientContext = JSON.parse(clientContextStr);
+            return clientContext.client_context.user_task;
+        }
+        return null;
+    }
     buildCanShowPredicate(eventTrigger, form) {
         const currentState = this.getCurrentEventState(eventTrigger, form);
         return (page) => {
@@ -4550,6 +4564,7 @@ class FormValidatorsService {
             FormValidatorsService.CUSTOM_VALIDATED_TYPES.indexOf(caseField.field_type.type) === -1) {
             const validators = [Validators.required];
             if (caseField.field_type.type === 'Text') {
+                validators.push(this.markDownPatternValidator());
                 if (caseField.field_type.regular_expression) {
                     validators.push(Validators.pattern(caseField.field_type.regular_expression));
                 }
@@ -4563,22 +4578,39 @@ class FormValidatorsService {
                     validators.push(Validators.maxLength(caseField.field_type.max));
                 }
             }
+            if (caseField.field_type.type === 'TextArea') {
+                validators.push(this.emptyValidator());
+                validators.push(this.markDownPatternValidator());
+            }
             if (control.validator) {
                 validators.push(control.validator);
             }
             control.setValidators(validators);
         }
+        else if (caseField.display_context === 'OPTIONAL' && (caseField.field_type.type === 'Text' || caseField.field_type.type === 'TextArea')
+            || (caseField.display_context === 'COMPLEX' && caseField.field_type.type === 'Complex')) {
+            control.setValidators(this.markDownPatternValidator());
+        }
         return control;
     }
     static emptyValidator() {
         const validator = (control) => {
-            if (control && control.value && control.value.toString().trim().length === 0) {
+            var _a;
+            if (((_a = control === null || control === void 0 ? void 0 : control.value) === null || _a === void 0 ? void 0 : _a.toString().trim().length) === 0) {
                 return { required: {} };
             }
             return null;
         };
         return validator;
     }
+    static markDownPatternValidator() {
+        const pattern = /(\[[^\]]{0,500}\]\([^)]{0,500}\)|!\[[^\]]{0,500}\]\([^)]{0,500}\)|<img[^>]{0,500}>|<a[^>]{0,500}>.*?<\/a>)/;
+        return (control) => {
+            var _a;
+            const value = (_a = control === null || control === void 0 ? void 0 : control.value) === null || _a === void 0 ? void 0 : _a.toString().trim();
+            return (value && pattern.test(value)) ? { markDownPattern: {} } : null;
+        };
+    }
     // TODO: Strip this out as it's only here for the moment because
     // the service is being injected all over the place but it doesn't
     // need to be as FormValidatorsService.addValidators is perfectly
@@ -4586,10 +4618,20 @@ class FormValidatorsService {
     addValidators(caseField, control) {
         return FormValidatorsService.addValidators(caseField, control);
     }
+    addMarkDownValidators(formGroup, controlPath) {
+        const control = formGroup.get(controlPath);
+        if (control) {
+            control.setValidators(FormValidatorsService.markDownPatternValidator());
+            control.updateValueAndValidity();
+        }
+        return control;
+    }
 }
 FormValidatorsService.CUSTOM_VALIDATED_TYPES = [
     'Date', 'MoneyGBP', 'Label', 'JudicialUser'
 ];
+FormValidatorsService.DEFAULT_INPUT_TEXT = 'text';
+FormValidatorsService.DEFAULT_INPUT_TEXTAREA = 'textAreas';
 FormValidatorsService.ɵfac = function FormValidatorsService_Factory(t) { return new (t || FormValidatorsService)(); };
 FormValidatorsService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FormValidatorsService, factory: FormValidatorsService.ɵfac });
 (function () {
@@ -5226,7 +5268,8 @@ class FieldTypeSanitiser {
         if (!data || !caseFields) {
             return;
         }
-        caseFields.forEach(caseField => {
+        caseFields = this.ensureDynamicMultiSelectListPopulated(caseFields);
+        caseFields.forEach((caseField) => {
             // tslint:disable-next-line:switch-default
             switch (caseField.field_type.type) {
                 case FieldTypeSanitiser.FIELD_TYPE_DYNAMIC_MULTISELECT_LIST:
@@ -5249,6 +5292,19 @@ class FieldTypeSanitiser {
             }
         });
     }
+    ensureDynamicMultiSelectListPopulated(caseFields) {
+        return caseFields.map((field) => {
+            if (field.field_type.type !== 'Complex') {
+                return field;
+            }
+            const complexFieldsUpdated = field.field_type.complex_fields.map((complexField) => {
+                var _a, _b;
+                return complexField.field_type.type === FieldTypeSanitiser.FIELD_TYPE_DYNAMIC_MULTISELECT_LIST && complexField.display_context !== 'HIDDEN' && ((_a = field._value) === null || _a === void 0 ? void 0 : _a[complexField.id])
+                    ? Object.assign(Object.assign({}, complexField), { list_items: (_b = field._value[complexField.id]) === null || _b === void 0 ? void 0 : _b.list_items }) : complexField;
+            });
+            return Object.assign(Object.assign({}, field), { field_type: Object.assign(Object.assign({}, field.field_type), { complex_fields: complexFieldsUpdated }) });
+        });
+    }
     convertArrayToDynamicListOutput(field, data) {
         const values = data[field.id];
         if (Array.isArray(values)) {
@@ -7018,6 +7074,7 @@ class ProfileService {
             .set('experimental', 'true')
             .set('Accept', ProfileService.V2_MEDIATYPE_USER_PROFILE)
             .set('Content-Type', 'application/json');
+        // Not adding client context header because header is added to call immediately afterwards
         return this.httpService
             .get(url, { headers, observe: 'body' })
             .pipe(map((p) => plainToClass(Profile, p)));
@@ -7912,6 +7969,7 @@ class CasesService {
         let headers = new HttpHeaders();
         headers = headers.set('experimental', 'true');
         headers = headers.set('Content-Type', 'application/json');
+        headers = this.addClientContextHeader(headers);
         if (Draft.isDraft(caseId)) {
             headers = headers.set('Accept', CasesService.V2_MEDIATYPE_START_DRAFT_TRIGGER);
         }
@@ -7922,9 +7980,11 @@ class CasesService {
             headers = headers.set('Accept', CasesService.V2_MEDIATYPE_START_CASE_TRIGGER);
         }
         return this.http
-            .get(url, { headers, observe: 'body' })
-            .pipe(map(body => {
-            return FieldsUtils.handleNestedDynamicLists(body);
+            .get(url, { headers, observe: 'response' })
+            .pipe(map((response) => {
+            console.log('response barking mad', response);
+            this.updateClientContextStorage(response.headers);
+            return FieldsUtils.handleNestedDynamicLists(response.body);
         }), catchError(error => {
             this.errorService.setError(error);
             return throwError(error);
@@ -7933,13 +7993,17 @@ class CasesService {
     createEvent(caseDetails, eventData) {
         const caseId = caseDetails.case_id;
         const url = `${this.appConfig.getCaseDataUrl()}/cases/${caseId}/events`;
-        const headers = new HttpHeaders()
+        let headers = new HttpHeaders()
             .set('experimental', 'true')
             .set('Accept', CasesService.V2_MEDIATYPE_CREATE_EVENT)
             .set('Content-Type', 'application/json');
+        headers = this.addClientContextHeader(headers);
         return this.http
-            .post(url, eventData, { headers, observe: 'body' })
-            .pipe(catchError(error => {
+            .post(url, eventData, { headers, observe: 'response' })
+            .pipe(map((response) => {
+            this.updateClientContextStorage(response.headers);
+            return response.body;
+        }), catchError(error => {
             this.errorService.setError(error);
             return throwError(error);
         }));
@@ -7947,13 +8011,17 @@ class CasesService {
     validateCase(ctid, eventData, pageId) {
         const pageIdString = pageId ? `?pageId=${pageId}` : '';
         const url = `${this.appConfig.getCaseDataUrl()}/case-types/${ctid}/validate${pageIdString}`;
-        const headers = new HttpHeaders()
+        let headers = new HttpHeaders()
             .set('experimental', 'true')
             .set('Accept', CasesService.V2_MEDIATYPE_CASE_DATA_VALIDATE)
             .set('Content-Type', 'application/json');
+        headers = this.addClientContextHeader(headers);
         return this.http
-            .post(url, eventData, { headers, observe: 'body' })
-            .pipe(catchError(error => {
+            .post(url, eventData, { headers, observe: 'response' })
+            .pipe(map((response) => {
+            this.updateClientContextStorage(response.headers);
+            return response.body;
+        }), catchError(error => {
             this.errorService.setError(error);
             return throwError(error);
         }));
@@ -7964,26 +8032,34 @@ class CasesService {
             ignoreWarning = 'true';
         }
         const url = `${this.appConfig.getCaseDataUrl()}/case-types/${ctid}/cases?ignore-warning=${ignoreWarning}`;
-        const headers = new HttpHeaders()
+        let headers = new HttpHeaders()
             .set('experimental', 'true')
             .set('Accept', CasesService.V2_MEDIATYPE_CREATE_CASE)
             .set('Content-Type', 'application/json');
+        headers = this.addClientContextHeader(headers);
         return this.http
-            .post(url, eventData, { headers, observe: 'body' })
-            .pipe(catchError(error => {
+            .post(url, eventData, { headers, observe: 'response' })
+            .pipe(map((response) => {
+            this.updateClientContextStorage(response.headers);
+            return response.body;
+        }), catchError(error => {
             this.errorService.setError(error);
             return throwError(error);
         }));
     }
     getPrintDocuments(caseId) {
         const url = `${this.appConfig.getCaseDataUrl()}/cases/${caseId}/documents`;
-        const headers = new HttpHeaders()
+        let headers = new HttpHeaders()
             .set('experimental', 'true')
             .set('Accept', CasesService.V2_MEDIATYPE_CASE_DOCUMENTS)
             .set('Content-Type', 'application/json');
+        headers = this.addClientContextHeader(headers);
         return this.http
-            .get(url, { headers, observe: 'body' })
-            .pipe(map(body => body.documentResources), catchError(error => {
+            .get(url, { headers, observe: 'response' })
+            .pipe(map((response) => {
+            this.updateClientContextStorage(response.headers);
+            return response.body.documentResources;
+        }), catchError(error => {
             this.errorService.setError(error);
             return throwError(error);
         }));
@@ -8016,17 +8092,6 @@ class CasesService {
             wizardPage.case_fields = this.orderService.sort(this.wizardPageFieldToCaseFieldMapper.mapAll(wizardPage.wizard_page_fields, eventTrigger.case_fields));
         });
     }
-    /*
-    Checks if the user has role of pui-case-manager and returns true or false
-    */
-    isPuiCaseManager() {
-        const userInfoStr = this.sessionStorageService.getItem('userDetails');
-        if (userInfoStr) {
-            const userInfo = JSON.parse(userInfoStr);
-            return userInfo && userInfo.roles && (userInfo.roles.indexOf(CasesService.PUI_CASE_MANAGER) !== -1);
-        }
-        return false;
-    }
     getCourtOrHearingCentreName(locationId) {
         return this.http.post(`/api/locations/getLocationsById`, { locations: [{ locationId }] });
     }
@@ -8071,6 +8136,25 @@ class CasesService {
             .get(url)
             .pipe(catchError(error => throwError(error)));
     }
+    addClientContextHeader(headers) {
+        const clientContextDetails = this.sessionStorageService.getItem('clientContext');
+        if (clientContextDetails) {
+            // may require URI encoding in certain circumstances
+            const clientContext = window.btoa(clientContextDetails);
+            if (clientContext) {
+                headers = headers.set('Client-Context', clientContext);
+            }
+        }
+        return headers;
+    }
+    updateClientContextStorage(headers) {
+        // for mocking - TODO: Kasi Remove/Uncomment for testing
+        // headers = this.setMockClientContextHeader(headers);
+        if (headers && headers.get('Client-Context')) {
+            const clientContextString = window.atob(headers.get('Client-Context'));
+            this.sessionStorageService.setItem('clientContext', clientContextString);
+        }
+    }
 }
 // Internal (UI) API
 CasesService.V2_MEDIATYPE_CASE_VIEW = 'application/vnd.uk.gov.hmcts.ccd-data-store-api.ui-case-view.v2+json';
@@ -8423,9 +8507,9 @@ class CaseworkerService {
         this.errorService = errorService;
     }
     getCaseworkers(serviceId) {
-        const url = `${this.appConfig.getWorkAllocationApiUrl()}/retrieveCaseWorkersForServices`;
+        const url = `${this.appConfig.getWorkAllocationApiUrl()}/caseworker/getUsersByServiceName`;
         return this.http
-            .post(url, { serviceIds: [serviceId] })
+            .post(url, { services: [serviceId] })
             .pipe(catchError(error => {
             this.errorService.setError(error);
             return throwError(error);
@@ -8584,8 +8668,7 @@ class EventCompletionStateMachineService {
     entryActionForStateCompleteEventAndTask(state, context) {
         // Trigger final state to complete processing of state machine
         state.trigger(EventCompletionStates.Final);
-        const taskStr = context.sessionStorageService.getItem('taskToComplete');
-        if (taskStr) {
+        if (this.getTaskFromClientContext(context)) {
             context.sessionStorageService.setItem('assignNeeded', 'false');
             // just set event can be completed
             context.component.eventCanBeCompleted.emit(true);
@@ -8604,9 +8687,7 @@ class EventCompletionStateMachineService {
     entryActionForStateTaskUnassigned(state, context) {
         // Trigger final state to complete processing of state machine
         state.trigger(EventCompletionStates.Final);
-        // Get task details
-        const taskStr = context.sessionStorageService.getItem('taskToComplete');
-        if (taskStr) {
+        if (this.getTaskFromClientContext(context)) {
             context.sessionStorageService.setItem('assignNeeded', 'true');
             context.component.eventCanBeCompleted.emit(true);
         }
@@ -8641,6 +8722,11 @@ class EventCompletionStateMachineService {
     addTransitionsForStateTaskUnassigned() {
         this.stateTaskUnassigned.addTransition(EventCompletionStates.Final, this.stateFinal);
     }
+    getTaskFromClientContext(context) {
+        const clientContextStr = context.sessionStorageService.getItem('clientContext');
+        const userTask = FieldsUtils.getUserTaskFromClientContext(clientContextStr);
+        return userTask ? userTask.task_data : null;
+    }
 }
 EventCompletionStateMachineService.ɵfac = function EventCompletionStateMachineService_Factory(t) { return new (t || EventCompletionStateMachineService)(); };
 EventCompletionStateMachineService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EventCompletionStateMachineService, factory: EventCompletionStateMachineService.ɵfac });
@@ -9109,11 +9195,9 @@ class CaseEditComponent {
         this.isSubmitting = true;
         // We have to run the event completion checks if task in session storage
         // and if the task is in session storage, then is it associated to the case
-        let taskInSessionStorage;
-        const taskStr = this.sessionStorageService.getItem('taskToComplete');
-        if (taskStr) {
-            taskInSessionStorage = JSON.parse(taskStr);
-        }
+        const clientContextStr = this.sessionStorageService.getItem('clientContext');
+        const userTask = FieldsUtils.getUserTaskFromClientContext(clientContextStr);
+        const taskInSessionStorage = userTask ? userTask.task_data : null;
         if (taskInSessionStorage && taskInSessionStorage.case_id === this.getCaseId(caseDetails)) {
             // Show event completion component to perform event completion checks
             this.eventCompletionParams = ({
@@ -9312,14 +9396,16 @@ class CaseEditComponent {
         });
     }
     postCompleteTaskIfRequired() {
-        const taskStr = this.sessionStorageService.getItem('taskToComplete');
+        const clientContextStr = this.sessionStorageService.getItem('clientContext');
+        const userTask = FieldsUtils.getUserTaskFromClientContext(clientContextStr);
+        const [task, taskToBeCompleted] = userTask ? [userTask.task_data, userTask.complete_task] : [null, false];
         const assignNeeded = this.sessionStorageService.getItem('assignNeeded') === 'true';
-        if (taskStr && assignNeeded) {
-            const task = JSON.parse(taskStr);
+        if (task && assignNeeded && taskToBeCompleted) {
+            // const task: Task = JSON.parse(taskStr);
             return this.workAllocationService.assignAndCompleteTask(task.id);
         }
-        else if (taskStr) {
-            const task = JSON.parse(taskStr);
+        else if (task && taskToBeCompleted) {
+            // const task: Task = JSON.parse(taskStr);
             return this.workAllocationService.completeTask(task.id);
         }
         return of(true);
@@ -10970,8 +11056,12 @@ class CaseEventCompletionTaskReassignedComponent {
     }
     onContinue() {
         // Get task details
-        const taskStr = this.sessionStorageService.getItem('taskToComplete');
-        if (taskStr) {
+        const clientContextStr = this.sessionStorageService.getItem('clientContext');
+        const userTask = FieldsUtils.getUserTaskFromClientContext(clientContextStr);
+        const task = userTask ? userTask.task_data : null;
+        // not complete_task not utilised here as related to event completion
+        // service wanting task associated with event to not be completed not directly relevant
+        if (task) {
             this.sessionStorageService.setItem('assignNeeded', 'true');
             // set event can be completed to true
             this.parentComponent.eventCanBeCompleted.emit(true);
@@ -11126,8 +11216,8 @@ function WriteAddressFieldComponent_div_1_div_4_span_5_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r5.errorMessage));
     }
 }
-const _c1$n = function (a0) { return { "form-group-error": a0 }; };
-const _c2$2 = function (a0) { return { "govuk-input--error": a0 }; };
+const _c1$o = function (a0) { return { "form-group-error": a0 }; };
+const _c2$3 = function (a0) { return { "govuk-input--error": a0 }; };
 function WriteAddressFieldComponent_div_1_div_4_Template(rf, ctx) {
     if (rf & 1) {
         const _r7 = i0.ɵɵgetCurrentView();
@@ -11145,7 +11235,7 @@ function WriteAddressFieldComponent_div_1_div_4_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r2 = i0.ɵɵnextContext(2);
-        i0.ɵɵproperty("id", ctx_r2.createElementId("postcodeLookup"))("ngClass", i0.ɵɵpureFunction1(13, _c1$n, ctx_r2.missingPostcode));
+        i0.ɵɵproperty("id", ctx_r2.createElementId("postcodeLookup"))("ngClass", i0.ɵɵpureFunction1(13, _c1$o, ctx_r2.missingPostcode));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("for", ctx_r2.createElementId("postcodeInput"));
         i0.ɵɵadvance(2);
@@ -11153,7 +11243,7 @@ function WriteAddressFieldComponent_div_1_div_4_Template(rf, ctx) {
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx_r2.missingPostcode);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c2$2, ctx_r2.missingPostcode))("id", ctx_r2.createElementId("postcodeInput"))("formControl", ctx_r2.postcode);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(15, _c2$3, ctx_r2.missingPostcode))("id", ctx_r2.createElementId("postcodeInput"))("formControl", ctx_r2.postcode);
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 11, "Find address"));
     }
@@ -11200,7 +11290,7 @@ function WriteAddressFieldComponent_div_1_div_5_Template(rf, ctx) {
     }
     if (rf & 2) {
         const ctx_r3 = i0.ɵɵnextContext(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$n, ctx_r3.noAddressSelected));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$o, ctx_r3.noAddressSelected));
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("for", ctx_r3.createElementId("addressList"));
         i0.ɵɵadvance(2);
@@ -11380,7 +11470,7 @@ WriteAddressFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.writeComplexFieldComponent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.focusElementDirectives = _t);
         }
-    }, inputs: { formGroup: "formGroup" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 4, vars: 9, consts: [[1, "form-group", 3, "id"], [4, "ngIf"], [3, "hidden", "caseField", "renderLabel", "parent", "formGroup", "ignoreMandatory", "idPrefix"], ["writeComplexFieldComponent", ""], [1, "heading-h2"], ["class", "form-group bottom-30 postcodeLookup", 3, "id", "ngClass", 4, "ngIf"], ["class", "form-group", "id", "selectAddress", 3, "ngClass", 4, "ngIf"], ["class", "manual-link bottom-30", "href", "javascript:void(0)", 3, "click", 4, "ngIf"], [1, "form-group", "bottom-30", "postcodeLookup", 3, "id", "ngClass"], [3, "for"], [1, "form-label"], ["class", "error-message", 4, "ngIf"], ["type", "text", "name", "postcode", 1, "form-control", "postcodeinput", "inline-block", 3, "ngClass", "id", "formControl"], ["type", "button", 1, "button", "button-30", 3, "click"], [1, "error-message"], ["id", "selectAddress", 1, "form-group", 3, "ngClass"], ["name", "address", "focusElement", "", 1, "form-control", "ccd-dropdown", "addressList", 3, "id", "formControl", "change"], [3, "ngValue", 4, "ngFor", "ngForOf"], [3, "ngValue"], ["href", "javascript:void(0)", 1, "manual-link", "bottom-30", 3, "click"]], template: function WriteAddressFieldComponent_Template(rf, ctx) {
+    }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 4, vars: 9, consts: [[1, "form-group", 3, "id"], [4, "ngIf"], [3, "hidden", "caseField", "renderLabel", "parent", "formGroup", "ignoreMandatory", "idPrefix"], ["writeComplexFieldComponent", ""], [1, "heading-h2"], ["class", "form-group bottom-30 postcodeLookup", 3, "id", "ngClass", 4, "ngIf"], ["class", "form-group", "id", "selectAddress", 3, "ngClass", 4, "ngIf"], ["class", "manual-link bottom-30", "href", "javascript:void(0)", 3, "click", 4, "ngIf"], [1, "form-group", "bottom-30", "postcodeLookup", 3, "id", "ngClass"], [3, "for"], [1, "form-label"], ["class", "error-message", 4, "ngIf"], ["type", "text", "name", "postcode", 1, "form-control", "postcodeinput", "inline-block", 3, "ngClass", "id", "formControl"], ["type", "button", 1, "button", "button-30", 3, "click"], [1, "error-message"], ["id", "selectAddress", 1, "form-group", 3, "ngClass"], ["name", "address", "focusElement", "", 1, "form-control", "ccd-dropdown", "addressList", 3, "id", "formControl", "change"], [3, "ngValue", 4, "ngFor", "ngForOf"], [3, "ngValue"], ["href", "javascript:void(0)", 1, "manual-link", "bottom-30", 3, "click"]], template: function WriteAddressFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, WriteAddressFieldComponent_div_1_Template, 7, 6, "div", 1);
@@ -11405,8 +11495,6 @@ WriteAddressFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             }], focusElementDirectives: [{
                 type: ViewChildren,
                 args: [FocusElementDirective]
-            }], formGroup: [{
-                type: Input
             }] });
 })();
 
@@ -12769,7 +12857,7 @@ function WriteCaseLinkFieldComponent_span_4_Template(rf, ctx) {
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r2.caseReferenceControl.errors, ctx_r2.caseField.label), " ");
     }
 }
-const _c1$m = function (a0) { return { "form-group-error": a0 }; };
+const _c1$n = function (a0) { return { "form-group-error": a0 }; };
 class WriteCaseLinkFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         if (this.caseField.value) {
@@ -12835,7 +12923,7 @@ WriteCaseLinkFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$m, !ctx.caseReferenceControl.valid && (ctx.caseReferenceControl.dirty || ctx.caseReferenceControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$n, !ctx.caseReferenceControl.valid && (ctx.caseReferenceControl.dirty || ctx.caseReferenceControl.touched)));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance(1);
@@ -12873,7 +12961,7 @@ function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) {
         i0.ɵɵproperty("caseField", i0.ɵɵpureFunction6(3, _c0$T, ctx_r1.caseField.label, ctx_r1.caseField.label, ctx_r1.caseField.field_type.collection_field_type, ctx_r1.caseField.display_context_parameter, ctx_r1.caseField.value, ctx_r1.caseField.hidden))("context", ctx_r1.context)("topLevelFormGroup", ctx_r1.topLevelFormGroup);
     }
 }
-const _c1$l = function (a0, a1, a2, a3, a4) { return { id: a0, label: a1, field_type: a2, value: a3, hidden: a4 }; };
+const _c1$m = function (a0, a1, a2, a3, a4) { return { id: a0, label: a1, field_type: a2, value: a3, hidden: a4 }; };
 function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "tr")(1, "td");
@@ -12885,7 +12973,7 @@ function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) {
         const i_r5 = ctx.index;
         const ctx_r3 = i0.ɵɵnextContext(3);
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("caseField", i0.ɵɵpureFunction5(4, _c1$l, i_r5, ctx_r3.caseField.label + " " + (i_r5 + 1), ctx_r3.caseField.field_type.collection_field_type, item_r4.value, ctx_r3.caseField.hidden))("context", ctx_r3.context)("topLevelFormGroup", ctx_r3.topLevelFormGroup)("idPrefix", ctx_r3.buildIdPrefix(i_r5));
+        i0.ɵɵproperty("caseField", i0.ɵɵpureFunction5(4, _c1$m, i_r5, ctx_r3.caseField.label + " " + (i_r5 + 1), ctx_r3.caseField.field_type.collection_field_type, item_r4.value, ctx_r3.caseField.hidden))("context", ctx_r3.context)("topLevelFormGroup", ctx_r3.topLevelFormGroup)("idPrefix", ctx_r3.buildIdPrefix(i_r5));
     }
 }
 function ReadCollectionFieldComponent_table_0_tbody_3_Template(rf, ctx) {
@@ -13418,7 +13506,7 @@ WriteCollectionFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
         }
-    }, inputs: { caseFields: "caseFields", formGroup: "formGroup" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 11, consts: [[1, "form-group", 3, "id"], [1, "panel", "collection-indicator"], [1, "heading-h2", "error-spacing"], ["type", "button", 1, "button", "write-collection-add-item__top", 3, "disabled", "click"], ["class", "heading-h2 error-spacing", 4, "ngIf"], ["class", "form-group", 3, "hidden", 4, "ngIf"], ["class", "button write-collection-add-item__bottom", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-hint"], [1, "error-message"], [1, "form-group", 3, "hidden"], ["class", "form-group", 3, "id", 4, "ngFor", "ngForOf"], ["collectionItem", ""], [1, "collection-title"], [1, "float-left"], [3, "for"], [1, "heading-h3"], [1, "float-right"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], [3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"], ["type", "button", 1, "button", "write-collection-add-item__bottom", 3, "disabled", "click"]], template: function WriteCollectionFieldComponent_Template(rf, ctx) {
+    }, inputs: { caseFields: "caseFields" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 11, consts: [[1, "form-group", 3, "id"], [1, "panel", "collection-indicator"], [1, "heading-h2", "error-spacing"], ["type", "button", 1, "button", "write-collection-add-item__top", 3, "disabled", "click"], ["class", "heading-h2 error-spacing", 4, "ngIf"], ["class", "form-group", 3, "hidden", 4, "ngIf"], ["class", "button write-collection-add-item__bottom", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-hint"], [1, "error-message"], [1, "form-group", 3, "hidden"], ["class", "form-group", 3, "id", 4, "ngFor", "ngForOf"], ["collectionItem", ""], [1, "collection-title"], [1, "float-left"], [3, "for"], [1, "heading-h3"], [1, "float-right"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], [3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"], ["type", "button", 1, "button", "write-collection-add-item__bottom", 3, "disabled", "click"]], template: function WriteCollectionFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
             i0.ɵɵtext(3);
@@ -13456,8 +13544,6 @@ WriteCollectionFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
         }], function () { return [{ type: i1$3.MatLegacyDialog }, { type: i2.ScrollToService }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }]; }, { caseFields: [{
                 type: Input
-            }], formGroup: [{
-                type: Input
             }], items: [{
                 type: ViewChildren,
                 args: ['collectionItem']
@@ -13798,7 +13884,7 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
     }
 }
 WriteComplexFieldComponent.ɵfac = function WriteComplexFieldComponent_Factory(t) { return new (t || WriteComplexFieldComponent)(i0.ɵɵdirectiveInject(IsCompoundPipe), i0.ɵɵdirectiveInject(FormValidatorsService)); };
-WriteComplexFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteComplexFieldComponent, selectors: [["ccd-write-complex-type-field"]], inputs: { caseFields: "caseFields", formGroup: "formGroup", renderLabel: "renderLabel", ignoreMandatory: "ignoreMandatory" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "form-group", 3, "id"], ["class", "heading-h2", 4, "ngIf"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "heading-h2"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"]], template: function WriteComplexFieldComponent_Template(rf, ctx) {
+WriteComplexFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteComplexFieldComponent, selectors: [["ccd-write-complex-type-field"]], inputs: { caseFields: "caseFields", renderLabel: "renderLabel", ignoreMandatory: "ignoreMandatory" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "form-group", 3, "id"], ["class", "heading-h2", 4, "ngIf"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "heading-h2"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"]], template: function WriteComplexFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
             i0.ɵɵtemplate(3, WriteComplexFieldComponent_h2_3_Template, 3, 3, "h2", 1);
@@ -13820,8 +13906,6 @@ WriteComplexFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             args: [{ selector: 'ccd-write-complex-type-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <fieldset>\n    <legend><h2 *ngIf=\"renderLabel\" class=\"heading-h2\">{{(caseField | ccdFieldLabel)}}</h2></legend>\n    <ng-container [ngSwitch]=\"field | ccdIsReadOnly\" *ngFor=\"let field of complexFields\">\n      <ccd-field-read *ngSwitchCase=\"true\"\n                      ccdLabelSubstitutor\n                      [caseField]=\"buildField(field)\"\n                      [caseFields]=\"caseFields\"\n                      [formGroup]=\"formGroup\"\n                      [withLabel]=\"true\">\n      </ccd-field-read>\n      <ccd-field-write *ngSwitchCase=\"false\"\n                       ccdLabelSubstitutor\n                       [caseField]=\"field\"\n                       [caseFields]=\"caseFields\"\n                       [formGroup]=\"formGroup\"\n                       [parent]=\"complexGroup\"\n                       [idPrefix]=\"buildIdPrefix(field)\"\n                       [hidden]=\"field.hidden\"\n                       [isExpanded]=\"isExpanded\"\n                       [isInSearchBlock]=\"isInSearchBlock\">\n      </ccd-field-write>\n    </ng-container>\n  </fieldset>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}\n"] }]
         }], function () { return [{ type: IsCompoundPipe }, { type: FormValidatorsService }]; }, { caseFields: [{
                 type: Input
-            }], formGroup: [{
-                type: Input
             }], renderLabel: [{
                 type: Input
             }], ignoreMandatory: [{
@@ -14083,7 +14167,7 @@ function WriteDocumentFieldComponent_ccd_read_document_field_9_Template(rf, ctx)
         i0.ɵɵproperty("caseField", ctx_r2.caseField);
     }
 }
-const _c1$k = function (a0) { return { "form-group-error bottom-30": a0 }; };
+const _c1$l = function (a0) { return { "form-group-error bottom-30": a0 }; };
 class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     constructor(appConfig, caseNotifier, documentManagement, dialog, fileUploadStateService, jurisdictionService) {
         super();
@@ -14408,7 +14492,7 @@ WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$k, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$l, !ctx.valid));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance(1);
@@ -14435,7 +14519,7 @@ WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDocumentFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-document-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fileUploadMessages && !valid\">{{fileUploadMessages | rpxTranslate}}</span>\n\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field *ngIf=\"caseField\" [caseField]=\"caseField\"></ccd-read-document-field>\n  </div>\n\n  <div style='position:relative'>\n\n    <div [id]=\"createElementId('fileInputWrapper')\" (click)=\"fileSelectEvent()\" (keyup)=\"fileSelectEvent()\"></div>\n    <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"file\" (keydown.Tab)=\"fileValidationsOnTab()\" (change)=\"fileChangeEvent($event)\"\n           accept=\"{{caseField.field_type.regular_expression}}\" #fileInput/>\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button class=\"button button-secondary\" type=\"button\" aria-label=\"Cancel upload\" (click)=\"cancelUpload()\" [disabled]=\"!isUploadInProgress()\">{{'Cancel upload' | rpxTranslate}}</button>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-document-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fileUploadMessages && !valid\">{{fileUploadMessages | rpxTranslate}}</span>\n\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field *ngIf=\"caseField\" [caseField]=\"caseField\"></ccd-read-document-field>\n  </div>\n\n  <div style='position:relative'>\n    <div [id]=\"createElementId('fileInputWrapper')\" (click)=\"fileSelectEvent()\" (keyup)=\"fileSelectEvent()\"></div>\n    <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"file\" (keydown.Tab)=\"fileValidationsOnTab()\" (change)=\"fileChangeEvent($event)\"\n           accept=\"{{caseField.field_type.regular_expression}}\" #fileInput/>\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button class=\"button button-secondary\" type=\"button\" aria-label=\"Cancel upload\" (click)=\"cancelUpload()\" [disabled]=\"!isUploadInProgress()\">{{'Cancel upload' | rpxTranslate}}</button>\n</div>\n" }]
         }], function () { return [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: FileUploadStateService }, { type: JurisdictionService }]; }, { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: false }]
@@ -14636,13 +14720,49 @@ class MarkdownComponent {
         this._markdown = _markdown;
         this.router = router;
         this.renderer = renderer;
+        this.renderUrlToTextFeature = true;
     }
     ngOnInit() {
         this.content = this.content.replace(/  \n/g, '<br>');
+        if (this.renderUrlToTextFeature) {
+            this.renderUrlToText();
+        }
+    }
+    onMarkdownClick(event) {
+        // If we don't have an anchor tag, we don't need to do anything.
+        if (event.target instanceof HTMLAnchorElement === false) {
+            return;
+        }
+        return true;
+    }
+    renderUrlToText() {
+        const renderer = new marked.Renderer();
+        renderer.link = (href, title, text) => {
+            if (!text || text === href) {
+                return this.isAllowedUrl(href) ? `<a href="${href}">${href}</a>` : href;
+            }
+            return this.detectMarkdownLinks(this.content) ? `<a href="${href}">${text}</a>` : text;
+        };
+        marked.setOptions({
+            renderer: renderer
+        });
+    }
+    isAllowedUrl(url) {
+        const currentOrigin = window.location.origin;
+        const urlOrigin = new URL(url, window.location.href).origin;
+        return urlOrigin === currentOrigin || url.startsWith('/'); // Check if same origin or relative
+    }
+    detectMarkdownLinks(inputString) {
+        const markdownLinkRegex = /\[([^\]]+)\]\(?([^ )]+)\)/g;
+        return markdownLinkRegex.test(inputString);
     }
 }
 MarkdownComponent.ɵfac = function MarkdownComponent_Factory(t) { return new (t || MarkdownComponent)(i0.ɵɵdirectiveInject(i1$4.NgxMdService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i0.Renderer2)); };
-MarkdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownComponent, selectors: [["ccd-markdown"]], inputs: { content: "content", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink" }, decls: 4, vars: 6, consts: [[1, "markdown", 3, "sanitizeHtml", "data"]], template: function MarkdownComponent_Template(rf, ctx) {
+MarkdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownComponent, selectors: [["ccd-markdown"]], hostBindings: function MarkdownComponent_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("click", function MarkdownComponent_click_HostBindingHandler($event) { return ctx.onMarkdownClick($event); });
+        }
+    }, inputs: { content: "content", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink", renderUrlToTextFeature: "renderUrlToTextFeature" }, decls: 4, vars: 6, consts: [[1, "markdown", 3, "sanitizeHtml", "data"]], template: function MarkdownComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵelement(1, "markdown", 0);
@@ -14663,6 +14783,11 @@ MarkdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownC
                 type: Input
             }], markdownUseHrefAsRouterLink: [{
                 type: Input
+            }], renderUrlToTextFeature: [{
+                type: Input
+            }], onMarkdownClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] });
 })();
 
@@ -14794,7 +14919,7 @@ function WriteDynamicMultiSelectListFieldComponent_ng_container_6_Template(rf, c
         i0.ɵɵadvance(1);
         i0.ɵɵpropertyInterpolate("for", ctx_r3.createElementId(checkbox_r4.code));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("content", checkbox_r4.label);
+        i0.ɵɵproperty("content", checkbox_r4.label)("renderUrlToTextFeature", false);
     }
 }
 const _c0$P = function (a0) { return { "error": a0 }; };
@@ -14859,14 +14984,14 @@ class WriteDynamicMultiSelectListFieldComponent extends AbstractFieldWriteCompon
     }
 }
 WriteDynamicMultiSelectListFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteDynamicMultiSelectListFieldComponent_BaseFactory; return function WriteDynamicMultiSelectListFieldComponent_Factory(t) { return (ɵWriteDynamicMultiSelectListFieldComponent_BaseFactory || (ɵWriteDynamicMultiSelectListFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(WriteDynamicMultiSelectListFieldComponent)))(t || WriteDynamicMultiSelectListFieldComponent); }; }();
-WriteDynamicMultiSelectListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDynamicMultiSelectListFieldComponent, selectors: [["ccd-write-dynamic-multi-select-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 8, consts: [[1, "form-group", "bottom-30", 3, "ngClass", "id"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], [1, "multiple-choice"], ["type", "checkbox", 1, "form-control", 3, "id", "name", "value", "checked", "change"], [1, "form-label", 3, "for"], [3, "content"]], template: function WriteDynamicMultiSelectListFieldComponent_Template(rf, ctx) {
+WriteDynamicMultiSelectListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDynamicMultiSelectListFieldComponent, selectors: [["ccd-write-dynamic-multi-select-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 8, consts: [[1, "form-group", "bottom-30", 3, "ngClass", "id"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], [1, "multiple-choice"], ["type", "checkbox", 1, "form-control", 3, "id", "name", "value", "checked", "change"], [1, "form-label", 3, "for"], [3, "content", "renderUrlToTextFeature"]], template: function WriteDynamicMultiSelectListFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
             i0.ɵɵtemplate(3, WriteDynamicMultiSelectListFieldComponent_span_3_Template, 3, 3, "span", 1);
             i0.ɵɵtemplate(4, WriteDynamicMultiSelectListFieldComponent_span_4_Template, 2, 1, "span", 2);
             i0.ɵɵtemplate(5, WriteDynamicMultiSelectListFieldComponent_span_5_Template, 3, 3, "span", 3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, WriteDynamicMultiSelectListFieldComponent_ng_container_6_Template, 5, 6, "ng-container", 4);
+            i0.ɵɵtemplate(6, WriteDynamicMultiSelectListFieldComponent_ng_container_6_Template, 5, 7, "ng-container", 4);
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
@@ -14884,7 +15009,7 @@ WriteDynamicMultiSelectListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineCom
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDynamicMultiSelectListFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-dynamic-multi-select-list-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'error': !checkboxes.valid && checkboxes.touched}\" [id]=\"id()\">\n\n  <fieldset>\n\n    <legend>\n      <span *ngIf=\"caseField.label\" class=\"form-label\">{{caseField | ccdFieldLabel}}</span>\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text}}</span>\n      <span *ngIf=\"checkboxes.errors && checkboxes.touched\" class=\"error-message\">{{checkboxes.errors |\n        ccdFirstError}}</span>\n    </legend>\n\n    <ng-container *ngFor=\"let checkbox of caseField.list_items\">\n\n      <div class=\"multiple-choice\">\n        <input class=\"form-control\" id=\"{{ createElementId(checkbox.code) }}\" name=\"{{ id() }}\" type=\"checkbox\"\n          [value]=\"checkbox.code\" [checked]=\"isSelected(checkbox.code)\" (change)=\"onCheckChange($event)\">\n        <label class=\"form-label\" for=\"{{ createElementId(checkbox.code) }}\">\n          <ccd-markdown [content]=\"checkbox.label\"></ccd-markdown>\n        </label>\n      </div>\n\n    </ng-container>\n\n  </fieldset>\n\n</div>\n", styles: ["ccd-markdown{display:inline-block}\n"] }]
+            args: [{ selector: 'ccd-write-dynamic-multi-select-list-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'error': !checkboxes.valid && checkboxes.touched}\" [id]=\"id()\">\n\n  <fieldset>\n\n    <legend>\n      <span *ngIf=\"caseField.label\" class=\"form-label\">{{caseField | ccdFieldLabel}}</span>\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text}}</span>\n      <span *ngIf=\"checkboxes.errors && checkboxes.touched\" class=\"error-message\">{{checkboxes.errors |\n        ccdFirstError}}</span>\n    </legend>\n\n    <ng-container *ngFor=\"let checkbox of caseField.list_items\">\n\n      <div class=\"multiple-choice\">\n        <input class=\"form-control\" id=\"{{ createElementId(checkbox.code) }}\" name=\"{{ id() }}\" type=\"checkbox\"\n          [value]=\"checkbox.code\" [checked]=\"isSelected(checkbox.code)\" (change)=\"onCheckChange($event)\">\n        <label class=\"form-label\" for=\"{{ createElementId(checkbox.code) }}\">\n          <ccd-markdown [content]=\"checkbox.label\" [renderUrlToTextFeature]=\"false\"></ccd-markdown>\n        </label>\n      </div>\n\n    </ng-container>\n\n  </fieldset>\n\n</div>\n", styles: ["ccd-markdown{display:inline-block}\n"] }]
         }], null, null);
 })();
 
@@ -15028,7 +15153,7 @@ function WriteDynamicRadioListFieldComponent_div_9_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 7, radioButton_r5.label));
     }
 }
-const _c1$j = function (a0) { return { "form-group-error": a0 }; };
+const _c1$k = function (a0) { return { "form-group-error": a0 }; };
 class WriteDynamicRadioListFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         /**
@@ -15068,7 +15193,7 @@ WriteDynamicRadioListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$j, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$k, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance(1);
@@ -15169,7 +15294,7 @@ function WriteEmailFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$N = function (a0) { return { "form-group-error": a0 }; };
-const _c1$i = function (a0) { return { "govuk-input--error": a0 }; };
+const _c1$j = function (a0) { return { "govuk-input--error": a0 }; };
 class WriteEmailFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         this.emailControl = this.registerControl(new FormControl(this.caseField.value));
@@ -15197,7 +15322,7 @@ WriteEmailFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wr
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.emailControl.errors && (ctx.emailControl.dirty || ctx.emailControl.touched));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$i, ctx.emailControl.errors && (ctx.emailControl.dirty || ctx.emailControl.touched)))("id", ctx.id())("formControl", ctx.emailControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$j, ctx.emailControl.errors && (ctx.emailControl.dirty || ctx.emailControl.touched)))("id", ctx.id())("formControl", ctx.emailControl);
         }
     }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 (function () {
@@ -15452,7 +15577,7 @@ function WriteFixedRadioListFieldComponent_div_8_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 7, radioButton_r4.label));
     }
 }
-const _c1$h = function (a0) { return { "form-group-error": a0 }; };
+const _c1$i = function (a0) { return { "form-group-error": a0 }; };
 class WriteFixedRadioListFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         const notEmpty = this.caseField.value !== null && this.caseField.value !== undefined;
@@ -15474,7 +15599,7 @@ WriteFixedRadioListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$h, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1$i, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance(1);
@@ -15628,7 +15753,7 @@ function WriteJudicialUserFieldComponent_mat_option_11_Template(rf, ctx) {
         i0.ɵɵelementEnd();
     }
 }
-const _c1$g = function (a0) { return { "form-group-error": a0 }; };
+const _c1$h = function (a0) { return { "form-group-error": a0 }; };
 class WriteJudicialUserFieldComponent extends WriteComplexFieldComponent {
     constructor(jurisdictionService, sessionStorageService, caseFlagRefDataService, compoundPipe, validatorsService) {
         super(compoundPipe, validatorsService);
@@ -15781,7 +15906,7 @@ WriteJudicialUserFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ t
         }
         if (rf & 2) {
             const _r3 = i0.ɵɵreference(7);
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c1$g, !!ctx.judicialUserControl && ctx.errors));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c1$h, !!ctx.judicialUserControl && ctx.errors));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance(1);
@@ -16568,7 +16693,7 @@ function LinkCasesComponent_tr_31_span_15_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, reason_r19));
     }
 }
-const _c1$f = function (a0) { return { "table-group-error": a0 }; };
+const _c1$g = function (a0) { return { "table-group-error": a0 }; };
 function LinkCasesComponent_tr_31_Template(rf, ctx) {
     if (rf & 1) {
         const _r21 = i0.ɵɵgetCurrentView();
@@ -16601,7 +16726,7 @@ function LinkCasesComponent_tr_31_Template(rf, ctx) {
         const case_r16 = ctx.$implicit;
         const ctx_r2 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$f, ctx_r2.caseSelectionError && case_r16.caseReference === ctx_r2.linkCaseForm.value.caseNumber));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$g, ctx_r2.caseSelectionError && case_r16.caseReference === ctx_r2.linkCaseForm.value.caseNumber));
         i0.ɵɵadvance(2);
         i0.ɵɵtextInterpolate1("", case_r16.caseName, " ");
         i0.ɵɵadvance(2);
@@ -18688,7 +18813,7 @@ function WriteNumberFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$F = function (a0) { return { "form-group-error": a0 }; };
-const _c1$e = function (a0) { return { "govuk-input--error": a0 }; };
+const _c1$f = function (a0) { return { "govuk-input--error": a0 }; };
 class WriteNumberFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         this.numberControl = this.registerControl(new FormControl(this.caseField.value));
@@ -18716,7 +18841,7 @@ WriteNumberFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: W
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.numberControl.errors && ctx.numberControl.dirty);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$e, ctx.numberControl.errors && ctx.numberControl.dirty))("id", ctx.id())("formControl", ctx.numberControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$f, ctx.numberControl.errors && ctx.numberControl.dirty))("id", ctx.id())("formControl", ctx.numberControl);
         }
     }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NumberValueAccessor, i3.NgControlStatus, i3.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 (function () {
@@ -19432,7 +19557,7 @@ function WritePhoneUKFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$D = function (a0) { return { "form-group-error": a0 }; };
-const _c1$d = function (a0) { return { "govuk-input--error": a0 }; };
+const _c1$e = function (a0) { return { "govuk-input--error": a0 }; };
 class WritePhoneUKFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         this.phoneUkControl = this.registerControl(new FormControl(this.caseField.value));
@@ -19460,7 +19585,7 @@ WritePhoneUKFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.phoneUkControl.errors && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$d, ctx.phoneUkControl.errors && ctx.phoneUkControl.dirty))("id", ctx.id())("formControl", ctx.phoneUkControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$e, ctx.phoneUkControl.errors && ctx.phoneUkControl.dirty))("id", ctx.id())("formControl", ctx.phoneUkControl);
         }
     }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 (function () {
@@ -20990,11 +21115,11 @@ QueryListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryLis
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.queryListData);
         }
-    }, dependencies: [i4.NgForOf, i4.NgIf, i4.DatePipe, i1.RpxTranslatePipe], styles: ["@charset \"UTF-8\";.query-list__row[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]:first-child{padding-left:10px}.query-list__row[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]:last-child{padding-right:10px}.query-list__cell--first[_ngcontent-%COMP%]{width:33%}[aria-sort] button[_ngcontent-%COMP%], [aria-sort] button[_ngcontent-%COMP%]:hover, [aria-sort] button[_ngcontent-%COMP%]:hover, [aria-sort] button[_ngcontent-%COMP%]:hover:hover{background-color:transparent;border-width:0;box-shadow:0 0;color:#000;cursor:pointer;font-family:inherit;font-weight:inherit;padding:0 10px 0 0;position:relative;text-align:inherit;font-size:1em;margin:0}[aria-sort] button[_ngcontent-%COMP%]:focus, [aria-sort] button[_ngcontent-%COMP%]:hover:focus{background-color:#fd0;color:#000;box-shadow:0 -2px #fd0,0 4px #000;outline:none}[aria-sort][_ngcontent-%COMP%]:first-child button{right:auto}[aria-sort] button[_ngcontent-%COMP%]:before{content:\" \\25bc\";position:absolute;right:-1px;top:9px;font-size:.5em}[aria-sort] button[_ngcontent-%COMP%]:after{content:\" \\25b2\";position:absolute;right:-1px;top:1px;font-size:.5em}[aria-sort=ascending] button[_ngcontent-%COMP%]:before, [aria-sort=descending] button[_ngcontent-%COMP%]:before{content:none}[aria-sort=ascending] button[_ngcontent-%COMP%]:after{content:\" \\25b2\";font-size:.8em;position:absolute;right:-5px;top:2px}[aria-sort=descending] button[_ngcontent-%COMP%]:after{content:\" \\25bc\";font-size:.8em;position:absolute;right:-5px;top:2px}"] });
+    }, dependencies: [i4.NgForOf, i4.NgIf, i4.DatePipe, i1.RpxTranslatePipe], styles: ["@charset \"UTF-8\";.query-list__row[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]:first-child{padding-left:10px}.query-list__row[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]:last-child{padding-right:10px}.query-list__cell--first[_ngcontent-%COMP%]{width:33%}[aria-sort] button[_ngcontent-%COMP%], [aria-sort] button[_ngcontent-%COMP%]:hover, [aria-sort] button[_ngcontent-%COMP%]:hover:hover{background-color:transparent;border-width:0;box-shadow:0 0;color:#000;cursor:pointer;font-family:inherit;font-weight:inherit;padding:0 10px 0 0;position:relative;text-align:inherit;font-size:1em;margin:0}[aria-sort] button[_ngcontent-%COMP%]:focus, [aria-sort] button[_ngcontent-%COMP%]:hover:focus{background-color:#fd0;color:#000;box-shadow:0 -2px #fd0,0 4px #000;outline:none}[aria-sort][_ngcontent-%COMP%]:first-child button{right:auto}[aria-sort] button[_ngcontent-%COMP%]:before{content:\" \\25bc\";position:absolute;right:-1px;top:9px;font-size:.5em}[aria-sort] button[_ngcontent-%COMP%]:after{content:\" \\25b2\";position:absolute;right:-1px;top:1px;font-size:.5em}[aria-sort=ascending] button[_ngcontent-%COMP%]:before, [aria-sort=descending] button[_ngcontent-%COMP%]:before{content:none}[aria-sort=ascending] button[_ngcontent-%COMP%]:after{content:\" \\25b2\";font-size:.8em;position:absolute;right:-5px;top:2px}[aria-sort=descending] button[_ngcontent-%COMP%]:after{content:\" \\25bc\";font-size:.8em;position:absolute;right:-5px;top:2px}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryListComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-query-list', template: "<ng-container *ngIf=\"queryListData\">\n  <table class=\"govuk-table query-list__table\">\n    <caption class=\"govuk-table__caption govuk-table__caption--l\">\n      <div>{{ queryListData.partyName }}</div>\n    </caption>\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row query-list__row\">\n        <th scope=\"col\" class=\"govuk-table__header\" [attr.aria-sort]=\"getAriaSortHeaderValue(col)\"\n            *ngFor=\"let col of displayedColumns; let i = index;\">\n          <button type=\"button\" [attr.data-index]=\"i\" aria-sort=\"none\" (click)=\"sortTable(col)\" href=\"javascript:void(0)\">\n            {{ col.displayName | rpxTranslate }}\n          </button>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row query-list__row\"\n        *ngFor=\"let message of queryListData.queries\"\n    >\n      <td class=\"govuk-table__cell query-list__cell query-list__cell--first\">\n        <a href=\"javascript:void(0)\" (click)=\"showDetails(message)\">{{ message.subject }}</a>\n      </td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.lastSubmittedBy }}</td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.lastSubmittedDate | date: 'dd MMM YYYY' }}</td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.lastResponseDate | date: 'dd MMM YYYY' }}</td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.responseStatus | rpxTranslate }}</td>\n    </tr>\n    </tbody>\n  </table>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.query-list__row>*:first-child{padding-left:10px}.query-list__row>*:last-child{padding-right:10px}.query-list__cell--first{width:33%}[aria-sort] button,[aria-sort] button:hover,[aria-sort] button:hover,[aria-sort] button:hover:hover{background-color:transparent;border-width:0;box-shadow:0 0;color:#000;cursor:pointer;font-family:inherit;font-weight:inherit;padding:0 10px 0 0;position:relative;text-align:inherit;font-size:1em;margin:0}[aria-sort] button:focus,[aria-sort] button:hover:focus{background-color:#fd0;color:#000;box-shadow:0 -2px #fd0,0 4px #000;outline:none}[aria-sort]:first-child button{right:auto}[aria-sort] button:before{content:\" \\25bc\";position:absolute;right:-1px;top:9px;font-size:.5em}[aria-sort] button:after{content:\" \\25b2\";position:absolute;right:-1px;top:1px;font-size:.5em}[aria-sort=ascending] button:before,[aria-sort=descending] button:before{content:none}[aria-sort=ascending] button:after{content:\" \\25b2\";font-size:.8em;position:absolute;right:-5px;top:2px}[aria-sort=descending] button:after{content:\" \\25bc\";font-size:.8em;position:absolute;right:-5px;top:2px}\n"] }]
+            args: [{ selector: 'ccd-query-list', template: "<ng-container *ngIf=\"queryListData\">\n  <table class=\"govuk-table query-list__table\">\n    <caption class=\"govuk-table__caption govuk-table__caption--l\">\n      <div>{{ queryListData.partyName }}</div>\n    </caption>\n    <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row query-list__row\">\n        <th scope=\"col\" class=\"govuk-table__header\" [attr.aria-sort]=\"getAriaSortHeaderValue(col)\"\n            *ngFor=\"let col of displayedColumns; let i = index;\">\n          <button type=\"button\" [attr.data-index]=\"i\" aria-sort=\"none\" (click)=\"sortTable(col)\" href=\"javascript:void(0)\">\n            {{ col.displayName | rpxTranslate }}\n          </button>\n        </th>\n      </tr>\n    </thead>\n\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row query-list__row\"\n        *ngFor=\"let message of queryListData.queries\"\n    >\n      <td class=\"govuk-table__cell query-list__cell query-list__cell--first\">\n        <a href=\"javascript:void(0)\" (click)=\"showDetails(message)\">{{ message.subject }}</a>\n      </td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.lastSubmittedBy }}</td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.lastSubmittedDate | date: 'dd MMM YYYY' }}</td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.lastResponseDate | date: 'dd MMM YYYY' }}</td>\n      <td class=\"govuk-table__cell query-list__cell\">{{ message.responseStatus | rpxTranslate }}</td>\n    </tr>\n    </tbody>\n  </table>\n</ng-container>\n", styles: ["@charset \"UTF-8\";.query-list__row>*:first-child{padding-left:10px}.query-list__row>*:last-child{padding-right:10px}.query-list__cell--first{width:33%}[aria-sort] button,[aria-sort] button:hover,[aria-sort] button:hover:hover{background-color:transparent;border-width:0;box-shadow:0 0;color:#000;cursor:pointer;font-family:inherit;font-weight:inherit;padding:0 10px 0 0;position:relative;text-align:inherit;font-size:1em;margin:0}[aria-sort] button:focus,[aria-sort] button:hover:focus{background-color:#fd0;color:#000;box-shadow:0 -2px #fd0,0 4px #000;outline:none}[aria-sort]:first-child button{right:auto}[aria-sort] button:before{content:\" \\25bc\";position:absolute;right:-1px;top:9px;font-size:.5em}[aria-sort] button:after{content:\" \\25b2\";position:absolute;right:-1px;top:1px;font-size:.5em}[aria-sort=ascending] button:before,[aria-sort=descending] button:before{content:none}[aria-sort=ascending] button:after{content:\" \\25b2\";font-size:.8em;position:absolute;right:-5px;top:2px}[aria-sort=descending] button:after{content:\" \\25bc\";font-size:.8em;position:absolute;right:-5px;top:2px}\n"] }]
         }], null, { caseQueriesCollection: [{
                 type: Input
             }], selectedQuery: [{
@@ -21702,7 +21827,7 @@ function WriteTextAreaFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$A = function (a0) { return { "form-group-error": a0 }; };
-const _c1$c = function (a0) { return { "govuk-textarea--error": a0 }; };
+const _c1$d = function (a0) { return { "govuk-textarea--error": a0 }; };
 class WriteTextAreaFieldComponent extends AbstractFieldWriteComponent {
     constructor(browserService) {
         super();
@@ -21742,7 +21867,7 @@ WriteTextAreaFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.textareaControl.errors && (ctx.textareaControl.dirty || ctx.textareaControl.touched));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$c, ctx.textareaControl.errors && (ctx.textareaControl.dirty || ctx.textareaControl.touched)))("id", ctx.id())("formControl", ctx.textareaControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$d, ctx.textareaControl.errors && (ctx.textareaControl.dirty || ctx.textareaControl.touched)))("id", ctx.id())("formControl", ctx.textareaControl);
         }
     }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 (function () {
@@ -21817,7 +21942,7 @@ function WriteTextFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$z = function (a0) { return { "form-group-error": a0 }; };
-const _c1$b = function (a0) { return { "govuk-input--error": a0 }; };
+const _c1$c = function (a0) { return { "govuk-input--error": a0 }; };
 class WriteTextFieldComponent extends AbstractFieldWriteComponent {
     ngOnInit() {
         this.textControl = this.registerControl(new FormControl(this.caseField.value));
@@ -21849,7 +21974,7 @@ WriteTextFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wri
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", (ctx.textControl == null ? null : ctx.textControl.errors) && (ctx.textControl.dirty || ctx.textControl.touched));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$b, (ctx.textControl == null ? null : ctx.textControl.errors) && (ctx.textControl.dirty || ctx.textControl.touched)))("id", ctx.id())("formControl", ctx.textControl);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$c, (ctx.textControl == null ? null : ctx.textControl.errors) && (ctx.textControl.dirty || ctx.textControl.touched)))("id", ctx.id())("formControl", ctx.textControl);
         }
     }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 (function () {
@@ -22056,7 +22181,7 @@ function WriteYesNoFieldComponent_div_7_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(ctx_r3.caseField.label ? i0.ɵɵpipeBind3(4, 8, ctx_r3.caseField.label, null, value_r4) : value_r4);
     }
 }
-const _c1$a = function (a0) { return { "form-group-error": a0 }; };
+const _c1$b = function (a0) { return { "form-group-error": a0 }; };
 class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
     constructor(yesNoService) {
         super();
@@ -22080,7 +22205,7 @@ WriteYesNoFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wr
             i0.ɵɵelementEnd()()();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("id", ctx.id())("ngClass", i0.ɵɵpureFunction1(7, _c1$a, !ctx.yesNoControl.valid && (ctx.yesNoControl.dirty || ctx.yesNoControl.touched)));
+            i0.ɵɵproperty("id", ctx.id())("ngClass", i0.ɵɵpureFunction1(7, _c1$b, !ctx.yesNoControl.valid && (ctx.yesNoControl.dirty || ctx.yesNoControl.touched)));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance(1);
@@ -22478,7 +22603,7 @@ function CaseFileViewFolderSelectorComponent_ng_template_12_ng_container_5_ng_co
         i0.ɵɵelementContainer(0);
     }
 }
-const _c1$9 = function (a0, a1) { return { cat: a0, level: a1 }; };
+const _c1$a = function (a0, a1) { return { cat: a0, level: a1 }; };
 function CaseFileViewFolderSelectorComponent_ng_template_12_ng_container_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
@@ -22491,7 +22616,7 @@ function CaseFileViewFolderSelectorComponent_ng_template_12_ng_container_5_Templ
         i0.ɵɵnextContext();
         const _r1 = i0.ɵɵreference(13);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1$9, subcat_r8, level_r6 + 1));
+        i0.ɵɵproperty("ngTemplateOutlet", _r1)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1$a, subcat_r8, level_r6 + 1));
     }
 }
 function CaseFileViewFolderSelectorComponent_ng_template_12_Template(rf, ctx) {
@@ -22683,7 +22808,7 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_Template(rf, ctx) {
     }
 }
 const _c0$t = [[["", "trigger", ""]]];
-const _c1$8 = ["[trigger]"];
+const _c1$9 = ["[trigger]"];
 class CaseFileViewOverlayMenuComponent {
     constructor() {
         this.title = '';
@@ -22697,7 +22822,7 @@ class CaseFileViewOverlayMenuComponent {
     }
 }
 CaseFileViewOverlayMenuComponent.ɵfac = function CaseFileViewOverlayMenuComponent_Factory(t) { return new (t || CaseFileViewOverlayMenuComponent)(); };
-CaseFileViewOverlayMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewOverlayMenuComponent, selectors: [["ccd-case-file-view-overlay-menu"]], inputs: { title: "title", menuItems: "menuItems", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngContentSelectors: _c1$8, decls: 5, vars: 4, consts: [["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["trigger", "cdkOverlayOrigin"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass", "backdropClick"], [1, "overlay-menu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlay-menu__title"], [1, "overlay-menu__item", 3, "click"], ["class", "overlay-menu__itemIcon", 3, "src", "alt", 4, "ngIf"], [1, "overlay-menu__actionText"], [1, "overlay-menu__itemIcon", 3, "src", "alt"]], template: function CaseFileViewOverlayMenuComponent_Template(rf, ctx) {
+CaseFileViewOverlayMenuComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewOverlayMenuComponent, selectors: [["ccd-case-file-view-overlay-menu"]], inputs: { title: "title", menuItems: "menuItems", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngContentSelectors: _c1$9, decls: 5, vars: 4, consts: [["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["trigger", "cdkOverlayOrigin"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass", "backdropClick"], [1, "overlay-menu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlay-menu__title"], [1, "overlay-menu__item", 3, "click"], ["class", "overlay-menu__itemIcon", 3, "src", "alt", 4, "ngIf"], [1, "overlay-menu__actionText"], [1, "overlay-menu__itemIcon", 3, "src", "alt"]], template: function CaseFileViewOverlayMenuComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵprojectionDef(_c0$t);
             i0.ɵɵelementStart(0, "div")(1, "button", 0, 1);
@@ -24960,7 +25085,7 @@ function SelectFlagTypeComponent_ng_container_0_div_11_div_8_Template(rf, ctx) {
     }
 }
 const _c0$o = function (a0) { return { "form-group-error": a0 }; };
-const _c1$7 = function (a0) { return { "govuk-input--error": a0 }; };
+const _c1$8 = function (a0) { return { "govuk-input--error": a0 }; };
 function SelectFlagTypeComponent_ng_container_0_div_11_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 18)(1, "div", 3)(2, "label", 19);
@@ -24982,7 +25107,7 @@ function SelectFlagTypeComponent_ng_container_0_div_11_Template(rf, ctx) {
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", ctx_r7.flagTypeErrorMessage.length > 0);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c1$7, ctx_r7.flagTypeErrorMessage.length > 0))("name", ctx_r7.caseFlagFormField.OTHER_FLAG_DESCRIPTION)("formControlName", ctx_r7.caseFlagFormField.OTHER_FLAG_DESCRIPTION);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c1$8, ctx_r7.flagTypeErrorMessage.length > 0))("name", ctx_r7.caseFlagFormField.OTHER_FLAG_DESCRIPTION)("formControlName", ctx_r7.caseFlagFormField.OTHER_FLAG_DESCRIPTION);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !ctx_r7.isDisplayContextParameterExternal && !ctx_r7.isCaseLevelFlag && ctx_r7.isDisplayContextParameter2Point1Enabled);
     }
@@ -25552,7 +25677,7 @@ function UpdateFlagComponent_div_22_Template(rf, ctx) {
         i0.ɵɵproperty("ngIf", ctx_r9.selectedFlag.flagDetailDisplay.flagDetail.status === "Active");
     }
 }
-const _c1$6 = function (a0) { return { "form-group-error": a0 }; };
+const _c1$7 = function (a0) { return { "form-group-error": a0 }; };
 class UpdateFlagComponent {
     constructor(rpxTranslationService) {
         this.rpxTranslationService = rpxTranslationService;
@@ -25761,7 +25886,7 @@ UpdateFlagComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateF
             const _r3 = i0.ɵɵreference(17);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c1$6, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c1$7, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 13, ctx.updateFlagTitle), " ");
             i0.ɵɵadvance(2);
@@ -27157,7 +27282,7 @@ const CUSTOM_MOMENT_FORMATS = {
 };
 
 const _c0$h = ["picker"];
-const _c1$5 = ["input"];
+const _c1$6 = ["input"];
 function DatetimePickerComponent_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 11);
@@ -27221,7 +27346,7 @@ function DatetimePickerComponent_span_7_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "This date is later than the maximum date allowed"));
     }
 }
-const _c2$1 = function (a0) { return { "form-group-error": a0 }; };
+const _c2$2 = function (a0) { return { "form-group-error": a0 }; };
 class DatetimePickerComponent extends AbstractFormFieldComponent {
     constructor(formatTranslationService, ngxMatDateFormats) {
         super();
@@ -27387,7 +27512,7 @@ DatetimePickerComponent.ɵfac = function DatetimePickerComponent_Factory(t) { re
 DatetimePickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatetimePickerComponent, selectors: [["ccd-datetime-picker"]], viewQuery: function DatetimePickerComponent_Query(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵviewQuery(_c0$h, 5);
-            i0.ɵɵviewQuery(_c1$5, 5);
+            i0.ɵɵviewQuery(_c1$6, 5);
         }
         if (rf & 2) {
             let _t;
@@ -27423,7 +27548,7 @@ DatetimePickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dat
         }
         if (rf & 2) {
             const _r6 = i0.ɵɵreference(13);
-            i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(24, _c2$1, ctx.dateControl && !ctx.dateControl.valid && ctx.dateControl.dirty));
+            i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(24, _c2$2, ctx.dateControl && !ctx.dateControl.valid && ctx.dateControl.dirty));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance(1);
@@ -27677,7 +27802,7 @@ function EventLogTableComponent_tr_20_div_6_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(ctx_r5.getSignificantItemDesc(event_r1));
     }
 }
-const _c1$4 = function (a0) { return { "EventLogTable-Selected": a0 }; };
+const _c1$5 = function (a0) { return { "EventLogTable-Selected": a0 }; };
 function EventLogTableComponent_tr_20_Template(rf, ctx) {
     if (rf & 1) {
         const _r18 = i0.ɵɵgetCurrentView();
@@ -27710,7 +27835,7 @@ function EventLogTableComponent_tr_20_Template(rf, ctx) {
     if (rf & 2) {
         const event_r1 = ctx.$implicit;
         const ctx_r0 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c1$4, ctx_r0.selected === event_r1));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c1$5, ctx_r0.selected === event_r1));
         i0.ɵɵattribute("aria-label", ctx_r0.getAriaLabelforRow(event_r1));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngSwitch", ctx_r0.isPartOfCaseTimeline);
@@ -29810,6 +29935,36 @@ function CaseEditSubmitComponent_div_0_ng_container_13_Template(rf, ctx) {
         i0.ɵɵproperty("ngForOf", ctx_r8.showSummaryFields);
     }
 }
+function CaseEditSubmitComponent_div_0_ng_container_14_span_8_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span", 48);
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "rpxTranslate");
+        i0.ɵɵpipe(3, "ccdFirstError");
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r36 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind2(3, 3, ctx_r36.summary.errors, ctx_r36.eventSummaryLabel)), " ");
+    }
+}
+function CaseEditSubmitComponent_div_0_ng_container_14_span_13_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelementStart(0, "span", 48);
+        i0.ɵɵtext(1);
+        i0.ɵɵpipe(2, "rpxTranslate");
+        i0.ɵɵpipe(3, "ccdFirstError");
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const ctx_r37 = i0.ɵɵnextContext(3);
+        i0.ɵɵadvance(1);
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind2(3, 3, ctx_r37.description.errors, ctx_r37.eventDescriptionLabel)), " ");
+    }
+}
+const _c1$4 = function (a0) { return { "form-group-error": a0 }; };
+const _c2$1 = function (a0) { return { "govuk-input--error": a0 }; };
 function CaseEditSubmitComponent_div_0_ng_container_14_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
@@ -29820,21 +29975,38 @@ function CaseEditSubmitComponent_div_0_ng_container_14_Template(rf, ctx) {
         i0.ɵɵelementStart(6, "span", 43);
         i0.ɵɵtext(7, "A few words describing the purpose of the event.");
         i0.ɵɵelementEnd()();
-        i0.ɵɵelement(8, "input", 44);
+        i0.ɵɵtemplate(8, CaseEditSubmitComponent_div_0_ng_container_14_span_8_Template, 4, 6, "span", 44);
+        i0.ɵɵelement(9, "input", 45);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(9, "div", 41)(10, "label", 45);
-        i0.ɵɵtext(11, "Event description (optional)");
+        i0.ɵɵelementStart(10, "div", 41)(11, "label", 46);
+        i0.ɵɵtext(12, "Event description (optional)");
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(12, "textarea", 46);
+        i0.ɵɵtemplate(13, CaseEditSubmitComponent_div_0_ng_container_14_span_13_Template, 4, 6, "span", 44);
+        i0.ɵɵelement(14, "textarea", 47);
         i0.ɵɵelementEnd()();
         i0.ɵɵelementContainerEnd();
     }
+    if (rf & 2) {
+        const ctx_r9 = i0.ɵɵnextContext(2);
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c1$4, !!ctx_r9.summary && !ctx_r9.summary.valid && (ctx_r9.summary.dirty || ctx_r9.summary.touched)));
+        i0.ɵɵadvance(5);
+        i0.ɵɵproperty("ngIf", (ctx_r9.summary == null ? null : ctx_r9.summary.errors) && (ctx_r9.summary.dirty || ctx_r9.summary.touched));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c2$1, (ctx_r9.summary == null ? null : ctx_r9.summary.errors) && (ctx_r9.summary.dirty || ctx_r9.summary.touched)));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c1$4, !!ctx_r9.description && !ctx_r9.description.valid && (ctx_r9.description.dirty || ctx_r9.description.touched)));
+        i0.ɵɵadvance(3);
+        i0.ɵɵproperty("ngIf", (ctx_r9.description == null ? null : ctx_r9.description.errors) && (ctx_r9.description.dirty || ctx_r9.description.touched));
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c2$1, (ctx_r9.description == null ? null : ctx_r9.description.errors) && (ctx_r9.description.dirty || ctx_r9.description.touched)));
+    }
 }
 function CaseEditSubmitComponent_div_0_button_16_Template(rf, ctx) {
     if (rf & 1) {
-        const _r37 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 47);
-        i0.ɵɵlistener("click", function CaseEditSubmitComponent_div_0_button_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r36 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r36.previous()); });
+        const _r39 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 49);
+        i0.ɵɵlistener("click", function CaseEditSubmitComponent_div_0_button_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r39); const ctx_r38 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r38.previous()); });
         i0.ɵɵtext(1);
         i0.ɵɵpipe(2, "rpxTranslate");
         i0.ɵɵelementEnd();
@@ -29848,7 +30020,7 @@ function CaseEditSubmitComponent_div_0_button_16_Template(rf, ctx) {
 }
 function CaseEditSubmitComponent_div_0_Template(rf, ctx) {
     if (rf & 1) {
-        const _r39 = i0.ɵɵgetCurrentView();
+        const _r41 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div")(1, "h1", 2);
         i0.ɵɵtext(2);
         i0.ɵɵpipe(3, "rpxTranslate");
@@ -29858,13 +30030,13 @@ function CaseEditSubmitComponent_div_0_Template(rf, ctx) {
         i0.ɵɵtemplate(7, CaseEditSubmitComponent_div_0_ng_template_7_Template, 1, 1, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor);
         i0.ɵɵelement(9, "ccd-case-edit-generic-errors", 6);
         i0.ɵɵelementStart(10, "ccd-callback-errors", 7);
-        i0.ɵɵlistener("callbackErrorsContext", function CaseEditSubmitComponent_div_0_Template_ccd_callback_errors_callbackErrorsContext_10_listener($event) { i0.ɵɵrestoreView(_r39); const ctx_r38 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r38.callbackErrorsNotify($event)); });
+        i0.ɵɵlistener("callbackErrorsContext", function CaseEditSubmitComponent_div_0_Template_ccd_callback_errors_callbackErrorsContext_10_listener($event) { i0.ɵɵrestoreView(_r41); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.callbackErrorsNotify($event)); });
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(11, "form", 8);
-        i0.ɵɵlistener("submit", function CaseEditSubmitComponent_div_0_Template_form_submit_11_listener() { i0.ɵɵrestoreView(_r39); const ctx_r40 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r40.submit()); });
+        i0.ɵɵlistener("submit", function CaseEditSubmitComponent_div_0_Template_form_submit_11_listener() { i0.ɵɵrestoreView(_r41); const ctx_r42 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r42.submit()); });
         i0.ɵɵtemplate(12, CaseEditSubmitComponent_div_0_ng_container_12_Template, 8, 5, "ng-container", 0);
         i0.ɵɵtemplate(13, CaseEditSubmitComponent_div_0_ng_container_13_Template, 4, 1, "ng-container", 0);
-        i0.ɵɵtemplate(14, CaseEditSubmitComponent_div_0_ng_container_14_Template, 13, 0, "ng-container", 0);
+        i0.ɵɵtemplate(14, CaseEditSubmitComponent_div_0_ng_container_14_Template, 15, 14, "ng-container", 0);
         i0.ɵɵelementStart(15, "div", 9);
         i0.ɵɵtemplate(16, CaseEditSubmitComponent_div_0_button_16_Template, 3, 4, "button", 10);
         i0.ɵɵelementStart(17, "button", 11);
@@ -29872,7 +30044,7 @@ function CaseEditSubmitComponent_div_0_Template(rf, ctx) {
         i0.ɵɵpipe(19, "rpxTranslate");
         i0.ɵɵelementEnd()();
         i0.ɵɵelementStart(20, "p", 12)(21, "a", 13);
-        i0.ɵɵlistener("click", function CaseEditSubmitComponent_div_0_Template_a_click_21_listener() { i0.ɵɵrestoreView(_r39); const ctx_r41 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r41.cancel()); });
+        i0.ɵɵlistener("click", function CaseEditSubmitComponent_div_0_Template_a_click_21_listener() { i0.ɵɵrestoreView(_r41); const ctx_r43 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r43.cancel()); });
         i0.ɵɵtext(22);
         i0.ɵɵpipe(23, "rpxTranslate");
         i0.ɵɵelementEnd()()()();
@@ -29911,9 +30083,9 @@ function CaseEditSubmitComponent_div_0_Template(rf, ctx) {
 }
 function CaseEditSubmitComponent_ccd_case_event_completion_1_Template(rf, ctx) {
     if (rf & 1) {
-        const _r43 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "ccd-case-event-completion", 48);
-        i0.ɵɵlistener("eventCanBeCompleted", function CaseEditSubmitComponent_ccd_case_event_completion_1_Template_ccd_case_event_completion_eventCanBeCompleted_0_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r42 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r42.onEventCanBeCompleted($event)); });
+        const _r45 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "ccd-case-event-completion", 50);
+        i0.ɵɵlistener("eventCanBeCompleted", function CaseEditSubmitComponent_ccd_case_event_completion_1_Template_ccd_case_event_completion_eventCanBeCompleted_0_listener($event) { i0.ɵɵrestoreView(_r45); const ctx_r44 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r44.onEventCanBeCompleted($event)); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -29923,14 +30095,17 @@ function CaseEditSubmitComponent_ccd_case_event_completion_1_Template(rf, ctx) {
 }
 // @dynamic
 class CaseEditSubmitComponent {
-    constructor(caseEdit, fieldsUtils, caseFieldService, route, orderService, profileNotifier) {
+    constructor(caseEdit, fieldsUtils, caseFieldService, route, orderService, profileNotifier, formValidatorsService) {
         this.caseEdit = caseEdit;
         this.fieldsUtils = fieldsUtils;
         this.caseFieldService = caseFieldService;
         this.route = route;
         this.orderService = orderService;
         this.profileNotifier = profileNotifier;
+        this.formValidatorsService = formValidatorsService;
         this.paletteContext = PaletteContext.CHECK_YOUR_ANSWER;
+        this.eventSummaryLabel = 'Event summary';
+        this.eventDescriptionLabel = 'Event description';
     }
     get isDisabled() {
         // EUI-3452.
@@ -29941,7 +30116,7 @@ class CaseEditSubmitComponent {
     }
     ngOnInit() {
         var _a, _b, _c;
-        this.profileSubscription = this.profileNotifier.profile.subscribe(_ => this.profile = _);
+        this.profileSubscription = this.profileNotifier.profile.subscribe((_) => this.profile = _);
         this.eventTrigger = this.caseEdit.eventTrigger;
         this.triggerText = this.eventTrigger.end_button_label || CallbackErrorsComponent.TRIGGER_TEXT_SUBMIT;
         this.editForm = this.caseEdit.form;
@@ -29954,10 +30129,12 @@ class CaseEditSubmitComponent {
         // Indicates if the submission is for a Case Flag, as opposed to a "regular" form submission, by the presence of
         // a FlagLauncher field in the event trigger
         this.caseEdit.isCaseFlagSubmission =
-            this.eventTrigger.case_fields.some(caseField => FieldsUtils.isCaseFieldOfType(caseField, ['FlagLauncher']));
+            this.eventTrigger.case_fields.some((caseField) => FieldsUtils.isCaseFieldOfType(caseField, ['FlagLauncher']));
         this.caseEdit.isLinkedCasesSubmission =
             this.eventTrigger.case_fields.some(caseField => FieldsUtils.isCaseFieldOfType(caseField, ['ComponentLauncher']));
         this.pageTitle = this.getPageTitle();
+        this.summary = this.formValidatorsService.addMarkDownValidators(this.editForm, 'event.summary');
+        this.description = this.formValidatorsService.addMarkDownValidators(this.editForm, 'event.description');
     }
     ngOnDestroy() {
         /* istanbul ignore else */
@@ -29966,12 +30143,14 @@ class CaseEditSubmitComponent {
         }
     }
     submit() {
-        this.caseEdit.submitForm({
-            eventTrigger: this.eventTrigger,
-            form: this.editForm,
-            submit: this.caseEdit.submit,
-            caseDetails: this.caseEdit.caseDetails,
-        });
+        if (this.summary.valid && this.description.valid) {
+            this.caseEdit.submitForm({
+                eventTrigger: this.eventTrigger,
+                form: this.editForm,
+                submit: this.caseEdit.submit,
+                caseDetails: this.caseEdit.caseDetails
+            });
+        }
     }
     onEventCanBeCompleted(eventCanBeCompleted) {
         this.caseEdit.onEventCanBeCompleted({
@@ -29979,7 +30158,7 @@ class CaseEditSubmitComponent {
             eventCanBeCompleted,
             caseDetails: this.caseEdit.caseDetails,
             form: this.editForm,
-            submit: this.caseEdit.submit,
+            submit: this.caseEdit.submit
         });
     }
     getPageTitle() {
@@ -30055,7 +30234,7 @@ class CaseEditSubmitComponent {
         }
     }
     readOnlySummaryFieldsToDisplayExists() {
-        return this.eventTrigger.case_fields.some(field => field.show_summary_content_option >= 0);
+        return this.eventTrigger.case_fields.some((field) => field.show_summary_content_option >= 0);
     }
     showEventNotes() {
         var _a;
@@ -30071,7 +30250,7 @@ class CaseEditSubmitComponent {
     }
     getLastPageShown() {
         let lastPage;
-        this.wizard.reverse().forEach(page => {
+        this.wizard.reverse().forEach((page) => {
             if (!lastPage && this.isShown(page)) {
                 lastPage = page;
             }
@@ -30090,7 +30269,7 @@ class CaseEditSubmitComponent {
     }
     isShown(page) {
         const fields = this.fieldsUtils
-            .mergeCaseFieldsAndFormFields(this.eventTrigger.case_fields, this.editForm.controls['data'].value);
+            .mergeCaseFieldsAndFormFields(this.eventTrigger.case_fields, this.editForm.controls.data.value);
         return page.parsedShowCondition.match(fields);
     }
     canShowFieldInCYA(field) {
@@ -30099,7 +30278,7 @@ class CaseEditSubmitComponent {
     sortFieldsByShowSummaryContent(fields) {
         return this.orderService
             .sort(fields, CaseEditSubmitComponent.SHOW_SUMMARY_CONTENT_COMPARE_FUNCTION)
-            .filter(cf => cf.show_summary_content_option);
+            .filter((cf) => cf.show_summary_content_option);
     }
     getCaseFields() {
         if (this.caseEdit.caseDetails) {
@@ -30118,9 +30297,7 @@ class CaseEditSubmitComponent {
         if (this.eventTrigger.can_save_draft) {
             return 'Return to case list';
         }
-        else {
-            return 'Cancel';
-        }
+        return 'Cancel';
     }
 }
 CaseEditSubmitComponent.SHOW_SUMMARY_CONTENT_COMPARE_FUNCTION = (a, b) => {
@@ -30134,8 +30311,8 @@ CaseEditSubmitComponent.SHOW_SUMMARY_CONTENT_COMPARE_FUNCTION = (a, b) => {
     }
     return a.show_summary_content_option - b.show_summary_content_option;
 };
-CaseEditSubmitComponent.ɵfac = function CaseEditSubmitComponent_Factory(t) { return new (t || CaseEditSubmitComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(ProfileNotifier)); };
-CaseEditSubmitComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditSubmitComponent, selectors: [["ccd-case-edit-submit"]], decls: 2, vars: 2, consts: [[4, "ngIf"], [3, "eventCompletionParams", "eventCanBeCompleted", 4, "ngIf"], [1, "govuk-heading-l"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["titleBlock", ""], ["idBlock", ""], [3, "error"], [3, "callbackErrorsSubject", "callbackErrorsContext"], [1, "check-your-answers", 3, "formGroup", "submit"], [1, "form-group", "form-group-related"], ["class", "button button-secondary", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["type", "submit", 1, "button", 3, "disabled"], [1, "cancel"], ["href", "javascript:void(0)", 3, "click"], [3, "content"], ["class", "heading-h2", 4, "ngIf"], [1, "heading-h2"], ["class", "text-16", 4, "ngIf"], ["aria-describedby", "check your answers table", 1, "form-table"], [4, "ngFor", "ngForOf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "hidden", "formGroup", "contextFields"], ["class", "valign-top case-field-label", 4, "ngIf"], [1, "form-cell", "case-field-content"], [3, "formGroup", "topLevelFormGroup", "caseField", "context", "caseFields"], [1, "valign-top", "case-field-label"], [1, "valign-top", "check-your-answers__change", "case-field-change"], ["href", "javascript:void(0)", 3, "click", 4, "ngIf"], ["aria-describedby", "summary fields table", 1, "summary-fields"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields", 4, "ngSwitchCase"], ["class", "compound-field", "ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields"], ["id", "summary-field-label"], [1, "form-cell"], [3, "formGroup", "caseField"], ["ccdLabelSubstitutor", "", 1, "compound-field", 3, "caseField", "formGroup", "contextFields"], ["colspan", "2"], [3, "formGroup", "caseField", "caseFields"], ["id", "fieldset-event", "formGroupName", "event"], [2, "display", "none"], [1, "form-group"], ["for", "field-trigger-summary", 1, "form-label"], [1, "form-hint"], ["type", "text", "id", "field-trigger-summary", "formControlName", "summary", "maxlength", "1024", 1, "form-control", "bottom-30", "width-50"], ["for", "field-trigger-description", 1, "form-label"], ["id", "field-trigger-description", "formControlName", "description", "maxlength", "65536", 1, "form-control", "bottom-30", "width-50"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], [3, "eventCompletionParams", "eventCanBeCompleted"]], template: function CaseEditSubmitComponent_Template(rf, ctx) {
+CaseEditSubmitComponent.ɵfac = function CaseEditSubmitComponent_Factory(t) { return new (t || CaseEditSubmitComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(ProfileNotifier), i0.ɵɵdirectiveInject(FormValidatorsService)); };
+CaseEditSubmitComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditSubmitComponent, selectors: [["ccd-case-edit-submit"]], decls: 2, vars: 2, consts: [[4, "ngIf"], [3, "eventCompletionParams", "eventCanBeCompleted", 4, "ngIf"], [1, "govuk-heading-l"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["titleBlock", ""], ["idBlock", ""], [3, "error"], [3, "callbackErrorsSubject", "callbackErrorsContext"], [1, "check-your-answers", 3, "formGroup", "submit"], [1, "form-group", "form-group-related"], ["class", "button button-secondary", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["type", "submit", 1, "button", 3, "disabled"], [1, "cancel"], ["href", "javascript:void(0)", 3, "click"], [3, "content"], ["class", "heading-h2", 4, "ngIf"], [1, "heading-h2"], ["class", "text-16", 4, "ngIf"], ["aria-describedby", "check your answers table", 1, "form-table"], [4, "ngFor", "ngForOf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "hidden", "formGroup", "contextFields"], ["class", "valign-top case-field-label", 4, "ngIf"], [1, "form-cell", "case-field-content"], [3, "formGroup", "topLevelFormGroup", "caseField", "context", "caseFields"], [1, "valign-top", "case-field-label"], [1, "valign-top", "check-your-answers__change", "case-field-change"], ["href", "javascript:void(0)", 3, "click", 4, "ngIf"], ["aria-describedby", "summary fields table", 1, "summary-fields"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields", 4, "ngSwitchCase"], ["class", "compound-field", "ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields"], ["id", "summary-field-label"], [1, "form-cell"], [3, "formGroup", "caseField"], ["ccdLabelSubstitutor", "", 1, "compound-field", 3, "caseField", "formGroup", "contextFields"], ["colspan", "2"], [3, "formGroup", "caseField", "caseFields"], ["id", "fieldset-event", "formGroupName", "event"], [2, "display", "none"], [1, "form-group", 3, "ngClass"], ["for", "field-trigger-summary", 1, "form-label"], [1, "form-hint"], ["class", "error-message", 4, "ngIf"], ["type", "text", "id", "field-trigger-summary", "formControlName", "summary", "maxlength", "1024", 1, "form-control", "bottom-30", "width-50", 3, "ngClass"], ["for", "field-trigger-description", 1, "form-label"], ["id", "field-trigger-description", "formControlName", "description", "maxlength", "65536", 1, "form-control", "bottom-30", "width-50", 3, "ngClass"], [1, "error-message"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], [3, "eventCompletionParams", "eventCanBeCompleted"]], template: function CaseEditSubmitComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵtemplate(0, CaseEditSubmitComponent_div_0_Template, 24, 22, "div", 0);
             i0.ɵɵtemplate(1, CaseEditSubmitComponent_ccd_case_event_completion_1_Template, 1, 1, "ccd-case-event-completion", 1);
@@ -30149,8 +30326,8 @@ CaseEditSubmitComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cas
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEditSubmitComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-case-edit-submit', template: "<div *ngIf=\"!caseEdit.isEventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</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  <ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n  <ccd-callback-errors [callbackErrorsSubject]=\"caseEdit.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\">{{pageTitle | rpxTranslate }}</h2>\n      <span class=\"text-16\" *ngIf=\"!caseEdit.isCaseFlagSubmission\">{{'Check the information below carefully.' | rpxTranslate}}</span>\n\n      <table class=\"form-table\" aria-describedby=\"check your answers table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm\n            | ccdReadFieldsFilter: false :undefined :true :allFieldsValues\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) && !caseEdit.isCaseFlagSubmission\" class=\"valign-top case-field-label\">\n                    <span class=\"text-16\">{{field.label | rpxTranslate}}</span>\n                  </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                  <ng-container *ngIf=\"!caseEdit.isCaseFlagSubmission\">\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)\">\n                        <span class=\"text-16\" attr.aria-label=\"{{'Change' | rpxTranslate}} {{ field.label | rpxTranslate }}\">\n                          {{'Change' | rpxTranslate}}\n                        </span>\n                      </a>\n                    </td>\n                  </ng-container>\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\" aria-describedby=\"summary fields table\">\n        <tbody>\n          <ng-container *ngFor=\"let field of showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th id=\"summary-field-label\">{{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\">\n        <legend style=\"display: none;\"></legend>\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 *ngIf=\"!caseEdit.isCaseFlagSubmission\" class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || caseEdit.isSubmitting\" (click)=\"previous()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">\n        {{triggerText | rpxTranslate}}\n      </button>\n    </div>\n    <p class=\"cancel\">\n      <a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"caseEdit.isSubmitting\">{{getCancelText() | rpxTranslate}}</a>\n    </p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: ["#fieldset-case-data{margin-bottom:30px}#fieldset-case-data th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}#confirmation-header{width:630px;background-color:#17958b;border:solid 1px #979797;color:#fff;text-align:center}#confirmation-body{width:630px;background-color:#fff}.valign-top{vertical-align:top}.summary-fields{margin-bottom:30px}.summary-fields tbody tr th,.summary-fields tbody tr td{border-bottom:0px}a.disabled{pointer-events:none;cursor:default}.case-field-label{width:45%}.case-field-content{width:50%}.no-bottom-border{border-bottom:none}.case-field-change{width:5%}\n"] }]
-        }], function () { return [{ type: CaseEditComponent }, { type: FieldsUtils }, { type: CaseFieldService }, { type: i1$1.ActivatedRoute }, { type: OrderService }, { type: ProfileNotifier }]; }, null);
+            args: [{ selector: 'ccd-case-edit-submit', template: "<div *ngIf=\"!caseEdit.isEventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</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  <ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n  <ccd-callback-errors [callbackErrorsSubject]=\"caseEdit.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\">{{pageTitle | rpxTranslate }}</h2>\n      <span class=\"text-16\" *ngIf=\"!caseEdit.isCaseFlagSubmission\">{{'Check the information below carefully.' | rpxTranslate}}</span>\n\n      <table class=\"form-table\" aria-describedby=\"check your answers table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm\n            | ccdReadFieldsFilter: false :undefined :true :allFieldsValues\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) && !caseEdit.isCaseFlagSubmission\" class=\"valign-top case-field-label\">\n                    <span class=\"text-16\">{{field.label | rpxTranslate}}</span>\n                  </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                  <ng-container *ngIf=\"!caseEdit.isCaseFlagSubmission\">\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)\">\n                        <span class=\"text-16\" attr.aria-label=\"{{'Change' | rpxTranslate}} {{ field.label | rpxTranslate }}\">\n                          {{'Change' | rpxTranslate}}\n                        </span>\n                      </a>\n                    </td>\n                  </ng-container>\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\" aria-describedby=\"summary fields table\">\n        <tbody>\n          <ng-container *ngFor=\"let field of showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th id=\"summary-field-label\">{{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\">\n        <legend style=\"display: none;\"></legend>\n        <div class=\"form-group\" [ngClass]=\"{'form-group-error': !!summary && !summary.valid && (summary.dirty || summary.touched)}\">\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          <span class=\"error-message\" *ngIf=\"summary?.errors && (summary.dirty || summary.touched)\">\n            {{summary.errors | ccdFirstError: eventSummaryLabel | rpxTranslate}}\n          </span>\n          <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\"\n            [ngClass]=\"{'govuk-input--error': summary?.errors && (summary.dirty || summary.touched)}\" formControlName=\"summary\" maxlength=\"1024\">\n        </div>\n        <div class=\"form-group\" [ngClass]=\"{'form-group-error': !!description && !description.valid && (description.dirty || description.touched)}\">\n          <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n          <span class=\"error-message\" *ngIf=\"description?.errors && (description.dirty || description.touched)\">\n            {{description.errors | ccdFirstError: eventDescriptionLabel | rpxTranslate}}\n          </span>\n          <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n            [ngClass]=\"{'govuk-input--error': description?.errors && (description.dirty || description.touched)}\" maxlength=\"65536\"></textarea>\n        </div>\n      </fieldset>\n    </ng-container>\n    <div class=\"form-group form-group-related\">\n      <button *ngIf=\"!caseEdit.isCaseFlagSubmission\" class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || caseEdit.isSubmitting\" (click)=\"previous()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">\n        {{triggerText | rpxTranslate}}\n      </button>\n    </div>\n    <p class=\"cancel\">\n      <a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"caseEdit.isSubmitting\">{{getCancelText() | rpxTranslate}}</a>\n    </p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: ["#fieldset-case-data{margin-bottom:30px}#fieldset-case-data th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}#confirmation-header{width:630px;background-color:#17958b;border:solid 1px #979797;color:#fff;text-align:center}#confirmation-body{width:630px;background-color:#fff}.valign-top{vertical-align:top}.summary-fields{margin-bottom:30px}.summary-fields tbody tr th,.summary-fields tbody tr td{border-bottom:0px}a.disabled{pointer-events:none;cursor:default}.case-field-label{width:45%}.case-field-content{width:50%}.no-bottom-border{border-bottom:none}.case-field-change{width:5%}\n"] }]
+        }], function () { return [{ type: CaseEditComponent }, { type: FieldsUtils }, { type: CaseFieldService }, { type: i1$1.ActivatedRoute }, { type: OrderService }, { type: ProfileNotifier }, { type: FormValidatorsService }]; }, null);
 })();
 
 function CaseProgressComponent_div_0_Template(rf, ctx) {
@@ -30548,7 +30725,7 @@ i0.ɵɵsetComponentScope(CaseEditPageComponent, function () {
         CaseEditGenericErrorsComponent];
 }, function () { return [i4.AsyncPipe, CaseReferencePipe, CcdCaseTitlePipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseEditFormComponent, function () { return [i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i3.NgControlStatusGroup, i3.FormGroupDirective, LabelSubstitutorDirective, ConditionalShowFormDirective, FieldReadComponent, FieldWriteComponent]; }, function () { return [IsCompoundPipe, IsReadOnlyAndNotCollectionPipe]; });
-i0.ɵɵsetComponentScope(CaseEditSubmitComponent, function () { return [i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i3.ɵNgNoValidate, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.MaxLengthValidator, i3.FormGroupDirective, i3.FormControlName, i3.FormGroupName, LabelSubstitutorDirective, CallbackErrorsComponent, MarkdownComponent, FieldReadComponent, CaseEventCompletionComponent, CaseEditGenericErrorsComponent]; }, function () { return [IsCompoundPipe, CaseReferencePipe, CcdCaseTitlePipe, CcdCYAPageLabelFilterPipe, ReadFieldsFilterPipe, CcdPageFieldsPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(CaseEditSubmitComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i3.ɵNgNoValidate, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.MaxLengthValidator, i3.FormGroupDirective, i3.FormControlName, i3.FormGroupName, LabelSubstitutorDirective, CallbackErrorsComponent, MarkdownComponent, FieldReadComponent, CaseEventCompletionComponent, CaseEditGenericErrorsComponent]; }, function () { return [FirstErrorPipe, IsCompoundPipe, CaseReferencePipe, CcdCaseTitlePipe, CcdCYAPageLabelFilterPipe, ReadFieldsFilterPipe, CcdPageFieldsPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseCreateComponent, function () { return [i4.NgIf, CaseEditComponent]; }, []);
 i0.ɵɵsetComponentScope(CaseProgressComponent, function () { return [i4.NgIf, CaseEditComponent]; }, []);
 
@@ -34911,19 +35088,27 @@ class EventStartGuard {
                 task = tasksAssignedToUser[0];
             }
             // if one task assigned to user, allow user to complete event
-            this.sessionStorageService.setItem(EventStartGuard.TASK_TO_COMPLETE, JSON.stringify(task));
+            const storeClientContext = {
+                client_context: {
+                    user_task: {
+                        task_data: task,
+                        complete_task: true
+                    }
+                }
+            };
+            this.sessionStorageService.setItem(EventStartGuard.CLIENT_CONTEXT, JSON.stringify(storeClientContext));
             return true;
         }
     }
     removeTaskFromSessionStorage() {
-        this.sessionStorageService.removeItem(EventStartGuard.TASK_TO_COMPLETE);
+        this.sessionStorageService.removeItem(EventStartGuard.CLIENT_CONTEXT);
     }
     checkForTasks(payload, caseId, eventId, taskId) {
         var _a;
         if (taskId && ((_a = payload === null || payload === void 0 ? void 0 : payload.tasks) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             const task = payload.tasks.find((t) => t.id == taskId);
             if (task) {
-                this.sessionStorageService.setItem(EventStartGuard.TASK_TO_COMPLETE, JSON.stringify(task));
+                this.sessionStorageService.setItem(EventStartGuard.CLIENT_CONTEXT, JSON.stringify(task));
             }
             else {
                 this.removeTaskFromSessionStorage();
@@ -34945,7 +35130,7 @@ class EventStartGuard {
         }
     }
 }
-EventStartGuard.TASK_TO_COMPLETE = 'taskToComplete';
+EventStartGuard.CLIENT_CONTEXT = 'clientContext';
 EventStartGuard.ɵfac = function EventStartGuard_Factory(t) { return new (t || EventStartGuard)(i0.ɵɵinject(WorkAllocationService), i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(SessionStorageService)); };
 EventStartGuard.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: EventStartGuard, factory: EventStartGuard.ɵfac });
 (function () {
@@ -35085,9 +35270,17 @@ class EventStartStateMachineService {
             task = context.tasks[0];
         }
         const taskStr = JSON.stringify(task);
-        console.log('entryActionForStateOneTaskAssignedToUser: setting taskToComplete to ' + taskStr);
+        console.log('entryActionForStateOneTaskAssignedToUser: setting client context task_data to ' + taskStr);
         // Store task to session
-        context.sessionStorageService.setItem('taskToComplete', taskStr);
+        const clientContext = {
+            client_context: {
+                user_task: {
+                    task_data: task,
+                    complete_task: true
+                }
+            }
+        };
+        context.sessionStorageService.setItem('clientContext', JSON.stringify(clientContext));
         // Allow user to perform the event
         context.router.navigate([`/cases/case-details/${context.caseId}/trigger/${context.eventId}`], { relativeTo: context.route });
     }
@@ -38282,11 +38475,11 @@ SearchResultComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Searc
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !(ctx.hasResults() || ctx.hasDrafts()));
         }
-    }, styles: ["table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{vertical-align:top}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{font-size:16px;word-wrap:break-word}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{float:left}table[_ngcontent-%COMP%]   .caseid-col[_ngcontent-%COMP%]{white-space:nowrap}.notification[_ngcontent-%COMP%]{text-align:center;padding:30px 0;margin-top:75px}a[_ngcontent-%COMP%]:hover{color:#005ea5}.search-result-reset-link[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}.search-result-column-header[_ngcontent-%COMP%]{width:auto;width:initial;table-layout:normal}.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:block;float:right}}.search-result-column-label[_ngcontent-%COMP%]{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort[_ngcontent-%COMP%]{font-size:16px}.sort-widget[_ngcontent-%COMP%]{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium[_ngcontent-%COMP%]{margin-top:-20px}.govuk-table__checkbox[_ngcontent-%COMP%]{vertical-align:middle;padding-left:3px}#search-result-heading__text[_ngcontent-%COMP%]:focus{outline:none}"] });
+    }, styles: ["table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{vertical-align:top}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{font-size:16px;word-wrap:break-word}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{float:left}table[_ngcontent-%COMP%]   .caseid-col[_ngcontent-%COMP%]{white-space:nowrap}.notification[_ngcontent-%COMP%]{text-align:center;padding:30px 0;margin-top:75px}a[_ngcontent-%COMP%]:hover{color:#005ea5}.search-result-reset-link[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}.search-result-column-header[_ngcontent-%COMP%]{width:unset;table-layout:normal}.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:block;float:right}}.search-result-column-label[_ngcontent-%COMP%]{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort[_ngcontent-%COMP%]{font-size:16px}.sort-widget[_ngcontent-%COMP%]{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium[_ngcontent-%COMP%]{margin-top:-20px}.govuk-table__checkbox[_ngcontent-%COMP%]{vertical-align:middle;padding-left:3px}#search-result-heading__text[_ngcontent-%COMP%]:focus{outline:none}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-search-result', template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\"\n        [attr.aria-label]=\"getTotalResults() + ' results have been found' | rpxTranslate\" role=\"status\">\n      <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void(0)\" (click)=\"clearSelection()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <th *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th *ngFor=\"let col of resultView.columns\">\n        <table class=\"search-result-column-header\"\n          [attr.aria-label]=\"('Sort by ' + col.label + ' ' + isSortAscending(col)? 'ascending' : 'descending') | rpxTranslate\">\n          <tr>\n            <th>\n              <div class=\"search-result-column-label\" (click)=\"sort(col)\">\n                {{col.label | rpxTranslate}}\n              </div>\n              <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n                <a (click)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" href=\"javascript:void(0)\"></a>\n              </div>\n            </th>\n          </tr>\n        </table>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\"></th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:auto;width:initial;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
+            args: [{ selector: 'ccd-search-result', template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\"\n        [attr.aria-label]=\"getTotalResults() + ' results have been found' | rpxTranslate\" role=\"status\">\n      <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void(0)\" (click)=\"clearSelection()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <th *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th *ngFor=\"let col of resultView.columns\">\n        <table class=\"search-result-column-header\"\n          [attr.aria-label]=\"('Sort by ' + col.label + ' ' + isSortAscending(col)? 'ascending' : 'descending') | rpxTranslate\">\n          <tr>\n            <th>\n              <div class=\"search-result-column-label\" (click)=\"sort(col)\">\n                {{col.label | rpxTranslate}}\n              </div>\n              <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n                <a (click)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" href=\"javascript:void(0)\"></a>\n              </div>\n            </th>\n          </tr>\n        </table>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\"></th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
         }], function () { return [{ type: SearchResultViewItemComparatorFactory }, { type: AbstractAppConfig }, { type: ActivityService }, { type: CaseReferencePipe }, { type: PlaceholderService }, { type: BrowserService }, { type: SessionStorageService }]; }, { caseLinkUrlTemplate: [{
                 type: Input
             }], jurisdiction: [{