@hmcts/ccd-case-ui-toolkit 7.0.21 → 7.0.22-rc2

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

@@ -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$13 = [[["", "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$13);
             i0.ɵɵelementStart(0, "footer", 0)(1, "div", 1);
@@ -211,7 +212,7 @@ function HeaderBarComponent_div_10_Template(rf, ctx) {
     }
 }
 const _c0$12 = [[["", "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$12);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
@@ -277,11 +278,11 @@ HeaderBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBa
 })();
 
 const _c0$11 = [[["", "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$11);
             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$10 = [[["", "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$10);
             i0.ɵɵelementStart(0, "div", 0);
@@ -1085,11 +1086,11 @@ NotificationBannerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 })();
 
 const _c0$Z = 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$Y = ["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));
@@ -1333,6 +1334,11 @@ class HttpError {
     }
     static from(response) {
         const error = new HttpError();
+        if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
+            error.error = HttpError.MESSAGE_ERROR_429;
+            error.status = response.status;
+            error.message = response.message;
+        }
         // Check that the HttpErrorResponse contains an "error" object before mapping the error properties
         if (!!(response && response.error)) {
             Object.keys(error).forEach((key) => {
@@ -1352,6 +1358,7 @@ class HttpError {
 HttpError.DEFAULT_ERROR = 'Unknown error';
 HttpError.DEFAULT_MESSAGE = 'Something unexpected happened, our technical staff have been automatically notified';
 HttpError.DEFAULT_STATUS = 500;
+HttpError.MESSAGE_ERROR_429 = 'Your request was rate limited. Please wait a few seconds before retrying your document upload';
 
 class AbstractAppConfig {
     /**
@@ -2696,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';
         }
@@ -4544,6 +4554,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));
                 }
@@ -4557,22 +4568,38 @@ 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')) {
+            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
@@ -4580,10 +4607,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 () {
@@ -5034,8 +5071,9 @@ class FieldsPurger {
             }
         }
         else {
-            // Delete the field value
-            this.deleteFieldValue(form.get('data'), field);
+            // Delete the field from formGroup
+            const dataGroup = form.get('data');
+            dataGroup.removeControl(field.id);
         }
     }
     resetPage(form, wizardPage) {
@@ -8678,16 +8716,21 @@ class PageValidationService {
     constructor(caseFieldService) {
         this.caseFieldService = caseFieldService;
     }
-    isPageValid(page, editForm) {
-        return page.case_fields
+    getInvalidFields(page, editForm) {
+        const failingCaseFields = [];
+        page.case_fields
             .filter(caseField => !this.caseFieldService.isReadOnly(caseField))
             .filter(caseField => !this.isHidden(caseField, editForm))
-            .every(caseField => {
+            .map(caseField => {
             const theControl = FieldsUtils.isCaseFieldOfType(caseField, ['JudicialUser'])
                 ? editForm.controls['data'].get(`${caseField.id}_judicialUserControl`)
                 : editForm.controls['data'].get(caseField.id);
-            return this.checkDocumentField(caseField, theControl) && this.checkOptionalField(caseField, theControl);
+            if (!(this.checkDocumentField(caseField, theControl) && this.checkOptionalField(caseField, theControl))) {
+                failingCaseFields.push(caseField);
+            }
+            ;
         });
+        return failingCaseFields;
     }
     isHidden(caseField, editForm, path) {
         const formFields = editForm.getRawValue();
@@ -10112,7 +10155,8 @@ class CaseEditPageComponent {
         return this.caseEdit.first();
     }
     currentPageIsNotValid() {
-        return !this.pageValidationService.isPageValid(this.currentPage, this.editForm) ||
+        this.failingCaseFields = this.pageValidationService.getInvalidFields(this.currentPage, this.editForm);
+        return this.failingCaseFields.length > 0 ||
             (this.isLinkedCasesJourney() && !this.isLinkedCasesJourneyAtFinalStep);
     }
     isLinkedCasesJourney() {
@@ -10134,9 +10178,15 @@ class CaseEditPageComponent {
     // Adding validation message to show it as Error Summary
     generateErrorMessage(fields, container, path) {
         const group = container || this.editForm.controls['data'];
-        fields.filter(casefield => !this.caseFieldService.isReadOnly(casefield))
-            .filter(casefield => !this.pageValidationService.isHidden(casefield, this.editForm, path))
+        let validErrorFieldFound = false;
+        let validationErrorAmount = this.validationErrors.length;
+        const failingFields = fields.filter(casefield => !this.caseFieldService.isReadOnly(casefield))
+            .filter(casefield => !this.pageValidationService.isHidden(casefield, this.editForm, path));
+        // note that thougn these checks are on getinvalidfields they are needed for sub field checks
+        failingFields
             .forEach(casefield => {
+            let errorPresent = true;
+            validErrorFieldFound = true;
             const fieldElement = FieldsUtils.isCaseFieldOfType(casefield, ['JudicialUser'])
                 ? group.get(`${casefield.id}_judicialUserControl`)
                 : group.get(casefield.id);
@@ -10181,7 +10231,7 @@ class CaseEditPageComponent {
                 }
                 else if (fieldElement.invalid) {
                     if (casefield.isComplex()) {
-                        this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id);
+                        errorPresent = this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id);
                     }
                     else if (casefield.isCollection() && casefield.field_type.collection_field_type.type === 'Complex') {
                         const fieldArray = fieldElement;
@@ -10189,7 +10239,7 @@ class CaseEditPageComponent {
                             id = `${fieldArray['component']['collItems'][0].prefix}`;
                         }
                         fieldArray.controls.forEach((c) => {
-                            this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
+                            errorPresent = this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
                         });
                     }
                     else if (FieldsUtils.isCaseFieldOfType(casefield, ['FlagLauncher'])) {
@@ -10204,8 +10254,29 @@ class CaseEditPageComponent {
                     }
                 }
             }
+            else {
+                validErrorFieldFound = false;
+            }
+            if (!errorPresent && this.validationErrors.length === validationErrorAmount) {
+                // if no error messages have been added in internal field despite parent field failing
+                this.validationErrors.push({ id: casefield.id, message: `A field that is causing an error is ${casefield.id} but it is not producing a valid error message. Please ensure all details are correct` });
+            }
         });
+        if (!validErrorFieldFound) {
+            path ? this.validationErrors.push({ id: path, message: `There is an internal issue with ${path} fields. The field that is causing the error cannot be determined but there is an error present` })
+                : this.validationErrors.push({ id: null, message: `The field that is causing the error cannot be determined but there is an error present` });
+        }
+        else if (this.validationErrors.length === validationErrorAmount) {
+            // if no error messages have been generated
+            if (path) {
+                return false;
+            }
+            else {
+                this.validationErrors.push({ id: null, message: `The field that is causing the error cannot be determined but there is an error present. Please fill in more of the form` });
+            }
+        }
         CaseEditPageComponent.scrollToTop();
+        return true;
     }
     navigateToErrorElement(elementId) {
         /* istanbul ignore else */
@@ -10230,7 +10301,7 @@ class CaseEditPageComponent {
                 CaseEditPageComponent.scrollToTop();
             }
             else {
-                this.generateErrorMessage(this.currentPage.case_fields);
+                this.generateErrorMessage(this.failingCaseFields);
             }
         }
         if (!this.caseEdit.isSubmitting && !this.currentPageIsNotValid()) {
@@ -11088,8 +11159,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();
@@ -11107,7 +11178,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);
@@ -11115,7 +11186,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"));
     }
@@ -11162,7 +11233,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);
@@ -12731,7 +12802,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) {
@@ -12797,7 +12868,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);
@@ -12835,7 +12906,7 @@ function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) {
         i0.ɵɵproperty("caseField", i0.ɵɵpureFunction6(3, _c0$S, 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");
@@ -12847,7 +12918,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) {
@@ -13460,7 +13531,7 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
         this.paletteContext = PaletteContext;
     }
     ngOnInit() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         super.ngOnInit();
         if (this.caseField.display_context_parameter) {
             this.context = PaletteContext.TABLE_VIEW;
@@ -13471,18 +13542,20 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
                 this.context = PaletteContext.DEFAULT;
             }
         }
-        (_c = (_b = (_a = this.caseField) === null || _a === void 0 ? void 0 : _a.field_type) === null || _b === void 0 ? void 0 : _b.complex_fields) === null || _c === void 0 ? void 0 : _c.forEach((field) => {
-            var _a, _b, _c;
-            if (field === null || field === void 0 ? void 0 : field.isDynamic()) {
-                field.list_items = (_a = this.caseField.value[field.id]) === null || _a === void 0 ? void 0 : _a.list_items;
-                field.value = {
-                    list_items: field.list_items,
-                    value: ((_b = this.caseField.value[field.id]) === null || _b === void 0 ? void 0 : _b.value) && this.caseField.value[field.id].value.code ?
-                        this.caseField.value[field.id].value.code :
-                        (_c = this.caseField.value[field.id]) === null || _c === void 0 ? void 0 : _c.value
-                };
-            }
-        });
+        if (((_a = this.caseField) === null || _a === void 0 ? void 0 : _a.field_type) && this.caseField.field_type.complex_fields) {
+            (_d = (_c = (_b = this.caseField) === null || _b === void 0 ? void 0 : _b.field_type) === null || _c === void 0 ? void 0 : _c.complex_fields) === null || _d === void 0 ? void 0 : _d.forEach((field) => {
+                var _a, _b, _c;
+                if (field === null || field === void 0 ? void 0 : field.isDynamic()) {
+                    field.list_items = (_a = this.caseField.value[field.id]) === null || _a === void 0 ? void 0 : _a.list_items;
+                    field.value = {
+                        list_items: field.list_items,
+                        value: ((_b = this.caseField.value[field.id]) === null || _b === void 0 ? void 0 : _b.value) && this.caseField.value[field.id].value.code ?
+                            this.caseField.value[field.id].value.code :
+                            (_c = this.caseField.value[field.id]) === null || _c === void 0 ? void 0 : _c.value
+                    };
+                }
+            });
+        }
     }
 }
 ReadComplexFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵReadComplexFieldComponent_BaseFactory; return function ReadComplexFieldComponent_Factory(t) { return (ɵReadComplexFieldComponent_BaseFactory || (ɵReadComplexFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldComponent)))(t || ReadComplexFieldComponent); }; }();
@@ -14043,7 +14116,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();
@@ -14244,23 +14317,31 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         this.uploadedDocument = this.registerControl(new FormGroup(documentFormGroup), true);
     }
     getErrorMessage(error) {
-        // Document Management unavailable
-        if (0 === error.status || 502 === error.status) {
-            return WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE;
-        }
-        let errorMsg = 'Error uploading file';
-        if (error === null || error === void 0 ? void 0 : error.error) {
-            const fullError = error.error;
-            const start = fullError.indexOf('{');
-            if (start >= 0) {
-                const json = fullError.substring(start, fullError.length - 1).split('<EOL>').join('');
-                const obj = JSON.parse(json);
-                if (obj === null || obj === void 0 ? void 0 : obj.error) {
-                    errorMsg = obj.error;
+        switch (error.status) {
+            case 0:
+            case 502:
+                return WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE;
+            case 422:
+                {
+                    let errorMsg = WriteDocumentFieldComponent.ERROR_UPLOADING_FILE;
+                    if (error === null || error === void 0 ? void 0 : error.error) {
+                        const fullError = error.error;
+                        const start = fullError.indexOf('{');
+                        if (start >= 0) {
+                            const json = fullError.substring(start, fullError.length - 1).split('<EOL>').join('');
+                            const obj = JSON.parse(json);
+                            if (obj === null || obj === void 0 ? void 0 : obj.error) {
+                                errorMsg = obj.error;
+                            }
+                        }
+                    }
+                    return errorMsg;
                 }
-            }
+            case 429:
+                return error === null || error === void 0 ? void 0 : error.error;
+            default:
+                return WriteDocumentFieldComponent.ERROR_UPLOADING_FILE;
         }
-        return errorMsg;
     }
     buildDocumentUploadData(selectedFile) {
         const documentUpload = new FormData();
@@ -14315,6 +14396,7 @@ WriteDocumentFieldComponent.DOCUMENT_HASH = 'document_hash';
 WriteDocumentFieldComponent.UPLOAD_ERROR_FILE_REQUIRED = 'File required';
 WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE = 'Document upload facility is not available at the moment';
 WriteDocumentFieldComponent.UPLOAD_WAITING_FILE_STATUS = 'Uploading...';
+WriteDocumentFieldComponent.ERROR_UPLOADING_FILE = 'Error Uploading File';
 WriteDocumentFieldComponent.ɵfac = function WriteDocumentFieldComponent_Factory(t) { return new (t || WriteDocumentFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService)); };
 WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) {
         if (rf & 1) {
@@ -14349,7 +14431,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);
@@ -14385,7 +14467,7 @@ WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 
 class DynamicListPipe {
     transform(value, items) {
-        const item = items.find(i => i.code === value);
+        const item = items === null || items === void 0 ? void 0 : items.find(i => i.code === value);
         return item ? item.label : DynamicListPipe.EMPTY;
     }
 }
@@ -14573,9 +14655,14 @@ WriteDynamicListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
 })();
 
 class MarkdownComponent {
-    constructor() { }
+    constructor() {
+        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.
@@ -14584,13 +14671,22 @@ class MarkdownComponent {
         }
         return true;
     }
+    renderUrlToText() {
+        const renderer = new marked.Renderer();
+        renderer.link = (href, title, text) => {
+            return text; // Return the text without turning it into a link
+        };
+        marked.setOptions({
+            renderer: renderer
+        });
+    }
 }
 MarkdownComponent.ɵfac = function MarkdownComponent_Factory(t) { return new (t || MarkdownComponent)(); };
 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" }, decls: 4, vars: 5, consts: [[1, "markdown", 3, "data"]], template: function MarkdownComponent_Template(rf, ctx) {
+    }, inputs: { content: "content", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink", renderUrlToTextFeature: "renderUrlToTextFeature" }, decls: 4, vars: 5, consts: [[1, "markdown", 3, "data"]], template: function MarkdownComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵelement(1, "markdown", 0);
@@ -14611,6 +14707,8 @@ MarkdownComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownC
                 type: Input
             }], markdownUseHrefAsRouterLink: [{
                 type: Input
+            }], renderUrlToTextFeature: [{
+                type: Input
             }], onMarkdownClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -14745,7 +14843,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$O = function (a0) { return { "error": a0 }; };
@@ -14810,14 +14908,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) {
@@ -14835,7 +14933,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);
 })();
 
@@ -14979,7 +15077,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() {
         /**
@@ -15019,7 +15117,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);
@@ -15120,7 +15218,7 @@ function WriteEmailFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$M = 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));
@@ -15148,7 +15246,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 () {
@@ -15403,7 +15501,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;
@@ -15425,7 +15523,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);
@@ -15579,7 +15677,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);
@@ -15732,7 +15830,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);
@@ -16519,7 +16617,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();
@@ -16552,7 +16650,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);
@@ -18639,7 +18737,7 @@ function WriteNumberFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$E = 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));
@@ -18667,7 +18765,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 () {
@@ -19383,7 +19481,7 @@ function WritePhoneUKFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$C = 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));
@@ -19411,7 +19509,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 () {
@@ -21653,7 +21751,7 @@ function WriteTextAreaFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$z = 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();
@@ -21693,7 +21791,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 () {
@@ -21768,7 +21866,7 @@ function WriteTextFieldComponent_span_4_Template(rf, ctx) {
     }
 }
 const _c0$y = 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));
@@ -21800,7 +21898,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 () {
@@ -22007,7 +22105,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();
@@ -22031,7 +22129,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);
@@ -22429,7 +22527,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);
@@ -22442,7 +22540,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) {
@@ -22633,7 +22731,7 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_Template(rf, ctx) {
     }
 }
 const _c0$s = [[["", "trigger", ""]]];
-const _c1$8 = ["[trigger]"];
+const _c1$9 = ["[trigger]"];
 class CaseFileViewOverlayMenuComponent {
     constructor() {
         this.title = '';
@@ -22647,7 +22745,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$s);
             i0.ɵɵelementStart(0, "div")(1, "button", 0, 1);
@@ -23216,7 +23314,7 @@ CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised docum
 CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl';
 CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS = 1;
 CaseFileViewFolderComponent.ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
-CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "allowMoving", "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
+CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", "aria-label", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "allowMoving", "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵelement(2, "input", 2);
@@ -23241,7 +23339,7 @@ CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #FFF;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#EEE}.document-tree-container::-webkit-scrollbar-thumb{background:#CCC}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
+            args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #FFF;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#EEE}.document-tree-container::-webkit-scrollbar-thumb{background:#CCC}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
         }], function () { return [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: AbstractAppConfig }]; }, { categoriesAndDocuments: [{
                 type: Input
             }], allowMoving: [{
@@ -24908,7 +25006,7 @@ function SelectFlagTypeComponent_ng_container_0_div_11_div_8_Template(rf, ctx) {
     }
 }
 const _c0$n = 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);
@@ -24930,7 +25028,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);
     }
@@ -25500,7 +25598,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;
@@ -25709,7 +25807,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);
@@ -27105,7 +27203,7 @@ const CUSTOM_MOMENT_FORMATS = {
 };
 
 const _c0$g = ["picker"];
-const _c1$5 = ["input"];
+const _c1$6 = ["input"];
 function DatetimePickerComponent_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 11);
@@ -27169,7 +27267,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();
@@ -27335,7 +27433,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$g, 5);
-            i0.ɵɵviewQuery(_c1$5, 5);
+            i0.ɵɵviewQuery(_c1$6, 5);
         }
         if (rf & 2) {
             let _t;
@@ -27371,7 +27469,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);
@@ -27625,7 +27723,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();
@@ -27658,7 +27756,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);
@@ -29726,6 +29824,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);
@@ -29736,21 +29864,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();
@@ -29764,7 +29909,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");
@@ -29774,13 +29919,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);
@@ -29788,7 +29933,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()()()();
@@ -29827,9 +29972,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) {
@@ -29839,14 +29984,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.
@@ -29857,7 +30005,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;
@@ -29870,10 +30018,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 */
@@ -29882,12 +30032,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({
@@ -29895,7 +30047,7 @@ class CaseEditSubmitComponent {
             eventCanBeCompleted,
             caseDetails: this.caseEdit.caseDetails,
             form: this.editForm,
-            submit: this.caseEdit.submit,
+            submit: this.caseEdit.submit
         });
     }
     getPageTitle() {
@@ -29971,7 +30123,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;
@@ -29987,7 +30139,7 @@ class CaseEditSubmitComponent {
     }
     getLastPageShown() {
         let lastPage;
-        this.wizard.reverse().forEach(page => {
+        this.wizard.reverse().forEach((page) => {
             if (!lastPage && this.isShown(page)) {
                 lastPage = page;
             }
@@ -30006,7 +30158,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) {
@@ -30015,7 +30167,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) {
@@ -30034,9 +30186,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) => {
@@ -30050,8 +30200,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);
@@ -30065,8 +30215,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) {
@@ -30464,7 +30614,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]; }, []);
 
@@ -32215,29 +32365,29 @@ function CaseHistoryComponent_div_0_Template(rf, ctx) {
         i0.ɵɵadvance(6);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 19, "Date"));
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 21, ctx_r0.caseHistory.event.timestamp));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 21, ctx_r0.caseHistory.event.timestamp, "local"));
         i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 23, "Author"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 24, "Author"));
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(25, 25, ctx_r0.caseHistory.event.user_first_name), " ", i0.ɵɵpipeBind1(26, 27, ctx_r0.caseHistory.event.user_last_name), "");
+        i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(25, 26, ctx_r0.caseHistory.event.user_first_name), " ", i0.ɵɵpipeBind1(26, 28, ctx_r0.caseHistory.event.user_last_name), "");
         i0.ɵɵadvance(5);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 29, "End state"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 30, "End state"));
         i0.ɵɵadvance(3);
         i0.ɵɵtextInterpolate(ctx_r0.caseHistory.event.state_name);
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 31, "Event"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 32, "Event"));
         i0.ɵɵadvance(3);
         i0.ɵɵtextInterpolate(ctx_r0.caseHistory.event.event_name);
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(42, 33, "Summary"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(42, 34, "Summary"));
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 35, ctx_r0.caseHistory.event.summary));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 36, ctx_r0.caseHistory.event.summary));
         i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(49, 37, "Comment"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(49, 38, "Comment"));
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(52, 39, ctx_r0.caseHistory.event.comment));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(52, 40, ctx_r0.caseHistory.event.comment));
         i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(56, 41, "Case Details"));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(56, 42, "Case Details"));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngForOf", ctx_r0.tabs);
     }
@@ -32293,7 +32443,7 @@ CaseHistoryComponent.ERROR_MESSAGE = 'No case history to show';
 CaseHistoryComponent.ɵfac = function CaseHistoryComponent_Factory(t) { return new (t || CaseHistoryComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(CaseHistoryService)); };
 CaseHistoryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseHistoryComponent, selectors: [["ccd-case-history"]], inputs: { event: "event" }, decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "grid-row"], [1, "column-full"], [3, "caseDetails"], [1, "heading-h2"], ["aria-describedby", "event details table", 1, "EventDetails"], [4, "ngFor", "ngForOf"], [1, "caseHistorySection"], [1, "heading-h3"], [1, "CaseHistory", 3, "id"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-label-header"], [1, "case-viewer-label"], [3, "caseField", "caseReference"], [1, "compound-field"], ["colspan", "2"]], template: function CaseHistoryComponent_Template(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseHistoryComponent_div_0_Template, 58, 43, "div", 0);
+            i0.ɵɵtemplate(0, CaseHistoryComponent_div_0_Template, 58, 44, "div", 0);
         }
         if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.isDataLoaded());
@@ -32302,7 +32452,7 @@ CaseHistoryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseHi
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseHistoryComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-case-history', template: "<div *ngIf=\"isDataLoaded()\">\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    </div>\n  </div>\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <div>\n        <h2 class=\"heading-h2\">{{'Event Details' | rpxTranslate}}</h2>\n        <table class=\"EventDetails\" aria-describedby=\"event details table\">\n          <tbody>\n          <tr>\n            <th>{{'Date' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.timestamp | ccdDate}}</td>\n          </tr>\n          <tr>\n            <th>{{'Author' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.user_first_name | titlecase}} {{caseHistory.event.user_last_name | uppercase}}</td>\n          </tr>\n          <tr>\n            <th>{{'End state' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.state_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Event' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.event_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Summary' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.summary | ccdDash}}</td>\n          </tr>\n          <tr>\n            <th>{{'Comment' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.comment | ccdDash}}</td>\n          </tr>\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <h2 class=\"heading-h2\">{{'Case Details' | rpxTranslate}}</h2>\n        <ng-container *ngFor=\"let tab of tabs\">\n          <div class=\"caseHistorySection\">\n            <h3 class=\"heading-h3\">{{tab.label}}</h3>\n            <table class=\"CaseHistory\" id=\"{{tab.id}}\" [attr.aria-describedby]=\"'case history table' | rpxTranslate\">\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"tab.fields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-label-header\">\n                        <div class=\"case-viewer-label\">{{field.label}}</div>\n                      </th>\n                      <td>\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <td colspan=\"2\">\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n            </table>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".CaseHistory th,.CaseHistory td{border-bottom:none}.caseHistorySection{margin-top:40px}.EventDetails th,.EventDetails td{border-bottom:none}th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}\n"] }]
+            args: [{ selector: 'ccd-case-history', template: "<div *ngIf=\"isDataLoaded()\">\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    </div>\n  </div>\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <div>\n        <h2 class=\"heading-h2\">{{'Event Details' | rpxTranslate}}</h2>\n        <table class=\"EventDetails\" aria-describedby=\"event details table\">\n          <tbody>\n          <tr>\n            <th>{{'Date' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.timestamp | ccdDate : 'local'}}</td>\n          </tr>\n          <tr>\n            <th>{{'Author' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.user_first_name | titlecase}} {{caseHistory.event.user_last_name | uppercase}}</td>\n          </tr>\n          <tr>\n            <th>{{'End state' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.state_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Event' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.event_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Summary' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.summary | ccdDash}}</td>\n          </tr>\n          <tr>\n            <th>{{'Comment' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.comment | ccdDash}}</td>\n          </tr>\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <h2 class=\"heading-h2\">{{'Case Details' | rpxTranslate}}</h2>\n        <ng-container *ngFor=\"let tab of tabs\">\n          <div class=\"caseHistorySection\">\n            <h3 class=\"heading-h3\">{{tab.label}}</h3>\n            <table class=\"CaseHistory\" id=\"{{tab.id}}\" [attr.aria-describedby]=\"'case history table' | rpxTranslate\">\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"tab.fields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-label-header\">\n                        <div class=\"case-viewer-label\">{{field.label}}</div>\n                      </th>\n                      <td>\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <td colspan=\"2\">\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n            </table>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".CaseHistory th,.CaseHistory td{border-bottom:none}.caseHistorySection{margin-top:40px}.EventDetails th,.EventDetails td{border-bottom:none}th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}\n"] }]
         }], function () { return [{ type: i1$1.ActivatedRoute }, { type: AlertService }, { type: OrderService }, { type: CaseNotifier }, { type: CaseHistoryService }]; }, { event: [{
                 type: Input
             }] });
@@ -33504,7 +33654,7 @@ function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_2_Tem
         const tab_r20 = i0.ɵɵnextContext().$implicit;
         const ctx_r22 = i0.ɵɵnextContext(2);
         i0.ɵɵclassMap(tab_r20.id);
-        i0.ɵɵattribute("aria-describedby", i0.ɵɵpipeBind1(1, 4, "case viewer table"));
+        i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 4, "case viewer table"));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBindV(4, 6, i0.ɵɵpureFunction2(14, _c1$3, i0.ɵɵpipeBind1(5, 12, tab_r20), ctx_r22.formGroup.controls["data"])));
     }
@@ -33988,7 +34138,7 @@ CaseFullAccessViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFullAccessViewComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-describedby]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}\n"] }]
+            args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-label]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}\n"] }]
         }], function () { return [{ type: i0.NgZone }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1$3.MatLegacyDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i4.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }]; }, { hasPrint: [{
                 type: Input
             }], hasEventSelector: [{