@hmcts/ccd-case-ui-toolkit 7.0.24-upload-timestamp → 7.0.25-disable-buttons-readonly

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

@@ -1241,6 +1241,11 @@ class HttpError {
     }
     static from(response) {
         const error = new HttpError();
+        if (response?.status === 429) {
+            error.error = HttpError.MESSAGE_ERROR_429;
+            error.status = response.status;
+            error.message = response.message;
+        }
         // Check that the HttpErrorResponse contains an "error" object before mapping the error properties
         if (!!(response && response.error)) {
             Object.keys(error).forEach((key) => {
@@ -1260,6 +1265,7 @@ class HttpError {
 HttpError.DEFAULT_ERROR = 'Unknown error';
 HttpError.DEFAULT_MESSAGE = 'Something unexpected happened, our technical staff have been automatically notified';
 HttpError.DEFAULT_STATUS = 500;
+HttpError.MESSAGE_ERROR_429 = 'Your request was rate limited. Please wait a few seconds before retrying your document upload';
 
 /**
  * `Oauth2Service` and `AuthService` cannot be merged as it creates a cyclic dependency on `AuthService` through `HttpErrorService`.
@@ -5026,8 +5032,9 @@ class FieldsPurger {
             }
         }
         else {
-            // Delete the field value
-            this.deleteFieldValue(form.get('data'), field);
+            // Delete the field from formGroup
+            const dataGroup = form.get('data');
+            dataGroup.removeControl(field.id);
         }
     }
     resetPage(form, wizardPage) {
@@ -8385,16 +8392,21 @@ class PageValidationService {
     constructor(caseFieldService) {
         this.caseFieldService = caseFieldService;
     }
-    isPageValid(page, editForm) {
-        return page.case_fields
+    getInvalidFields(page, editForm) {
+        const failingCaseFields = [];
+        page.case_fields
             .filter(caseField => !this.caseFieldService.isReadOnly(caseField))
             .filter(caseField => !this.isHidden(caseField, editForm))
-            .every(caseField => {
+            .map(caseField => {
             const theControl = FieldsUtils.isCaseFieldOfType(caseField, ['JudicialUser'])
                 ? editForm.controls['data'].get(`${caseField.id}_judicialUserControl`)
                 : editForm.controls['data'].get(caseField.id);
-            return this.checkDocumentField(caseField, theControl) && this.checkOptionalField(caseField, theControl);
+            if (!(this.checkDocumentField(caseField, theControl) && this.checkOptionalField(caseField, theControl))) {
+                failingCaseFields.push(caseField);
+            }
+            ;
         });
+        return failingCaseFields;
     }
     isHidden(caseField, editForm, path) {
         const formFields = editForm.getRawValue();
@@ -9719,7 +9731,8 @@ class CaseEditPageComponent {
         return this.caseEdit.first();
     }
     currentPageIsNotValid() {
-        return !this.pageValidationService.isPageValid(this.currentPage, this.editForm) ||
+        this.failingCaseFields = this.pageValidationService.getInvalidFields(this.currentPage, this.editForm);
+        return this.failingCaseFields.length > 0 ||
             (this.isLinkedCasesJourney() && !this.isLinkedCasesJourneyAtFinalStep);
     }
     isLinkedCasesJourney() {
@@ -9741,9 +9754,15 @@ class CaseEditPageComponent {
     // Adding validation message to show it as Error Summary
     generateErrorMessage(fields, container, path) {
         const group = container || this.editForm.controls['data'];
-        fields.filter(casefield => !this.caseFieldService.isReadOnly(casefield))
-            .filter(casefield => !this.pageValidationService.isHidden(casefield, this.editForm, path))
+        let validErrorFieldFound = false;
+        let validationErrorAmount = this.validationErrors.length;
+        const failingFields = fields.filter(casefield => !this.caseFieldService.isReadOnly(casefield))
+            .filter(casefield => !this.pageValidationService.isHidden(casefield, this.editForm, path));
+        // note that thougn these checks are on getinvalidfields they are needed for sub field checks
+        failingFields
             .forEach(casefield => {
+            let errorPresent = true;
+            validErrorFieldFound = true;
             const fieldElement = FieldsUtils.isCaseFieldOfType(casefield, ['JudicialUser'])
                 ? group.get(`${casefield.id}_judicialUserControl`)
                 : group.get(casefield.id);
@@ -9788,7 +9807,7 @@ class CaseEditPageComponent {
                 }
                 else if (fieldElement.invalid) {
                     if (casefield.isComplex()) {
-                        this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id);
+                        errorPresent = this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id);
                     }
                     else if (casefield.isCollection() && casefield.field_type.collection_field_type.type === 'Complex') {
                         const fieldArray = fieldElement;
@@ -9796,7 +9815,7 @@ class CaseEditPageComponent {
                             id = `${fieldArray['component']['collItems'][0].prefix}`;
                         }
                         fieldArray.controls.forEach((c) => {
-                            this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
+                            errorPresent = this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
                         });
                     }
                     else if (FieldsUtils.isCaseFieldOfType(casefield, ['FlagLauncher'])) {
@@ -9811,8 +9830,29 @@ class CaseEditPageComponent {
                     }
                 }
             }
+            else {
+                validErrorFieldFound = false;
+            }
+            if (!errorPresent && this.validationErrors.length === validationErrorAmount) {
+                // if no error messages have been added in internal field despite parent field failing
+                this.validationErrors.push({ id: casefield.id, message: `A field that is causing an error is ${casefield.id} but it is not producing a valid error message. Please ensure all details are correct` });
+            }
         });
+        if (!validErrorFieldFound) {
+            path ? this.validationErrors.push({ id: path, message: `There is an internal issue with ${path} fields. The field that is causing the error cannot be determined but there is an error present` })
+                : this.validationErrors.push({ id: null, message: `The field that is causing the error cannot be determined but there is an error present` });
+        }
+        else if (this.validationErrors.length === validationErrorAmount) {
+            // if no error messages have been generated
+            if (path) {
+                return false;
+            }
+            else {
+                this.validationErrors.push({ id: null, message: `The field that is causing the error cannot be determined but there is an error present. Please fill in more of the form` });
+            }
+        }
         CaseEditPageComponent.scrollToTop();
+        return true;
     }
     navigateToErrorElement(elementId) {
         /* istanbul ignore else */
@@ -9837,7 +9877,7 @@ class CaseEditPageComponent {
                 CaseEditPageComponent.scrollToTop();
             }
             else {
-                this.generateErrorMessage(this.currentPage.case_fields);
+                this.generateErrorMessage(this.failingCaseFields);
             }
         }
         if (!this.caseEdit.isSubmitting && !this.currentPageIsNotValid()) {
@@ -12652,7 +12692,7 @@ function WriteCollectionFieldComponent_div_9_div_1_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 14, ctx_r5.itemLabel(i_r7)));
     i0.ɵɵadvance(3);
     i0.ɵɵattributeInterpolate1("aria-label", "Remove ", ctx_r5.itemLabel(i_r7), "");
-    i0.ɵɵproperty("disabled", ctx_r5.isNotAuthorisedToDelete(i_r7));
+    i0.ɵɵproperty("disabled", ctx_r5.isNotAuthorisedToDelete(i_r7) || ctx_r5.allFieldsReadOnly);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 16, "Remove"));
     i0.ɵɵadvance(2);
@@ -12677,7 +12717,7 @@ function WriteCollectionFieldComponent_button_10_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", ctx_r2.isNotAuthorisedToCreate() || ctx_r2.isSearchFilter());
+    i0.ɵɵproperty("disabled", ctx_r2.isNotAuthorisedToCreate() || ctx_r2.isSearchFilter() || ctx_r2.allFieldsReadOnly);
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 2, "Add new"));
 } }
@@ -12690,6 +12730,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
         this.cdRef = cdRef;
         this.caseFields = [];
         this.collItems = [];
+        this.allFieldsReadOnly = false;
     }
     ngOnInit() {
         if (!this.isExpanded) { // meaning I am not rendered on the search/workbasket input filter
@@ -12707,6 +12748,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
             }
             this.collItems[index] = { caseField, item, prefix, index, container };
         });
+        this.allFieldsReadOnly = this.checkComplexFieldReadOnly();
     }
     ngOnDestroy() {
         if (this.profileSubscription) {
@@ -12940,6 +12982,26 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
         const id = this.getControlIdAt(index);
         return !!id && !this.getCollectionPermission(this.caseField, 'allowDelete');
     }
+    checkComplexFieldReadOnly() {
+        return this.checkComplexFieldsReadOnly(this.caseField);
+    }
+    checkFieldType(caseField) {
+        return caseField?.field_type?.type === 'Collection'
+            ? caseField.field_type.collection_field_type?.complex_fields || []
+            : caseField?.field_type?.complex_fields || [];
+    }
+    checkComplexFieldsReadOnly(caseField) {
+        const children = this.checkFieldType(caseField);
+        if (children.length === 0) {
+            return caseField.display_context === 'READONLY';
+        }
+        return children.every((child) => {
+            if (!['Collection', 'Complex'].includes(child.field_type.type)) {
+                return child.display_context === 'READONLY';
+            }
+            return this.checkComplexFieldsReadOnly(child);
+        });
+    }
     openModal(i) {
         const dialogConfig = new MatDialogConfig();
         dialogConfig.disableClose = true;
@@ -12999,7 +13061,7 @@ WriteCollectionFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
         i0.ɵɵadvance(3);
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 7, ctx.caseField), " ");
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("disabled", ctx.isNotAuthorisedToCreate() || ctx.isSearchFilter());
+        i0.ɵɵproperty("disabled", ctx.isNotAuthorisedToCreate() || ctx.isSearchFilter() || ctx.allFieldsReadOnly);
         i0.ɵɵadvance(1);
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 9, "Add new"));
         i0.ɵɵadvance(2);
@@ -13011,7 +13073,7 @@ WriteCollectionFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
     } }, styles: [".collection-field-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:first-child > td[_ngcontent-%COMP%]{padding-top:0}.collection-field-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child > td[_ngcontent-%COMP%]{border-bottom:none}.collection-field-table[_ngcontent-%COMP%]   td.collection-actions[_ngcontent-%COMP%]{width:1px;white-space:nowrap}.error-spacing[_ngcontent-%COMP%]{margin-top:10px}.collection-title[_ngcontent-%COMP%]{height:51px}.float-left[_ngcontent-%COMP%]{float:left;padding-top:8px}.float-right[_ngcontent-%COMP%]{float:right}.complex-panel[_ngcontent-%COMP%]{margin:13px 0;border:1px solid #bfc1c3}.complex-panel[_ngcontent-%COMP%]   .complex-panel-title[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .complex-panel-title[_ngcontent-%COMP%]{font-size:19px;line-height:1.3157894737}}.complex-panel[_ngcontent-%COMP%]   .complex-panel-table[_ngcontent-%COMP%] > tbody[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%] > th[_ngcontent-%COMP%]{vertical-align:top}.complex-panel[_ngcontent-%COMP%]   .complex-panel-table[_ngcontent-%COMP%] > tbody[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%]:last-child > th[_ngcontent-%COMP%], .complex-panel[_ngcontent-%COMP%]   .complex-panel-table[_ngcontent-%COMP%] > tbody[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%]:last-child > td[_ngcontent-%COMP%]{border-bottom:none}.complex-panel[_ngcontent-%COMP%]   .complex-panel-simple-field[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{padding-left:5px;width:295px}.complex-panel[_ngcontent-%COMP%]   .complex-panel-compound-field[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{padding:5px}.collection-indicator[_ngcontent-%COMP%]{border-left:solid 5px #b1b4b6}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCollectionFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
+        args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter() || allFieldsReadOnly\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i) || allFieldsReadOnly\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter() || allFieldsReadOnly\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
     }], function () { return [{ type: i1$3.MatLegacyDialog }, { type: i2.ScrollToService }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }]; }, { caseFields: [{
             type: Input
         }], formGroup: [{
@@ -13056,17 +13118,19 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
                 this.context = PaletteContext.DEFAULT;
             }
         }
-        this.caseField?.field_type?.complex_fields?.forEach((field) => {
-            if (field?.isDynamic()) {
-                field.list_items = this.caseField.value[field.id]?.list_items;
-                field.value = {
-                    list_items: field.list_items,
-                    value: this.caseField.value[field.id]?.value && this.caseField.value[field.id].value.code ?
-                        this.caseField.value[field.id].value.code :
-                        this.caseField.value[field.id]?.value
-                };
-            }
-        });
+        if (this.caseField?.field_type && this.caseField.field_type.complex_fields) {
+            this.caseField?.field_type?.complex_fields?.forEach((field) => {
+                if (field?.isDynamic()) {
+                    field.list_items = this.caseField.value[field.id]?.list_items;
+                    field.value = {
+                        list_items: field.list_items,
+                        value: this.caseField.value[field.id]?.value && this.caseField.value[field.id].value.code ?
+                            this.caseField.value[field.id].value.code :
+                            this.caseField.value[field.id]?.value
+                    };
+                }
+            });
+        }
     }
 }
 ReadComplexFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵReadComplexFieldComponent_BaseFactory; return function ReadComplexFieldComponent_Factory(t) { return (ɵReadComplexFieldComponent_BaseFactory || (ɵReadComplexFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldComponent)))(t || ReadComplexFieldComponent); }; }();
@@ -13529,23 +13593,31 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         this.uploadedDocument = this.registerControl(new FormGroup(documentFormGroup), true);
     }
     getErrorMessage(error) {
-        // Document Management unavailable
-        if (0 === error.status || 502 === error.status) {
-            return WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE;
-        }
-        let errorMsg = 'Error uploading file';
-        if (error?.error) {
-            const fullError = error.error;
-            const start = fullError.indexOf('{');
-            if (start >= 0) {
-                const json = fullError.substring(start, fullError.length - 1).split('<EOL>').join('');
-                const obj = JSON.parse(json);
-                if (obj?.error) {
-                    errorMsg = obj.error;
+        switch (error.status) {
+            case 0:
+            case 502:
+                return WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE;
+            case 422:
+                {
+                    let errorMsg = WriteDocumentFieldComponent.ERROR_UPLOADING_FILE;
+                    if (error?.error) {
+                        const fullError = error.error;
+                        const start = fullError.indexOf('{');
+                        if (start >= 0) {
+                            const json = fullError.substring(start, fullError.length - 1).split('<EOL>').join('');
+                            const obj = JSON.parse(json);
+                            if (obj?.error) {
+                                errorMsg = obj.error;
+                            }
+                        }
+                    }
+                    return errorMsg;
                 }
-            }
+            case 429:
+                return error?.error;
+            default:
+                return WriteDocumentFieldComponent.ERROR_UPLOADING_FILE;
         }
-        return errorMsg;
     }
     buildDocumentUploadData(selectedFile) {
         const documentUpload = new FormData();
@@ -13601,6 +13673,7 @@ WriteDocumentFieldComponent.UPLOAD_TIMESTAMP = 'upload_timestamp';
 WriteDocumentFieldComponent.UPLOAD_ERROR_FILE_REQUIRED = 'File required';
 WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE = 'Document upload facility is not available at the moment';
 WriteDocumentFieldComponent.UPLOAD_WAITING_FILE_STATUS = 'Uploading...';
+WriteDocumentFieldComponent.ERROR_UPLOADING_FILE = 'Error Uploading File';
 WriteDocumentFieldComponent.ɵfac = function WriteDocumentFieldComponent_Factory(t) { return new (t || WriteDocumentFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService)); };
 WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$Q, 5);
@@ -13663,7 +13736,7 @@ WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 
 class DynamicListPipe {
     transform(value, items) {
-        const item = items.find(i => i.code === value);
+        const item = items?.find(i => i.code === value);
         return item ? item.label : DynamicListPipe.EMPTY;
     }
 }
@@ -21557,7 +21630,7 @@ CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised docum
 CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl';
 CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS = 1;
 CaseFileViewFolderComponent.ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
-CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "allowMoving", "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
+CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", "aria-label", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "allowMoving", "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
         i0.ɵɵelement(2, "input", 2);
         i0.ɵɵelementEnd()();
@@ -21578,7 +21651,7 @@ CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i7.CdkNestedTreeNode, i7.CdkTreeNodeDef, i7.CdkTreeNodeToggle, i7.CdkTree, i7.CdkTreeNodeOutlet, CaseFileViewFolderSortComponent, CaseFileViewFolderDocumentActionsComponent, i4.DatePipe], styles: ["[_nghost-%COMP%]{display:flex;height:100%;flex-direction:column}[_nghost-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{flex:1 0}.document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #C9C9C9}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{padding:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat right #FFF;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;font-weight:700}.document-tree-container[_ngcontent-%COMP%]{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node[_ngcontent-%COMP%]{display:block}.document-tree-container__node[_ngcontent-%COMP%]   .document-tree-container__node[_ngcontent-%COMP%]{padding-left:40px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:7px}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#EEE}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#CCC}.document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.node[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected[_ngcontent-%COMP%]{background:#fff2cc}.node__icon[_ngcontent-%COMP%]{position:relative;display:inline-block}.node__count[_ngcontent-%COMP%]{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg[_ngcontent-%COMP%]{display:block;height:30px;width:30px}.node__name[_ngcontent-%COMP%]{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options[_ngcontent-%COMP%]{margin-left:auto;margin-right:0}.node__document-upload-timestamp[_ngcontent-%COMP%]{font-size:.8rem;float:left;padding-left:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #FFF;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#EEE}.document-tree-container::-webkit-scrollbar-thumb{background:#CCC}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #FFF;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#EEE}.document-tree-container::-webkit-scrollbar-thumb{background:#CCC}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
     }], function () { return [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: AbstractAppConfig }]; }, { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
@@ -29734,29 +29807,29 @@ function CaseHistoryComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 19, "Date"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 21, ctx_r0.caseHistory.event.timestamp));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(18, 21, ctx_r0.caseHistory.event.timestamp, "local"));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 23, "Author"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 24, "Author"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(25, 25, ctx_r0.caseHistory.event.user_first_name), " ", i0.ɵɵpipeBind1(26, 27, ctx_r0.caseHistory.event.user_last_name), "");
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(25, 26, ctx_r0.caseHistory.event.user_first_name), " ", i0.ɵɵpipeBind1(26, 28, ctx_r0.caseHistory.event.user_last_name), "");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 29, "End state"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 30, "End state"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.caseHistory.event.state_name);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 31, "Event"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(36, 32, "Event"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.caseHistory.event.event_name);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(42, 33, "Summary"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(42, 34, "Summary"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 35, ctx_r0.caseHistory.event.summary));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 36, ctx_r0.caseHistory.event.summary));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(49, 37, "Comment"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(49, 38, "Comment"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(52, 39, ctx_r0.caseHistory.event.comment));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(52, 40, ctx_r0.caseHistory.event.comment));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(56, 41, "Case Details"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(56, 42, "Case Details"));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r0.tabs);
 } }
@@ -29810,13 +29883,13 @@ CaseHistoryComponent.PARAM_EVENT_ID = 'eid';
 CaseHistoryComponent.ERROR_MESSAGE = 'No case history to show';
 CaseHistoryComponent.ɵfac = function CaseHistoryComponent_Factory(t) { return new (t || CaseHistoryComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(CaseHistoryService)); };
 CaseHistoryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseHistoryComponent, selectors: [["ccd-case-history"]], inputs: { event: "event" }, decls: 1, vars: 1, consts: [[4, "ngIf"], [1, "grid-row"], [1, "column-full"], [3, "caseDetails"], [1, "heading-h2"], ["aria-describedby", "event details table", 1, "EventDetails"], [4, "ngFor", "ngForOf"], [1, "caseHistorySection"], [1, "heading-h3"], [1, "CaseHistory", 3, "id"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-label-header"], [1, "case-viewer-label"], [3, "caseField", "caseReference"], [1, "compound-field"], ["colspan", "2"]], template: function CaseHistoryComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, CaseHistoryComponent_div_0_Template, 58, 43, "div", 0);
+        i0.ɵɵtemplate(0, CaseHistoryComponent_div_0_Template, 58, 44, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.isDataLoaded());
     } }, styles: [".CaseHistory[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], .CaseHistory[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{border-bottom:none}.caseHistorySection[_ngcontent-%COMP%]{margin-top:40px}.EventDetails[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], .EventDetails[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{border-bottom:none}th[_ngcontent-%COMP%]{width:1%;white-space:nowrap;vertical-align:top}.compound-field[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{padding:0}.case-viewer-controls[_ngcontent-%COMP%]{margin-top:47px;margin-bottom:20px}ccd-case-header[_ngcontent-%COMP%]{float:left;margin-right:10px}ccd-event-trigger[_ngcontent-%COMP%]{float:right}.case-viewer-label[_ngcontent-%COMP%]{min-width:300px;white-space:normal}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseHistoryComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-history', template: "<div *ngIf=\"isDataLoaded()\">\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    </div>\n  </div>\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <div>\n        <h2 class=\"heading-h2\">{{'Event Details' | rpxTranslate}}</h2>\n        <table class=\"EventDetails\" aria-describedby=\"event details table\">\n          <tbody>\n          <tr>\n            <th>{{'Date' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.timestamp | ccdDate}}</td>\n          </tr>\n          <tr>\n            <th>{{'Author' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.user_first_name | titlecase}} {{caseHistory.event.user_last_name | uppercase}}</td>\n          </tr>\n          <tr>\n            <th>{{'End state' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.state_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Event' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.event_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Summary' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.summary | ccdDash}}</td>\n          </tr>\n          <tr>\n            <th>{{'Comment' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.comment | ccdDash}}</td>\n          </tr>\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <h2 class=\"heading-h2\">{{'Case Details' | rpxTranslate}}</h2>\n        <ng-container *ngFor=\"let tab of tabs\">\n          <div class=\"caseHistorySection\">\n            <h3 class=\"heading-h3\">{{tab.label}}</h3>\n            <table class=\"CaseHistory\" id=\"{{tab.id}}\" [attr.aria-describedby]=\"'case history table' | rpxTranslate\">\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"tab.fields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-label-header\">\n                        <div class=\"case-viewer-label\">{{field.label}}</div>\n                      </th>\n                      <td>\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <td colspan=\"2\">\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n            </table>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".CaseHistory th,.CaseHistory td{border-bottom:none}.caseHistorySection{margin-top:40px}.EventDetails th,.EventDetails td{border-bottom:none}th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}\n"] }]
+        args: [{ selector: 'ccd-case-history', template: "<div *ngIf=\"isDataLoaded()\">\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    </div>\n  </div>\n  <div class=\"grid-row\">\n    <div class=\"column-full\">\n      <div>\n        <h2 class=\"heading-h2\">{{'Event Details' | rpxTranslate}}</h2>\n        <table class=\"EventDetails\" aria-describedby=\"event details table\">\n          <tbody>\n          <tr>\n            <th>{{'Date' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.timestamp | ccdDate : 'local'}}</td>\n          </tr>\n          <tr>\n            <th>{{'Author' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.user_first_name | titlecase}} {{caseHistory.event.user_last_name | uppercase}}</td>\n          </tr>\n          <tr>\n            <th>{{'End state' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.state_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Event' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.event_name}}</td>\n          </tr>\n          <tr>\n            <th>{{'Summary' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.summary | ccdDash}}</td>\n          </tr>\n          <tr>\n            <th>{{'Comment' | rpxTranslate}}</th>\n            <td>{{caseHistory.event.comment | ccdDash}}</td>\n          </tr>\n          </tbody>\n        </table>\n      </div>\n      <div>\n        <h2 class=\"heading-h2\">{{'Case Details' | rpxTranslate}}</h2>\n        <ng-container *ngFor=\"let tab of tabs\">\n          <div class=\"caseHistorySection\">\n            <h3 class=\"heading-h3\">{{tab.label}}</h3>\n            <table class=\"CaseHistory\" id=\"{{tab.id}}\" [attr.aria-describedby]=\"'case history table' | rpxTranslate\">\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"tab.fields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-label-header\">\n                        <div class=\"case-viewer-label\">{{field.label}}</div>\n                      </th>\n                      <td>\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <td colspan=\"2\">\n                        <ccd-field-read [caseField]=\"field\" [caseReference]=\"caseHistory.case_id\"></ccd-field-read>\n                      </td>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n            </table>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".CaseHistory th,.CaseHistory td{border-bottom:none}.caseHistorySection{margin-top:40px}.EventDetails th,.EventDetails td{border-bottom:none}th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}\n"] }]
     }], function () { return [{ type: i1$1.ActivatedRoute }, { type: AlertService }, { type: OrderService }, { type: CaseNotifier }, { type: CaseHistoryService }]; }, { event: [{
             type: Input
         }] }); })();
@@ -30890,7 +30963,7 @@ function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_2_Tem
     const tab_r20 = i0.ɵɵnextContext().$implicit;
     const ctx_r22 = i0.ɵɵnextContext(2);
     i0.ɵɵclassMap(tab_r20.id);
-    i0.ɵɵattribute("aria-describedby", i0.ɵɵpipeBind1(1, 4, "case viewer table"));
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 4, "case viewer table"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBindV(4, 6, i0.ɵɵpureFunction2(14, _c1$3, i0.ɵɵpipeBind1(5, 12, tab_r20), ctx_r22.formGroup.controls["data"])));
 } }
@@ -31355,7 +31428,7 @@ CaseFullAccessViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, styles: ["th[_ngcontent-%COMP%]{width:1%;white-space:nowrap;vertical-align:top}.compound-field[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{padding:0}.case-viewer-controls[_ngcontent-%COMP%]{margin-top:47px;margin-bottom:20px}ccd-case-header[_ngcontent-%COMP%]{float:left;margin-right:10px}ccd-event-trigger[_ngcontent-%COMP%]{float:right}.case-viewer-label[_ngcontent-%COMP%]{min-width:300px;white-space:normal}.markdown[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]{margin-bottom:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFullAccessViewComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-describedby]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}\n"] }]
+        args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-label]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}\n"] }]
     }], function () { return [{ type: i0.NgZone }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1$3.MatLegacyDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i4.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }]; }, { hasPrint: [{
             type: Input
         }], hasEventSelector: [{