@hmcts/ccd-case-ui-toolkit 7.1.59 → 7.1.60-ongoing-accessibility-v1

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

@@ -12115,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;
@@ -12249,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);
@@ -12265,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: [{
@@ -15520,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();
@@ -15555,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();
@@ -15590,7 +15600,7 @@ 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 }); })();
 
@@ -17072,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);
@@ -17093,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
         }] }); })();
@@ -23694,7 +23704,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);
@@ -23774,10 +23784,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");
@@ -23806,7 +23816,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]
@@ -23826,7 +23836,7 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template(
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.title);
 } }
-function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template(rf, ctx) { if (rf & 1) {
+function CaseFileViewOverlayMenuComponent_ng_template_4_ul_2_img_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 10);
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext().$implicit;
@@ -23834,26 +23844,27 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Tem
     i0.ɵɵpropertyInterpolate1("alt", "", ctx_r1.title, " icon'");
     i0.ɵɵproperty("src", item_r4.iconSrc, i0.ɵɵsanitizeUrl);
 } }
-function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function CaseFileViewOverlayMenuComponent_ng_template_4_ul_2_Template(rf, ctx) { if (rf & 1) {
     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.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template, 1, 3, "img", 8);
-    i0.ɵɵelementStart(3, "div", 9);
+    i0.ɵɵelementStart(0, "ul")(1, "li", 7);
+    i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_4_ul_2_Template_li_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_ul_2_Template_li_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_ul_2_img_2_Template, 1, 3, "img", 8);
+    i0.ɵɵelementStart(3, "span", 9);
     i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementContainerEnd();
+    i0.ɵɵelementEnd()()();
 } 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_ul_2_Template, 5, 3, "ul", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -23867,13 +23878,31 @@ class CaseFileViewOverlayMenuComponent {
     menuItems;
     isOpen = false;
     isOpenChange = new EventEmitter();
+    setOpen() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            console.log('open');
+            const el = document.querySelector('.overlay-menu__item:first-of-type');
+            console.log("element =", el);
+            if (el) {
+                setTimeout(() => {
+                    el.focus();
+                    console.log("element to focus=", el);
+                }, 0);
+            }
+        }
+    }
     closeOverlay() {
         const isOpen = false;
         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);
@@ -23884,14 +23913,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      <ul *ngFor=\"let item of menuItems; index as i\">\n        <li 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        </li>\n      </ul>\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: [{
@@ -27868,15 +27897,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");
@@ -28025,7 +28056,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);
@@ -28204,7 +28235,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", "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) {
+    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");
@@ -28212,7 +28243,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);
@@ -28229,7 +28260,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=\"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"] }]
+        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 }); })();
 
@@ -31806,28 +31837,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;
@@ -31874,7 +31905,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) {
@@ -31945,7 +31976,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)); });
@@ -31960,11 +31991,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: [{
@@ -31995,10 +32026,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()();
@@ -32006,9 +32037,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();
@@ -32017,22 +32050,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);
@@ -32040,52 +32076,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);
@@ -32093,32 +32129,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);
@@ -32126,21 +32162,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();
@@ -32150,20 +32186,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) {
@@ -32174,9 +32210,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 {
@@ -32276,13 +32312,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);
@@ -32305,7 +32341,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: [{
@@ -38525,13 +38561,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();
@@ -38540,7 +38578,7 @@ 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;
@@ -39187,7 +39225,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());
@@ -39199,7 +39237,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            {{ isTranslatable(col) ? (col.label | rpxTranslate) : col.label }}\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: [{