@hmcts/ccd-case-ui-toolkit 7.1.63-service-message → 7.1.63

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ViewChildren, ContentChildren, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, HostListener, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ViewChildren, ContentChildren, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, DOCUMENT, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -170,11 +170,10 @@ function HeaderBarComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "a", 12);
     i0.ɵɵelement(2, "img", 13);
     i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 1, "GOV.UK"), " ");
+    i0.ɵɵtextInterpolate1(" ", "GOV.UK", " ");
 } }
 function HeaderBarComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 14)(1, "div", 15)(2, "span");
@@ -210,7 +209,7 @@ class HeaderBarComponent {
     static ɵ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$15);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵtemplate(3, HeaderBarComponent_div_3_Template, 5, 3, "div", 3)(4, HeaderBarComponent_div_4_Template, 5, 3, "div", 4);
+            i0.ɵɵtemplate(3, HeaderBarComponent_div_3_Template, 4, 1, "div", 3)(4, HeaderBarComponent_div_4_Template, 5, 3, "div", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "a", 7);
             i0.ɵɵtext(8);
@@ -246,7 +245,7 @@ class HeaderBarComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderBarComponent, [{
         type: Component,
-        args: [{ selector: 'cut-header-bar', template: "<header role=\"banner\" id=\"global-header\" class=\"with-proposition\">\n  <div [class.full-screen]=\"!isSolicitor\" class=\"header-wrapper\">\n\n    <div class=\"header-global\" [class.header-logo]=\"isSolicitor\">\n      <div *ngIf=\"isSolicitor\">\n        <a href=\"https://www.gov.uk\" title=\"Go to the GOV.UK homepage\" id=\"logo\" class=\"content\" style=\"margin-left: 0px;\">\n          <img src=\"/img/gov.uk_logotype_crown_invert_trans.png?0.23.0\" width=\"36\" height=\"32\" alt=\"\"> {{'GOV.UK' | rpxTranslate}}\n        </a>\n      </div>\n      <div class=\"global-header\" *ngIf=\"!isSolicitor\">\n        <div class=\"title\">\n          <span>{{title | rpxTranslate}}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"header-proposition\">\n      <div class=\"content\">\n        <a href=\"#proposition-links\" class=\"js-header-toggle menu\">{{'Menu' | rpxTranslate}}</a>\n        <div *ngIf=\"isSolicitor\" id=\"proposition-menu\">\n          <div class=\"title-solicitor\">\n            <span id=\"proposition-name\">{{title | rpxTranslate}}</span>\n            <ng-content select=\"[headerNavigation]\"></ng-content>\n          </div>\n        </div>\n\n        <div class=\"proposition-right\">\n          <span id=\"user-name\">{{username}}</span>\n          <a (click)=\"signOut()\" id=\"sign-out\" href=\"javascript:void(0)\">{{'Sign Out' | rpxTranslate}}</a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</header>\n", styles: [".title:after,.global-header .header-username:after,.global-header .header-title:after,.global-header:after{content:\"\";display:block;clear:both}.global-header{background-color:#000;width:100%}.global-header .header-title{font-family:nta,Arial,sans-serif;text-transform:none;font-size:16pt;line-height:1.25;float:left;font-weight:700;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 641px){.global-header .header-title{font-size:20pt;line-height:1.3}}@media (min-width: 769px){.global-header .header-title{width:50%}}@media screen and (max-width: 379px){.global-header .header-title{width:auto;float:none}}.global-header .header-title .header-title-span{padding-left:22px}.global-header .header-username{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:12pt;line-height:1.25;float:right;text-align:right;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 641px){.global-header .header-username{font-size:14pt;line-height:1.4285714286}}@media (min-width: 769px){.global-header .header-username{width:50%}}.global-header .header-username .header-username-span{padding-right:15px}#global-header .full-screen{max-width:100%}.title{font-weight:700;color:#fff;font-size:24px}.title-solicitor{float:left}.proposition-right{float:right;padding-top:5px}#global-header.with-proposition .header-wrapper .header-logo{width:27%}#global-header.with-proposition .header-wrapper .header-proposition{width:100%;float:none}#global-header.with-proposition .header-wrapper .header-proposition .content{margin:0}#user-name,#sign-out{font-size:16px;font-weight:700;border:none;color:#fff;margin:0 0 0 9px;text-decoration:none;background-color:#000}#user-name:focus,#sign-out:focus{color:#fff}#sign-out:hover{text-decoration:underline}\n"] }]
+        args: [{ selector: 'cut-header-bar', template: "<header role=\"banner\" id=\"global-header\" class=\"with-proposition\">\n  <div [class.full-screen]=\"!isSolicitor\" class=\"header-wrapper\">\n\n    <div class=\"header-global\" [class.header-logo]=\"isSolicitor\">\n      <div *ngIf=\"isSolicitor\">\n        <a href=\"https://www.gov.uk\" title=\"Go to the GOV.UK homepage\" id=\"logo\" class=\"content\" style=\"margin-left: 0px;\">\n          <img src=\"/img/gov.uk_logotype_crown_invert_trans.png?0.23.0\" width=\"36\" height=\"32\" alt=\"\"> {{'GOV.UK'}}\n        </a>\n      </div>\n      <div class=\"global-header\" *ngIf=\"!isSolicitor\">\n        <div class=\"title\">\n          <span>{{title | rpxTranslate}}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"header-proposition\">\n      <div class=\"content\">\n        <a href=\"#proposition-links\" class=\"js-header-toggle menu\">{{'Menu' | rpxTranslate}}</a>\n        <div *ngIf=\"isSolicitor\" id=\"proposition-menu\">\n          <div class=\"title-solicitor\">\n            <span id=\"proposition-name\">{{title | rpxTranslate}}</span>\n            <ng-content select=\"[headerNavigation]\"></ng-content>\n          </div>\n        </div>\n\n        <div class=\"proposition-right\">\n          <span id=\"user-name\">{{username}}</span>\n          <a (click)=\"signOut()\" id=\"sign-out\" href=\"javascript:void(0)\">{{'Sign Out' | rpxTranslate}}</a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</header>\n", styles: [".title:after,.global-header .header-username:after,.global-header .header-title:after,.global-header:after{content:\"\";display:block;clear:both}.global-header{background-color:#000;width:100%}.global-header .header-title{font-family:nta,Arial,sans-serif;text-transform:none;font-size:16pt;line-height:1.25;float:left;font-weight:700;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 641px){.global-header .header-title{font-size:20pt;line-height:1.3}}@media (min-width: 769px){.global-header .header-title{width:50%}}@media screen and (max-width: 379px){.global-header .header-title{width:auto;float:none}}.global-header .header-title .header-title-span{padding-left:22px}.global-header .header-username{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:12pt;line-height:1.25;float:right;text-align:right;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media (min-width: 641px){.global-header .header-username{font-size:14pt;line-height:1.4285714286}}@media (min-width: 769px){.global-header .header-username{width:50%}}.global-header .header-username .header-username-span{padding-right:15px}#global-header .full-screen{max-width:100%}.title{font-weight:700;color:#fff;font-size:24px}.title-solicitor{float:left}.proposition-right{float:right;padding-top:5px}#global-header.with-proposition .header-wrapper .header-logo{width:27%}#global-header.with-proposition .header-wrapper .header-proposition{width:100%;float:none}#global-header.with-proposition .header-wrapper .header-proposition .content{margin:0}#user-name,#sign-out{font-size:16px;font-weight:700;border:none;color:#fff;margin:0 0 0 9px;text-decoration:none;background-color:#000}#user-name:focus,#sign-out:focus{color:#fff}#sign-out:hover{text-decoration:underline}\n"] }]
     }], null, { title: [{
             type: Input
         }], isSolicitor: [{
@@ -1275,6 +1274,7 @@ class CaseEditorConfig {
     document_management_url_v2;
     hrs_url;
     document_management_secure_enabled;
+    documentSecureModeCaseTypeExclusions;
     login_url;
     oauth2_client_id;
     postcode_lookup_url;
@@ -3278,6 +3278,7 @@ class CaseField {
     wizardProps;
     _value;
     _list_items = [];
+    isTranslatedFlag = false;
     get value() {
         if (this.field_type && (this.field_type.type === 'DynamicList' || this.field_type.type === 'DynamicRadioList')) {
             return this._value && this._value.value ? this._value.value.code : this._value;
@@ -3383,6 +3384,12 @@ class CaseField {
         }
         return null;
     }
+    set isTranslated(val) {
+        this.isTranslatedFlag = val;
+    }
+    get isTranslated() {
+        return this.isTranslatedFlag;
+    }
 }
 __decorate([
     Type(() => FieldType),
@@ -3860,6 +3867,11 @@ class FieldsUtils {
             || ctx === 'OPTIONAL' || ctx === 'HIDDEN'
             || ctx === 'COMPLEX');
     }
+    static isTranslatable(fieldType) {
+        if (fieldType.type === 'Label' || fieldType.type === 'FixedList') {
+            return true;
+        }
+    }
     static convertToCaseField(obj) {
         if (!(obj instanceof CaseField)) {
             return plainToClassFromExist(new CaseField(), obj);
@@ -5053,6 +5065,9 @@ class AbstractFormFieldComponent {
     id() {
         return this.idPrefix + this.caseField.id;
     }
+    isTranslatable(field) {
+        return FieldsUtils.isTranslatable(field.field_type);
+    }
     registerControl(control, replace = false) {
         const container = this.parent || this.formGroup;
         if (!container) {
@@ -6324,6 +6339,7 @@ class FormValueService {
         type: Injectable
     }], () => [{ type: FieldTypeSanitiser }], null); })();
 
+// This class implements ccd Field Interpolation
 // @dynamic
 class PlaceholderService {
     resolvePlaceholders(pageFormFields, stringToResolve) {
@@ -6535,15 +6551,17 @@ ___
 class LabelSubstitutorDirective {
     fieldsUtils;
     placeholderService;
+    rpxTranslationPipe;
     caseField;
     contextFields = [];
     formGroup;
     elementsToSubstitute = ['label', 'hint_text'];
     initialLabel;
     initialHintText;
-    constructor(fieldsUtils, placeholderService) {
+    constructor(fieldsUtils, placeholderService, rpxTranslationPipe) {
         this.fieldsUtils = fieldsUtils;
         this.placeholderService = placeholderService;
+        this.rpxTranslationPipe = rpxTranslationPipe;
     }
     ngOnInit() {
         this.initialLabel = this.caseField.label;
@@ -6551,7 +6569,23 @@ class LabelSubstitutorDirective {
         this.formGroup = this.formGroup || new FormGroup({});
         const fields = this.getReadOnlyAndFormFields();
         if (this.shouldSubstitute('label')) {
-            this.caseField.label = this.resolvePlaceholders(fields, this.caseField.label);
+            const oldLabel = this.caseField.label;
+            const substitutedLabel = this.resolvePlaceholders(fields, this.caseField.label);
+            if (oldLabel && oldLabel !== substitutedLabel) {
+                console.log(`placeholders present: ${oldLabel} -> ${substitutedLabel}`);
+                // we need to translate the uninterpolated data then substitute the values in translated string
+                const translated = this.rpxTranslationPipe.transform(oldLabel);
+                console.log(`translated: ${translated}`);
+                const transSubstitutedLabel = this.resolvePlaceholders(fields, translated);
+                console.log(`translated and substituted: ${transSubstitutedLabel}`);
+                this.caseField.label = transSubstitutedLabel;
+                this.caseField.isTranslated = true;
+            }
+            else {
+                console.log(`no placeholders present: ${oldLabel}`);
+                this.caseField.label = substitutedLabel;
+                this.caseField.isTranslated = false;
+            }
         }
         if (this.shouldSubstitute('hint_text')) {
             this.caseField.hint_text = this.resolvePlaceholders(fields, this.caseField.hint_text);
@@ -6593,13 +6627,13 @@ class LabelSubstitutorDirective {
     resolvePlaceholders(fields, stringToResolve) {
         return this.placeholderService.resolvePlaceholders(fields, stringToResolve);
     }
-    static ɵfac = function LabelSubstitutorDirective_Factory(t) { return new (t || LabelSubstitutorDirective)(i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(PlaceholderService)); };
+    static ɵfac = function LabelSubstitutorDirective_Factory(t) { return new (t || LabelSubstitutorDirective)(i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(PlaceholderService), i0.ɵɵdirectiveInject(i1.RpxTranslatePipe)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LabelSubstitutorDirective, selectors: [["", "ccdLabelSubstitutor", ""]], inputs: { caseField: "caseField", contextFields: "contextFields", formGroup: "formGroup", elementsToSubstitute: "elementsToSubstitute" } });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelSubstitutorDirective, [{
         type: Directive,
         args: [{ selector: '[ccdLabelSubstitutor]' }]
-    }], () => [{ type: FieldsUtils }, { type: PlaceholderService }], { caseField: [{
+    }], () => [{ type: FieldsUtils }, { type: PlaceholderService }, { type: i1.RpxTranslatePipe }], { caseField: [{
             type: Input
         }], contextFields: [{
             type: Input
@@ -6990,9 +7024,55 @@ class ReadCookieService {
                 args: [DOCUMENT]
             }] }], null); })();
 
+class CaseNotifier {
+    casesService;
+    static CASE_NAME = 'caseNameHmctsInternal';
+    static CASE_LOCATION = 'caseManagementLocation';
+    caseViewSource = new BehaviorSubject(new CaseView());
+    caseView = this.caseViewSource.asObservable();
+    cachedCaseView;
+    constructor(casesService) {
+        this.casesService = casesService;
+    }
+    removeCachedCase() {
+        this.cachedCaseView = null;
+    }
+    announceCase(c) {
+        this.caseViewSource.next(c);
+    }
+    fetchAndRefresh(cid) {
+        return this.casesService
+            .getCaseViewV2(cid)
+            .pipe(map(caseView => {
+            this.cachedCaseView = plainToClassFromExist(new CaseView(), caseView);
+            this.setBasicFields(this.cachedCaseView.tabs);
+            this.announceCase(this.cachedCaseView);
+            return this.cachedCaseView;
+        }));
+    }
+    setBasicFields(tabs) {
+        tabs.forEach((t) => {
+            const caseName = t.fields.find(f => f.id === CaseNotifier.CASE_NAME);
+            const caseLocation = t.fields.find(f => f.id === CaseNotifier.CASE_LOCATION);
+            if (caseName || caseLocation) {
+                this.cachedCaseView.basicFields = {
+                    caseNameHmctsInternal: caseName ? caseName.value : null,
+                    caseManagementLocation: caseLocation ? caseLocation.value : null
+                };
+            }
+        });
+    }
+    static ɵfac = function CaseNotifier_Factory(t) { return new (t || CaseNotifier)(i0.ɵɵinject(CasesService)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CaseNotifier, factory: CaseNotifier.ɵfac });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseNotifier, [{
+        type: Injectable
+    }], () => [{ type: CasesService }], null); })();
+
 class DocumentManagementService {
     http;
     appConfig;
+    caseNotifierService;
     static PDF = 'pdf';
     static IMAGE = 'image';
     static WORD = 'word';
@@ -7007,9 +7087,10 @@ class DocumentManagementService {
     static wordList = ['DOC', 'DOCX', 'doc', 'docx'];
     static excelList = ['XLS', 'XLSX', 'xls', 'xlsx'];
     static powerpointList = ['PPT', 'PPTX', 'ppt', 'pptx'];
-    constructor(http, appConfig) {
+    constructor(http, appConfig, caseNotifierService) {
         this.http = http;
         this.appConfig = appConfig;
+        this.caseNotifierService = caseNotifierService;
     }
     uploadFile(formData) {
         const url = this.getDocStoreUrl();
@@ -7087,14 +7168,22 @@ class DocumentManagementService {
         return documentBinaryUrl.replace(remoteDocumentManagementPattern, this.getDocStoreUrl());
     }
     getDocStoreUrl() {
-        return this.appConfig.getDocumentSecureMode() ? this.appConfig.getDocumentManagementUrlV2() : this.appConfig.getDocumentManagementUrl();
-    }
-    static ɵfac = function DocumentManagementService_Factory(t) { return new (t || DocumentManagementService)(i0.ɵɵinject(HttpService), i0.ɵɵinject(AbstractAppConfig)); };
+        let docStoreUrl = '';
+        this.caseNotifierService.caseView.subscribe((caseDetails) => {
+            const caseType = caseDetails?.case_type?.id;
+            const documentSecureModeCaseTypeExclusions = this.appConfig.getDocumentSecureModeCaseTypeExclusions()?.split(',');
+            const isDocumentOnExclusionList = documentSecureModeCaseTypeExclusions?.includes(caseType);
+            const documentSecureModeEnabled = this.appConfig.getDocumentSecureMode();
+            docStoreUrl = (documentSecureModeEnabled && !isDocumentOnExclusionList) ? this.appConfig.getDocumentManagementUrlV2() : this.appConfig.getDocumentManagementUrl();
+        }).unsubscribe();
+        return docStoreUrl;
+    }
+    static ɵfac = function DocumentManagementService_Factory(t) { return new (t || DocumentManagementService)(i0.ɵɵinject(HttpService), i0.ɵɵinject(AbstractAppConfig), i0.ɵɵinject(CaseNotifier)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: DocumentManagementService, factory: DocumentManagementService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DocumentManagementService, [{
         type: Injectable
-    }], () => [{ type: HttpService }, { type: AbstractAppConfig }], null); })();
+    }], () => [{ type: HttpService }, { type: AbstractAppConfig }, { type: CaseNotifier }], null); })();
 
 class ErrorNotifierService {
     errorSource = new BehaviorSubject(null);
@@ -8435,51 +8524,6 @@ class CaseworkerService {
         type: Injectable
     }], () => [{ type: HttpService }, { type: AbstractAppConfig }, { type: HttpErrorService }], null); })();
 
-class CaseNotifier {
-    casesService;
-    static CASE_NAME = 'caseNameHmctsInternal';
-    static CASE_LOCATION = 'caseManagementLocation';
-    caseViewSource = new BehaviorSubject(new CaseView());
-    caseView = this.caseViewSource.asObservable();
-    cachedCaseView;
-    constructor(casesService) {
-        this.casesService = casesService;
-    }
-    removeCachedCase() {
-        this.cachedCaseView = null;
-    }
-    announceCase(c) {
-        this.caseViewSource.next(c);
-    }
-    fetchAndRefresh(cid) {
-        return this.casesService
-            .getCaseViewV2(cid)
-            .pipe(map(caseView => {
-            this.cachedCaseView = plainToClassFromExist(new CaseView(), caseView);
-            this.setBasicFields(this.cachedCaseView.tabs);
-            this.announceCase(this.cachedCaseView);
-            return this.cachedCaseView;
-        }));
-    }
-    setBasicFields(tabs) {
-        tabs.forEach((t) => {
-            const caseName = t.fields.find(f => f.id === CaseNotifier.CASE_NAME);
-            const caseLocation = t.fields.find(f => f.id === CaseNotifier.CASE_LOCATION);
-            if (caseName || caseLocation) {
-                this.cachedCaseView.basicFields = {
-                    caseNameHmctsInternal: caseName ? caseName.value : null,
-                    caseManagementLocation: caseLocation ? caseLocation.value : null
-                };
-            }
-        });
-    }
-    static ɵfac = function CaseNotifier_Factory(t) { return new (t || CaseNotifier)(i0.ɵɵinject(CasesService)); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CaseNotifier, factory: CaseNotifier.ɵfac });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseNotifier, [{
-        type: Injectable
-    }], () => [{ type: CasesService }], null); })();
-
 var Permissions;
 (function (Permissions) {
     Permissions["Own"] = "OWN";
@@ -11476,12 +11520,11 @@ class CallbackErrorsContext {
 function CallbackErrorsComponent_div_0_ng_container_2_li_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
     i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const errorMsg_r1 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, errorMsg_r1), " ");
+    i0.ɵɵtextInterpolate1(" ", errorMsg_r1, " ");
 } }
 function CallbackErrorsComponent_div_0_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -11490,7 +11533,7 @@ function CallbackErrorsComponent_div_0_ng_container_2_Template(rf, ctx) { if (rf
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "ul", 4);
-    i0.ɵɵtemplate(5, CallbackErrorsComponent_div_0_ng_container_2_li_5_Template, 3, 3, "li", 5);
+    i0.ɵɵtemplate(5, CallbackErrorsComponent_div_0_ng_container_2_li_5_Template, 2, 1, "li", 5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -11506,12 +11549,11 @@ function CallbackErrorsComponent_div_0_br_3_Template(rf, ctx) { if (rf & 1) {
 function CallbackErrorsComponent_div_0_ng_container_4_li_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
     i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const warningMsg_r3 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, warningMsg_r3), " ");
+    i0.ɵɵtextInterpolate1(" ", warningMsg_r3, " ");
 } }
 function CallbackErrorsComponent_div_0_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -11520,7 +11562,7 @@ function CallbackErrorsComponent_div_0_ng_container_4_Template(rf, ctx) { if (rf
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "ul", 6);
-    i0.ɵɵtemplate(5, CallbackErrorsComponent_div_0_ng_container_4_li_5_Template, 3, 3, "li", 5);
+    i0.ɵɵtemplate(5, CallbackErrorsComponent_div_0_ng_container_4_li_5_Template, 2, 1, "li", 5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -11594,7 +11636,7 @@ class CallbackErrorsComponent {
             && this.error.details.field_errors.length;
     }
     static ɵfac = function CallbackErrorsComponent_Factory(t) { return new (t || CallbackErrorsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CallbackErrorsComponent, selectors: [["ccd-callback-errors"]], inputs: { triggerTextIgnore: "triggerTextIgnore", triggerTextContinue: "triggerTextContinue", callbackErrorsSubject: "callbackErrorsSubject" }, outputs: { callbackErrorsContext: "callbackErrorsContext" }, decls: 1, vars: 1, consts: [["class", "error-summary", "role", "group", "tabindex", "-1", 4, "ngIf"], ["role", "group", "tabindex", "-1", 1, "error-summary"], [4, "ngIf"], [1, "heading-h3", "error-summary-heading"], ["id", "errors", 1, "error-summary-list"], [4, "ngFor", "ngForOf"], ["id", "warnings", 1, "error-summary-list"]], template: function CallbackErrorsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CallbackErrorsComponent, selectors: [["ccd-callback-errors"]], inputs: { triggerTextIgnore: "triggerTextIgnore", triggerTextContinue: "triggerTextContinue", callbackErrorsSubject: "callbackErrorsSubject" }, outputs: { callbackErrorsContext: "callbackErrorsContext" }, decls: 1, vars: 1, consts: [["class", "error-summary", "tabindex", "-1", 4, "ngIf"], ["tabindex", "-1", 1, "error-summary"], [4, "ngIf"], [1, "heading-h3", "error-summary-heading"], ["id", "errors", 1, "error-summary-list"], [4, "ngFor", "ngForOf"], ["id", "warnings", 1, "error-summary-list"]], template: function CallbackErrorsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CallbackErrorsComponent_div_0_Template, 5, 6, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.hasErrors() || ctx.hasWarnings());
@@ -11602,7 +11644,7 @@ class CallbackErrorsComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CallbackErrorsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-callback-errors', template: "<div *ngIf=\"hasErrors() || hasWarnings()\" class=\"error-summary\" role=\"group\"\n     [attr.aria-label]=\"'Cannot continue because the service reported one or more errors or warnings' | rpxTranslate\"\n     tabindex=\"-1\">\n  <ng-container *ngIf=\"hasErrors()\">\n    <h3 class=\"heading-h3 error-summary-heading\">\n      {{'Errors' | rpxTranslate}}\n    </h3>\n    <ul id=\"errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let errorMsg of error.callbackErrors\">\n        {{errorMsg | rpxTranslate}}\n      </li>\n    </ul>\n  </ng-container>\n  <!-- Add a break for spacing if there are both errors and warnings -->\n  <br *ngIf=\"hasErrors() && hasWarnings()\">\n  <ng-container *ngIf=\"hasWarnings()\">\n    <h3 class=\"heading-h3 error-summary-heading\">\n      {{'Warnings' | rpxTranslate}}\n    </h3>\n    <ul id=\"warnings\" class=\"error-summary-list\">\n      <li *ngFor=\"let warningMsg of error.callbackWarnings\">\n        {{warningMsg | rpxTranslate}}\n      </li>\n    </ul>\n  </ng-container>\n</div>\n" }]
+        args: [{ selector: 'ccd-callback-errors', template: "<div *ngIf=\"hasErrors() || hasWarnings()\" class=\"error-summary\"\n     [attr.aria-label]=\"'Cannot continue because the service reported one or more errors or warnings' | rpxTranslate\"\n     tabindex=\"-1\">\n  <ng-container *ngIf=\"hasErrors()\">\n    <h3 class=\"heading-h3 error-summary-heading\">\n      {{'Errors' | rpxTranslate}}\n    </h3>\n    <ul id=\"errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let errorMsg of error.callbackErrors\">\n        {{errorMsg}}\n      </li>\n    </ul>\n  </ng-container>\n  <!-- Add a break for spacing if there are both errors and warnings -->\n  <br *ngIf=\"hasErrors() && hasWarnings()\">\n  <ng-container *ngIf=\"hasWarnings()\">\n    <h3 class=\"heading-h3 error-summary-heading\">\n      {{'Warnings' | rpxTranslate}}\n    </h3>\n    <ul id=\"warnings\" class=\"error-summary-list\">\n      <li *ngFor=\"let warningMsg of error.callbackWarnings\">\n        {{warningMsg}}\n      </li>\n    </ul>\n  </ng-container>\n</div>\n" }]
     }], null, { triggerTextIgnore: [{
             type: Input
         }], triggerTextContinue: [{
@@ -12073,34 +12115,46 @@ class FieldsFilterPipe {
             }]
     }], null, null); })();
 
-function WriteComplexFieldComponent_h2_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h2", 3);
-    i0.ɵɵtext(1);
+function WriteComplexFieldComponent_legend_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "h2", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "ccdFieldLabel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, ctx_r0.caseField));
+} }
+function WriteComplexFieldComponent_legend_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "legend");
+    i0.ɵɵtemplate(1, WriteComplexFieldComponent_legend_2_ng_container_1_Template, 4, 3, "ng-container", 1);
     i0.ɵɵpipe(2, "ccdFieldLabel");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
+    i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
 } }
-function WriteComplexFieldComponent_ng_container_4_ccd_field_read_2_Template(rf, ctx) { if (rf & 1) {
+function WriteComplexFieldComponent_ng_container_3_ccd_field_read_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-field-read", 7);
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("caseField", ctx_r0.buildField(field_r2))("caseFields", ctx_r0.caseFields)("formGroup", ctx_r0.formGroup)("withLabel", true);
 } }
-function WriteComplexFieldComponent_ng_container_4_ccd_field_write_3_Template(rf, ctx) { if (rf & 1) {
+function WriteComplexFieldComponent_ng_container_3_ccd_field_write_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-field-write", 8);
 } if (rf & 2) {
     const field_r2 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("caseField", field_r2)("caseFields", ctx_r0.caseFields)("formGroup", ctx_r0.formGroup)("parent", ctx_r0.complexGroup)("idPrefix", ctx_r0.buildIdPrefix(field_r2))("hidden", field_r2.hidden)("isExpanded", ctx_r0.isExpanded)("isInSearchBlock", ctx_r0.isInSearchBlock);
 } }
-function WriteComplexFieldComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+function WriteComplexFieldComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0, 4);
     i0.ɵɵpipe(1, "ccdIsReadOnly");
-    i0.ɵɵtemplate(2, WriteComplexFieldComponent_ng_container_4_ccd_field_read_2_Template, 1, 4, "ccd-field-read", 5)(3, WriteComplexFieldComponent_ng_container_4_ccd_field_write_3_Template, 1, 8, "ccd-field-write", 6);
+    i0.ɵɵtemplate(2, WriteComplexFieldComponent_ng_container_3_ccd_field_read_2_Template, 1, 4, "ccd-field-read", 5)(3, WriteComplexFieldComponent_ng_container_3_ccd_field_write_3_Template, 1, 8, "ccd-field-write", 6);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const field_r2 = ctx.$implicit;
@@ -12207,15 +12261,13 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
         });
     }
     static ɵfac = function WriteComplexFieldComponent_Factory(t) { return new (t || WriteComplexFieldComponent)(i0.ɵɵdirectiveInject(IsCompoundPipe), i0.ɵɵdirectiveInject(FormValidatorsService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteComplexFieldComponent, selectors: [["ccd-write-complex-type-field"]], inputs: { caseFields: "caseFields", renderLabel: "renderLabel", ignoreMandatory: "ignoreMandatory" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "form-group", 3, "id"], ["class", "heading-h2", 4, "ngIf"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "heading-h2"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"]], template: function WriteComplexFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
-            i0.ɵɵtemplate(3, WriteComplexFieldComponent_h2_3_Template, 3, 3, "h2", 1);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, WriteComplexFieldComponent_ng_container_4_Template, 4, 5, "ng-container", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteComplexFieldComponent, selectors: [["ccd-write-complex-type-field"]], inputs: { caseFields: "caseFields", renderLabel: "renderLabel", ignoreMandatory: "ignoreMandatory" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [[1, "form-group", 3, "id"], [4, "ngIf"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "heading-h2"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"]], template: function WriteComplexFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "fieldset");
+            i0.ɵɵtemplate(2, WriteComplexFieldComponent_legend_2_Template, 3, 3, "legend", 1)(3, WriteComplexFieldComponent_ng_container_3_Template, 4, 5, "ng-container", 2);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("id", ctx.id());
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.renderLabel);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.complexFields);
@@ -12223,7 +12275,7 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteComplexFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-complex-type-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <fieldset>\n    <legend><h2 *ngIf=\"renderLabel\" class=\"heading-h2\">{{(caseField | ccdFieldLabel)}}</h2></legend>\n    <ng-container [ngSwitch]=\"field | ccdIsReadOnly\" *ngFor=\"let field of complexFields\">\n      <ccd-field-read *ngSwitchCase=\"true\"\n                      ccdLabelSubstitutor\n                      [caseField]=\"buildField(field)\"\n                      [caseFields]=\"caseFields\"\n                      [formGroup]=\"formGroup\"\n                      [withLabel]=\"true\">\n      </ccd-field-read>\n      <ccd-field-write *ngSwitchCase=\"false\"\n                       ccdLabelSubstitutor\n                       [caseField]=\"field\"\n                       [caseFields]=\"caseFields\"\n                       [formGroup]=\"formGroup\"\n                       [parent]=\"complexGroup\"\n                       [idPrefix]=\"buildIdPrefix(field)\"\n                       [hidden]=\"field.hidden\"\n                       [isExpanded]=\"isExpanded\"\n                       [isInSearchBlock]=\"isInSearchBlock\">\n      </ccd-field-write>\n    </ng-container>\n  </fieldset>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}\n"] }]
+        args: [{ selector: 'ccd-write-complex-type-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <fieldset>\n    <legend *ngIf=\"renderLabel\">\n      <ng-container *ngIf=\"caseField | ccdFieldLabel\">\n        <h2 class=\"heading-h2\">{{(caseField | ccdFieldLabel)}}</h2>\n      </ng-container>\n    </legend>\n    <ng-container [ngSwitch]=\"field | ccdIsReadOnly\" *ngFor=\"let field of complexFields\">\n      <ccd-field-read *ngSwitchCase=\"true\"\n                      ccdLabelSubstitutor\n                      [caseField]=\"buildField(field)\"\n                      [caseFields]=\"caseFields\"\n                      [formGroup]=\"formGroup\"\n                      [withLabel]=\"true\">\n      </ccd-field-read>\n      <ccd-field-write *ngSwitchCase=\"false\"\n                       ccdLabelSubstitutor\n                       [caseField]=\"field\"\n                       [caseFields]=\"caseFields\"\n                       [formGroup]=\"formGroup\"\n                       [parent]=\"complexGroup\"\n                       [idPrefix]=\"buildIdPrefix(field)\"\n                       [hidden]=\"field.hidden\"\n                       [isExpanded]=\"isExpanded\"\n                       [isInSearchBlock]=\"isInSearchBlock\">\n      </ccd-field-write>\n    </ng-container>\n  </fieldset>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}\n"] }]
     }], () => [{ type: IsCompoundPipe }, { type: FormValidatorsService }], { caseFields: [{
             type: Input
         }], renderLabel: [{
@@ -15478,7 +15530,7 @@ function WriteDynamicListFieldComponent_span_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r0.dynamicListFormControl.errors, ctx_r0.caseField.label));
 } }
 function WriteDynamicListFieldComponent_option_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 11);
+    i0.ɵɵelementStart(0, "option", 6);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -15513,7 +15565,7 @@ class WriteDynamicListFieldComponent extends AbstractFieldWriteComponent {
         this.dynamicListFormControl.setValue(this.caseField.value);
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵWriteDynamicListFieldComponent_BaseFactory; return function WriteDynamicListFieldComponent_Factory(t) { return (ɵWriteDynamicListFieldComponent_BaseFactory || (ɵWriteDynamicListFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(WriteDynamicListFieldComponent)))(t || WriteDynamicListFieldComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDynamicListFieldComponent, selectors: [["ccd-write-dynamic-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 15, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-control", "ccd-dropdown", "bottom-30", 3, "id", "formControl"], [3, "ngValue"], ["role", "option", 3, "ngValue", 4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], ["role", "option", 3, "ngValue"]], template: function WriteDynamicListFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDynamicListFieldComponent, selectors: [["ccd-write-dynamic-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 15, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-control", "ccd-dropdown", "bottom-30", 3, "id", "formControl"], [3, "ngValue"], [3, "ngValue", 4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteDynamicListFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
             i0.ɵɵtemplate(2, WriteDynamicListFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
@@ -15548,19 +15600,20 @@ class WriteDynamicListFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDynamicListFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-dynamic-list-field', template: "<div class=\"form-group\"\n  [ngClass]=\"{'form-group-error': !dynamicListFormControl.valid && (dynamicListFormControl.dirty || dynamicListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">{{'Select an option from the dropdown' | rpxTranslate}}</span>\n  <span class=\"error-message\"\n    *ngIf=\"dynamicListFormControl.errors && dynamicListFormControl.dirty\">{{(dynamicListFormControl.errors |\n    ccdFirstError:caseField.label)}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\"\n    [formControl]=\"dynamicListFormControl\">\n    <option [ngValue]=null>{{'--Select a value--' | rpxTranslate}}</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of caseField.list_items\" role=\"option\">{{type.label | rpxTranslate}}</option>\n  </select>\n</div>\n" }]
+        args: [{ selector: 'ccd-write-dynamic-list-field', template: "<div class=\"form-group\"\n  [ngClass]=\"{'form-group-error': !dynamicListFormControl.valid && (dynamicListFormControl.dirty || dynamicListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">{{'Select an option from the dropdown' | rpxTranslate}}</span>\n  <span class=\"error-message\"\n    *ngIf=\"dynamicListFormControl.errors && dynamicListFormControl.dirty\">{{(dynamicListFormControl.errors |\n    ccdFirstError:caseField.label)}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\"\n    [formControl]=\"dynamicListFormControl\">\n    <option [ngValue]=null>{{'--Select a value--' | rpxTranslate}}</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of caseField.list_items\">{{type.label | rpxTranslate}}</option>\n  </select>\n</div>\n" }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteDynamicListFieldComponent, { className: "WriteDynamicListFieldComponent", filePath: "lib/shared/components/palette/dynamic-list/write-dynamic-list-field.component.ts", lineNumber: 9 }); })();
 
 class MarkdownComponent {
     router;
     renderer;
+    ngZone;
     content;
-    markdownUseHrefAsRouterLink;
     renderUrlToTextFeature = true;
-    constructor(router, renderer) {
+    constructor(router, renderer, ngZone) {
         this.router = router;
         this.renderer = renderer;
+        this.ngZone = ngZone;
     }
     ngOnInit() {
         this.content = this.content.replace(/  \n/g, '<br>');
@@ -15568,12 +15621,28 @@ class MarkdownComponent {
             this.renderUrlToText();
         }
     }
-    onMarkdownClick(event) {
-        // If we don't have an anchor tag, we don't need to do anything.
-        if (event.target instanceof HTMLAnchorElement === false) {
-            return;
-        }
-        return true;
+    interceptClick(event) {
+        this.ngZone.runOutsideAngular(() => {
+            const target = event.target;
+            if (target.tagName.toLowerCase() === 'a') {
+                const href = target.getAttribute('href');
+                if (href && href.startsWith('/') && !href.startsWith('//')) {
+                    const currentUrl = window.location.href;
+                    if (currentUrl.includes('trigger')) {
+                        // if we are already in an event and there is a markdown we should reload the page as without the components will not reinitialise
+                        this.ngZone.run(() => {
+                            this.router.navigateByUrl(href);
+                        });
+                    }
+                    else {
+                        event.preventDefault();
+                        this.ngZone.run(() => {
+                            this.router.navigateByUrl(href);
+                        });
+                    }
+                }
+            }
+        });
     }
     renderUrlToText() {
         const renderer = new marked.Renderer();
@@ -15596,34 +15665,27 @@ class MarkdownComponent {
         const markdownLinkRegex = /\[([^\]]+)\]\(?([^ )]+)\)/g;
         return markdownLinkRegex.test(inputString);
     }
-    static ɵfac = function MarkdownComponent_Factory(t) { return new (t || MarkdownComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i0.Renderer2)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownComponent, selectors: [["ccd-markdown"]], hostBindings: function MarkdownComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function MarkdownComponent_click_HostBindingHandler($event) { return ctx.onMarkdownClick($event); });
-        } }, inputs: { content: "content", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink", renderUrlToTextFeature: "renderUrlToTextFeature" }, decls: 4, vars: 5, consts: [[1, "markdown", 3, "data"]], template: function MarkdownComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div");
-            i0.ɵɵelement(1, "markdown", 0);
+    static ɵfac = function MarkdownComponent_Factory(t) { return new (t || MarkdownComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownComponent, selectors: [["ccd-markdown"]], inputs: { content: "content", renderUrlToTextFeature: "renderUrlToTextFeature" }, decls: 4, vars: 5, consts: [[1, "markdown", 3, "click", "data"]], template: function MarkdownComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div")(1, "markdown", 0);
             i0.ɵɵpipe(2, "ccdCaseReference");
             i0.ɵɵpipe(3, "rpxTranslate");
-            i0.ɵɵelementEnd();
+            i0.ɵɵlistener("click", function MarkdownComponent_Template_markdown_click_1_listener($event) { return ctx.interceptClick($event); });
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("data", i0.ɵɵpipeBind1(3, 3, i0.ɵɵpipeBind1(2, 1, ctx.content)));
-        } }, dependencies: [i2$1.MarkdownComponent, i1.RpxTranslatePipe, CaseReferencePipe], encapsulation: 2 });
+        } }, dependencies: [i2$1.MarkdownComponent, i1.RpxTranslatePipe, CaseReferencePipe], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarkdownComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-markdown', template: "<div><markdown class=\"markdown\" [data]=\"content | ccdCaseReference | rpxTranslate\"></markdown></div>\n" }]
-    }], () => [{ type: i1$1.Router }, { type: i0.Renderer2 }], { content: [{
-            type: Input
-        }], markdownUseHrefAsRouterLink: [{
+        args: [{ selector: 'ccd-markdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div><markdown class=\"markdown\" (click)=\"interceptClick($event)\" [data]=\"content | ccdCaseReference | rpxTranslate\"></markdown></div>\n" }]
+    }], () => [{ type: i1$1.Router }, { type: i0.Renderer2 }, { type: i0.NgZone }], { content: [{
             type: Input
         }], renderUrlToTextFeature: [{
             type: Input
-        }], onMarkdownClick: [{
-            type: HostListener,
-            args: ['click', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MarkdownComponent, { className: "MarkdownComponent", filePath: "lib/shared/components/palette/markdown/markdown.component.ts", lineNumber: 9 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MarkdownComponent, { className: "MarkdownComponent", filePath: "lib/shared/components/palette/markdown/markdown.component.ts", lineNumber: 10 }); })();
 
 class FixedListPipe {
     static EMPTY = '';
@@ -16639,45 +16701,50 @@ function LabelFieldComponent_ccd_markdown_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(1, "rpxTranslate");
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("content", i0.ɵɵpipeBind1(1, 2, ctx_r0.caseField.label))("markdownUseHrefAsRouterLink", ctx_r0.markdownUseHrefAsRouterLink);
+    i0.ɵɵproperty("content", i0.ɵɵpipeBind1(1, 1, ctx_r0.caseField.label));
 } }
 function LabelFieldComponent_ccd_markdown_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-markdown", 2);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("content", ctx_r0.caseField.value || ctx_r0.caseField.label)("markdownUseHrefAsRouterLink", ctx_r0.markdownUseHrefAsRouterLink);
+    i0.ɵɵproperty("content", ctx_r0.caseField.label);
+} }
+function LabelFieldComponent_ccd_markdown_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ccd-markdown", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("content", ctx_r0.caseField.value || ctx_r0.caseField.label);
 } }
 class LabelFieldComponent {
     caseField;
     caseFields = [];
     labelCanBeTranslated = false;
-    markdownUseHrefAsRouterLink;
     static ɵfac = function LabelFieldComponent_Factory(t) { return new (t || LabelFieldComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LabelFieldComponent, selectors: [["ccd-label-field"]], inputs: { caseField: "caseField", caseFields: "caseFields", labelCanBeTranslated: "labelCanBeTranslated", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink" }, decls: 5, vars: 6, consts: [["ccdLabelSubstitutor", "", 1, "case-field", 3, "hidden", "caseField", "contextFields", "id"], [3, "content", "markdownUseHrefAsRouterLink", 4, "ngIf"], [3, "content", "markdownUseHrefAsRouterLink"]], template: function LabelFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LabelFieldComponent, selectors: [["ccd-label-field"]], inputs: { caseField: "caseField", caseFields: "caseFields", labelCanBeTranslated: "labelCanBeTranslated" }, decls: 6, vars: 7, consts: [["ccdLabelSubstitutor", "", 1, "case-field", 3, "hidden", "caseField", "contextFields", "id"], [3, "content", 4, "ngIf"], [3, "content"]], template: function LabelFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "dl", 0)(1, "dt");
-            i0.ɵɵtemplate(2, LabelFieldComponent_ccd_markdown_2_Template, 2, 4, "ccd-markdown", 1)(3, LabelFieldComponent_ccd_markdown_3_Template, 1, 2, "ccd-markdown", 1);
+            i0.ɵɵtemplate(2, LabelFieldComponent_ccd_markdown_2_Template, 2, 3, "ccd-markdown", 1)(3, LabelFieldComponent_ccd_markdown_3_Template, 1, 1, "ccd-markdown", 1)(4, LabelFieldComponent_ccd_markdown_4_Template, 1, 1, "ccd-markdown", 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(4, "dd");
+            i0.ɵɵelement(5, "dd");
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("hidden", ctx.caseField.hidden)("caseField", ctx.caseField)("contextFields", ctx.caseFields)("id", ctx.caseField.id);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated);
+            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated && !ctx.caseField.isTranslated);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated && ctx.caseField.isTranslated);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.labelCanBeTranslated);
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-label-field', template: "<dl [hidden]=\"caseField.hidden\" class=\"case-field\" ccdLabelSubstitutor [caseField]=\"caseField\" [contextFields]=\"caseFields\" [id]=\"caseField.id\">\n  <dt>\n    <ccd-markdown *ngIf=\"labelCanBeTranslated\" [content]=\"caseField.label | rpxTranslate\" [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"!labelCanBeTranslated\" [content]=\"caseField.value || caseField.label\" [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n    </ccd-markdown>\n  </dt>\n  <dd></dd>\n</dl>\n" }]
+        args: [{ selector: 'ccd-label-field', template: "<dl [hidden]=\"caseField.hidden\" class=\"case-field\" ccdLabelSubstitutor [caseField]=\"caseField\" [contextFields]=\"caseFields\" [id]=\"caseField.id\">\n  <dt>\n    <ccd-markdown *ngIf=\"labelCanBeTranslated && !caseField.isTranslated\" [content]=\"caseField.label | rpxTranslate\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"labelCanBeTranslated && caseField.isTranslated\" [content]=\"caseField.label\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"!labelCanBeTranslated\" [content]=\"caseField.value || caseField.label\">\n    </ccd-markdown>\n  </dt>\n  <dd></dd>\n</dl>\n" }]
     }], null, { caseField: [{
             type: Input
         }], caseFields: [{
             type: Input
         }], labelCanBeTranslated: [{
             type: Input
-        }], markdownUseHrefAsRouterLink: [{
-            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LabelFieldComponent, { className: "LabelFieldComponent", filePath: "lib/shared/components/palette/label/label-field.component.ts", lineNumber: 8 }); })();
 
@@ -17015,7 +17082,7 @@ class CheckYourAnswersComponent extends AbstractJourneyComponent {
             i0.ɵɵelementStart(12, "th", 8);
             i0.ɵɵtext(13, "Reasons for case link");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(14, "th", 8);
+            i0.ɵɵelement(14, "td", 8);
             i0.ɵɵtemplate(15, CheckYourAnswersComponent_th_15_Template, 1, 0, "th", 9);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(16, "tbody", 10);
@@ -17036,7 +17103,7 @@ class CheckYourAnswersComponent extends AbstractJourneyComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckYourAnswersComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-linked-cases-check-your-answers', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-full\">\n    <h1 class=\"govuk-heading-xl\">Check your answers</h1>\n    <!-- Top table for manage link cases journey -->\n    <table id=\"cases-to-unlink-table\" class=\"govuk-table\" *ngIf=\"!isLinkCasesJourney\">\n      <caption class=\"govuk-table__caption govuk-table__caption--m\">Cases to unlink</caption>\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"col\" class=\"govuk-table__header\">Case name and number</th>\n          <th scope=\"col\" class=\"govuk-table__header\"></th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let case of casesToUnlink\">\n          <td class=\"govuk-table__cell\">\n            {{case.caseName}}  <br> {{case.caseReference | ccdCaseReference}}\n          </td>\n          <td class=\"govuk-table__cell\">\n            <a href=\"javascript:void(0)\" class=\"govuk-link govuk-link--no-visited-state float-right\" (click)=\"onChange()\">Change</a>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\" *ngIf=\"!casesToUnlink.length\">\n          <td class=\"govuk-table__cell\" colspan=\"2\">\n            None\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!-- Table for both link case and manage link case journeys -->\n    <table id=\"linked-cases-table\" class=\"govuk-table\">\n      <caption class=\"govuk-table__caption govuk-table__caption--m\">{{linkedCasesTableCaption}}</caption>\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"col\" class=\"govuk-table__header\">Case name and number</th>\n          <th scope=\"col\" class=\"govuk-table__header\">Reasons for case link</th>\n          <th scope=\"col\" class=\"govuk-table__header\"></th>\n          <th scope=\"col\" class=\"govuk-table__header\" *ngIf=\"isLinkCasesJourney\"></th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let case of linkedCases\">\n          <td class=\"govuk-table__cell\">\n            <span>{{case.caseName}}  <br> {{case.caseReference | ccdCaseReference}} </span>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngFor=\"let reason of case.reasons; last as isLast\">\n              <span *ngIf=\"isLinkCasesJourney\">\n                {{reason | ccdLinkCasesReasonValue}}\n              </span>\n              <span *ngIf=\"!isLinkCasesJourney\">\n                {{reason.Reason.value | ccdLinkCasesReasonValue}}\n              </span>\n              <br *ngIf=\"!isLast\">\n            </span>\n          </td>\n          <td class=\"govuk-table__cell\"></td>\n          <td class=\"govuk-table__cell\" *ngIf=\"isLinkCasesJourney\">\n            <a href=\"javascript:void(0)\" class=\"govuk-link govuk-link--no-visited-state float-right\" (click)=\"onChange()\">Change</a>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\" *ngIf=\"!linkedCases.length\">\n          <td class=\"govuk-table__cell\" colspan=\"4\">\n            None\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".float-right{float:right}\n"] }]
+        args: [{ selector: 'ccd-linked-cases-check-your-answers', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-full\">\n    <h1 class=\"govuk-heading-xl\">Check your answers</h1>\n    <!-- Top table for manage link cases journey -->\n    <table id=\"cases-to-unlink-table\" class=\"govuk-table\" *ngIf=\"!isLinkCasesJourney\">\n      <caption class=\"govuk-table__caption govuk-table__caption--m\">Cases to unlink</caption>\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"col\" class=\"govuk-table__header\">Case name and number</th>\n          <th scope=\"col\" class=\"govuk-table__header\"></th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let case of casesToUnlink\">\n          <td class=\"govuk-table__cell\">\n            {{case.caseName}}  <br> {{case.caseReference | ccdCaseReference}}\n          </td>\n          <td class=\"govuk-table__cell\">\n            <a href=\"javascript:void(0)\" class=\"govuk-link govuk-link--no-visited-state float-right\" (click)=\"onChange()\">Change</a>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\" *ngIf=\"!casesToUnlink.length\">\n          <td class=\"govuk-table__cell\" colspan=\"2\">\n            None\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!-- Table for both link case and manage link case journeys -->\n    <table id=\"linked-cases-table\" class=\"govuk-table\">\n      <caption class=\"govuk-table__caption govuk-table__caption--m\">{{linkedCasesTableCaption}}</caption>\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"col\" class=\"govuk-table__header\">Case name and number</th>\n          <th scope=\"col\" class=\"govuk-table__header\">Reasons for case link</th>\n          <td scope=\"col\" class=\"govuk-table__header\"></td>\n          <th scope=\"col\" class=\"govuk-table__header\" *ngIf=\"isLinkCasesJourney\"></th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let case of linkedCases\">\n          <td class=\"govuk-table__cell\">\n            <span>{{case.caseName}}  <br> {{case.caseReference | ccdCaseReference}} </span>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngFor=\"let reason of case.reasons; last as isLast\">\n              <span *ngIf=\"isLinkCasesJourney\">\n                {{reason | ccdLinkCasesReasonValue}}\n              </span>\n              <span *ngIf=\"!isLinkCasesJourney\">\n                {{reason.Reason.value | ccdLinkCasesReasonValue}}\n              </span>\n              <br *ngIf=\"!isLast\">\n            </span>\n          </td>\n          <td class=\"govuk-table__cell\"></td>\n          <td class=\"govuk-table__cell\" *ngIf=\"isLinkCasesJourney\">\n            <a href=\"javascript:void(0)\" class=\"govuk-link govuk-link--no-visited-state float-right\" (click)=\"onChange()\">Change</a>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\" *ngIf=\"!linkedCases.length\">\n          <td class=\"govuk-table__cell\" colspan=\"4\">\n            None\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".float-right{float:right}\n"] }]
     }], () => [{ type: LinkedCasesService }, { type: MultipageComponentStateService }], { linkedCasesStateEmitter: [{
             type: Output
         }] }); })();
@@ -20425,6 +20492,7 @@ var RaiseQueryErrorMessage;
     RaiseQueryErrorMessage["QUERY_BODY"] = "Enter query details";
     RaiseQueryErrorMessage["QUERY_HEARING_RELATED"] = "Select whether the query is hearing related or not";
     RaiseQueryErrorMessage["QUERY_HEARING_DATE"] = "Enter a valid date";
+    RaiseQueryErrorMessage["QUERY_SUBJECT_MAX_LENGTH"] = "Query subject must be less than 201 characters in length";
     RaiseQueryErrorMessage["RESPOND_QUERY_BODY"] = "Add a response before continue";
 })(RaiseQueryErrorMessage || (RaiseQueryErrorMessage = {}));
 
@@ -20790,11 +20858,12 @@ class QueryManagementUtils {
     static caseLevelCaseFieldId = 'CaseQueriesCollection';
     static FIELD_TYPE_COLLECTION = 'Collection';
     static FIELD_TYPE_COMPLEX = 'Complex';
+    static DISPLAY_CONTEXT_READONLY = 'READONLY';
     static extractCaseQueriesFromCaseField(caseField) {
-        const { field_type, value } = caseField;
+        const { field_type, value, display_context } = caseField;
         // Handle Complex type fields
         if (field_type.type === QueryManagementUtils.FIELD_TYPE_COMPLEX) {
-            if (field_type.id === QueryManagementUtils.caseLevelCaseFieldId && QueryManagementUtils.isNonEmptyObject(value)) {
+            if (field_type.id === QueryManagementUtils.caseLevelCaseFieldId && display_context !== QueryManagementUtils.DISPLAY_CONTEXT_READONLY && QueryManagementUtils.isNonEmptyObject(value)) {
                 return value;
             }
             return null;
@@ -21066,6 +21135,9 @@ class QueryCheckYourAnswersComponent {
     CASE_QUERIES_COLLECTION_ID = 'CaseQueriesCollection';
     FIELD_TYPE_COMPLEX = 'Complex';
     DISPLAY_CONTEXT_READONLY = 'READONLY';
+    QM_SELECT_FIRST_COLLECTION = 'selectFirstCollection';
+    QM_COLLECTION_PROMPT = 'promptQmCollection';
+    CIVIL_JURISDICTION = 'CIVIL';
     formGroup;
     queryItem;
     queryCreateContext;
@@ -21078,6 +21150,8 @@ class QueryCheckYourAnswersComponent {
     tid;
     createEventSubscription;
     searchTasksSubscription;
+    firstCollectionPicked = false; // Track whether the first collection has been picked
+    firstCollectionOrder;
     queryCreateContextEnum = QueryCreateContext;
     eventCompletionParams;
     caseQueriesCollections;
@@ -21114,11 +21188,13 @@ class QueryCheckYourAnswersComponent {
                 .subscribe({
                 next: (response) => {
                     // Filter task by query id
-                    if (this.tid && response.tasks?.length > 1) {
-                        this.filteredTasks = response.tasks?.filter((task) => task.id === this.tid);
-                    }
-                    else {
-                        this.filteredTasks = response.tasks;
+                    if (this.tid) {
+                        if (response.tasks?.length > 1) {
+                            this.filteredTasks = response.tasks?.filter((task) => task.id === this.tid);
+                        }
+                        else {
+                            this.filteredTasks = response.tasks;
+                        }
                     }
                 },
                 error: (error) => {
@@ -21157,7 +21233,14 @@ class QueryCheckYourAnswersComponent {
                 });
             }
             else {
-                console.error('Error: No task to complete found');
+                console.error('Error: No task to complete was found');
+                this.errorMessages = [
+                    {
+                        title: 'Error',
+                        description: 'No task to complete was found',
+                        fieldId: 'field-id'
+                    }
+                ];
             }
         }
         else {
@@ -21272,10 +21355,17 @@ class QueryCheckYourAnswersComponent {
         const messageId = this.route.snapshot.params.dataid;
         // Check if the field_type matches CaseQueriesCollection and type is Complex
         if (data.field_type.id === this.CASE_QUERIES_COLLECTION_ID && data.field_type.type === this.FIELD_TYPE_COMPLEX) {
-            if (this.queryCreateContext === QueryCreateContext.NEW_QUERY && data.display_context !== this.DISPLAY_CONTEXT_READONLY) {
-                this.fieldId = id;
-                // TODO
-                //if number qmCaseQueriesCollection is more then filter out the right qmCaseQueriesCollection
+            if (this.isNewQueryContext(data)) {
+                // If there is more than one qmCaseQueriesCollection, pick the one with the lowest order
+                if (count > 1) {
+                    if (!this.handleMultipleCollections()) {
+                        return;
+                    }
+                }
+                else {
+                    // Set the field ID dynamically based on the extracted data
+                    this.fieldId = id; // Store the ID for use in generating newQueryData
+                }
             }
             // If messageId is present, find the corresponding case message
             this.setMessageFieldId(messageId, value, id);
@@ -21290,6 +21380,45 @@ class QueryCheckYourAnswersComponent {
             }
         }
     }
+    isNewQueryContext(data) {
+        return this.queryCreateContext === QueryCreateContext.NEW_QUERY && data.display_context !== this.DISPLAY_CONTEXT_READONLY;
+    }
+    handleMultipleCollections() {
+        const jurisdictionId = this.caseDetails?.case_type?.jurisdiction?.id;
+        if (!jurisdictionId) {
+            console.error('Jurisdiction ID is missing.');
+            return false;
+        }
+        if (this.getCollectionSelectionMethod(jurisdictionId) === this.QM_SELECT_FIRST_COLLECTION) {
+            // Pick the collection with the lowest order
+            this.fieldId = this.getCaseQueriesCollectionFieldOrderFromWizardPages()?.id;
+        }
+        else {
+            // Display Error, for now, until EXUI-2644 is implemented
+            console.error(`Error: Multiple CaseQueriesCollections are not supported yet for the ${jurisdictionId} jurisdiction`);
+            return false;
+        }
+        return true;
+    }
+    getCaseQueriesCollectionFieldOrderFromWizardPages() {
+        const candidateFields = this.eventData?.case_fields?.filter((field) => field.field_type.id === this.CASE_QUERIES_COLLECTION_ID &&
+            field.field_type.type === this.FIELD_TYPE_COMPLEX &&
+            field.display_context !== this.DISPLAY_CONTEXT_READONLY);
+        if (!candidateFields?.length)
+            return undefined;
+        const firstPageFields = this.eventData?.wizard_pages?.[0]?.wizard_page_fields;
+        if (!firstPageFields)
+            return undefined;
+        return candidateFields
+            .map((field) => {
+            const wizardField = firstPageFields.find(f => f.case_field_id === field.id);
+            return { field, order: wizardField?.order ?? Number.MAX_SAFE_INTEGER };
+        })
+            .sort((a, b) => a.order - b.order)[0]?.field;
+    }
+    getCollectionSelectionMethod(jurisdiction) {
+        return jurisdiction.toUpperCase() === this.CIVIL_JURISDICTION ? this.QM_SELECT_FIRST_COLLECTION : this.QM_COLLECTION_PROMPT;
+    }
     getDocumentAttachments() {
         const attachmentsValue = this.formGroup.get('attachments').value;
         if (attachmentsValue && attachmentsValue.length > 0) {
@@ -21382,7 +21511,7 @@ class QueryCheckYourAnswersComponent {
         }], querySubmitted: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCheckYourAnswersComponent, { className: "QueryCheckYourAnswersComponent", filePath: "lib/shared/components/palette/query-management/components/query-check-your-answers/query-check-your-answers.component.ts", lineNumber: 27 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCheckYourAnswersComponent, { className: "QueryCheckYourAnswersComponent", filePath: "lib/shared/components/palette/query-management/components/query-check-your-answers/query-check-your-answers.component.ts", lineNumber: 26 }); })();
 
 function QueryDetailsComponent_ng_container_0_cut_alert_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "cut-alert", 11);
@@ -22158,8 +22287,8 @@ class QueryWriteDateInputComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteDateInputComponent, { className: "QueryWriteDateInputComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-date-input/query-write-date-input.component.ts", lineNumber: 15 }); })();
 
 const _c0$C = a0 => ({ "govuk-form-group--error": a0 });
-function QueryWriteRaiseQueryComponent_div_11_p_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 32)(1, "span", 10);
+function QueryWriteRaiseQueryComponent_div_11_p_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 27)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22167,14 +22296,14 @@ function QueryWriteRaiseQueryComponent_div_11_p_19_Template(rf, ctx) { if (rf &
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_SUBJECT), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.getSubjectErrorMessage()), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_p_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 33)(1, "span", 10);
+function QueryWriteRaiseQueryComponent_div_11_p_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 29)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22182,14 +22311,14 @@ function QueryWriteRaiseQueryComponent_div_11_p_29_Template(rf, ctx) { if (rf &
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_BODY), " ");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r1.raiseQueryErrorMessage.QUERY_BODY), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_p_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 34)(1, "span", 10);
+function QueryWriteRaiseQueryComponent_div_11_p_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 30)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22197,14 +22326,14 @@ function QueryWriteRaiseQueryComponent_div_11_p_38_Template(rf, ctx) { if (rf &
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_HEARING_RELATED), " ");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r1.raiseQueryErrorMessage.QUERY_HEARING_RELATED), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_ng_container_50_p_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 40)(1, "span", 10);
+function QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 36)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22212,138 +22341,141 @@ function QueryWriteRaiseQueryComponent_div_11_ng_container_50_p_7_Template(rf, c
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_HEARING_DATE), " ");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r1.raiseQueryErrorMessage.QUERY_HEARING_DATE), " ");
 } }
-function QueryWriteRaiseQueryComponent_div_11_ng_container_50_Template(rf, ctx) { if (rf & 1) {
+function QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 35)(2, "fieldset", 36)(3, "legend")(4, "label", 37);
+    i0.ɵɵelementStart(1, "div", 31)(2, "fieldset", 32)(3, "legend")(4, "label", 33);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, QueryWriteRaiseQueryComponent_div_11_ng_container_50_p_7_Template, 6, 6, "p", 38);
-    i0.ɵɵelement(8, "ccd-query-write-date-input", 39);
+    i0.ɵɵtemplate(7, QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template, 6, 6, "p", 34);
+    i0.ɵɵelement(8, "ccd-query-write-date-input", 35);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").value === true && ctx_r1.formGroup.get("hearingDate").value === null));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 3, "What is the date of the hearing?"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null);
+    i0.ɵɵproperty("ngIf", ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").value === true && ctx_r1.formGroup.get("hearingDate").value === null);
 } }
 function QueryWriteRaiseQueryComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div")(3, "div", 7)(4, "span", 8);
-    i0.ɵɵtext(5, "!");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "strong", 9)(7, "span", 10);
-    i0.ɵɵtext(8, "Warning");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(9, "ccd-markdown", 11);
-    i0.ɵɵpipe(10, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 12)(12, "div", 13)(13, "label", 14);
-    i0.ɵɵtext(14);
-    i0.ɵɵpipe(15, "rpxTranslate");
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div")(3, "div", 7)(4, "div", 8)(5, "label", 9);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 15);
-    i0.ɵɵtext(17);
-    i0.ɵɵpipe(18, "rpxTranslate");
+    i0.ɵɵelementStart(8, "div", 10);
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(19, QueryWriteRaiseQueryComponent_div_11_p_19_Template, 6, 6, "p", 16);
-    i0.ɵɵelement(20, "input", 17);
+    i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_p_11_Template, 6, 6, "p", 11);
+    i0.ɵɵelementStart(12, "input", 12);
+    i0.ɵɵlistener("input", function QueryWriteRaiseQueryComponent_div_11_Template_input_input_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubjectInput()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 12)(22, "div", 13)(23, "label", 18);
-    i0.ɵɵtext(24);
-    i0.ɵɵpipe(25, "rpxTranslate");
+    i0.ɵɵelementStart(13, "div", 7)(14, "div", 8)(15, "label", 13);
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "div", 19);
-    i0.ɵɵtext(27);
-    i0.ɵɵpipe(28, "rpxTranslate");
+    i0.ɵɵelementStart(18, "div", 14);
+    i0.ɵɵtext(19);
+    i0.ɵɵpipe(20, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(29, QueryWriteRaiseQueryComponent_div_11_p_29_Template, 6, 6, "p", 20);
-    i0.ɵɵelementStart(30, "textarea", 21);
-    i0.ɵɵtext(31, "          ");
+    i0.ɵɵtemplate(21, QueryWriteRaiseQueryComponent_div_11_p_21_Template, 6, 6, "p", 15);
+    i0.ɵɵelementStart(22, "textarea", 16);
+    i0.ɵɵtext(23, "          ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 12)(33, "fieldset", 22)(34, "legend")(35, "label", 23);
-    i0.ɵɵtext(36);
-    i0.ɵɵpipe(37, "rpxTranslate");
+    i0.ɵɵelementStart(24, "div", 7)(25, "fieldset", 17)(26, "legend")(27, "label", 18);
+    i0.ɵɵtext(28);
+    i0.ɵɵpipe(29, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(38, QueryWriteRaiseQueryComponent_div_11_p_38_Template, 6, 6, "p", 24);
-    i0.ɵɵelementStart(39, "div", 25)(40, "div", 26);
-    i0.ɵɵelement(41, "input", 27);
-    i0.ɵɵelementStart(42, "label", 28);
-    i0.ɵɵtext(43);
-    i0.ɵɵpipe(44, "rpxTranslate");
+    i0.ɵɵtemplate(30, QueryWriteRaiseQueryComponent_div_11_p_30_Template, 6, 6, "p", 19);
+    i0.ɵɵelementStart(31, "div", 20)(32, "div", 21);
+    i0.ɵɵelement(33, "input", 22);
+    i0.ɵɵelementStart(34, "label", 23);
+    i0.ɵɵtext(35);
+    i0.ɵɵpipe(36, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(45, "div", 26);
-    i0.ɵɵelement(46, "input", 29);
-    i0.ɵɵelementStart(47, "label", 30);
-    i0.ɵɵtext(48);
-    i0.ɵɵpipe(49, "rpxTranslate");
+    i0.ɵɵelementStart(37, "div", 21);
+    i0.ɵɵelement(38, "input", 24);
+    i0.ɵɵelementStart(39, "label", 25);
+    i0.ɵɵtext(40);
+    i0.ɵɵpipe(41, "rpxTranslate");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(42, QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template, 9, 7, "ng-container", 26);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵtemplate(50, QueryWriteRaiseQueryComponent_div_11_ng_container_50_Template, 9, 7, "ng-container", 31);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    let tmp_7_0;
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("formGroup", ctx_r0.formGroup);
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("content", i0.ɵɵpipeBind1(10, 26, ctx_r0.serviceMessage));
+    i0.ɵɵproperty("formGroup", ctx_r1.formGroup);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(46, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(40, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("subject").hasError("required")));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 28, "Query subject"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 22, "Query subject"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 30, "The subject should be a summary of your query"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 24, "The subject should be a summary of your query"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required"));
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("govuk-input--error", ctx_r0.submitted && ((tmp_7_0 = ctx_r0.formGroup.get("subject")) == null ? null : tmp_7_0.hasError("required")));
-    i0.ɵɵproperty("formControlName", "subject");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(48, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
+    i0.ɵɵproperty("ngIf", ctx_r1.submitted && (ctx_r1.formGroup.get("subject").hasError("required") || ctx_r1.formGroup.get("subject").hasError("maxlength")));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(42, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required")));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 32, "Query detail"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 26, "Query detail"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 34, "Include as many details as possible so case workers can respond to your query"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 28, "Include as many details as possible so case workers can respond to your query"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required"));
+    i0.ɵɵproperty("ngIf", ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required"));
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("govuk-textarea--error", ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required"));
+    i0.ɵɵclassProp("govuk-textarea--error", ctx_r1.submitted && ctx_r1.formGroup.get("body").hasError("required"));
     i0.ɵɵproperty("formControlName", "body");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(50, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(44, _c0$C, ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").hasError("required")));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 36, "Is the query hearing related?"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(29, 30, "Is the query hearing related?"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required"));
+    i0.ɵɵproperty("ngIf", ctx_r1.submitted && ctx_r1.formGroup.get("isHearingRelated").hasError("required"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("checked", ctx_r0.formGroup.get("isHearingRelated").value === true)("value", true);
+    i0.ɵɵproperty("checked", ctx_r1.formGroup.get("isHearingRelated").value === true)("value", true);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(44, 38, "Is the query hearing related?", null, "Yes"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(36, 32, "Is the query hearing related?", null, "Yes"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("checked", ctx_r0.formGroup.get("isHearingRelated").value === false)("value", false);
+    i0.ɵɵproperty("checked", ctx_r1.formGroup.get("isHearingRelated").value === false)("value", false);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(49, 42, "Is the query hearing related?", null, "No"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(41, 36, "Is the query hearing related?", null, "No"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.formGroup.get("isHearingRelated").value);
+    i0.ɵɵproperty("ngIf", ctx_r1.formGroup.get("isHearingRelated").value);
 } }
 class QueryWriteRaiseQueryComponent {
     formGroup;
     submitted;
     caseDetails;
     showForm;
-    serviceMessage;
     raiseQueryErrorMessage = RaiseQueryErrorMessage;
+    onSubjectInput() {
+        const control = this.formGroup.get('subject');
+        const value = control?.value;
+        if (value && value.length > 200) {
+            control?.setValue(value.substring(0, 200));
+        }
+    }
+    getSubjectErrorMessage() {
+        const control = this.formGroup.get('subject');
+        if (control.hasError('required')) {
+            return this.raiseQueryErrorMessage.QUERY_SUBJECT;
+        }
+        if (control.hasError('maxlength')) {
+            return this.raiseQueryErrorMessage.QUERY_SUBJECT_MAX_LENGTH;
+        }
+        return '';
+    }
     static ɵfac = function QueryWriteRaiseQueryComponent_Factory(t) { return new (t || QueryWriteRaiseQueryComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRaiseQueryComponent, selectors: [["ccd-query-write-raise-query"]], inputs: { formGroup: "formGroup", submitted: "submitted", caseDetails: "caseDetails", showForm: "showForm", serviceMessage: "serviceMessage" }, decls: 12, vars: 8, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-4"], [3, "caseDetails"], ["class", "govuk-!-margin-bottom-4", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [3, "formGroup"], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-visually-hidden"], [3, "content"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], ["for", "subject", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "subject-hint", 1, "govuk-hint"], ["id", "subject-error", "class", "govuk-error-message", 4, "ngIf"], ["type", "text", "name", "subject", "id", "subject", 1, "govuk-input", 3, "formControlName"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-hint", 1, "govuk-hint"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], [1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "isHearingRelated-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--inline"], [1, "govuk-radios__item"], ["id", "isHearingRelated-yes", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-yes", 1, "govuk-label", "govuk-radios__label"], ["id", "isHearingRelated-no", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-no", 1, "govuk-label", "govuk-radios__label"], [4, "ngIf"], ["id", "subject-error", 1, "govuk-error-message"], ["id", "body-error", 1, "govuk-error-message"], ["id", "isHearingRelated-error", 1, "govuk-error-message"], [1, "govuk-radios__conditional", "govuk-!-margin-top-1", 3, "ngClass"], ["role", "group", 1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--s"], ["id", "hearingDate-error", "class", "govuk-error-message", 4, "ngIf"], ["formControlName", "hearingDate"], ["id", "hearingDate-error", 1, "govuk-error-message"]], template: function QueryWriteRaiseQueryComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRaiseQueryComponent, selectors: [["ccd-query-write-raise-query"]], inputs: { formGroup: "formGroup", submitted: "submitted", caseDetails: "caseDetails", showForm: "showForm" }, decls: 12, vars: 8, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-4"], [3, "caseDetails"], ["class", "govuk-!-margin-bottom-4", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], ["for", "subject", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "subject-hint", 1, "govuk-hint"], ["id", "subject-error", "class", "govuk-error-message", 4, "ngIf"], ["type", "text", "id", "subject", "formControlName", "subject", "maxlength", "200", "aria-describedby", "subject-error", 1, "govuk-input", 3, "input"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-hint", 1, "govuk-hint"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], [1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "isHearingRelated-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--inline"], [1, "govuk-radios__item"], ["id", "isHearingRelated-yes", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-yes", 1, "govuk-label", "govuk-radios__label"], ["id", "isHearingRelated-no", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-no", 1, "govuk-label", "govuk-radios__label"], [4, "ngIf"], ["id", "subject-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "body-error", 1, "govuk-error-message"], ["id", "isHearingRelated-error", 1, "govuk-error-message"], [1, "govuk-radios__conditional", "govuk-!-margin-top-1", 3, "ngClass"], ["role", "group", 1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--s"], ["id", "hearingDate-error", "class", "govuk-error-message", 4, "ngIf"], ["formControlName", "hearingDate"], ["id", "hearingDate-error", 1, "govuk-error-message"]], template: function QueryWriteRaiseQueryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "div", 1);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
@@ -22356,7 +22488,7 @@ class QueryWriteRaiseQueryComponent {
             i0.ɵɵelement(9, "ccd-query-case-details-header", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(10, "hr");
-            i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_Template, 51, 52, "div", 4);
+            i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_Template, 43, 46, "div", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -22371,7 +22503,7 @@ class QueryWriteRaiseQueryComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryWriteRaiseQueryComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-write-raise-query', template: "<div>\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-4\">{{ 'Enter query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div>\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <hr>\n\n  <div class=\"govuk-!-margin-bottom-4\" *ngIf=\"showForm\">\n    <div [formGroup]=\"formGroup\">\n      <div>\n        <div class=\"govuk-warning-text\">\n          <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n          <strong class=\"govuk-warning-text__text\">\n            <span class=\"govuk-visually-hidden\">Warning</span>\n            <ccd-markdown\n              [content]=\"serviceMessage | rpxTranslate\">\n            </ccd-markdown>\n          </strong>\n        </div>\n        <div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('subject').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"subject\">\n              {{ 'Query subject' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"subject-hint\" class=\"govuk-hint\">\n            {{ 'The subject should be a summary of your query' | rpxTranslate }}\n          </div>\n          <p id=\"subject-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('subject').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_SUBJECT | rpxTranslate }}\n          </p>\n          <input [formControlName]=\"'subject'\" type=\"text\" name=\"subject\"\n                 class=\"govuk-input\" id=\"subject\"\n                 [class.govuk-input--error]=\"submitted && formGroup.get('subject')?.hasError('required')\"\n          />\n        </div>\n      </div>\n\n        <div class=\"govuk-form-group\"\n             [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('body').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n              {{ 'Query detail' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"body-hint\" class=\"govuk-hint\">\n            {{ 'Include as many details as possible so case workers can respond to your query' | rpxTranslate }}\n          </div>\n          <p id=\"body-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('body').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_BODY | rpxTranslate }}\n          </p>\n          <textarea [formControlName]=\"'body'\"\n                    id=\"body\" name=\"body\" rows=\"5\"\n                    aria-describedby=\"body-hint body-error\"\n                    class=\"govuk-textarea\"\n                    [class.govuk-textarea--error]=\"submitted && formGroup.get('body').hasError('required')\"\n          >\n          </textarea>\n      </div>\n\n      <div class=\"govuk-form-group\"\n           [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('isHearingRelated').hasError('required')}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend>\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\">\n              {{ 'Is the query hearing related?' | rpxTranslate }}\n            </label>\n          </legend>\n          <p id=\"isHearingRelated-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('isHearingRelated').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_RELATED | rpxTranslate }}\n          </p>\n          <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-yes\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === true\" [value]=\"true\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-yes\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n              </label>\n            </div>\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-no\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === false\" [value]=\"false\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-no\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <ng-container *ngIf=\"formGroup.get('isHearingRelated').value\">\n          <div class=\"govuk-radios__conditional govuk-!-margin-top-1\"\n               [ngClass]=\"{'govuk-form-group--error': submitted &&\n               formGroup.get('isHearingRelated').value === true &&\n               formGroup.get('hearingDate').value === null}\">\n            <fieldset class=\"govuk-fieldset\" role=\"group\">\n              <legend>\n                <label class=\"govuk-label govuk-label--s\">\n                  {{ 'What is the date of the hearing?' | rpxTranslate }}\n                </label>\n              </legend>\n              <p id=\"hearingDate-error\" class=\"govuk-error-message\"\n                  *ngIf=\"submitted && formGroup.get('isHearingRelated').value === true && formGroup.get('hearingDate').value === null\">\n                <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_DATE | rpxTranslate }}\n              </p>\n              <ccd-query-write-date-input formControlName=\"hearingDate\"></ccd-query-write-date-input>\n            </fieldset>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'ccd-query-write-raise-query', template: "<div>\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-4\">{{ 'Enter query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div>\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <hr>\n\n  <div class=\"govuk-!-margin-bottom-4\" *ngIf=\"showForm\">\n    <div [formGroup]=\"formGroup\">\n      <div>\n        <div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('subject').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"subject\">\n              {{ 'Query subject' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"subject-hint\" class=\"govuk-hint\">\n            {{ 'The subject should be a summary of your query' | rpxTranslate }}\n          </div>\n          <p id=\"subject-error\" class=\"govuk-error-message\"\n            *ngIf=\"submitted && (formGroup.get('subject').hasError('required') || formGroup.get('subject').hasError('maxlength'))\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }}</span>\n            {{ getSubjectErrorMessage() | rpxTranslate }}\n          </p>\n\n          <input type=\"text\"\n            id=\"subject\"\n            class=\"govuk-input\"\n            formControlName=\"subject\"\n            maxlength=\"200\"\n            (input)=\"onSubjectInput()\"\n            aria-describedby=\"subject-error\" />\n      </div>\n\n        <div class=\"govuk-form-group\"\n             [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('body').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n              {{ 'Query detail' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"body-hint\" class=\"govuk-hint\">\n            {{ 'Include as many details as possible so case workers can respond to your query' | rpxTranslate }}\n          </div>\n          <p id=\"body-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('body').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_BODY | rpxTranslate }}\n          </p>\n          <textarea [formControlName]=\"'body'\"\n                    id=\"body\" name=\"body\" rows=\"5\"\n                    aria-describedby=\"body-hint body-error\"\n                    class=\"govuk-textarea\"\n                    [class.govuk-textarea--error]=\"submitted && formGroup.get('body').hasError('required')\"\n          >\n          </textarea>\n      </div>\n\n      <div class=\"govuk-form-group\"\n           [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('isHearingRelated').hasError('required')}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend>\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\">\n              {{ 'Is the query hearing related?' | rpxTranslate }}\n            </label>\n          </legend>\n          <p id=\"isHearingRelated-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('isHearingRelated').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_RELATED | rpxTranslate }}\n          </p>\n          <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-yes\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === true\" [value]=\"true\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-yes\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n              </label>\n            </div>\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-no\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === false\" [value]=\"false\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-no\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <ng-container *ngIf=\"formGroup.get('isHearingRelated').value\">\n          <div class=\"govuk-radios__conditional govuk-!-margin-top-1\"\n               [ngClass]=\"{'govuk-form-group--error': submitted &&\n               formGroup.get('isHearingRelated').value === true &&\n               formGroup.get('hearingDate').value === null}\">\n            <fieldset class=\"govuk-fieldset\" role=\"group\">\n              <legend>\n                <label class=\"govuk-label govuk-label--s\">\n                  {{ 'What is the date of the hearing?' | rpxTranslate }}\n                </label>\n              </legend>\n              <p id=\"hearingDate-error\" class=\"govuk-error-message\"\n                  *ngIf=\"submitted && formGroup.get('isHearingRelated').value === true && formGroup.get('hearingDate').value === null\">\n                <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_DATE | rpxTranslate }}\n              </p>\n              <ccd-query-write-date-input formControlName=\"hearingDate\"></ccd-query-write-date-input>\n            </fieldset>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
     }], null, { formGroup: [{
             type: Input
         }], submitted: [{
@@ -22380,8 +22512,6 @@ class QueryWriteRaiseQueryComponent {
             type: Input
         }], showForm: [{
             type: Input
-        }], serviceMessage: [{
-            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteRaiseQueryComponent, { className: "QueryWriteRaiseQueryComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-raise-query/query-write-raise-query.component.ts", lineNumber: 8 }); })();
 
@@ -22837,21 +22967,20 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
 
 class ReadTextAreaFieldComponent extends AbstractFieldReadComponent {
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadTextAreaFieldComponent_BaseFactory; return function ReadTextAreaFieldComponent_Factory(t) { return (ɵReadTextAreaFieldComponent_BaseFactory || (ɵReadTextAreaFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadTextAreaFieldComponent)))(t || ReadTextAreaFieldComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadTextAreaFieldComponent, selectors: [["ccd-read-text-area-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [[2, "white-space", "pre-wrap"]], template: function ReadTextAreaFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadTextAreaFieldComponent, selectors: [["ccd-read-text-area-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[2, "white-space", "pre-wrap"]], template: function ReadTextAreaFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "span", 0);
             i0.ɵɵtext(1);
-            i0.ɵɵpipe(2, "rpxTranslate");
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx.caseField.value));
-        } }, dependencies: [i1.RpxTranslatePipe], encapsulation: 2 });
+            i0.ɵɵtextInterpolate(ctx.caseField.value);
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadTextAreaFieldComponent, [{
         type: Component,
         args: [{
                 selector: 'ccd-read-text-area-field',
-                template: `<span style="white-space: pre-wrap">{{caseField.value | rpxTranslate}}</span>`
+                template: `<span style="white-space: pre-wrap">{{ caseField.value }}</span>`
             }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadTextAreaFieldComponent, { className: "ReadTextAreaFieldComponent", filePath: "lib/shared/components/palette/text-area/read-text-area-field.component.ts", lineNumber: 8 }); })();
@@ -22936,21 +23065,20 @@ class WriteTextAreaFieldComponent extends AbstractFieldWriteComponent {
 
 class ReadTextFieldComponent extends AbstractFieldReadComponent {
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadTextFieldComponent_BaseFactory; return function ReadTextFieldComponent_Factory(t) { return (ɵReadTextFieldComponent_BaseFactory || (ɵReadTextFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadTextFieldComponent)))(t || ReadTextFieldComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadTextFieldComponent, selectors: [["ccd-read-text-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [[1, "text-16"]], template: function ReadTextFieldComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadTextFieldComponent, selectors: [["ccd-read-text-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "text-16"]], template: function ReadTextFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "span", 0);
             i0.ɵɵtext(1);
-            i0.ɵɵpipe(2, "rpxTranslate");
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx.caseField.value));
-        } }, dependencies: [i1.RpxTranslatePipe], encapsulation: 2 });
+            i0.ɵɵtextInterpolate(ctx.caseField.value);
+        } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadTextFieldComponent, [{
         type: Component,
         args: [{
                 selector: 'ccd-read-text-field',
-                template: `<span class="text-16">{{caseField.value | rpxTranslate}}</span>`
+                template: `<span class="text-16">{{ caseField.value }}</span>`
             }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadTextFieldComponent, { className: "ReadTextFieldComponent", filePath: "lib/shared/components/palette/text/read-text-field.component.ts", lineNumber: 8 }); })();
@@ -23343,7 +23471,6 @@ class FieldReadComponent extends AbstractFieldReadComponent {
     withLabel = false;
     formGroup = new FormGroup({});
     caseFields = [];
-    markdownUseHrefAsRouterLink;
     fieldContainer;
     constructor(resolver, paletteService) {
         super();
@@ -23376,7 +23503,6 @@ class FieldReadComponent extends AbstractFieldReadComponent {
             component.instance['parent'] = this.parent;
             component.instance['caseReference'] = this.caseReference;
             component.instance['context'] = this.context;
-            component.instance['markdownUseHrefAsRouterLink'] = this.markdownUseHrefAsRouterLink;
             component.instance['labelCanBeTranslated'] = this.labelCanBeTranslated(this.caseField);
             this.fieldContainer.insert(component.hostView);
         });
@@ -23390,27 +23516,25 @@ class FieldReadComponent extends AbstractFieldReadComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldContainer = _t.first);
-        } }, inputs: { withLabel: "withLabel", formGroup: "formGroup", caseFields: "caseFields", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 6, consts: [["fieldContainer", ""], [3, "hidden"], [3, "formGroup", "topLevelFormGroup", "caseField", "withLabel", "markdownUseHrefAsRouterLink"]], template: function FieldReadComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { withLabel: "withLabel", formGroup: "formGroup", caseFields: "caseFields" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 5, consts: [["fieldContainer", ""], [3, "hidden"], [3, "formGroup", "topLevelFormGroup", "caseField", "withLabel"]], template: function FieldReadComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "ccd-field-read-label", 2);
             i0.ɵɵelementContainer(2, null, 0);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("hidden", ctx.caseField.hidden);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("topLevelFormGroup", ctx.topLevelFormGroup)("caseField", ctx.caseField)("withLabel", ctx.withLabel)("markdownUseHrefAsRouterLink", ctx.markdownUseHrefAsRouterLink);
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("topLevelFormGroup", ctx.topLevelFormGroup)("caseField", ctx.caseField)("withLabel", ctx.withLabel);
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FieldReadComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-field-read', template: "<div [hidden]=\"caseField.hidden\">\n  <ccd-field-read-label [formGroup]=\"formGroup\" [topLevelFormGroup]=\"topLevelFormGroup\" [caseField]=\"caseField\" [withLabel]=\"withLabel\" [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n    <ng-container #fieldContainer></ng-container>\n  </ccd-field-read-label>\n</div>\n" }]
+        args: [{ selector: 'ccd-field-read', template: "<div [hidden]=\"caseField.hidden\">\n  <ccd-field-read-label [formGroup]=\"formGroup\" [topLevelFormGroup]=\"topLevelFormGroup\" [caseField]=\"caseField\" [withLabel]=\"withLabel\">\n    <ng-container #fieldContainer></ng-container>\n  </ccd-field-read-label>\n</div>\n" }]
     }], () => [{ type: i0.ComponentFactoryResolver }, { type: PaletteService }], { withLabel: [{
             type: Input
         }], formGroup: [{
             type: Input
         }], caseFields: [{
             type: Input
-        }], markdownUseHrefAsRouterLink: [{
-            type: Input
         }], fieldContainer: [{
             type: ViewChild,
             args: ['fieldContainer', { static: false, read: ViewContainerRef }]
@@ -23514,7 +23638,6 @@ class FieldReadLabelComponent extends AbstractFieldReadComponent {
     // EUI-3267. Flag for whether or not this can have a grey bar.
     canHaveGreyBar = false;
     withLabel;
-    markdownUseHrefAsRouterLink;
     isLabel() {
         return this.caseField.field_type && this.caseField.field_type.type === 'Label';
     }
@@ -23542,7 +23665,7 @@ class FieldReadLabelComponent extends AbstractFieldReadComponent {
         }
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵFieldReadLabelComponent_BaseFactory; return function FieldReadLabelComponent_Factory(t) { return (ɵFieldReadLabelComponent_BaseFactory || (ɵFieldReadLabelComponent_BaseFactory = i0.ɵɵgetInheritedFactory(FieldReadLabelComponent)))(t || FieldReadLabelComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FieldReadLabelComponent, selectors: [["ccd-field-read-label"]], inputs: { withLabel: "withLabel", markdownUseHrefAsRouterLink: "markdownUseHrefAsRouterLink" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$v, decls: 4, vars: 5, consts: [["caseFieldValue", ""], [3, "hidden"], ["class", "case-field", 4, "ngIf", "ngIfElse"], [1, "case-field"], [1, "case-field__label"], [1, "case-field__value"], [4, "ngTemplateOutlet"]], template: function FieldReadLabelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FieldReadLabelComponent, selectors: [["ccd-field-read-label"]], inputs: { withLabel: "withLabel" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0$v, decls: 4, vars: 5, consts: [["caseFieldValue", ""], [3, "hidden"], ["class", "case-field", 4, "ngIf", "ngIfElse"], [1, "case-field"], [1, "case-field__label"], [1, "case-field__value"], [4, "ngTemplateOutlet"]], template: function FieldReadLabelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵtemplate(1, FieldReadLabelComponent_dl_1_Template, 6, 4, "dl", 2)(2, FieldReadLabelComponent_ng_template_2_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
@@ -23560,8 +23683,6 @@ class FieldReadLabelComponent extends AbstractFieldReadComponent {
         args: [{ selector: 'ccd-field-read-label', template: "<div [hidden]=\"caseField.hidden\" [class.grey-bar]=\"canHaveGreyBar && !caseField.hiddenCannotChange\">\n  <dl class=\"case-field\" *ngIf=\"withLabel && !isLabel() && (!isComplex() || isCaseLink()); else caseFieldValue\">\n    <dt class=\"case-field__label\">{{caseField.label | rpxTranslate}}</dt>\n    <dd class=\"case-field__value\">\n      <ng-container *ngTemplateOutlet=\"caseFieldValue\"></ng-container>\n    </dd>\n  </dl>\n  <ng-template #caseFieldValue>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n", styles: [".case-field:after{content:\"\";display:block;clear:both}.case-field{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:15px}@media (min-width: 641px){.case-field{margin-bottom:30px}}.case-field .case-field__label{display:block;color:#0b0c0c;padding-bottom:2px;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.case-field .case-field__label{font-size:19px;line-height:1.3157894737}}.case-field .case-field__value{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.case-field .case-field__value{font-size:19px;line-height:1.3157894737}}.form :host::ng-deep .grey-bar>*>.form-group,.form :host::ng-deep .grey-bar>*>*>.form-group,.form :host::ng-deep .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form :host::ng-deep .grey-bar>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form :host::ng-deep .grey-bar>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field input:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field select:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}\n"] }]
     }], null, { withLabel: [{
             type: Input
-        }], markdownUseHrefAsRouterLink: [{
-            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FieldReadLabelComponent, { className: "FieldReadLabelComponent", filePath: "lib/shared/components/palette/base-field/field-read-label.component.ts", lineNumber: 14 }); })();
 
@@ -23599,7 +23720,7 @@ function CaseFileViewFolderSelectorComponent_ng_template_12_ng_container_5_Templ
 function CaseFileViewFolderSelectorComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 9)(1, "input", 10);
-    i0.ɵɵlistener("click", function CaseFileViewFolderSelectorComponent_ng_template_12_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.handleChange($event)); });
+    i0.ɵɵlistener("click", function CaseFileViewFolderSelectorComponent_ng_template_12_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.handleChange($event)); })("keyup", function CaseFileViewFolderSelectorComponent_ng_template_12_Template_input_keyup_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView($event.key === "Enter" ? ctx_r4.handleChange($event) : null); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "label", 11);
     i0.ɵɵelement(3, "img", 12);
@@ -23679,10 +23800,10 @@ class CaseFileViewFolderSelectorComponent {
         return null;
     }
     static ɵfac = function CaseFileViewFolderSelectorComponent_Factory(t) { return new (t || CaseFileViewFolderSelectorComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialogRef), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderSelectorComponent, selectors: [["xui-case-file-view-folder-selector"]], decls: 14, vars: 2, consts: [["folder", ""], [1, "close", 3, "click"], [1, "govuk-heading-l"], [1, "folders", "govuk-radios", "govuk-radios--conditional"], [4, "ngFor", "ngForOf"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"], [1, "cancel", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "folder", "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "click", "name", "id"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["src", "/assets/images/folder.png", "alt", "Folder icon", 1, "iconImg"]], template: function CaseFileViewFolderSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderSelectorComponent, selectors: [["xui-case-file-view-folder-selector"]], decls: 14, vars: 2, consts: [["folder", ""], ["tabindex", "0", "aria-label", "close", 1, "close", 3, "click", "keyup"], [1, "govuk-heading-l"], [1, "folders", "govuk-radios", "govuk-radios--conditional"], [4, "ngFor", "ngForOf"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"], ["href", "javascript:void(0)", 1, "cancel", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "folder", "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "click", "keyup", "name", "id"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["src", "/assets/images/folder.png", "alt", "Folder icon", 1, "iconImg"]], template: function CaseFileViewFolderSelectorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵlistener("click", function CaseFileViewFolderSelectorComponent_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancel()); });
+            i0.ɵɵelementStart(0, "span", 1);
+            i0.ɵɵlistener("click", function CaseFileViewFolderSelectorComponent_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancel()); })("keyup", function CaseFileViewFolderSelectorComponent_Template_span_keyup_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.key === "Enter" ? ctx.cancel() : null); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(1, "h2", 2);
             i0.ɵɵtext(2, "Move File");
@@ -23711,7 +23832,7 @@ class CaseFileViewFolderSelectorComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderSelectorComponent, [{
         type: Component,
-        args: [{ selector: 'xui-case-file-view-folder-selector', encapsulation: ViewEncapsulation.None, template: "<div class=\"close\" (click)=\"cancel()\"></div>\n<h2 class=\"govuk-heading-l\">Move File</h2>\n<p>Where do you want to move \"{{ data.document.document_filename }}\" file?</p>\n<div class=\"folders govuk-radios govuk-radios--conditional\">\n    <ng-container *ngFor=\"let cat of currentCategories\">\n        <ng-container *ngTemplateOutlet=\"folder;context:{cat:cat,level:1}\"></ng-container>\n    </ng-container>\n</div>\n<div class=\"govuk-button-group\">\n    <button class=\"button button-primary\" type=\"button\" (click)=\"save()\">Save</button>\n    <a (click)=\"cancel()\" class=\"cancel\">Cancel</a>\n</div>\n\n<ng-template #folder let-cat=\"cat\" let-level=\"level\">\n    <div class=\"folder govuk-radios__item\">\n        <input class=\"govuk-radios__input\" type=\"radio\" name=\"level-{{level}}\" [id]=\"cat.category_id\" (click)=\"handleChange($event)\" />\n        <label class=\"govuk-label govuk-radios__label\" [for]=\"cat.category_id\">\n            <img class=\"iconImg\" src=\"/assets/images/folder.png\" alt=\"Folder icon\" />\n            {{ cat.category_name }}\n        </label>\n        <ng-container *ngFor=\"let subcat of cat.sub_categories\">\n            <ng-container *ngTemplateOutlet=\"folder;context:{cat:subcat,level:level+1}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>", styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto;background:#fff}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#eee}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#ccc}\n"] }]
+        args: [{ selector: 'xui-case-file-view-folder-selector', encapsulation: ViewEncapsulation.None, template: "<span tabindex=\"0\" aria-label=\"close\" class=\"close\" (click)=\"cancel()\" (keyup)=\"$event.key === 'Enter' ? cancel() : null\"></span>\n<h2 class=\"govuk-heading-l\">Move File</h2>\n<p>Where do you want to move \"{{ data.document.document_filename }}\" file?</p>\n<div class=\"folders govuk-radios govuk-radios--conditional\">\n    <ng-container *ngFor=\"let cat of currentCategories\">\n        <ng-container *ngTemplateOutlet=\"folder;context:{cat:cat,level:1}\"></ng-container>\n    </ng-container>\n</div>\n<div class=\"govuk-button-group\">\n    <button class=\"button button-primary\" type=\"button\" (click)=\"save()\">Save</button>\n    <a (click)=\"cancel()\" class=\"cancel\" href=\"javascript:void(0)\">Cancel</a>\n</div>\n\n<ng-template #folder let-cat=\"cat\" let-level=\"level\">\n    <div class=\"folder govuk-radios__item\">\n        <input class=\"govuk-radios__input\" type=\"radio\" name=\"level-{{level}}\" [id]=\"cat.category_id\" (click)=\"handleChange($event)\" (keyup)=\"$event.key === 'Enter' ? handleChange($event) : null\" />\n        <label class=\"govuk-label govuk-radios__label\" [for]=\"cat.category_id\">\n            <img class=\"iconImg\" src=\"/assets/images/folder.png\" alt=\"Folder icon\" />\n            {{ cat.category_name }}\n        </label>\n        <ng-container *ngFor=\"let subcat of cat.sub_categories\">\n            <ng-container *ngTemplateOutlet=\"folder;context:{cat:subcat,level:level+1}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>", styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto;background:#fff}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#eee}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#ccc}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_LEGACY_DIALOG_DATA]
@@ -23743,22 +23864,25 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template(
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "div", 7);
-    i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template_div_click_1_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); item_r4.actionFn(); return i0.ɵɵresetView(ctx_r1.closeOverlay()); });
+    i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template_div_click_1_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); item_r4.actionFn(); return i0.ɵɵresetView(ctx_r1.closeOverlay()); })("keyup", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template_div_keyup_1_listener($event) { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView($event.key === "Enter" ? ctx_r1.actionAndClose(item_r4.actionFn()) : null); });
     i0.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template, 1, 3, "img", 8);
-    i0.ɵɵelementStart(3, "div", 9);
+    i0.ɵɵelementStart(3, "span", 9);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
-    i0.ɵɵadvance(2);
+    const i_r5 = ctx.index;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "overlay-menu__item" + i_r5);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", item_r4.iconSrc);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r4.actionText);
 } }
 function CaseFileViewOverlayMenuComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtemplate(1, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template, 3, 1, "ng-container", 4)(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template, 5, 2, "ng-container", 5);
+    i0.ɵɵtemplate(1, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template, 3, 1, "ng-container", 4)(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template, 5, 3, "ng-container", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -23777,8 +23901,12 @@ class CaseFileViewOverlayMenuComponent {
         this.isOpen = isOpen;
         this.isOpenChange.emit(isOpen);
     }
+    actionAndClose(func) {
+        func();
+        this.closeOverlay();
+    }
     static ɵfac = function CaseFileViewOverlayMenuComponent_Factory(t) { return new (t || CaseFileViewOverlayMenuComponent)(); };
-    static ɵ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: [["trigger", "cdkOverlayOrigin"], ["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["cdkConnectedOverlay", "", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass"], [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) {
+    static ɵ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: [["trigger", "cdkOverlayOrigin"], ["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["cdkConnectedOverlay", "", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass"], [1, "overlay-menu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlay-menu__title"], ["tabindex", "0", 1, "overlay-menu__item", 3, "click", "keyup", "id"], ["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) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c0$t);
             i0.ɵɵelementStart(0, "div")(1, "button", 1, 0);
@@ -23789,14 +23917,14 @@ class CaseFileViewOverlayMenuComponent {
             i0.ɵɵlistener("backdropClick", function CaseFileViewOverlayMenuComponent_Template_ng_template_backdropClick_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeOverlay()); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            const trigger_r5 = i0.ɵɵreference(2);
+            const trigger_r6 = i0.ɵɵreference(2);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r5)("cdkConnectedOverlayOpen", ctx.isOpen)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop");
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$2.CdkConnectedOverlay, i2$2.CdkOverlayOrigin], styles: [".overlay-toggle[_ngcontent-%COMP%]{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu[_ngcontent-%COMP%]{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title[_ngcontent-%COMP%], .overlay-menu__item[_ngcontent-%COMP%]{padding:10px;border-bottom:1px solid grey}.overlay-menu__title[_ngcontent-%COMP%]:last-child, .overlay-menu__item[_ngcontent-%COMP%]:last-child{border:none}.overlay-menu__title[_ngcontent-%COMP%]{padding-left:6px;padding-right:6px}.overlay-menu__item[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item[_ngcontent-%COMP%]:hover{background-color:#fff2cc}.overlay-menu__itemIcon[_ngcontent-%COMP%]{height:1.25em;width:1.25em;margin-right:6px}"] });
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r6)("cdkConnectedOverlayOpen", ctx.isOpen)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop");
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$2.CdkConnectedOverlay, i2$2.CdkOverlayOrigin], styles: [".overlay-toggle[_ngcontent-%COMP%]{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu[_ngcontent-%COMP%]{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title[_ngcontent-%COMP%], .overlay-menu__item[_ngcontent-%COMP%]{padding:10px;border-bottom:1px solid grey}.overlay-menu__title[_ngcontent-%COMP%]:last-child, .overlay-menu__item[_ngcontent-%COMP%]:last-child{border:none}.overlay-menu__title[_ngcontent-%COMP%]{padding-left:6px;padding-right:6px}.overlay-menu__item[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item[_ngcontent-%COMP%]:hover{background-color:#fff2cc}.overlay-menu__item[_ngcontent-%COMP%]:focus{border:2px solid #ffbf47}.overlay-menu__itemIcon[_ngcontent-%COMP%]{height:1.25em;width:1.25em;margin-right:6px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewOverlayMenuComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-overlay-menu', template: "<div>\n  <button type=\"button\" class=\"overlay-toggle\"\n          (click)=\"$event.stopPropagation(); isOpen = !isOpen\"\n          cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n    <ng-content select=\"[trigger]\"></ng-content>\n  </button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"closeOverlay()\"\n  >\n    <div class=\"overlay-menu\">\n      <ng-container *ngIf=\"title\">\n        <div class=\"overlay-menu__title\">{{title}}</div>\n      </ng-container>\n\n      <ng-container *ngFor=\"let item of menuItems\">\n        <div class=\"overlay-menu__item\" (click)=\"item.actionFn(); closeOverlay();\">\n          <img *ngIf=\"item.iconSrc\" [src]=\"item.iconSrc\" class=\"overlay-menu__itemIcon\" alt=\"{{title}} icon'\" />\n          <div class=\"overlay-menu__actionText\">{{item.actionText}}</div>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n</div>\n", styles: [".overlay-toggle{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title,.overlay-menu__item{padding:10px;border-bottom:1px solid grey}.overlay-menu__title:last-child,.overlay-menu__item:last-child{border:none}.overlay-menu__title{padding-left:6px;padding-right:6px}.overlay-menu__item{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item:hover{background-color:#fff2cc}.overlay-menu__itemIcon{height:1.25em;width:1.25em;margin-right:6px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-overlay-menu', template: "<div>\n  <button type=\"button\" class=\"overlay-toggle\"\n          (click)=\"$event.stopPropagation(); isOpen = !isOpen\"\n          cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n    <ng-content select=\"[trigger]\"></ng-content>\n  </button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"closeOverlay()\"\n  >\n    <div class=\"overlay-menu\">\n      <ng-container *ngIf=\"title\">\n        <div class=\"overlay-menu__title\">{{title}}</div>\n      </ng-container>\n\n      <ng-container *ngFor=\"let item of menuItems; index as i\">\n        <div class=\"overlay-menu__item\" tabindex=\"0\" [id]=\"'overlay-menu__item' + i\" (click)=\"item.actionFn(); closeOverlay();\" (keyup)=\"$event.key === 'Enter' ? actionAndClose(item.actionFn()) : null\">\n          <img *ngIf=\"item.iconSrc\" [src]=\"item.iconSrc\" class=\"overlay-menu__itemIcon\" alt=\"{{title}} icon'\" />\n          <span class=\"overlay-menu__actionText\">{{item.actionText}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n</div>\n", styles: [".overlay-toggle{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title,.overlay-menu__item{padding:10px;border-bottom:1px solid grey}.overlay-menu__title:last-child,.overlay-menu__item:last-child{border:none}.overlay-menu__title{padding-left:6px;padding-right:6px}.overlay-menu__item{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item:hover{background-color:#fff2cc}.overlay-menu__item:focus{border:2px solid #ffbf47}.overlay-menu__itemIcon{height:1.25em;width:1.25em;margin-right:6px}\n"] }]
     }], null, { title: [{
             type: Input
         }], menuItems: [{
@@ -24586,7 +24714,7 @@ class AddCommentsComponent extends AbstractJourneyComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddCommentsComponent, { className: "AddCommentsComponent", filePath: "lib/shared/components/palette/case-flag/components/add-comments/add-comments.component.ts", lineNumber: 12 }); })();
 
-function CaseFlagSummaryListComponent_dl_0_div_28_Template(rf, ctx) { if (rf & 1) {
+function CaseFlagSummaryListComponent_dl_0_div_27_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 2)(1, "dt", 3);
     i0.ɵɵtext(2);
@@ -24596,7 +24724,7 @@ function CaseFlagSummaryListComponent_dl_0_div_28_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "dd", 5)(7, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_28_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : ctx_r1.caseFlagFieldState.FLAG_TYPE)); });
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_27_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : ctx_r1.caseFlagFieldState.FLAG_TYPE)); });
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "rpxTranslate");
     i0.ɵɵelementStart(10, "span", 7);
@@ -24614,7 +24742,7 @@ function CaseFlagSummaryListComponent_dl_0_div_28_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 8, "other description (Welsh)"), "");
 } }
-function CaseFlagSummaryListComponent_dl_0_div_29_Template(rf, ctx) { if (rf & 1) {
+function CaseFlagSummaryListComponent_dl_0_div_28_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 2)(1, "dt", 3);
     i0.ɵɵtext(2);
@@ -24624,7 +24752,7 @@ function CaseFlagSummaryListComponent_dl_0_div_29_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "dd", 5)(7, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_29_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_COMMENTS)); });
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_28_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_COMMENTS)); });
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "rpxTranslate");
     i0.ɵɵelementStart(10, "span", 7);
@@ -24642,7 +24770,7 @@ function CaseFlagSummaryListComponent_dl_0_div_29_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 8, "comments"), "");
 } }
-function CaseFlagSummaryListComponent_dl_0_div_30_Template(rf, ctx) { if (rf & 1) {
+function CaseFlagSummaryListComponent_dl_0_div_29_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 2)(1, "dt", 3);
     i0.ɵɵtext(2);
@@ -24652,7 +24780,7 @@ function CaseFlagSummaryListComponent_dl_0_div_30_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "dd", 5)(7, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_30_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : ctx_r1.caseFlagFieldState.FLAG_COMMENTS)); });
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_29_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : ctx_r1.caseFlagFieldState.FLAG_COMMENTS)); });
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "rpxTranslate");
     i0.ɵɵelementStart(10, "span", 7);
@@ -24670,10 +24798,10 @@ function CaseFlagSummaryListComponent_dl_0_div_30_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 8, "comments (Welsh)"), "");
 } }
-function CaseFlagSummaryListComponent_dl_0_a_39_Template(rf, ctx) { if (rf & 1) {
+function CaseFlagSummaryListComponent_dl_0_a_38_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_a_39_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_STATUS)); });
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_a_38_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_STATUS)); });
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementStart(3, "span", 7);
@@ -24694,61 +24822,60 @@ function CaseFlagSummaryListComponent_dl_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "dd", 4);
     i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "dd", 5)(9, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_Template_a_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : ctx_r1.caseFlagFieldState.FLAG_LOCATION)); });
-    i0.ɵɵtext(10);
-    i0.ɵɵpipe(11, "rpxTranslate");
-    i0.ɵɵelementStart(12, "span", 7);
-    i0.ɵɵtext(13);
-    i0.ɵɵpipe(14, "rpxTranslate");
+    i0.ɵɵelementStart(7, "dd", 5)(8, "a", 6);
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : ctx_r1.caseFlagFieldState.FLAG_LOCATION)); });
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "rpxTranslate");
+    i0.ɵɵelementStart(11, "span", 7);
+    i0.ɵɵtext(12);
+    i0.ɵɵpipe(13, "rpxTranslate");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(15, "div", 2)(16, "dt", 3);
-    i0.ɵɵtext(17);
-    i0.ɵɵpipe(18, "rpxTranslate");
+    i0.ɵɵelementStart(14, "div", 2)(15, "dt", 3);
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "dd", 4);
-    i0.ɵɵtext(20);
+    i0.ɵɵelementStart(18, "dd", 4);
+    i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "dd", 5)(22, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_Template_a_click_22_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_TYPE)); });
-    i0.ɵɵtext(23);
-    i0.ɵɵpipe(24, "rpxTranslate");
-    i0.ɵɵelementStart(25, "span", 7);
-    i0.ɵɵtext(26);
-    i0.ɵɵpipe(27, "rpxTranslate");
+    i0.ɵɵelementStart(20, "dd", 5)(21, "a", 6);
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_Template_a_click_21_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_TYPE)); });
+    i0.ɵɵtext(22);
+    i0.ɵɵpipe(23, "rpxTranslate");
+    i0.ɵɵelementStart(24, "span", 7);
+    i0.ɵɵtext(25);
+    i0.ɵɵpipe(26, "rpxTranslate");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵtemplate(28, CaseFlagSummaryListComponent_dl_0_div_28_Template, 13, 10, "div", 8)(29, CaseFlagSummaryListComponent_dl_0_div_29_Template, 13, 10, "div", 8)(30, CaseFlagSummaryListComponent_dl_0_div_30_Template, 13, 10, "div", 8);
-    i0.ɵɵelementStart(31, "div", 2)(32, "dt", 3);
-    i0.ɵɵtext(33);
-    i0.ɵɵpipe(34, "rpxTranslate");
+    i0.ɵɵtemplate(27, CaseFlagSummaryListComponent_dl_0_div_27_Template, 13, 10, "div", 8)(28, CaseFlagSummaryListComponent_dl_0_div_28_Template, 13, 10, "div", 8)(29, CaseFlagSummaryListComponent_dl_0_div_29_Template, 13, 10, "div", 8);
+    i0.ɵɵelementStart(30, "div", 2)(31, "dt", 3);
+    i0.ɵɵtext(32);
+    i0.ɵɵpipe(33, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "dd", 4);
-    i0.ɵɵtext(36);
-    i0.ɵɵpipe(37, "rpxTranslate");
+    i0.ɵɵelementStart(34, "dd", 4);
+    i0.ɵɵtext(35);
+    i0.ɵɵpipe(36, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "dd", 5);
-    i0.ɵɵtemplate(39, CaseFlagSummaryListComponent_dl_0_a_39_Template, 6, 6, "a", 9);
+    i0.ɵɵelementStart(37, "dd", 5);
+    i0.ɵɵtemplate(38, CaseFlagSummaryListComponent_dl_0_a_38_Template, 6, 6, "a", 9);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 14, ctx_r1.addUpdateFlagHeaderText), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 16, ctx_r1.flagForSummaryDisplay.partyName || ctx_r1.caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION), " ");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 18, "Change"), "");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.flagForSummaryDisplay.partyName || ctx_r1.caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 20, "party name"), "");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 16, "Change"), "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 18, "party name"), "");
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 22, ctx_r1.flagTypeHeaderText), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 20, ctx_r1.flagTypeHeaderText), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.flagDescription, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(24, 24, "Change"), "");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 22, "Change"), "");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 26, "flag type"), "");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 24, "flag type"), "");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", (ctx_r1.flagDescriptionWelsh == null ? null : ctx_r1.flagDescriptionWelsh.length) > 0 && !ctx_r1.externalUserUpdate);
     i0.ɵɵadvance();
@@ -24756,9 +24883,9 @@ function CaseFlagSummaryListComponent_dl_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", (ctx_r1.flagCommentsWelsh == null ? null : ctx_r1.flagCommentsWelsh.length) > 0 && !ctx_r1.externalUserUpdate);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(34, 28, "Status"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 26, "Status"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 30, ctx_r1.flagStatus), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(36, 28, ctx_r1.flagStatus), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.is2Point1Enabled);
 } }
@@ -24864,14 +24991,14 @@ class CaseFlagSummaryListComponent {
     }
     static ɵfac = function CaseFlagSummaryListComponent_Factory(t) { return new (t || CaseFlagSummaryListComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFlagSummaryListComponent, selectors: [["ccd-case-flag-summary-list"]], inputs: { flagForSummaryDisplay: "flagForSummaryDisplay", displayContextParameter: "displayContextParameter" }, outputs: { changeButtonEmitter: "changeButtonEmitter" }, decls: 1, vars: 1, consts: [["class", "govuk-summary-list", 4, "ngIf"], [1, "govuk-summary-list"], [1, "govuk-summary-list__row"], [1, "govuk-summary-list__key"], [1, "govuk-summary-list__value"], [1, "govuk-summary-list__actions"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-visually-hidden"], ["class", "govuk-summary-list__row", 4, "ngIf"], ["class", "govuk-link", "href", "javascript:void(0)", 3, "click", 4, "ngIf"]], template: function CaseFlagSummaryListComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseFlagSummaryListComponent_dl_0_Template, 40, 32, "dl", 0);
+            i0.ɵɵtemplate(0, CaseFlagSummaryListComponent_dl_0_Template, 39, 30, "dl", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.flagForSummaryDisplay);
         } }, dependencies: [i5.NgIf, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFlagSummaryListComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-flag-summary-list', template: "<dl class=\"govuk-summary-list\" *ngIf=\"flagForSummaryDisplay\">\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{addUpdateFlagHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagForSummaryDisplay.partyName || caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_LOCATION)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'party name' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{flagTypeHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescription}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'flag type' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagDescriptionWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Other description (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescriptionWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'other description (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagComments?.length > 0\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{externalUserUpdate ? flagUpdateComments : flagComments}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagCommentsWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagCommentsWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Status' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagStatus | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a *ngIf=\"is2Point1Enabled\" class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_STATUS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'status' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n</dl>\n" }]
+        args: [{ selector: 'ccd-case-flag-summary-list', template: "<dl class=\"govuk-summary-list\" *ngIf=\"flagForSummaryDisplay\">\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{addUpdateFlagHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagForSummaryDisplay.partyName || caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION }}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_LOCATION)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'party name' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{flagTypeHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescription}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'flag type' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagDescriptionWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Other description (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescriptionWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'other description (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagComments?.length > 0\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{externalUserUpdate ? flagUpdateComments : flagComments}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagCommentsWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagCommentsWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Status' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagStatus | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a *ngIf=\"is2Point1Enabled\" class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_STATUS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'status' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n</dl>\n" }]
     }], () => [{ type: i1.RpxTranslationService }], { flagForSummaryDisplay: [{
             type: Input
         }], displayContextParameter: [{
@@ -27647,7 +27774,7 @@ function ReadComplexFieldRawComponent_ng_container_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("hidden", field_r1.hidden || field_r1.field_type.type === "Label");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 8, field_r1.label));
+    i0.ɵɵtextInterpolate(ctx_r1.isTranslatable(field_r1) ? i0.ɵɵpipeBind1(4, 8, field_r1.label) : field_r1.label);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("hidden", field_r1.hidden);
     i0.ɵɵadvance();
@@ -27672,7 +27799,7 @@ class ReadComplexFieldRawComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadComplexFieldRawComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-complex-field-raw', template: "<dl class=\"complex-raw\">\n  <ng-container *ngFor=\"let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :id()\">\n    <dt [hidden]=\"field.hidden || field.field_type.type === 'Label'\"><span class=\"text-16\">{{field.label | rpxTranslate}}</span></dt>\n    <dd [hidden]=\"field.hidden\">\n      <ccd-field-read [caseField]=\"field\" [context]=\"context\" [caseFields]=\"caseFields\" [topLevelFormGroup]=\"topLevelFormGroup\" [idPrefix]=\"idPrefix\"></ccd-field-read>\n    </dd>\n  </ng-container>\n</dl>\n", styles: ["dl.complex-raw{list-style-type:none;margin:5px 0 10px}dl.complex-raw dl.complex-raw{padding-left:2ch}dl.complex-raw dt{font-weight:700}\n"] }]
+        args: [{ selector: 'ccd-read-complex-field-raw', template: "<dl class=\"complex-raw\">\n  <ng-container *ngFor=\"let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :id()\">\n    <dt [hidden]=\"field.hidden || field.field_type.type === 'Label'\"><span class=\"text-16\">{{isTranslatable(field) ? (field.label | rpxTranslate) : field.label}}</span></dt>\n    <dd [hidden]=\"field.hidden\">\n      <ccd-field-read [caseField]=\"field\" [context]=\"context\" [caseFields]=\"caseFields\" [topLevelFormGroup]=\"topLevelFormGroup\" [idPrefix]=\"idPrefix\"></ccd-field-read>\n    </dd>\n  </ng-container>\n</dl>\n", styles: ["dl.complex-raw{list-style-type:none;margin:5px 0 10px}dl.complex-raw dl.complex-raw{padding-left:2ch}dl.complex-raw dt{font-weight:700}\n"] }]
     }], null, { caseFields: [{
             type: Input
         }] }); })();
@@ -27774,15 +27901,17 @@ function ReadComplexFieldCollectionTableComponent_th_10_Template(rf, ctx) { if (
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "a", 9);
-    i0.ɵɵlistener("click", function ReadComplexFieldCollectionTableComponent_th_10_Template_a_click_4_listener() { const heading_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.sortRowsByColumns(heading_r2)); });
+    i0.ɵɵpipe(5, "rpxTranslate");
+    i0.ɵɵlistener("click", function ReadComplexFieldCollectionTableComponent_th_10_Template_a_click_4_listener() { const heading_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.sortRowsByColumns(heading_r2)); })("keyup.enter", function ReadComplexFieldCollectionTableComponent_th_10_Template_a_keyup_enter_4_listener() { const heading_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.sortRowsByColumns(heading_r2)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const heading_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, ctx_r2.columnsAllLabels[heading_r2].label));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 3, ctx_r2.columnsAllLabels[heading_r2].label));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("innerHTML", ctx_r2.sortWidget(ctx_r2.columnsAllLabels[heading_r2]), i0.ɵɵsanitizeHtml);
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(5, 5, "Sort " + ctx_r2.columnsAllLabels[heading_r2].label));
 } }
 function ReadComplexFieldCollectionTableComponent_ng_container_12_ng_container_2_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
@@ -27931,7 +28060,7 @@ function ReadComplexFieldCollectionTableComponent_ng_container_12_Template(rf, c
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "tr", 10);
-    i0.ɵɵlistener("click", function ReadComplexFieldCollectionTableComponent_ng_container_12_Template_tr_click_1_listener() { const i_r5 = i0.ɵɵrestoreView(_r4).index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r2.isHidden[i_r5] = !ctx_r2.isHidden[i_r5])); });
+    i0.ɵɵlistener("keyup", function ReadComplexFieldCollectionTableComponent_ng_container_12_Template_tr_keyup_1_listener($event) { const i_r5 = i0.ɵɵrestoreView(_r4).index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView($event.key === "Enter" ? (ctx_r2.isHidden[i_r5] = !ctx_r2.isHidden[i_r5]) : null); })("click", function ReadComplexFieldCollectionTableComponent_ng_container_12_Template_tr_click_1_listener() { const i_r5 = i0.ɵɵrestoreView(_r4).index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r2.isHidden[i_r5] = !ctx_r2.isHidden[i_r5])); });
     i0.ɵɵtemplate(2, ReadComplexFieldCollectionTableComponent_ng_container_12_ng_container_2_Template, 5, 2, "ng-container", 7);
     i0.ɵɵelementStart(3, "td")(4, "div", 11)(5, "a", 12);
     i0.ɵɵelement(6, "img", 13);
@@ -28110,7 +28239,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
         return result;
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadComplexFieldCollectionTableComponent_BaseFactory; return function ReadComplexFieldCollectionTableComponent_Factory(t) { return (ɵReadComplexFieldCollectionTableComponent_BaseFactory || (ɵReadComplexFieldCollectionTableComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldCollectionTableComponent)))(t || ReadComplexFieldCollectionTableComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldCollectionTableComponent, selectors: [["ccd-read-complex-field-collection-table"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 6, consts: [["showEmptyTd", ""], ["SimpleRow", ""], [1, "complex-panel", 3, "hidden"], [1, "complex-panel-title"], [1, "text-16"], ["aria-describedby", "complex panel table", 1, "complex-panel-table"], ["scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], ["scope", "col"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "click", "innerHTML"], [1, "new-table-row", "accordion-heading", 3, "click"], [2, "float", "right"], ["href", "javascript:void(0)"], ["alt", "image", 1, "accordion-image", 3, "src"], [3, "hidden"], [3, "colSpan"], ["aria-describedby", "complex panel table expanded", 1, "complex-panel-table"], [4, "ngIf", "ngIfElse"], [3, "caseField", "context"], ["class", "complex-panel-simple-field accordion-body", 3, "hidden", 4, "ngIf"], [3, "hidden", 4, "ngIf"], [1, "complex-panel-simple-field", "accordion-body", 3, "hidden"], ["class", "text-16", 4, "ngIf"], ["colspan", "2"], ["class", "complex-panel-compound-field", 3, "hidden", 4, "ngIf", "ngIfElse"], [1, "complex-panel-compound-field", 3, "hidden"], [1, "complex-panel-nested-field", 3, "hidden"], [4, "ngIf"]], template: function ReadComplexFieldCollectionTableComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldCollectionTableComponent, selectors: [["ccd-read-complex-field-collection-table"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 6, consts: [["showEmptyTd", ""], ["SimpleRow", ""], [1, "complex-panel", 3, "hidden"], [1, "complex-panel-title"], [1, "text-16"], ["aria-describedby", "complex panel table", 1, "complex-panel-table"], ["scope", "col", 4, "ngFor", "ngForOf"], [4, "ngFor", "ngForOf"], ["scope", "col"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "click", "keyup.enter", "innerHTML"], [1, "new-table-row", "accordion-heading", 3, "keyup", "click"], [2, "float", "right"], ["href", "javascript:void(0)"], ["alt", "accordion-img", 1, "accordion-image", 3, "src"], [3, "hidden"], [3, "colSpan"], ["aria-describedby", "complex panel table expanded", 1, "complex-panel-table"], [4, "ngIf", "ngIfElse"], [3, "caseField", "context"], ["class", "complex-panel-simple-field accordion-body", 3, "hidden", 4, "ngIf"], [3, "hidden", 4, "ngIf"], [1, "complex-panel-simple-field", "accordion-body", 3, "hidden"], ["class", "text-16", 4, "ngIf"], ["colspan", "2"], ["class", "complex-panel-compound-field", 3, "hidden", 4, "ngIf", "ngIfElse"], [1, "complex-panel-compound-field", 3, "hidden"], [1, "complex-panel-nested-field", 3, "hidden"], [4, "ngIf"]], template: function ReadComplexFieldCollectionTableComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "dl", 3)(2, "dt")(3, "span", 4);
             i0.ɵɵtext(4);
             i0.ɵɵpipe(5, "rpxTranslate");
@@ -28118,7 +28247,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
             i0.ɵɵelement(6, "dd");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(7, "table", 5)(8, "tbody")(9, "tr");
-            i0.ɵɵtemplate(10, ReadComplexFieldCollectionTableComponent_th_10_Template, 5, 4, "th", 6);
+            i0.ɵɵtemplate(10, ReadComplexFieldCollectionTableComponent_th_10_Template, 6, 7, "th", 6);
             i0.ɵɵelement(11, "th");
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(12, ReadComplexFieldCollectionTableComponent_ng_container_12_Template, 15, 19, "ng-container", 7);
@@ -28135,7 +28264,7 @@ class ReadComplexFieldCollectionTableComponent extends AbstractFieldReadComponen
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadComplexFieldCollectionTableComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-complex-field-collection-table', template: "<div class=\"complex-panel\" [hidden]=\"caseField.hidden\">\n  <dl class=\"complex-panel-title\">\n    <dt><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></dt>\n    <dd></dd>\n  </dl>\n  <table class=\"complex-panel-table\" aria-describedby=\"complex panel table\">\n    <tbody>\n    <!-- <COMPLEX table field header>-->\n    <tr>\n      <th *ngFor=\"let heading of columns\" scope=\"col\">\n        <span class=\"text-16\">{{columnsAllLabels[heading].label | rpxTranslate}}</span>\n        <a href=\"javascript:void(0)\"\n           (click)=\"sortRowsByColumns(heading)\"\n           class=\"sort-widget\"\n           [innerHTML]=\"sortWidget(columnsAllLabels[heading])\"></a>\n      </th>\n      <th></th>\n    </tr>\n    <!-- </COMPLEX table field header>-->\n    <ng-container *ngFor=\"let item of rows; let i = index;\">\n      <!-- <COMPLEX table collapsed view>-->\n      <tr class=\"new-table-row accordion-heading\" (click)=\"isHidden[i] = !isHidden[i]\"\n          [class.last-accordion]=\"isHidden[i]\">\n        <ng-container *ngFor=\"let heading of columns\">\n          <td class=\"text-16\">\n            <div *ngIf=\"item[heading]; else showEmptyTd\">\n              <ccd-field-read\n                [caseField]=\"toCaseField(heading, item[heading].label, columnsHorizontalLabel[heading].type, item[heading])\"\n                [context]=\"context\"></ccd-field-read>\n            </div>\n            <ng-template #showEmptyTd>\n              <div>&nbsp;</div>\n            </ng-template>\n          </td>\n        </ng-container>\n        <td>\n          <div style=\"float: right;\">\n            <a href=\"javascript:void(0)\"> <img src=\"{{ getImage(i) }}\" alt=\"image\" class=\"accordion-image\"/></a>\n          </div>\n        </td>\n      </tr>\n      <!-- </COMPLEX table collapsed view>-->\n      <!-- <COMPLEX table expanded view>-->\n      <tr [hidden]=\"isHidden[i]\">\n        <td [colSpan]=\"columns.length + 1\">\n          <table class=\"complex-panel-table\" aria-describedby=\"complex panel table expanded\">\n            <tbody>\n            <ng-container\n              *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue: keepOriginalOrder | ccdCollectionTableCaseFieldsFilter: caseField: rows[i] | ccdReadFieldsFilter:true :undefined :true\">\n              <!-- <COMPLEX table expandable body simple field>-->\n              <tr class=\"complex-panel-simple-field accordion-body\" *ngIf=\"item[vLabel.id]\" [hidden]=\"vLabel.hidden\">\n                <th scope=\"col\"><span class=\"text-16\">{{vLabel.label | rpxTranslate}}</span></th>\n                <td *ngIf=\"vLabel['type'] !== 'Complex'\" class=\"text-16\">\n                  <ccd-field-read [caseField]=\"toCaseField('', vLabel.label, vLabel.field_type, item[vLabel.id])\"\n                                  [context]=\"context\"></ccd-field-read>\n                </td>\n              </tr>\n              <!-- </COMPLEX table expandable body simple field>-->\n\n              <!-- <COMPLEX table expandable body complex field>-->\n              <tr *ngIf=\"vLabel['type'] === 'Complex' && addCaseFieldValue(vLabel, item[vLabel.id])\" [hidden]=\"vLabel.hidden\">\n                <td colspan=\"2\">\n                  <ng-container *ngFor=\"let caseField of vLabel | ccdReadFieldsFilter:true :undefined :true\">\n                      <tr class=\"complex-panel-compound-field\" *ngIf=\"(caseField | ccdIsCompound); else SimpleRow\" [hidden]=\"caseField\">\n                        <td colspan=\"2\">\n                          <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                        </td>\n                      </tr>\n                      <ng-template #SimpleRow>\n                        <tr class=\"complex-panel-nested-field\" [hidden]=\"caseField.hidden\">\n                          <th scope=\"col\"><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></th>\n                          <td *ngIf=\"!item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                          </td>\n                          <td *ngIf=\"item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <ccd-read-case-link-field [caseField]=\"addCaseReferenceValue(caseField, item[vLabel.id].CaseReference)\" [context]=\"context\"></ccd-read-case-link-field>\n                          </td>\n                        </tr>\n                      </ng-template>\n                  </ng-container>\n                </td>\n              </tr>\n              <!-- <COMPLEX table expandable body complex field>-->\n            </ng-container>\n            </tbody>\n          </table>\n        </td>\n      </tr>\n      <!-- </COMPLEX table expanded view>-->\n    </ng-container>\n    </tbody>\n  </table>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th{border-bottom:none}.complex-panel .complex-panel-table th{padding-left:5px;font-weight:700;border-bottom:none}.complex-panel .complex-panel-table td{padding-left:5px;padding-top:0;padding-bottom:0;border-bottom:none}.complex-panel .new-table-row{border-top:1px solid #bfc1c3}.complex-panel .complex-panel-simple-field th{padding-left:5px;padding-top:0;padding-bottom:0;width:295px}.complex-panel .complex-panel-nested-field th{padding-left:33px;padding-top:0;padding-bottom:0;width:200px}.complex-panel .complex-panel-compound-field td{padding:5px;border-bottom:none}.sort-widget{cursor:pointer;text-decoration:none;color:#0b0c0c}.accordion-wrapper{margin-bottom:20px}.accordion-wrapper .heading-medium{margin:0}.accordion-wrapper .accordion-heading{border-top:1px solid #bfc1c3;padding-top:20px;padding-bottom:10px;height:20px;cursor:pointer}.accordion-wrapper .accordion-heading .accordion-image{width:25px;margin-right:20px}.accordion-wrapper .accordion-body{margin-top:20px;margin-right:20px}.accordion-wrapper .last-accordion{border-bottom:1px solid #bfc1c3;padding-bottom:30px}\n"] }]
+        args: [{ selector: 'ccd-read-complex-field-collection-table', template: "<div class=\"complex-panel\" [hidden]=\"caseField.hidden\">\n  <dl class=\"complex-panel-title\">\n    <dt><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></dt>\n    <dd></dd>\n  </dl>\n  <table class=\"complex-panel-table\" aria-describedby=\"complex panel table\">\n    <tbody>\n    <!-- <COMPLEX table field header>-->\n    <tr>\n      <th *ngFor=\"let heading of columns\" scope=\"col\">\n        <span class=\"text-16\">{{columnsAllLabels[heading].label | rpxTranslate}}</span>\n        <a href=\"javascript:void(0)\"\n           (click)=\"sortRowsByColumns(heading)\"\n           (keyup.enter)=\"sortRowsByColumns(heading)\"\n           class=\"sort-widget\"\n           [attr.aria-label]=\"'Sort ' + columnsAllLabels[heading].label | rpxTranslate\"\n           [innerHTML]=\"sortWidget(columnsAllLabels[heading])\"></a>\n      </th>\n      <th></th>\n    </tr>\n    <!-- </COMPLEX table field header>-->\n    <ng-container *ngFor=\"let item of rows; let i = index;\">\n      <!-- <COMPLEX table collapsed view>-->\n      <tr class=\"new-table-row accordion-heading\" (keyup)=\"$event.key === 'Enter' ? (isHidden[i] = !isHidden[i]) : null\" (click)=\"isHidden[i] = !isHidden[i]\"\n          [class.last-accordion]=\"isHidden[i]\">\n        <ng-container *ngFor=\"let heading of columns\">\n          <td class=\"text-16\">\n            <div *ngIf=\"item[heading]; else showEmptyTd\">\n              <ccd-field-read\n                [caseField]=\"toCaseField(heading, item[heading].label, columnsHorizontalLabel[heading].type, item[heading])\"\n                [context]=\"context\"></ccd-field-read>\n            </div>\n            <ng-template #showEmptyTd>\n              <div>&nbsp;</div>\n            </ng-template>\n          </td>\n        </ng-container>\n        <td>\n          <div style=\"float: right;\">\n            <a href=\"javascript:void(0)\"> <img src=\"{{ getImage(i) }}\" alt=\"accordion-img\" class=\"accordion-image\"/></a>\n          </div>\n        </td>\n      </tr>\n      <!-- </COMPLEX table collapsed view>-->\n      <!-- <COMPLEX table expanded view>-->\n      <tr [hidden]=\"isHidden[i]\">\n        <td [colSpan]=\"columns.length + 1\">\n          <table class=\"complex-panel-table\" aria-describedby=\"complex panel table expanded\">\n            <tbody>\n            <ng-container\n              *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue: keepOriginalOrder | ccdCollectionTableCaseFieldsFilter: caseField: rows[i] | ccdReadFieldsFilter:true :undefined :true\">\n              <!-- <COMPLEX table expandable body simple field>-->\n              <tr class=\"complex-panel-simple-field accordion-body\" *ngIf=\"item[vLabel.id]\" [hidden]=\"vLabel.hidden\">\n                <th scope=\"col\"><span class=\"text-16\">{{ vLabel.label | rpxTranslate }}</span></th>\n                <td *ngIf=\"vLabel['type'] !== 'Complex'\" class=\"text-16\">\n                  <ccd-field-read [caseField]=\"toCaseField('', vLabel.label, vLabel.field_type, item[vLabel.id])\"\n                                  [context]=\"context\"></ccd-field-read>\n                </td>\n              </tr>\n              <!-- </COMPLEX table expandable body simple field>-->\n\n              <!-- <COMPLEX table expandable body complex field>-->\n              <tr *ngIf=\"vLabel['type'] === 'Complex' && addCaseFieldValue(vLabel, item[vLabel.id])\" [hidden]=\"vLabel.hidden\">\n                <td colspan=\"2\">\n                  <ng-container *ngFor=\"let caseField of vLabel | ccdReadFieldsFilter:true :undefined :true\">\n                      <tr class=\"complex-panel-compound-field\" *ngIf=\"(caseField | ccdIsCompound); else SimpleRow\" [hidden]=\"caseField\">\n                        <td colspan=\"2\">\n                          <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                        </td>\n                      </tr>\n                      <ng-template #SimpleRow>\n                        <tr class=\"complex-panel-nested-field\" [hidden]=\"caseField.hidden\">\n                          <th scope=\"col\"><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></th>\n                          <td *ngIf=\"!item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                          </td>\n                          <td *ngIf=\"item[vLabel.id]?.hasOwnProperty('CaseReference')\">\n                            <ccd-read-case-link-field [caseField]=\"addCaseReferenceValue(caseField, item[vLabel.id].CaseReference)\" [context]=\"context\"></ccd-read-case-link-field>\n                          </td>\n                        </tr>\n                      </ng-template>\n                  </ng-container>\n                </td>\n              </tr>\n              <!-- <COMPLEX table expandable body complex field>-->\n            </ng-container>\n            </tbody>\n          </table>\n        </td>\n      </tr>\n      <!-- </COMPLEX table expanded view>-->\n    </ng-container>\n    </tbody>\n  </table>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th{border-bottom:none}.complex-panel .complex-panel-table th{padding-left:5px;font-weight:700;border-bottom:none}.complex-panel .complex-panel-table td{padding-left:5px;padding-top:0;padding-bottom:0;border-bottom:none}.complex-panel .new-table-row{border-top:1px solid #bfc1c3}.complex-panel .complex-panel-simple-field th{padding-left:5px;padding-top:0;padding-bottom:0;width:295px}.complex-panel .complex-panel-nested-field th{padding-left:33px;padding-top:0;padding-bottom:0;width:200px}.complex-panel .complex-panel-compound-field td{padding:5px;border-bottom:none}.sort-widget{cursor:pointer;text-decoration:none;color:#0b0c0c}.accordion-wrapper{margin-bottom:20px}.accordion-wrapper .heading-medium{margin:0}.accordion-wrapper .accordion-heading{border-top:1px solid #bfc1c3;padding-top:20px;padding-bottom:10px;height:20px;cursor:pointer}.accordion-wrapper .accordion-heading .accordion-image{width:25px;margin-right:20px}.accordion-wrapper .accordion-body{margin-top:20px;margin-right:20px}.accordion-wrapper .last-accordion{border-bottom:1px solid #bfc1c3;padding-bottom:30px}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadComplexFieldCollectionTableComponent, { className: "ReadComplexFieldCollectionTableComponent", filePath: "lib/shared/components/palette/complex/read-complex-field-collection-table.component.ts", lineNumber: 12 }); })();
 
@@ -30490,7 +30619,7 @@ ReadQueryManagementFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i1
 i0.ɵɵsetComponentScope(QueryDetailsComponent, function () { return [i5.NgForOf, i5.NgIf, AlertComponent, QueryAttachmentsReadComponent]; }, function () { return [i5.DatePipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(QueryWriteRespondToQueryComponent, function () { return [i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, QueryDetailsComponent,
     QueryCaseDetailsHeaderComponent]; }, function () { return [i1.RpxTranslatePipe]; });
-i0.ɵɵsetComponentScope(QueryWriteRaiseQueryComponent, function () { return [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, MarkdownComponent, QueryCaseDetailsHeaderComponent,
+i0.ɵɵsetComponentScope(QueryWriteRaiseQueryComponent, function () { return [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MaxLengthValidator, i4.FormGroupDirective, i4.FormControlName, QueryCaseDetailsHeaderComponent,
     QueryWriteDateInputComponent]; }, function () { return [i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(QueryCheckYourAnswersComponent, function () { return [i5.NgForOf, i5.NgIf, QueryCaseDetailsHeaderComponent,
     QueryAttachmentsReadComponent,
@@ -31712,28 +31841,28 @@ function PaginationComponent_ul_4_li_5_a_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(page_r6.label === "..." ? page_r6.label : i0.ɵɵpipeBind2(9, 12, page_r6.label, ""));
 } }
-function PaginationComponent_ul_4_li_5_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "span", 13);
+function PaginationComponent_ul_4_li_5_a_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 15)(1, "span", 13);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "number");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const page_r6 = i0.ɵɵnextContext().$implicit;
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, ctx_r3.screenReaderCurrentLabel), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("current", page_r6)("aria-label", ctx_r3.screenReaderCurrentLabel);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 4, ctx_r3.screenReaderCurrentLabel), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(page_r6.label === "..." ? page_r6.label : i0.ɵɵpipeBind2(6, 4, page_r6.label, ""));
+    i0.ɵɵtextInterpolate(page_r6.label === "..." ? page_r6.label : i0.ɵɵpipeBind2(6, 6, page_r6.label, ""));
 } }
 function PaginationComponent_ul_4_li_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li");
-    i0.ɵɵtemplate(1, PaginationComponent_ul_4_li_5_a_1_Template, 10, 15, "a", 10)(2, PaginationComponent_ul_4_li_5_ng_container_2_Template, 7, 7, "ng-container", 11);
+    i0.ɵɵtemplate(1, PaginationComponent_ul_4_li_5_a_1_Template, 10, 15, "a", 10)(2, PaginationComponent_ul_4_li_5_a_2_Template, 7, 9, "a", 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const page_r6 = ctx.$implicit;
@@ -31780,7 +31909,7 @@ function PaginationComponent_ul_4_li_6_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 4, ctx_r3.screenReaderPageLabel));
 } }
 function PaginationComponent_ul_4_li_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li", 14);
+    i0.ɵɵelementStart(0, "li", 16);
     i0.ɵɵtemplate(1, PaginationComponent_ul_4_li_6_a_1_Template, 7, 9, "a", 10)(2, PaginationComponent_ul_4_li_6_span_2_Template, 6, 6, "span", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -31851,7 +31980,7 @@ class PaginationComponent {
         this.pResponsive = coerceToBoolean(value);
     }
     static ɵfac = function PaginationComponent_Factory(t) { return new (t || PaginationComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationComponent, selectors: [["ccd-pagination"]], inputs: { visibilityLabel: "visibilityLabel", id: "id", maxSize: "maxSize", previousLabel: "previousLabel", nextLabel: "nextLabel", screenReaderPaginationLabel: "screenReaderPaginationLabel", screenReaderPageLabel: "screenReaderPageLabel", screenReaderCurrentLabel: "screenReaderCurrentLabel", directionLinks: "directionLinks", autoHide: "autoHide", responsive: "responsive" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection" }, decls: 5, vars: 6, consts: [["p", "paginationApi"], [3, "pageChange", "pageBoundsCorrection", "id", "maxSize"], ["role", "navigation"], ["class", "ngx-pagination", 3, "responsive", 4, "ngIf"], [1, "ngx-pagination"], ["class", "pagination-previous", 3, "disabled", 4, "ngIf"], [1, "small-screen"], [3, "current", "ellipsis", 4, "ngFor", "ngForOf"], ["class", "pagination-next", 3, "disabled", 4, "ngIf"], [1, "pagination-previous"], ["tabindex", "0", 3, "keyup.enter", "click", 4, "ngIf"], [4, "ngIf"], ["tabindex", "0", 3, "keyup.enter", "click"], [1, "show-for-sr"], [1, "pagination-next"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationComponent, selectors: [["ccd-pagination"]], inputs: { visibilityLabel: "visibilityLabel", id: "id", maxSize: "maxSize", previousLabel: "previousLabel", nextLabel: "nextLabel", screenReaderPaginationLabel: "screenReaderPaginationLabel", screenReaderPageLabel: "screenReaderPageLabel", screenReaderCurrentLabel: "screenReaderCurrentLabel", directionLinks: "directionLinks", autoHide: "autoHide", responsive: "responsive" }, outputs: { pageChange: "pageChange", pageBoundsCorrection: "pageBoundsCorrection" }, decls: 5, vars: 6, consts: [["p", "paginationApi"], [3, "pageChange", "pageBoundsCorrection", "id", "maxSize"], ["role", "navigation"], ["class", "ngx-pagination", 3, "responsive", 4, "ngIf"], [1, "ngx-pagination"], ["class", "pagination-previous", 3, "disabled", 4, "ngIf"], [1, "small-screen"], [3, "current", "ellipsis", 4, "ngFor", "ngForOf"], ["class", "pagination-next", 3, "disabled", 4, "ngIf"], [1, "pagination-previous"], ["tabindex", "0", 3, "keyup.enter", "click", 4, "ngIf"], [4, "ngIf"], ["tabindex", "0", 3, "keyup.enter", "click"], [1, "show-for-sr"], ["tabindex", "0", 4, "ngIf"], ["tabindex", "0"], [1, "pagination-next"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "pagination-template", 1, 0);
             i0.ɵɵlistener("pageChange", function PaginationComponent_Template_pagination_template_pageChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.pageChange.emit($event)); })("pageBoundsCorrection", function PaginationComponent_Template_pagination_template_pageBoundsCorrection_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.pageBoundsCorrection.emit($event)); });
@@ -31866,11 +31995,11 @@ class PaginationComponent {
             i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 4, "Pagination"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !(ctx.autoHide && p_r3.pages.length <= 1));
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$3.PaginationControlsDirective, i5.DecimalPipe, i1.RpxTranslatePipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]:after{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width: 601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$3.PaginationControlsDirective, i5.DecimalPipe, i1.RpxTranslatePipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]:after{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900;text-decoration:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width: 601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-pagination', template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"maxSize\" (pageChange)=\"pageChange.emit($event)\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\">\n  <nav role=\"navigation\" [attr.aria-label]=\"'Pagination' | rpxTranslate\">\n    <ul class=\"ngx-pagination\" [attr.aria-label]=\"screenReaderPaginationLabel | rpxTranslate\"\n      [class.responsive]=\"responsive\" *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n      <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"1 < p.getCurrent()\" (keyup.enter)=\"p.previous()\" (click)=\"p.previous()\"\n          [attr.aria-label]=\"'Previous page' | rpxTranslate\">\n          {{ previousLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </a>\n        <span *ngIf=\"p.isFirstPage()\" [attr.aria-label]=\"'Previous page' | rpxTranslate\">\n          {{ previousLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </span>\n      </li>\n      <li class=\"small-screen\">\n        {{ p.getCurrent() }} / {{ p.getLastPage() }}\n      </li>\n      <li [class.current]=\"p.getCurrent() === page.value\" [class.ellipsis]=\"page.label === '...'\"\n        *ngFor=\"let page of p.pages\">\n        <a tabindex=\"0\" (keyup.enter)=\"p.setCurrent(page.value)\" (click)=\"p.setCurrent(page.value)\"\n          *ngIf=\"p.getCurrent() !== page.value\" [attr.aria-label]=\"(page.label === '...') ? ('Change pagination range' | rpxTranslate) : ('Page ' | rpxTranslate) + (page.label | number:'')\">\n          <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </a>\n        <ng-container *ngIf=\"p.getCurrent() === page.value\">\n          <span class=\"show-for-sr\">{{ screenReaderCurrentLabel | rpxTranslate }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </ng-container>\n      </li>\n      <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"!p.isLastPage()\" (keyup.enter)=\"p.next()\" (click)=\"p.next()\"\n          [attr.aria-label]=\"'Next page' | rpxTranslate\">\n          {{ nextLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </a>\n        <span *ngIf=\"p.isLastPage()\">\n          {{ nextLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </span>\n      </li>\n    </ul>\n  </nav>\n</pagination-template>\n", styles: [".ngx-pagination{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination:before,.ngx-pagination:after{content:\" \";display:table}.ngx-pagination:after{clear:both}.ngx-pagination li{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination li{display:inline-block}.ngx-pagination a,.ngx-pagination button{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6}.ngx-pagination .current{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination .disabled{display:none}.ngx-pagination .disabled:hover{background:transparent}.ngx-pagination a,.ngx-pagination button{cursor:pointer}.ngx-pagination .pagination-previous a:before,.ngx-pagination .pagination-previous.disabled:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination .pagination-next a:after,.ngx-pagination .pagination-next.disabled:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination .show-for-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination .small-screen{display:none}@media screen and (max-width: 601px){.ngx-pagination.responsive .small-screen{display:inline-block}.ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}\n"] }]
+        args: [{ selector: 'ccd-pagination', template: "<pagination-template #p=\"paginationApi\" [id]=\"id\" [maxSize]=\"maxSize\" (pageChange)=\"pageChange.emit($event)\"\n  (pageBoundsCorrection)=\"pageBoundsCorrection.emit($event)\">\n  <nav role=\"navigation\" [attr.aria-label]=\"'Pagination' | rpxTranslate\">\n    <ul class=\"ngx-pagination\" [attr.aria-label]=\"screenReaderPaginationLabel | rpxTranslate\"\n      [class.responsive]=\"responsive\" *ngIf=\"!(autoHide && p.pages.length <= 1)\">\n      <li class=\"pagination-previous\" [class.disabled]=\"p.isFirstPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"1 < p.getCurrent()\" (keyup.enter)=\"p.previous()\" (click)=\"p.previous()\"\n          [attr.aria-label]=\"'Previous page' | rpxTranslate\">\n          {{ previousLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </a>\n        <span *ngIf=\"p.isFirstPage()\" [attr.aria-label]=\"'Previous page' | rpxTranslate\">\n          {{ previousLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </span>\n      </li>\n      <li class=\"small-screen\">\n        {{ p.getCurrent() }} / {{ p.getLastPage() }}\n      </li>\n      <li [class.current]=\"p.getCurrent() === page.value\" [class.ellipsis]=\"page.label === '...'\"\n        *ngFor=\"let page of p.pages\">\n        <a tabindex=\"0\" (keyup.enter)=\"p.setCurrent(page.value)\" (click)=\"p.setCurrent(page.value)\"\n          *ngIf=\"p.getCurrent() !== page.value\" [attr.aria-label]=\"(page.label === '...') ? ('Change pagination range' | rpxTranslate) : ('Page ' | rpxTranslate) + (page.label | number:'')\">\n          <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </a>\n        <a tabindex=\"0\" *ngIf=\"p.getCurrent() === page.value\">\n          <span class=\"show-for-sr\" [attr.current]=\"page\" [attr.aria-label]=\"screenReaderCurrentLabel\">{{ screenReaderCurrentLabel | rpxTranslate }} </span>\n          <span>{{ (page.label === '...') ? page.label : (page.label | number:'') }}</span>\n        </a>\n      </li>\n      <li class=\"pagination-next\" [class.disabled]=\"p.isLastPage()\" *ngIf=\"directionLinks\">\n        <a tabindex=\"0\" *ngIf=\"!p.isLastPage()\" (keyup.enter)=\"p.next()\" (click)=\"p.next()\"\n          [attr.aria-label]=\"'Next page' | rpxTranslate\">\n          {{ nextLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </a>\n        <span *ngIf=\"p.isLastPage()\">\n          {{ nextLabel | rpxTranslate }} <span class=\"show-for-sr\">{{ screenReaderPageLabel | rpxTranslate }}</span>\n        </span>\n      </li>\n    </ul>\n  </nav>\n</pagination-template>\n", styles: [".ngx-pagination{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination:before,.ngx-pagination:after{content:\" \";display:table}.ngx-pagination:after{clear:both}.ngx-pagination li{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination li{display:inline-block}.ngx-pagination a,.ngx-pagination button{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination a:hover,.ngx-pagination button:hover{background:#e6e6e6}.ngx-pagination .current{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900;text-decoration:none}.ngx-pagination .disabled{display:none}.ngx-pagination .disabled:hover{background:transparent}.ngx-pagination a,.ngx-pagination button{cursor:pointer}.ngx-pagination .pagination-previous a:before,.ngx-pagination .pagination-previous.disabled:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination .pagination-next a:after,.ngx-pagination .pagination-next.disabled:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination .show-for-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination .small-screen{display:none}@media screen and (max-width: 601px){.ngx-pagination.responsive .small-screen{display:inline-block}.ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}\n"] }]
     }], null, { visibilityLabel: [{
             type: Input
         }], id: [{
@@ -31901,10 +32030,10 @@ class PaginationComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "lib/shared/components/pagination/pagination.component.ts", lineNumber: 12 }); })();
 
 const _c0$c = (a0, a1, a2) => ({ itemsPerPage: a0, currentPage: a1, totalItems: a2 });
-function CaseListComponent_th_6_Template(rf, ctx) { if (rf & 1) {
+function CaseListComponent_td_6_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 8)(1, "div", 9)(2, "input", 10);
-    i0.ɵɵlistener("change", function CaseListComponent_th_6_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectAll()); });
+    i0.ɵɵelementStart(0, "td", 8)(1, "div", 9)(2, "input", 10);
+    i0.ɵɵlistener("change", function CaseListComponent_td_6_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectAll()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelement(3, "label", 11);
     i0.ɵɵelementEnd()();
@@ -31912,9 +32041,11 @@ function CaseListComponent_th_6_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("checked", ctx_r1.allOnPageSelected())("disabled", !ctx_r1.canAnyBeShared());
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-labelledby", "select-all");
 } }
 function CaseListComponent_th_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "th", 8);
+    i0.ɵɵelementStart(0, "th", 12);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -31923,22 +32054,25 @@ function CaseListComponent_th_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, h_r3.header));
 } }
-function CaseListComponent_ng_container_9_th_2_Template(rf, ctx) { if (rf & 1) {
+function CaseListComponent_ng_container_9_td_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 14)(1, "div", 9)(2, "input", 15);
-    i0.ɵɵlistener("change", function CaseListComponent_ng_container_9_th_2_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r4); const c_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeSelection(c_r5)); })("keyup", function CaseListComponent_ng_container_9_th_2_Template_input_keyup_2_listener($event) { i0.ɵɵrestoreView(_r4); const c_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeyUp($event, c_r5)); });
+    i0.ɵɵelementStart(0, "td", 15)(1, "div", 9)(2, "input", 16);
+    i0.ɵɵlistener("change", function CaseListComponent_ng_container_9_td_2_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r4); const c_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeSelection(c_r5)); })("keyup", function CaseListComponent_ng_container_9_td_2_Template_input_keyup_2_listener($event) { i0.ɵɵrestoreView(_r4); const c_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeyUp($event, c_r5)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "label", 16);
+    i0.ɵɵelement(3, "label", 17);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const c_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r5 = i0.ɵɵnextContext();
+    const c_r5 = ctx_r5.$implicit;
+    const i_r7 = ctx_r5.index;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵpropertyInterpolate1("id", "select-", c_r5[ctx_r1.tableConfig.idField], "");
-    i0.ɵɵpropertyInterpolate1("name", "select-", c_r5[ctx_r1.tableConfig.idField], "");
+    i0.ɵɵpropertyInterpolate1("id", "select-", c_r5[ctx_r1.tableConfig.idField] || i_r7, "");
+    i0.ɵɵpropertyInterpolate1("name", "select-", c_r5[ctx_r1.tableConfig.idField] || i_r7, "");
     i0.ɵɵproperty("checked", ctx_r1.isSelected(c_r5))("disabled", !ctx_r1.canBeShared(c_r5));
     i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate1("for", "select-", c_r5[ctx_r1.tableConfig.idField], "");
+    i0.ɵɵpropertyInterpolate1("for", "select-", c_r5[ctx_r1.tableConfig.idField] || i_r7, "");
+    i0.ɵɵattribute("aria-labelledby", "select-" + (c_r5[ctx_r1.tableConfig.idField] || i_r7));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -31946,52 +32080,52 @@ function CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_1_Tem
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, c_r5[col_r6.key]));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, c_r5[col_r8.key]));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "a", 19);
+    i0.ɵɵelementStart(1, "a", 20);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵproperty("routerLink", c_r5.routerLink);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, c_r5[col_r6.key]));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, c_r5[col_r8.key]));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_th_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "th", 14);
-    i0.ɵɵtemplate(1, CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_1_Template, 3, 3, "ng-container", 18)(2, CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_2_Template, 4, 4, "ng-container", 18);
+    i0.ɵɵelementStart(0, "th", 15);
+    i0.ɵɵtemplate(1, CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_1_Template, 3, 3, "ng-container", 19)(2, CaseListComponent_ng_container_9_ng_container_3_th_1_ng_container_2_Template, 4, 4, "ng-container", 19);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext().$implicit;
+    const col_r8 = i0.ɵɵnextContext().$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !col_r6.type || col_r6.type === "text");
+    i0.ɵɵproperty("ngIf", !col_r8.type || col_r8.type === "text");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", col_r6.type === "link" && c_r5.routerLink);
+    i0.ɵɵproperty("ngIf", col_r8.type === "link" && c_r5.routerLink);
 } }
 function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "a", 19);
+    i0.ɵɵelementStart(1, "a", 20);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵproperty("routerLink", c_r5.routerLink);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, c_r5[col_r6.key]));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, c_r5[col_r8.key]));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -31999,32 +32133,32 @@ function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_2_Tem
     i0.ɵɵpipe(2, "currency");
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("-", i0.ɵɵpipeBind2(2, 1, c_r5[col_r6.key], "GBP"), "");
+    i0.ɵɵtextInterpolate1("-", i0.ɵɵpipeBind2(2, 1, c_r5[col_r8.key], "GBP"), "");
 } }
 function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatDate(c_r5[col_r6.key]));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(c_r5[col_r8.key]));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatDateAtTime(c_r5[col_r6.key]));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDateAtTime(c_r5[col_r8.key]));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -32032,21 +32166,21 @@ function CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_5_Tem
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext(2).$implicit;
+    const col_r8 = i0.ɵɵnextContext(2).$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, c_r5[col_r6.key]));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, c_r5[col_r8.key]));
 } }
 function CaseListComponent_ng_container_9_ng_container_3_td_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 20);
-    i0.ɵɵtemplate(1, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_1_Template, 4, 4, "ng-container", 18)(2, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_2_Template, 3, 4, "ng-container", 21)(3, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_3_Template, 2, 1, "ng-container", 21)(4, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_4_Template, 2, 1, "ng-container", 21)(5, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_5_Template, 3, 3, "ng-container", 22);
+    i0.ɵɵelementStart(0, "td", 21);
+    i0.ɵɵtemplate(1, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_1_Template, 4, 4, "ng-container", 19)(2, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_2_Template, 3, 4, "ng-container", 22)(3, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_3_Template, 2, 1, "ng-container", 22)(4, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_4_Template, 2, 1, "ng-container", 22)(5, CaseListComponent_ng_container_9_ng_container_3_td_2_ng_container_5_Template, 3, 3, "ng-container", 23);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const col_r6 = i0.ɵɵnextContext().$implicit;
+    const col_r8 = i0.ɵɵnextContext().$implicit;
     const c_r5 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("ngSwitch", col_r6 == null ? null : col_r6.type);
+    i0.ɵɵproperty("ngSwitch", col_r8 == null ? null : col_r8.type);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", col_r6.type === "link" && c_r5.routerLink);
+    i0.ɵɵproperty("ngIf", col_r8.type === "link" && c_r5.routerLink);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngSwitchCase", "money");
     i0.ɵɵadvance();
@@ -32056,20 +32190,20 @@ function CaseListComponent_ng_container_9_ng_container_3_td_2_Template(rf, ctx)
 } }
 function CaseListComponent_ng_container_9_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, CaseListComponent_ng_container_9_ng_container_3_th_1_Template, 3, 2, "th", 13)(2, CaseListComponent_ng_container_9_ng_container_3_td_2_Template, 6, 5, "td", 17);
+    i0.ɵɵtemplate(1, CaseListComponent_ng_container_9_ng_container_3_th_1_Template, 3, 2, "th", 14)(2, CaseListComponent_ng_container_9_ng_container_3_td_2_Template, 6, 5, "td", 18);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const isFirst_r7 = ctx.first;
+    const isFirst_r9 = ctx.first;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", isFirst_r7 && ctx_r1.firstCellIsHeader);
+    i0.ɵɵproperty("ngIf", isFirst_r9 && ctx_r1.firstCellIsHeader);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !(isFirst_r7 && ctx_r1.firstCellIsHeader));
+    i0.ɵɵproperty("ngIf", !(isFirst_r9 && ctx_r1.firstCellIsHeader));
 } }
 function CaseListComponent_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "tr", 12);
-    i0.ɵɵtemplate(2, CaseListComponent_ng_container_9_th_2_Template, 4, 8, "th", 13)(3, CaseListComponent_ng_container_9_ng_container_3_Template, 3, 2, "ng-container", 6);
+    i0.ɵɵelementStart(1, "tr", 13);
+    i0.ɵɵtemplate(2, CaseListComponent_ng_container_9_td_2_Template, 4, 9, "td", 14)(3, CaseListComponent_ng_container_9_ng_container_3_Template, 3, 2, "ng-container", 6);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -32080,9 +32214,9 @@ function CaseListComponent_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngForOf", ctx_r1.tableConfig.columnConfigs);
 } }
 function CaseListComponent_ccd_pagination_11_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ccd-pagination", 23);
-    i0.ɵɵlistener("pageChange", function CaseListComponent_ccd_pagination_11_Template_ccd_pagination_pageChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToPage($event)); });
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ccd-pagination", 24);
+    i0.ɵɵlistener("pageChange", function CaseListComponent_ccd_pagination_11_Template_ccd_pagination_pageChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToPage($event)); });
     i0.ɵɵelementEnd();
 } }
 class DateTimeFormatUtils {
@@ -32182,13 +32316,13 @@ class CaseListComponent {
         this.pageChange.emit(pageNumber);
     }
     static ɵfac = function CaseListComponent_Factory(t) { return new (t || CaseListComponent)(i0.ɵɵdirectiveInject(BrowserService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseListComponent, selectors: [["ccd-case-list"]], inputs: { classes: "classes", caption: "caption", firstCellIsHeader: "firstCellIsHeader", cases: "cases", tableConfig: "tableConfig", selectionEnabled: "selectionEnabled", selectedCases: "selectedCases", currentPageNo: "currentPageNo", totalResultsCount: "totalResultsCount", pageSize: "pageSize" }, outputs: { selection: "selection", pageChange: "pageChange" }, decls: 12, vars: 17, consts: [[1, "govuk-table__caption"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["class", "govuk-table__header", "scope", "col", 4, "ngIf"], ["class", "govuk-table__header", "scope", "col", 4, "ngFor", "ngForOf"], [1, "govuk-table__body"], [4, "ngFor", "ngForOf"], [3, "pageChange", 4, "ngIf"], ["scope", "col", 1, "govuk-table__header"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], ["data-selector", "table-row", 1, "govuk-table__row"], ["data-selector", "table-header", "class", "govuk-table__header", "scope", "row", 4, "ngIf"], ["data-selector", "table-header", "scope", "row", 1, "govuk-table__header"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["data-selector", "table-cell", "class", "govuk-table__cell", 3, "ngSwitch", 4, "ngIf"], [4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["data-selector", "table-cell", 1, "govuk-table__cell", 3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "pageChange"]], template: function CaseListComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseListComponent, selectors: [["ccd-case-list"]], inputs: { classes: "classes", caption: "caption", firstCellIsHeader: "firstCellIsHeader", cases: "cases", tableConfig: "tableConfig", selectionEnabled: "selectionEnabled", selectedCases: "selectedCases", currentPageNo: "currentPageNo", totalResultsCount: "totalResultsCount", pageSize: "pageSize" }, outputs: { selection: "selection", pageChange: "pageChange" }, decls: 12, vars: 17, consts: [[1, "govuk-table__caption"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["class", "govuk-table__header", 4, "ngIf"], ["class", "govuk-table__header", "scope", "col", 4, "ngFor", "ngForOf"], [1, "govuk-table__body"], [4, "ngFor", "ngForOf"], [3, "pageChange", 4, "ngIf"], [1, "govuk-table__header"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], ["scope", "col", 1, "govuk-table__header"], ["data-selector", "table-row", 1, "govuk-table__row"], ["data-selector", "table-header", "class", "govuk-table__header", "scope", "row", 4, "ngIf"], ["data-selector", "table-header", "scope", "row", 1, "govuk-table__header"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["data-selector", "table-cell", "class", "govuk-table__cell", 3, "ngSwitch", 4, "ngIf"], [4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["data-selector", "table-cell", 1, "govuk-table__cell", 3, "ngSwitch"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "pageChange"]], template: function CaseListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "table")(1, "caption", 0);
             i0.ɵɵtext(2);
             i0.ɵɵpipe(3, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "thead", 1)(5, "tr", 2);
-            i0.ɵɵtemplate(6, CaseListComponent_th_6_Template, 4, 2, "th", 3)(7, CaseListComponent_th_7_Template, 3, 3, "th", 4);
+            i0.ɵɵtemplate(6, CaseListComponent_td_6_Template, 4, 3, "td", 3)(7, CaseListComponent_th_7_Template, 3, 3, "th", 4);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(8, "tbody", 5);
             i0.ɵɵtemplate(9, CaseListComponent_ng_container_9_Template, 4, 2, "ng-container", 6);
@@ -32211,7 +32345,7 @@ class CaseListComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseListComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-list', template: "<table class=\"{{'govuk-table ' + classes}}\">\n  <caption class=\"govuk-table__caption\">{{caption | rpxTranslate}}</caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header\" scope=\"col\" *ngIf=\"selectionEnabled\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\"\n                 [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <!-- This label element is used to hide the standard checkbox with a govuk-styled one -->\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th class=\"govuk-table__header\" scope=\"col\" *ngFor=\"let h of tableConfig.columnConfigs\">{{h.header | rpxTranslate}}</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <ng-container *ngFor=\"let c of cases | paginate: { itemsPerPage: pageSize, currentPage: currentPageNo, totalItems: totalResultsCount }\">\n      <tr data-selector=\"table-row\" class=\"govuk-table__row\">\n        <th data-selector=\"table-header\" class=\"govuk-table__header\" scope=\"row\" *ngIf=\"selectionEnabled\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ c[tableConfig.idField] }}\" name=\"select-{{ c[tableConfig.idField] }}\"\n                  type=\"checkbox\" (change)=\"changeSelection(c)\" [checked]=\"isSelected(c)\" [disabled]=\"!canBeShared(c)\" (keyup)=\"onKeyUp($event, c)\" />\n            <!-- This label element is used to hide the standard checkbox with a govuk-styled one -->\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ c[tableConfig.idField] }}\">\n            </label>\n          </div>\n        </th>\n        <ng-container *ngFor=\"let col of tableConfig.columnConfigs; first as isFirst\">\n          <th data-selector=\"table-header\" class=\"govuk-table__header\" scope=\"row\" *ngIf=\"isFirst && firstCellIsHeader\">\n            <ng-container *ngIf=\"!col.type || col.type === 'text'\">{{c[col.key] | rpxTranslate}}</ng-container>\n            <ng-container *ngIf=\"col.type === 'link' && c.routerLink\">\n              <a class=\"govuk-link\" [routerLink]=\"c.routerLink\">{{c[col.key] | rpxTranslate}}</a>\n            </ng-container>\n          </th>\n          <td data-selector=\"table-cell\" class=\"govuk-table__cell\" *ngIf=\"!(isFirst && firstCellIsHeader)\" [ngSwitch]=\"col?.type\">\n            <ng-container *ngIf=\"col.type === 'link' && c.routerLink\">\n              <a class=\"govuk-link\" [routerLink]=\"c.routerLink\">{{c[col.key] | rpxTranslate}}</a>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">-{{ c[col.key] | currency:'GBP' }}</ng-container>\n            <ng-container *ngSwitchCase=\"'date'\">{{formatDate(c[col.key])}}</ng-container>\n            <ng-container *ngSwitchCase=\"'dateAtTime'\">{{formatDateAtTime(c[col.key])}}</ng-container>\n            <ng-container *ngSwitchDefault>{{c[col.key] | rpxTranslate}}</ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </tbody>\n</table>\n<ccd-pagination *ngIf=\"totalResultsCount > pageSize\"\n  (pageChange)=\"goToPage($event)\"\n></ccd-pagination>\n" }]
+        args: [{ selector: 'ccd-case-list', template: "<table class=\"{{'govuk-table ' + classes}}\">\n  <caption class=\"govuk-table__caption\">{{caption | rpxTranslate}}</caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <td class=\"govuk-table__header\" *ngIf=\"selectionEnabled\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\"\n                 [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <!-- This label element is used to hide the standard checkbox with a govuk-styled one -->\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\" [attr.aria-labelledby]=\"'select-all'\">\n          </label>\n        </div>\n      </td>\n      <th class=\"govuk-table__header\" scope=\"col\" *ngFor=\"let h of tableConfig.columnConfigs\">{{h.header | rpxTranslate}}</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <ng-container *ngFor=\"let c of cases | paginate: { itemsPerPage: pageSize, currentPage: currentPageNo, totalItems: totalResultsCount };  index as i\">\n      <tr data-selector=\"table-row\" class=\"govuk-table__row\">\n        <td data-selector=\"table-header\" class=\"govuk-table__header\" scope=\"row\" *ngIf=\"selectionEnabled\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ c[tableConfig.idField] || i }}\" name=\"select-{{ c[tableConfig.idField] || i }}\"\n                  type=\"checkbox\" (change)=\"changeSelection(c)\" [checked]=\"isSelected(c)\" [disabled]=\"!canBeShared(c)\" (keyup)=\"onKeyUp($event, c)\" />\n            <!-- This label element is used to hide the standard checkbox with a govuk-styled one -->\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ c[tableConfig.idField] || i }}\" [attr.aria-labelledby]=\"'select-' + (c[tableConfig.idField] || i)\">\n            </label>\n          </div>\n        </td>\n        <ng-container *ngFor=\"let col of tableConfig.columnConfigs; first as isFirst\">\n          <th data-selector=\"table-header\" class=\"govuk-table__header\" scope=\"row\" *ngIf=\"isFirst && firstCellIsHeader\">\n            <ng-container *ngIf=\"!col.type || col.type === 'text'\">{{c[col.key] | rpxTranslate}}</ng-container>\n            <ng-container *ngIf=\"col.type === 'link' && c.routerLink\">\n              <a class=\"govuk-link\" [routerLink]=\"c.routerLink\">{{c[col.key] | rpxTranslate}}</a>\n            </ng-container>\n          </th>\n          <td data-selector=\"table-cell\" class=\"govuk-table__cell\" *ngIf=\"!(isFirst && firstCellIsHeader)\" [ngSwitch]=\"col?.type\">\n            <ng-container *ngIf=\"col.type === 'link' && c.routerLink\">\n              <a class=\"govuk-link\" [routerLink]=\"c.routerLink\">{{c[col.key] | rpxTranslate}}</a>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"'money'\">-{{ c[col.key] | currency:'GBP' }}</ng-container>\n            <ng-container *ngSwitchCase=\"'date'\">{{formatDate(c[col.key])}}</ng-container>\n            <ng-container *ngSwitchCase=\"'dateAtTime'\">{{formatDateAtTime(c[col.key])}}</ng-container>\n            <ng-container *ngSwitchDefault>{{c[col.key] | rpxTranslate}}</ng-container>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </tbody>\n</table>\n<ccd-pagination *ngIf=\"totalResultsCount > pageSize\"\n  (pageChange)=\"goToPage($event)\"\n></ccd-pagination>\n" }]
     }], () => [{ type: BrowserService }], { classes: [{
             type: Input
         }], caption: [{
@@ -33036,7 +33170,7 @@ function CaseHistoryComponent_div_0_ng_container_57_ng_container_6_tr_4_Template
     i0.ɵɵproperty("caseField", field_r1)("caseReference", ctx_r1.caseHistory.case_id);
 } }
 function CaseHistoryComponent_div_0_ng_container_57_ng_container_6_tr_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 17)(1, "td", 18);
+    i0.ɵɵelementStart(0, "tr", 17)(1, "th", 18);
     i0.ɵɵelement(2, "ccd-field-read", 16);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -33250,7 +33384,7 @@ class CaseHistoryComponent {
 }
 (() => { (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 : '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"] }]
+        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                      <th colspan=\"2\">\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </th>\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"] }]
     }], () => [{ type: i1$1.ActivatedRoute }, { type: AlertService }, { type: OrderService }, { type: CaseNotifier }, { type: CaseHistoryService }], { event: [{
             type: Input
         }] }); })();
@@ -33456,6 +33590,7 @@ class CaseResolver {
     static EVENT_REGEX = new RegExp('\/trigger\/.*?\/submit$');
     static PARAM_CASE_ID = 'cid';
     static CASE_CREATED_MSG = 'The case has been created successfully';
+    static EVENT_ID_QM_RESPOND_TO_QUERY = 'eventId=queryManagementRespondQuery';
     static defaultWAPage = '/work/my-work/list';
     static defaultPage = '/cases';
     // we need to run the CaseResolver on every child route of 'case/:jid/:ctid/:cid'
@@ -33476,6 +33611,12 @@ class CaseResolver {
     }
     resolve(route) {
         const cid = route.paramMap.get(CaseResolver.PARAM_CASE_ID);
+        const currentUrl = this.router.url ?? '';
+        // Prevent resolving if eventId=queryManagementRespondQuery is in the URL
+        if (currentUrl.includes(CaseResolver.EVENT_ID_QM_RESPOND_TO_QUERY)) {
+            console.info('Skipping resolve for event queryManagementRespondQuery.');
+            this.goToDefaultPage();
+        }
         if (!cid) {
             console.info('No case ID available in the route. Will navigate to case list.');
             // when redirected to case view after a case created, and the user has no READ access,
@@ -33594,9 +33735,13 @@ class EventTriggerResolver {
         this.loadingService = loadingService;
     }
     resolve(route) {
-        return this.isRootTriggerEventRoute(route) ? this.getAndCacheEventTrigger(route)
-            : this.cachedEventTrigger ? Promise.resolve(this.cachedEventTrigger)
-                : this.getAndCacheEventTrigger(route);
+        if (this.isRootTriggerEventRoute(route)) {
+            return this.getAndCacheEventTrigger(route);
+        }
+        if (this.cachedEventTrigger && (route.params?.eid === this.cachedEventTrigger?.id)) {
+            return Promise.resolve(this.cachedEventTrigger);
+        }
+        return this.getAndCacheEventTrigger(route);
     }
     isRootTriggerEventRoute(route) {
         // if route is 'trigger/:eid'
@@ -33984,15 +34129,14 @@ function CaseBasicAccessViewComponent_div_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "dd", 12);
     i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "rpxTranslate");
-    i0.ɵɵpipe(7, "titlecase");
+    i0.ɵɵpipe(6, "titlecase");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Court or hearing centre"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 6, i0.ɵɵpipeBind1(6, 4, ctx_r0.courtOrHearingCentre)));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 4, ctx_r0.courtOrHearingCentre));
 } }
 function CaseBasicAccessViewComponent_div_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10)(1, "dt", 11);
@@ -34067,7 +34211,7 @@ class CaseBasicAccessViewComponent {
             i0.ɵɵpipe(13, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(14, "dl", 4);
-            i0.ɵɵtemplate(15, CaseBasicAccessViewComponent_div_15_Template, 7, 6, "div", 5)(16, CaseBasicAccessViewComponent_div_16_Template, 7, 6, "div", 5)(17, CaseBasicAccessViewComponent_div_17_Template, 7, 6, "div", 5)(18, CaseBasicAccessViewComponent_div_18_Template, 8, 8, "div", 5)(19, CaseBasicAccessViewComponent_div_19_Template, 8, 8, "div", 5);
+            i0.ɵɵtemplate(15, CaseBasicAccessViewComponent_div_15_Template, 7, 6, "div", 5)(16, CaseBasicAccessViewComponent_div_16_Template, 7, 6, "div", 5)(17, CaseBasicAccessViewComponent_div_17_Template, 7, 6, "div", 5)(18, CaseBasicAccessViewComponent_div_18_Template, 7, 6, "div", 5)(19, CaseBasicAccessViewComponent_div_19_Template, 8, 8, "div", 5);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(20, "div", 6)(21, "button", 7);
             i0.ɵɵtext(22);
@@ -34112,7 +34256,7 @@ class CaseBasicAccessViewComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseBasicAccessViewComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-basic-access-view', template: "<ccd-loading-spinner  *ngIf=\"showSpinner\"></ccd-loading-spinner>\n<div>\n  <cut-alert type=\"information\">\n    <ng-container *ngIf=\"accessType === 'CHALLENGED'\">{{'This case requires' | rpxTranslate}} {{accessType | rpxTranslate | lowercase}} {{'access' | rpxTranslate}}.</ng-container>\n    <ng-container *ngIf=\"accessType === 'SPECIFIC'\">{{'Authorisation is needed to access this case' | rpxTranslate}}</ng-container>\n    <br />\n    <ng-container *ngIf=\"accessType === 'CHALLENGED'\">{{'This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes' | rpxTranslate}}.</ng-container>\n    <ng-container *ngIf=\"accessType === 'SPECIFIC'\">{{\"This could be because it's outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes\" | rpxTranslate }}.</ng-container>\n  </cut-alert>\n  <h1 class=\"heading-h1\">#{{ caseDetails.case_id | ccdCaseReference}}</h1>\n  <h2 class=\"govuk-heading-m\">{{'Case details' | rpxTranslate}}</h2>\n  <dl class=\"govuk-summary-list\">\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.basicFields?.caseNameHmctsInternal\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Case name' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.basicFields.caseNameHmctsInternal | rpxTranslate}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.case_type?.jurisdiction?.name\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Service' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.case_type.jurisdiction.name | rpxTranslate}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.state?.description\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'State' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.state.description | rpxTranslate}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"courtOrHearingCentre\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Court or hearing centre' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{courtOrHearingCentre | rpxTranslate | titlecase}}</dd>\n    </div>\n\n    <div class=\"govuk-summary-list__row\" *ngIf=\"accessType\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Access' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{accessType | titlecase | rpxTranslate}}</dd>\n    </div>\n  </dl>\n</div>\n<div class=\"govuk-button-group\">\n  <button class=\"govuk-button govuk-!-margin-right-3\" [routerLink]=\"getRequestUrl(accessType)\">\n    {{'Request access' | rpxTranslate}}\n  </button>\n  <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n    <p>\n      <a class=\"govuk-body\" (click)=\"onCancel()\" href=\"javascript:void(0)\">\n        {{'Cancel' | rpxTranslate}}\n      </a>\n    </p>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'ccd-case-basic-access-view', template: "<ccd-loading-spinner  *ngIf=\"showSpinner\"></ccd-loading-spinner>\n<div>\n  <cut-alert type=\"information\">\n    <ng-container *ngIf=\"accessType === 'CHALLENGED'\">{{'This case requires' | rpxTranslate}} {{accessType | rpxTranslate | lowercase}} {{'access' | rpxTranslate}}.</ng-container>\n    <ng-container *ngIf=\"accessType === 'SPECIFIC'\">{{'Authorisation is needed to access this case' | rpxTranslate}}</ng-container>\n    <br />\n    <ng-container *ngIf=\"accessType === 'CHALLENGED'\">{{'This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes' | rpxTranslate}}.</ng-container>\n    <ng-container *ngIf=\"accessType === 'SPECIFIC'\">{{\"This could be because it's outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes\" | rpxTranslate }}.</ng-container>\n  </cut-alert>\n  <h1 class=\"heading-h1\">#{{ caseDetails.case_id | ccdCaseReference}}</h1>\n  <h2 class=\"govuk-heading-m\">{{'Case details' | rpxTranslate}}</h2>\n  <dl class=\"govuk-summary-list\">\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.basicFields?.caseNameHmctsInternal\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Case name' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.basicFields.caseNameHmctsInternal | rpxTranslate}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.case_type?.jurisdiction?.name\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Service' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.case_type.jurisdiction.name | rpxTranslate}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.state?.description\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'State' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.state.description | rpxTranslate}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"courtOrHearingCentre\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Court or hearing centre' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{courtOrHearingCentre | titlecase}}</dd>\n    </div>\n\n    <div class=\"govuk-summary-list__row\" *ngIf=\"accessType\">\n      <dt class=\"govuk-summary-list__key summary-key\">{{'Access' | rpxTranslate}}</dt>\n      <dd class=\"govuk-summary-list__value\">{{accessType | titlecase | rpxTranslate}}</dd>\n    </div>\n  </dl>\n</div>\n<div class=\"govuk-button-group\">\n  <button class=\"govuk-button govuk-!-margin-right-3\" [routerLink]=\"getRequestUrl(accessType)\">\n    {{'Request access' | rpxTranslate}}\n  </button>\n  <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n    <p>\n      <a class=\"govuk-body\" (click)=\"onCancel()\" href=\"javascript:void(0)\">\n        {{'Cancel' | rpxTranslate}}\n      </a>\n    </p>\n  </div>\n</div>\n" }]
     }], () => [{ type: CasesService }, { type: i1$1.Router }], { caseDetails: [{
             type: Input
         }], accessType: [{
@@ -34349,7 +34493,7 @@ function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", "case-viewer-field-read--" + field_r7.id);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("topLevelFormGroup", ctx_r1.formGroup == null ? null : ctx_r1.formGroup.controls["data"])("caseField", field_r7)("caseReference", ctx_r1.caseDetails.case_id)("markdownUseHrefAsRouterLink", ctx_r1.markdownUseHrefAsRouterLink);
+    i0.ɵɵproperty("topLevelFormGroup", ctx_r1.formGroup == null ? null : ctx_r1.formGroup.controls["data"])("caseField", field_r7)("caseReference", ctx_r1.caseDetails.case_id);
 } }
 function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_container_3_tr_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr", 40)(1, "th", 35)(2, "span", 36);
@@ -34361,14 +34505,14 @@ function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", "case-viewer-field-read--" + field_r7.id);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("topLevelFormGroup", ctx_r1.formGroup.controls["data"])("caseField", field_r7)("caseReference", ctx_r1.caseDetails.case_id)("markdownUseHrefAsRouterLink", ctx_r1.markdownUseHrefAsRouterLink);
+    i0.ɵɵproperty("topLevelFormGroup", ctx_r1.formGroup.controls["data"])("caseField", field_r7)("caseReference", ctx_r1.caseDetails.case_id);
 } }
 function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "div", 30);
     i0.ɵɵelementContainerStart(2, 31);
     i0.ɵɵpipe(3, "ccdIsCompound");
-    i0.ɵɵtemplate(4, CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_container_3_tr_4_Template, 5, 6, "tr", 32)(5, CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_container_3_tr_5_Template, 4, 5, "tr", 33);
+    i0.ɵɵtemplate(4, CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_container_3_tr_4_Template, 5, 5, "tr", 32)(5, CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_3_ng_container_3_tr_5_Template, 4, 4, "tr", 33);
     i0.ɵɵelementContainerEnd();
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -34486,7 +34630,6 @@ class CaseFullAccessViewComponent {
     caseSubscription;
     errorSubscription;
     dialogConfig;
-    markdownUseHrefAsRouterLink;
     message;
     subscription;
     notificationBannerConfig;
@@ -34530,7 +34673,6 @@ class CaseFullAccessViewComponent {
         }));
         initDialog();
         this.init();
-        this.markdownUseHrefAsRouterLink = true;
         this.sessionStorageService?.removeItem('eventUrl');
         this.subscription = this.convertHrefToRouterService?.getHrefMarkdownLinkContent().subscribe((hrefMarkdownLinkContent) => {
             // do not convert router with initial default value; convert to router only on updated link content
@@ -34865,7 +35007,7 @@ class CaseFullAccessViewComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabGroup = _t.first);
-        } }, inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", caseDetails: "caseDetails", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 12, consts: [["tabGroup", ""], ["class", "error-summary", "role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "callbackErrorsContext", "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject"], [3, "caseId", "displayMode"], [1, "grid-row"], [1, "column-one-half"], [3, "caseDetails"], ["class", "case-viewer-controls", 4, "ngIf"], ["class", "column-one-half", 4, "ngIf"], ["class", "grid-row", 4, "ngIf"], [1, "column-full"], [4, "ngIf"], ["role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h2", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], [4, "ngFor", "ngForOf"], [1, "case-viewer-controls"], ["id", "case-viewer-control-print", "routerLink", "print", 1, "button", "button-secondary"], [3, "onTriggerChange", "onTriggerSubmit", "isDisabled", "triggers", "triggerText", "eventId"], [3, "linkClicked", "notificationBannerConfig"], ["animationDuration", "0ms", 3, "selectedIndexChange", "disableRipple", "selectedIndex"], [3, "id", "label", 4, "ngFor", "ngForOf"], [3, "id", "label", "aria-label", 4, "ngFor", "ngForOf"], [3, "id", "label"], [3, "id", "label", "aria-label"], ["matTabContent", ""], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-field-label", 4, "ngIf"], ["scope", "col", 3, "id"], [1, "text-16"], [3, "topLevelFormGroup", "caseField", "caseReference", "markdownUseHrefAsRouterLink"], ["id", "case-viewer-field-label"], [1, "case-viewer-label", "text-16"], [1, "compound-field"]], template: function CaseFullAccessViewComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", caseDetails: "caseDetails", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 12, consts: [["tabGroup", ""], ["class", "error-summary", "role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "callbackErrorsContext", "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject"], [3, "caseId", "displayMode"], [1, "grid-row"], [1, "column-one-half"], [3, "caseDetails"], ["class", "case-viewer-controls", 4, "ngIf"], ["class", "column-one-half", 4, "ngIf"], ["class", "grid-row", 4, "ngIf"], [1, "column-full"], [4, "ngIf"], ["role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h2", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], [4, "ngFor", "ngForOf"], [1, "case-viewer-controls"], ["id", "case-viewer-control-print", "routerLink", "print", 1, "button", "button-secondary"], [3, "onTriggerChange", "onTriggerSubmit", "isDisabled", "triggers", "triggerText", "eventId"], [3, "linkClicked", "notificationBannerConfig"], ["animationDuration", "0ms", 3, "selectedIndexChange", "disableRipple", "selectedIndex"], [3, "id", "label", 4, "ngFor", "ngForOf"], [3, "id", "label", "aria-label", 4, "ngFor", "ngForOf"], [3, "id", "label"], [3, "id", "label", "aria-label"], ["matTabContent", ""], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-field-label", 4, "ngIf"], ["scope", "col", 3, "id"], [1, "text-16"], [3, "topLevelFormGroup", "caseField", "caseReference"], ["id", "case-viewer-field-label"], [1, "case-viewer-label", "text-16"], [1, "compound-field"]], template: function CaseFullAccessViewComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseFullAccessViewComponent_div_0_Template, 14, 12, "div", 1)(1, CaseFullAccessViewComponent_div_1_Template, 8, 7, "div", 1);
             i0.ɵɵelementStart(2, "ccd-callback-errors", 2);
             i0.ɵɵlistener("callbackErrorsContext", function CaseFullAccessViewComponent_Template_ccd_callback_errors_callbackErrorsContext_2_listener($event) { return ctx.callbackErrorsNotify($event); });
@@ -34903,7 +35045,7 @@ class CaseFullAccessViewComponent {
 }
 (() => { (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\"\n                       [eventId]=\"eventId\"\n                       (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\" [aria-label]=\"curIdx === 0 ? tab.label + ', Please use left and right arrow keys to navigate case tabs' : '' | 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}.hide-table-capion{position:absolute;visibility:hidden}\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\"\n                       [eventId]=\"eventId\"\n                       (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\" [aria-label]=\"curIdx === 0 ? tab.label + ', Please use left and right arrow keys to navigate case tabs' : '' | 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                          </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                          </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}.hide-table-capion{position:absolute;visibility:hidden}\n"] }]
     }], () => [{ 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: i5.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }, { type: LoadingService }, { type: LinkedCasesService }, { type: CaseFlagStateService }], { hasPrint: [{
             type: Input
         }], hasEventSelector: [{
@@ -34981,20 +35123,19 @@ function CasePrinterComponent_div_0_tr_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td", 4)(2, "a", 5);
     i0.ɵɵpipe(3, "ccdPrintUrl");
     i0.ɵɵtext(4);
-    i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "td", 6);
-    i0.ɵɵtext(7);
-    i0.ɵɵpipe(8, "rpxTranslate");
+    i0.ɵɵelementStart(5, "td", 6);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const document_r1 = ctx.$implicit;
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("href", i0.ɵɵpipeBind1(3, 3, document_r1.url), i0.ɵɵsanitizeUrl);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 5, document_r1.name), " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 7, document_r1.type));
+    i0.ɵɵtextInterpolate1(" ", document_r1.name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 5, document_r1.type));
 } }
 function CasePrinterComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
@@ -35014,7 +35155,7 @@ function CasePrinterComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(14, "rpxTranslate");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(15, "tbody");
-    i0.ɵɵtemplate(16, CasePrinterComponent_div_0_tr_16_Template, 9, 9, "tr", 3);
+    i0.ɵɵtemplate(16, CasePrinterComponent_div_0_tr_16_Template, 8, 7, "tr", 3);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -35079,7 +35220,7 @@ class CasePrinterComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CasePrinterComponent, [{
         type: Component,
-        args: [{ template: "<div *ngIf=\"isDataLoaded()\">\n  <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n  <h2 class=\"heading-h2\">{{'Print' | rpxTranslate}}</h2>\n  <table [attr.aria-describedby]=\"'case print table' | rpxTranslate\">\n    <thead>\n      <tr>\n        <th>{{'Name' | rpxTranslate}}</th>\n        <th>{{'Type' | rpxTranslate}}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let document of documents\">\n        <td class=\"document-name\"><a [href]=\"document.url | ccdPrintUrl\" target=\"_blank\" rel=\"external\">\n          {{document.name | rpxTranslate}}\n        </a></td>\n        <td class=\"document-type\">{{document.type | rpxTranslate}}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
+        args: [{ template: "<div *ngIf=\"isDataLoaded()\">\n  <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n  <h2 class=\"heading-h2\">{{'Print' | rpxTranslate}}</h2>\n  <table [attr.aria-describedby]=\"'case print table' | rpxTranslate\">\n    <thead>\n      <tr>\n        <th>{{'Name' | rpxTranslate}}</th>\n        <th>{{'Type' | rpxTranslate}}</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr *ngFor=\"let document of documents\">\n        <td class=\"document-name\"><a [href]=\"document.url | ccdPrintUrl\" target=\"_blank\" rel=\"external\">\n          {{document.name}}\n        </a></td>\n        <td class=\"document-type\">{{document.type | rpxTranslate}}</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n" }]
     }], () => [{ type: CaseNotifier }, { type: CasesService }, { type: AlertService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CasePrinterComponent, { className: "CasePrinterComponent", filePath: "lib/shared/components/case-viewer/printer/case-printer.component.ts", lineNumber: 14 }); })();
 
@@ -38377,7 +38518,7 @@ function SearchResultComponent_table_0_div_6_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 8, ctx_r0.getTotalResults() + " results have been found"));
+    i0.ɵɵattribute("aria-label", ctx_r0.getTotalResults() + " " + i0.ɵɵpipeBind1(2, 8, "results have been found"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 10, "Showing"), " ");
     i0.ɵɵadvance(3);
@@ -38424,13 +38565,15 @@ function SearchResultComponent_table_0_td_10_Template(rf, ctx) { if (rf & 1) {
 function SearchResultComponent_table_0_th_11_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "a", 29);
-    i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_div_5_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); });
+    i0.ɵɵpipe(2, "rpxTranslate");
+    i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_div_5_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); })("keyup.enter", function SearchResultComponent_table_0_th_11_div_5_Template_a_keyup_enter_1_listener() { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const col_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("innerHTML", ctx_r0.sortWidget(col_r5), i0.ɵɵsanitizeHtml);
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 2, "Sort " + col_r5.label));
 } }
 function SearchResultComponent_table_0_th_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -38439,14 +38582,14 @@ function SearchResultComponent_table_0_th_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, SearchResultComponent_table_0_th_11_div_5_Template, 2, 1, "div", 27);
+    i0.ɵɵtemplate(5, SearchResultComponent_table_0_th_11_div_5_Template, 3, 4, "div", 27);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const col_r5 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("aria-sort", ctx_r0.isSortAscending(col_r5) === null ? null : ctx_r0.isSortAscending(col_r5) ? "ascending" : "descending");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 3, col_r5.label), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.isTranslatable(col_r5) ? i0.ɵɵpipeBind1(4, 3, col_r5.label) : col_r5.label, " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r0.comparator(col_r5));
 } }
@@ -38820,6 +38963,9 @@ class SearchResultComponent {
             this.selected.page = (changes['page']).currentValue;
         }
     }
+    isTranslatable(col) {
+        return FieldsUtils.isTranslatable(col.case_field_type);
+    }
     get resultTotal() {
         const total = this.paginationMetadata.totalResultsCount;
         const maximumResultReached = total >= this.PAGINATION_MAX_ITEM_RESULT;
@@ -39083,7 +39229,7 @@ class SearchResultComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     noop() { }
     static ɵfac = function SearchResultComponent_Factory(t) { return new (t || SearchResultComponent)(i0.ɵɵdirectiveInject(SearchResultViewItemComparatorFactory), i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(ActivityService), i0.ɵɵdirectiveInject(CaseReferencePipe), i0.ɵɵdirectiveInject(PlaceholderService), i0.ɵɵdirectiveInject(BrowserService), i0.ɵɵdirectiveInject(SessionStorageService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultComponent, selectors: [["ccd-search-result"]], inputs: { caseLinkUrlTemplate: "caseLinkUrlTemplate", jurisdiction: "jurisdiction", caseType: "caseType", caseState: "caseState", caseFilterFG: "caseFilterFG", resultView: "resultView", page: "page", paginationMetadata: "paginationMetadata", metadataFields: "metadataFields", selectionEnabled: "selectionEnabled", showOnlySelected: "showOnlySelected", preSelectedCases: "preSelectedCases", consumerSortingEnabled: "consumerSortingEnabled" }, outputs: { selection: "selection", changePage: "changePage", clickCase: "clickCase", sortHandler: "sortHandler" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["case_reference", ""], [4, "ngIf"], [3, "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel", "pageChange", 4, "ngIf"], ["class", "notification", 4, "ngIf"], ["id", "search-result-heading__text", "tabindex", "-1", 1, "heading-h2"], ["class", "govuk-warning-text pagination-limit-warning", 4, "ngIf"], ["class", "pagination-top", 4, "ngIf"], ["class", "reset-selection", 4, "ngIf"], ["scope", "row"], ["class", "govuk-table__checkbox", 4, "ngIf"], ["class", "search-result-column-header", "scope", "col", 4, "ngFor", "ngForOf"], ["style", "width: 110px;", "scope", "col", 4, "ngIf"], [1, "govuk-warning-text", "pagination-limit-warning"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], [1, "pagination-top"], ["id", "search-result-summary__text", 1, "text-16"], [1, "govuk-!-font-weight-bold"], [1, "reset-selection"], ["href", "javascript:void(0)", 1, "search-result-reset-link", 3, "click"], [1, "govuk-table__checkbox"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], ["scope", "col", 1, "search-result-column-header"], [1, "search-result-column-label", 3, "click", "keyup"], ["class", "search-result-column-sort", 4, "ngIf"], [1, "search-result-column-sort"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "click", "innerHTML"], ["scope", "col", 2, "width", "110px"], [4, "ngFor", "ngForOf"], ["class", "govuk-table__checkbox", "scope", "col", 4, "ngIf"], ["class", "search-result-column-cell", "scope", "row", 4, "ngFor", "ngForOf"], ["scope", "col", 1, "govuk-table__checkbox"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["scope", "row", 1, "search-result-column-cell"], ["class", "govuk-link", 3, "routerLink", 4, "ngIf"], ["class", "text-16", 3, "visibility", 4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["class", "text-16", 4, "ngIf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute", 4, "ngIf", "ngIfElse"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute"], [3, "caseId", "displayMode"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [3, "pageChange", "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], [1, "notification"]], template: function SearchResultComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultComponent, selectors: [["ccd-search-result"]], inputs: { caseLinkUrlTemplate: "caseLinkUrlTemplate", jurisdiction: "jurisdiction", caseType: "caseType", caseState: "caseState", caseFilterFG: "caseFilterFG", resultView: "resultView", page: "page", paginationMetadata: "paginationMetadata", metadataFields: "metadataFields", selectionEnabled: "selectionEnabled", showOnlySelected: "showOnlySelected", preSelectedCases: "preSelectedCases", consumerSortingEnabled: "consumerSortingEnabled" }, outputs: { selection: "selection", changePage: "changePage", clickCase: "clickCase", sortHandler: "sortHandler" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["case_reference", ""], [4, "ngIf"], [3, "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel", "pageChange", 4, "ngIf"], ["class", "notification", 4, "ngIf"], ["id", "search-result-heading__text", "tabindex", "-1", 1, "heading-h2"], ["class", "govuk-warning-text pagination-limit-warning", 4, "ngIf"], ["class", "pagination-top", 4, "ngIf"], ["class", "reset-selection", 4, "ngIf"], ["scope", "row"], ["class", "govuk-table__checkbox", 4, "ngIf"], ["class", "search-result-column-header", "scope", "col", 4, "ngFor", "ngForOf"], ["style", "width: 110px;", "scope", "col", 4, "ngIf"], [1, "govuk-warning-text", "pagination-limit-warning"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], [1, "pagination-top"], ["id", "search-result-summary__text", 1, "text-16"], [1, "govuk-!-font-weight-bold"], [1, "reset-selection"], ["href", "javascript:void(0)", 1, "search-result-reset-link", 3, "click"], [1, "govuk-table__checkbox"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], ["scope", "col", 1, "search-result-column-header"], [1, "search-result-column-label", 3, "click", "keyup"], ["class", "search-result-column-sort", 4, "ngIf"], [1, "search-result-column-sort"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "click", "keyup.enter", "innerHTML"], ["scope", "col", 2, "width", "110px"], [4, "ngFor", "ngForOf"], ["class", "govuk-table__checkbox", "scope", "col", 4, "ngIf"], ["class", "search-result-column-cell", "scope", "row", 4, "ngFor", "ngForOf"], ["scope", "col", 1, "govuk-table__checkbox"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["scope", "row", 1, "search-result-column-cell"], ["class", "govuk-link", 3, "routerLink", 4, "ngIf"], ["class", "text-16", 3, "visibility", 4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["class", "text-16", 4, "ngIf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute", 4, "ngIf", "ngIfElse"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute"], [3, "caseId", "displayMode"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [3, "pageChange", "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], [1, "notification"]], template: function SearchResultComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SearchResultComponent_table_0_Template, 16, 11, "table", 1)(1, SearchResultComponent_ccd_pagination_1_Template, 1, 6, "ccd-pagination", 2)(2, SearchResultComponent_div_2_Template, 4, 6, "div", 3);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.hasResults() || ctx.hasDrafts());
@@ -39095,7 +39241,7 @@ class SearchResultComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-search-result', template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\">\n      <output [attr.aria-label]=\"getTotalResults() + ' results have been found' | rpxTranslate\"></output>\n          <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void(0)\" (click)=\"clearSelection()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\" [attr.aria-labelledby]=\"'select-all'\">\n          </label>\n        </div>\n      </td>\n      <th *ngFor=\"let col of resultView.columns\" class=\"search-result-column-header\"\n        [attr.aria-sort]=\"isSortAscending(col) === null ? null : (isSortAscending(col) ? 'ascending' : 'descending')\" scope=\"col\">\n        <div>\n          <div class=\"search-result-column-label\" (click)=\"sort(col)\" (keyup)=\"noop()\">\n            {{col.label | rpxTranslate}}\n          </div>\n          <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n            <a (click)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" href=\"javascript:void(0)\"></a>\n          </div>\n        </div>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\" scope=\"col\">&ZeroWidthSpace;</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
+        args: [{ selector: 'ccd-search-result', template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\">\n      <output [attr.aria-label]=\"getTotalResults() + ' ' + ('results have been found' | rpxTranslate)\"></output>\n          <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void(0)\" (click)=\"clearSelection()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\" [attr.aria-labelledby]=\"'select-all'\">\n          </label>\n        </div>\n      </td>\n      <th *ngFor=\"let col of resultView.columns\" class=\"search-result-column-header\"\n        [attr.aria-sort]=\"isSortAscending(col) === null ? null : (isSortAscending(col) ? 'ascending' : 'descending')\" scope=\"col\">\n        <div>\n          <div class=\"search-result-column-label\" (click)=\"sort(col)\" (keyup)=\"noop()\">\n            {{ isTranslatable(col) ? (col.label | rpxTranslate) : col.label }}\n          </div>\n          <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n            <a (click)=\"sort(col)\" (keyup.enter)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" [attr.aria-label]=\"'Sort ' + col.label | rpxTranslate\" href=\"javascript:void(0)\"></a>\n          </div>\n        </div>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\" scope=\"col\">&ZeroWidthSpace;</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\" [attr.aria-labelledby]=\"'select-' + result.case_id\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
     }], () => [{ type: SearchResultViewItemComparatorFactory }, { type: AbstractAppConfig }, { type: ActivityService }, { type: CaseReferencePipe }, { type: PlaceholderService }, { type: BrowserService }, { type: SessionStorageService }], { caseLinkUrlTemplate: [{
             type: Input
         }], jurisdiction: [{