@hmcts/ccd-case-ui-toolkit 4.12.4-eui-2051-ui-formatting → 4.12.6-layout-usability-issues

package/RELEASE-NOTES.md

@@ -1,11 +1,20 @@
 ## RELEASE NOTES
 
+### Version 4.12.6-layout-usability-issues
+**EUI-2044** Usability improvement for search result table
+
+### Version 4.14.1-EUI-5305-change-link-accessibility-update
+**EUI-5305** Accessibility improvement for 'Change' links
+
 ### Version 4.12.0
 Add refunds functionality
 
 ### Version 4.9.15-state-machine"
 **Task event completion and state machine** Task event completion and state machine
 
+### Version 4.3.9-markdown-case-ref-EUI-3650
+**EUI-3650** Added formatting for case reference inside markdown
+
 ### Version 4.7.6-tab-not-defined-error"
 **EUI-4562** Case details Active tasks tab on success not returning to active tasks page
 
@@ -15,6 +24,9 @@ Add refunds functionality
 ### Version 4.7.6-tab-not-defined-error"
 **EUI-4562** Case details Active tasks tab on success not returning to active tasks page
 
+### Version 4.7.6-hearings-tab
+**EUI-4441** Add hearings tab in case details
+
 ### Version 4.7.6-hearings-tab
 **EUI-4441** Add hearings tab in case details
 **EUI-4627** Can't access /hearings tab from URL

package/dist/cut-styles/shared/components/search-result/search-result.component.scss

@@ -24,6 +24,10 @@ table {
   .caseid-col {
     white-space: nowrap;
   }
+
+  &.table-layout-fixed {
+    table-layout: fixed;
+  }
 }
 
 .notification {
@@ -80,5 +84,5 @@ span.heading-medium {
 }
 
 #search-result-heading__text:focus {
-  outline: none; 
-}
+  outline: none;
+}

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /**
  * @hmcts/ccd-case-ui-toolkit - Case UI Toolkit
- * @version v4.12.4-eui-2051-ui-formatting
+ * @version v4.12.6-layout-usability-issues
  * @link undefined
  * @license MIT
  */
@@ -19090,47 +19090,55 @@ var CaseEditPageComponent = /** @class */ (function () {
         CaseEditPageComponent_1.setFocusToTop();
     };
     // Adding validation message to show it as Error Summary
-    CaseEditPageComponent.prototype.generateErrorMessage = function (fields, container) {
+    CaseEditPageComponent.prototype.generateErrorMessage = function (fields, container, path) {
         var _this = this;
         var group = container || this.editForm.controls['data'];
         fields.filter(function (casefield) { return !_this.caseFieldService.isReadOnly(casefield); })
-            .filter(function (casefield) { return !_this.pageValidationService.isHidden(casefield, _this.editForm); })
+            .filter(function (casefield) { return !_this.pageValidationService.isHidden(casefield, _this.editForm, path); })
             .forEach(function (casefield) {
             var fieldElement = group.get(casefield.id);
             if (fieldElement) {
                 var label = casefield.label || 'Field';
-                var id = casefield.id;
+                var id_1 = casefield.id;
                 if (fieldElement['component'] && fieldElement['component'].parent) {
-                    id = "" + fieldElement['component'].idPrefix + id;
+                    if (fieldElement['component'].idPrefix.indexOf('_' + id_1 + '_') === -1) {
+                        id_1 = "" + fieldElement['component'].idPrefix + id_1;
+                    }
+                    else {
+                        id_1 = "" + fieldElement['component'].idPrefix;
+                    }
                 }
                 if (fieldElement.hasError('required')) {
-                    _this.validationErrors.push({ id: id, message: label + " is required" });
+                    _this.validationErrors.push({ id: id_1, message: label + " is required" });
                     fieldElement.markAsDirty();
                 }
                 else if (fieldElement.hasError('pattern')) {
-                    _this.validationErrors.push({ id: id, message: label + " is not valid" });
+                    _this.validationErrors.push({ id: id_1, message: label + " is not valid" });
                     fieldElement.markAsDirty();
                 }
                 else if (fieldElement.hasError('minlength')) {
-                    _this.validationErrors.push({ id: id, message: label + " is below the minimum length" });
+                    _this.validationErrors.push({ id: id_1, message: label + " is below the minimum length" });
                     fieldElement.markAsDirty();
                 }
                 else if (fieldElement.hasError('maxlength')) {
-                    _this.validationErrors.push({ id: id, message: label + " exceeds the maximum length" });
+                    _this.validationErrors.push({ id: id_1, message: label + " exceeds the maximum length" });
                     fieldElement.markAsDirty();
                 }
                 else if (fieldElement.invalid) {
                     if (casefield.isComplex()) {
-                        _this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement);
+                        _this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id_1);
                     }
                     else if (casefield.isCollection() && casefield.field_type.collection_field_type.type === 'Complex') {
                         var fieldArray = fieldElement;
+                        if (fieldArray['component'] && fieldArray['component']['collItems'] && fieldArray['component']['collItems'].length > 0) {
+                            id_1 = "" + fieldArray['component']['collItems'][0].prefix;
+                        }
                         fieldArray.controls.forEach(function (c) {
-                            _this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'));
+                            _this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id_1);
                         });
                     }
                     else {
-                        _this.validationErrors.push({ id: id, message: "Select or fill the required " + casefield.label + " field" });
+                        _this.validationErrors.push({ id: id_1, message: "Select or fill the required " + casefield.label + " field" });
                         fieldElement.markAsDirty();
                     }
                 }
@@ -19196,7 +19204,7 @@ var CaseEditPageComponent = /** @class */ (function () {
     };
     CaseEditPageComponent.prototype.updateFormControlsValue = function (formGroup, caseFieldId, value) {
         var theControl = formGroup.controls['data'].get(caseFieldId);
-        if (theControl) {
+        if (theControl && theControl['status'] !== 'DISABLED') {
             if (Array.isArray(theControl.value) && Array.isArray(value)
                 && theControl.value.length > value.length && theControl['caseField']
                 && theControl['caseField']['display_context'] && theControl['caseField']['display_context'] === 'OPTIONAL'
@@ -19545,6 +19553,9 @@ var CaseEditSubmitComponent = /** @class */ (function () {
         this.formValueService.removeEmptyCollectionsWithMinValidation(caseEventData.data, this.eventTrigger.case_fields);
         caseEventData.event_token = this.eventTrigger.event_token;
         caseEventData.ignore_warning = this.ignoreWarning;
+        if (this.caseEdit.confirmation) {
+            caseEventData.data = {};
+        }
         return caseEventData;
     };
     /**
@@ -21640,10 +21651,13 @@ var PageValidationService = /** @class */ (function () {
         }
         return !(this.checkMandatoryField(caseField, theControl));
     };
-    PageValidationService.prototype.isHidden = function (caseField, editForm) {
+    PageValidationService.prototype.isHidden = function (caseField, editForm, path) {
         var formFields = editForm.getRawValue();
         var condition = conditional_show_model_1.ShowCondition.getInstance(caseField.show_condition);
-        return !condition.match(formFields.data);
+        if (path && path.indexOf('_' + caseField.id + '_') === -1) {
+            path = "" + path + caseField.id;
+        }
+        return !condition.match(formFields.data, path);
     };
     PageValidationService.prototype.checkOptionalField = function (caseField, theControl) {
         if (!theControl) {
@@ -26945,6 +26959,7 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var markdown_component_1 = __webpack_require__(86843);
 var ngx_md_1 = __webpack_require__(99978);
+var pipes_1 = __webpack_require__(32741);
 exports.forRoot = ngx_md_1.NgxMdModule.forRoot();
 var MarkdownModule = /** @class */ (function () {
     function MarkdownModule() {
@@ -26952,7 +26967,8 @@ var MarkdownModule = /** @class */ (function () {
     MarkdownModule = __decorate([
         core_1.NgModule({
             imports: [
-                exports.forRoot
+                exports.forRoot,
+                pipes_1.PipesModule
             ],
             declarations: [
                 markdown_component_1.MarkdownComponent
@@ -28172,12 +28188,12 @@ var WriteCaseLinkFieldComponent = /** @class */ (function (_super) {
     WriteCaseLinkFieldComponent.prototype.ngOnInit = function () {
         if (this.caseField.value) {
             this.caseLinkGroup = this.registerControl(new forms_1.FormGroup({
-                'CaseReference': new forms_1.FormControl(this.caseField.value.CaseReference),
+                'CaseReference': new forms_1.FormControl(this.caseField.value.CaseReference, forms_1.Validators.required),
             }), true);
         }
         else {
             this.caseLinkGroup = this.registerControl(new forms_1.FormGroup({
-                'CaseReference': new forms_1.FormControl(),
+                'CaseReference': new forms_1.FormControl(null, forms_1.Validators.required),
             }), true);
         }
         this.caseReferenceControl = this.caseLinkGroup.controls['CaseReference'];
@@ -28200,6 +28216,11 @@ var WriteCaseLinkFieldComponent = /** @class */ (function (_super) {
                 }
                 return { 'error': 'Please use a valid 16 Digit Case Reference' };
             }
+            else {
+                if (control.touched) {
+                    return { 'error': 'Please use a valid 16 Digit Case Reference' };
+                }
+            }
             return null;
         };
     };
@@ -35874,6 +35895,7 @@ var SearchResultComponent = /** @class */ (function () {
         this.showOnlySelected = false;
         this.preSelectedCases = [];
         this.consumerSortingEnabled = false;
+        this.tableLayoutFixed = false;
         this.selection = new core_1.EventEmitter();
         this.changePage = new core_1.EventEmitter();
         this.clickCase = new core_1.EventEmitter();
@@ -36246,6 +36268,10 @@ var SearchResultComponent = /** @class */ (function () {
         core_1.Input(),
         __metadata("design:type", Object)
     ], SearchResultComponent.prototype, "consumerSortingEnabled", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], SearchResultComponent.prototype, "tableLayoutFixed", void 0);
     __decorate([
         core_1.Output(),
         __metadata("design:type", Object)
@@ -39970,7 +39996,7 @@ var CaseReferencePipe = /** @class */ (function () {
             return draft_model_1.DRAFT_PREFIX;
         }
         else {
-            return String(caseReference).replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, '$1-$2-$3-$4');
+            return String(caseReference).replace(/(?<!\/)(\d{4})(\d{4})(\d{4})(\d{4})/g, '$1-$2-$3-$4');
         }
     };
     CaseReferencePipe = __decorate([
@@ -42247,11 +42273,11 @@ var FieldsUtils = /** @class */ (function () {
                     if (isDynamicField) {
                         var dynamicListValue = _this.getDynamicListValue(rootCaseField.value, field.id);
                         if (dynamicListValue) {
-                            var list_items = dynamicListValue.list_items;
-                            var complexValue = dynamicListValue.value;
+                            var list_items = dynamicListValue[0].list_items;
+                            var complexValue = dynamicListValue.map(function (data) { return data.value; });
                             var value = {
                                 list_items: list_items,
-                                value: complexValue ? complexValue : undefined
+                                value: complexValue.length > 0 ? complexValue : undefined
                             };
                             field.value = __assign({}, value);
                             field.formatted_value = __assign({}, field.formatted_value, value);
@@ -42273,17 +42299,22 @@ var FieldsUtils = /** @class */ (function () {
         }
     };
     FieldsUtils.getDynamicListValue = function (jsonBlock, key) {
-        if (jsonBlock[key]) {
-            return jsonBlock[key];
+        var data = jsonBlock ? this.getNestedFieldValues(jsonBlock, key, []) : [];
+        return data.length > 0 ? data : null;
+    };
+    FieldsUtils.getNestedFieldValues = function (jsonData, key, output) {
+        if (output === void 0) { output = []; }
+        if (jsonData && jsonData[key]) {
+            output.push(jsonData[key]);
         }
         else {
-            for (var elementKey in jsonBlock) {
-                if (typeof jsonBlock === 'object' && jsonBlock.hasOwnProperty(elementKey)) {
-                    return this.getDynamicListValue(jsonBlock[elementKey], key);
+            for (var elementKey in jsonData) {
+                if (typeof jsonData === 'object' && jsonData.hasOwnProperty(elementKey)) {
+                    this.getNestedFieldValues(jsonData[elementKey], key, output);
                 }
             }
         }
-        return null;
+        return output;
     };
     FieldsUtils.prototype.buildCanShowPredicate = function (eventTrigger, form) {
         var currentState = this.getCurrentEventState(eventTrigger, form);
@@ -46080,7 +46111,7 @@ exports = module.exports = __webpack_require__(9252)(false);
 
 
 // module
-exports.push([module.id, "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 0px 30px 0px;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:bold;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", ""]);
+exports.push([module.id, "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}table.table-layout-fixed{table-layout:fixed}.notification{text-align:center;padding:30px 0px 30px 0px;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:bold;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", ""]);
 
 // exports
 
@@ -89133,7 +89164,7 @@ module.exports = "<ccd-loading-spinner  *ngIf=\"showSpinner\"></ccd-loading-spin
 /***/ 81278:
 /***/ ((module) => {
 
-module.exports = "<div *ngIf=\"!eventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{ eventTrigger.name}}</h1>\n\n  <!--Case ID or Title -->\n  <div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n  <ng-template #titleBlock>\n    <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n  </ng-template>\n  <ng-template #idBlock>\n    <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n  </ng-template>\n\n  <!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n  <div *ngIf=\"error && (!(error.callbackErrors || error.callbackWarnings || error.details) && !error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      Something went wrong\n    </h1>\n    <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n      <p>We're working to fix the problem. Try again shortly.</p>\n      <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n    </div>\n  </div>\n  <!-- Event error heading and error message to be displayed if there are specific error details -->\n  <div *ngIf=\"error && (error.details || error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      The event could not be created\n    </h3>\n    <p>{{error.message}}</p>\n    <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let fieldError of error.details.field_errors\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n    </ul>\n  </div>\n  <ccd-callback-errors [callbackErrorsSubject]=\"callbackErrorsSubject\"\n                      (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n  <form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n      <h2 class=\"heading-h2\">Check your answers</h2>\n      <span class=\"text-16\">Check the information below carefully.</span>\n\n      <table class=\"form-table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of this.wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm.controls['data']\n            | ccdReadFieldsFilter: false :undefined :true : editForm.controls['data']\n            | ccdCYAPageLabelFilter\">\n              <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n                <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                    [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th *ngIf=\"!isLabel(field)\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                  <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                    <ccd-field-read\n                      [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                      [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                  <td class=\"valign-top check-your-answers__change case-field-change\">\n                    <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                      href=\"javascript:void(0)\"><span class=\"text-16\">Change</span></a>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n      <table class=\"summary-fields\">\n        <tbody>\n          <ng-container *ngFor=\"let field of this.showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th>{{field.label}}</th>\n                  <td class=\"form-cell\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                  </td>\n                </tr>\n                <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <td colspan=\"2\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"showEventNotes()\">\n      <fieldset id=\"fieldset-event\" formGroupName=\"event\" *ngIf=\"profile && !isSolicitor()\">\n        <div class=\"form-group\">\n          <label for=\"field-trigger-summary\" class=\"form-label\">\n            Event summary (optional)\n            <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n          </label>\n          <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n          <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                    maxlength=\"65536\"></textarea>\n        </div>\n      </fieldset>\n    </ng-container>\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || isSubmitting\" (click)=\"previous()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">{{triggerText}}</button>\n    </div>\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"isSubmitting\">{{getCancelText()}}</a></p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"eventCompletionChecksRequired\"\n  [eventCompletionParams]=\"eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>"
+module.exports = "<div *ngIf=\"!eventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{ eventTrigger.name}}</h1>\n\n  <!--Case ID or Title -->\n  <div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n  <ng-template #titleBlock>\n    <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n  </ng-template>\n  <ng-template #idBlock>\n    <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n  </ng-template>\n\n  <!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n  <div *ngIf=\"error && (!(error.callbackErrors || error.callbackWarnings || error.details) && !error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      Something went wrong\n    </h1>\n    <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n      <p>We're working to fix the problem. Try again shortly.</p>\n      <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n    </div>\n  </div>\n  <!-- Event error heading and error message to be displayed if there are specific error details -->\n  <div *ngIf=\"error && (error.details || error.message)\" class=\"error-summary\" role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n    <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n      The event could not be created\n    </h3>\n    <p>{{error.message}}</p>\n    <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n      <li *ngFor=\"let fieldError of error.details.field_errors\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n    </ul>\n  </div>\n  <ccd-callback-errors [callbackErrorsSubject]=\"callbackErrorsSubject\"\n                      (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n  <form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n      <h2 class=\"heading-h2\">Check your answers</h2>\n      <span class=\"text-16\">Check the information below carefully.</span>\n\n      <table class=\"form-table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of this.wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm.controls['data']\n            | ccdReadFieldsFilter: false :undefined :true : editForm.controls['data']\n            | ccdCYAPageLabelFilter\">\n              <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n                <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                    [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th *ngIf=\"!isLabel(field)\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                  <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                    <ccd-field-read\n                      [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                      [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                  <td class=\"valign-top check-your-answers__change case-field-change\">\n                    <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                      href=\"javascript:void(0)\"><span class=\"text-16\" attr.aria-label=\"Change {{ field.label }}\">Change</span></a>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n      <table class=\"summary-fields\">\n        <tbody>\n          <ng-container *ngFor=\"let field of this.showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th>{{field.label}}</th>\n                  <td class=\"form-cell\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                  </td>\n                </tr>\n                <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <td colspan=\"2\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"showEventNotes()\">\n      <fieldset id=\"fieldset-event\" formGroupName=\"event\" *ngIf=\"profile && !isSolicitor()\">\n        <div class=\"form-group\">\n          <label for=\"field-trigger-summary\" class=\"form-label\">\n            Event summary (optional)\n            <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n          </label>\n          <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n          <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                    maxlength=\"65536\"></textarea>\n        </div>\n      </fieldset>\n    </ng-container>\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || isSubmitting\" (click)=\"previous()\">Previous</button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">{{triggerText}}</button>\n    </div>\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"isSubmitting\">{{getCancelText()}}</a></p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"eventCompletionChecksRequired\"\n  [eventCompletionParams]=\"eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n"
 
 /***/ }),
 
@@ -89399,7 +89430,7 @@ module.exports = "<div class=\"spinner-container\">\n    <div class=\"spinner-in
 /***/ 6961:
 /***/ ((module) => {
 
-module.exports = "<div><markdown class=\"markdown\" [innerHTML]=\"content\"></markdown></div>"
+module.exports = "<div><markdown class=\"markdown\" [innerHTML]=\"content | ccdCaseReference\"></markdown></div>"
 
 /***/ }),
 
@@ -89581,14 +89612,14 @@ module.exports = "<ccd-event-log [events]=\"caseField.value\"></ccd-event-log>"
 /***/ 56806:
 /***/ ((module) => {
 
-module.exports = "<table tabindex=\"0\" class=\"EventLogDetails\">\n  <caption><h2 class=\"heading-h2\">Details</h2></caption>\n  <tbody tabindex=\"0\" aria-live=\"polite\">\n    <tr>\n      <th><span class=\"text-16\">Date</span></th>\n      <td>\n        <div class=\"tooltip text-16\">{{event.timestamp | ccdDate : 'local'}}\n          <td><span class=\"text-16\">{{event.user_first_name | titlecase}} {{event.user_last_name | uppercase}}</span></td>\n        </div>\n      </td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Author</span></th>\n      <td><span class=\"text-16\">{{event.user_first_name | titlecase}} {{event.user_last_name | uppercase}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">End state</span></th>\n      <td><span class=\"text-16\">{{event.state_name}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Event</span></th>\n      <td><span class=\"text-16\">{{event.event_name}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Summary</span></th>\n      <td><span class=\"text-16\">{{event.summary | ccdDash}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Comment</span></th>\n      <td><span class=\"text-16\">{{event.comment | ccdDash}}</span></td>\n    </tr>\n  </tbody>\n</table>\n"
+module.exports = "<table tabindex=\"0\" class=\"EventLogDetails\">\n  <caption><h2 class=\"heading-h2\">Details</h2></caption>\n  <tbody tabindex=\"0\" aria-live=\"polite\">\n    <tr>\n      <th><span class=\"text-16\">Date</span></th>\n      <td>\n        <div class=\"tooltip text-16\">{{event.timestamp | ccdDate : 'local'}}\n          <span class=\"tooltiptext text-16\">Local: {{event.timestamp | ccdDate : 'local'}}</span>\n        </div>\n      </td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Author</span></th>\n      <td><span class=\"text-16\">{{event.user_first_name | titlecase}} {{event.user_last_name | uppercase}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">End state</span></th>\n      <td><span class=\"text-16\">{{event.state_name}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Event</span></th>\n      <td><span class=\"text-16\">{{event.event_name}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Summary</span></th>\n      <td><span class=\"text-16\">{{event.summary | ccdDash}}</span></td>\n    </tr>\n    <tr>\n      <th><span class=\"text-16\">Comment</span></th>\n      <td><span class=\"text-16\">{{event.comment | ccdDash}}</span></td>\n    </tr>\n  </tbody>\n</table>\n"
 
 /***/ }),
 
 /***/ 51178:
 /***/ ((module) => {
 
-module.exports = "<table class=\"EventLogTable\">\n  <caption><h2 class=\"heading-h2\">History</h2></caption>\n  <thead>\n  <tr>\n    <th><span class=\"text-16\">Event</span></th>\n    <th><span class=\"text-16\">Date</span></th>\n    <th><span class=\"text-16\">Author</span></th>\n  </tr>\n  </thead>\n  <tbody>\n  <tr *ngFor=\"let event of events\" (click)=\"select(event)\" [ngClass]=\"{'EventLogTable-Selected': selected === event}\" tabindex=\"0\" attr.aria-label=\"{{getAriaLabelforRow(event)}}\">\n    <td>\n      <ng-container [ngSwitch]=\"isPartOfCaseTimeline\">\n        <div id=\"case-timeline\" *ngSwitchCase=\"true\">\n          <a (click)=\"caseHistoryClicked(event.id)\"\n            *ngIf=\"event.state_id !== 'Draft'\" class=\"text-16 event-link\" attr.aria-label=\"{{getAriaLabelforLink(event)}}\">{{event.event_name}}</a>\n        </div>\n        <div *ngSwitchCase=\"false\">\n          <a [routerLink]=\"['./', 'event', event.id, 'history']\"\n              [target]=\"'_blank'\"\n              *ngIf=\"event.state_id !== 'Draft'\" class=\"text-16 event-link\" attr.aria-label=\"{{getAriaLabelforLink(event)}}\">{{event.event_name}}</a>\n        </div>\n      </ng-container>\n      <span *ngIf=\"event.state_id === 'Draft'\">{{event.event_name}}</span>\n      <div class=\"tooltip\" *ngIf=\"significantItemExist(event)\">\n        <a href=\"{{getSignificantItemUrl(event)}}\" target=\"_blank\" attr.aria-label=\"{{getAriaLabelforLink(event)}}\">\n          <img class=\"doc-img\" src=\"data:image/png;base64,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\"/>\n        </a>\n        <span class=\"tooltiptext doc-tooltip\">{{getSignificantItemDesc(event)}}</span>\n      </div>\n    </td>\n    <td tabindex=\"0\" attr.aria-label=\"{{getAriaLabelforColumn(event)}}\" (keydown.enter)=\"select(event)\"><div class=\"tooltip text-16\">{{event.timestamp | ccdDate : 'local'}}\n    </div></td>\n    <td tabindex=\"0\"><span class=\"text-16\">{{event.user_first_name | titlecase}} {{event.user_last_name | uppercase}}</span></td>\n  </tr>\n  </tbody>\n</table>\n"
+module.exports = "<table class=\"EventLogTable\">\n  <caption><h2 class=\"heading-h2\">History</h2></caption>\n  <thead>\n  <tr>\n    <th><span class=\"text-16\">Event</span></th>\n    <th><span class=\"text-16\">Date</span></th>\n    <th><span class=\"text-16\">Author</span></th>\n  </tr>\n  </thead>\n  <tbody>\n  <tr *ngFor=\"let event of events\" (click)=\"select(event)\" [ngClass]=\"{'EventLogTable-Selected': selected === event}\" tabindex=\"0\" attr.aria-label=\"{{getAriaLabelforRow(event)}}\">\n    <td>\n      <ng-container [ngSwitch]=\"isPartOfCaseTimeline\">\n        <div id=\"case-timeline\" *ngSwitchCase=\"true\">\n          <a (click)=\"caseHistoryClicked(event.id)\"\n            *ngIf=\"event.state_id !== 'Draft'\" class=\"text-16 event-link\" attr.aria-label=\"{{getAriaLabelforLink(event)}}\">{{event.event_name}}</a>\n        </div>\n        <div *ngSwitchCase=\"false\">\n          <a [routerLink]=\"['./', 'event', event.id, 'history']\"\n              [target]=\"'_blank'\"\n              *ngIf=\"event.state_id !== 'Draft'\" class=\"text-16 event-link\" attr.aria-label=\"{{getAriaLabelforLink(event)}}\">{{event.event_name}}</a>\n        </div>\n      </ng-container>\n      <span *ngIf=\"event.state_id === 'Draft'\">{{event.event_name}}</span>\n      <div class=\"tooltip\" *ngIf=\"significantItemExist(event)\">\n        <a href=\"{{getSignificantItemUrl(event)}}\" target=\"_blank\" attr.aria-label=\"{{getAriaLabelforLink(event)}}\">\n          <img class=\"doc-img\" src=\"data:image/png;base64,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\"/>\n        </a>\n        <span class=\"tooltiptext doc-tooltip\">{{getSignificantItemDesc(event)}}</span>\n      </div>\n    </td>\n    <td tabindex=\"0\" attr.aria-label=\"{{getAriaLabelforColumn(event)}}\" (keydown.enter)=\"select(event)\"><div class=\"tooltip text-16\">{{event.timestamp | ccdDate : 'local'}}\n      <span class=\"tooltiptext\">Local: {{event.timestamp | ccdDate : 'local'}}</span>\n    </div></td>\n    <td tabindex=\"0\"><span class=\"text-16\">{{event.user_first_name | titlecase}} {{event.user_last_name | uppercase}}</span></td>\n  </tr>\n  </tbody>\n</table>\n"
 
 /***/ }),
 
@@ -89742,7 +89773,7 @@ module.exports = "<h2 class=\"heading-h2\" aria-label=\"Filters\">Filters</h2>\n
 /***/ 45573:
 /***/ ((module) => {
 
-module.exports = "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ caseState ? 'Your cases' : 'Search result' }}</h2>\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\"\n      attr.aria-label=\"{{ getTotalResults() }} results have been found\" role=\"status\">\n      <span class=\"text-16\" id=\"search-result-summary__text\">Showing \n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        to\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        of\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> results</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n      attr.aria-label=\"Reset selection\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void()\" (click)=\"clearSelection()\">Reset case selection</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <th *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th *ngFor=\"let col of resultView.columns\">\n        <table class=\"search-result-column-header\"\n          attr.aria-label=\"Sort by {{col.label}} {{ isSortAscending(col)? 'ascending' : 'descending' }}\">\n          <tr>\n            <div class=\"search-result-column-label\" (click)=\"sort(col)\">{{col.label}}</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          </tr>\n        </table>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\"></th>\n    </tr>\n  </thead>\n  <tbody>\n\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: paginationMetadata.total_results_count }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: paginationMetadata.total_results_count }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination \n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\" \n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"Pagination\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n  aria-label=\"No cases found. Try using different filters.\">\n  No cases found. Try using different filters.\n</div>\n"
+module.exports = "<table *ngIf=\"hasResults() || hasDrafts()\" [ngClass]=\"{ 'table-layout-fixed' : tableLayoutFixed }\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ caseState ? 'Your cases' : 'Search result' }}</h2>\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\"\n      attr.aria-label=\"{{ getTotalResults() }} results have been found\" role=\"status\">\n      <span class=\"text-16\" id=\"search-result-summary__text\">Showing\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        to\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        of\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> results</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n      attr.aria-label=\"Reset selection\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void()\" (click)=\"clearSelection()\">Reset case selection</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <th *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th *ngFor=\"let col of resultView.columns\">\n        <table class=\"search-result-column-header\"\n          attr.aria-label=\"Sort by {{col.label}} {{ isSortAscending(col)? 'ascending' : 'descending' }}\">\n          <tr>\n            <div class=\"search-result-column-label\" (click)=\"sort(col)\">{{col.label}}</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          </tr>\n        </table>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\"></th>\n    </tr>\n  </thead>\n  <tbody>\n\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: paginationMetadata.total_results_count }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: paginationMetadata.total_results_count }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination \n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\" \n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"Pagination\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n  aria-label=\"No cases found. Try using different filters.\">\n  No cases found. Try using different filters.\n</div>\n"
 
 /***/ }),