npm - @hmcts/ccd-case-ui-toolkit - Versions diffs - 7.0.22 → 7.0.23-exui-1717-rc2 - Mend

@hmcts/ccd-case-ui-toolkit 7.0.22 → 7.0.23-exui-1717-rc2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

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

@@ -1333,6 +1333,11 @@ class HttpError {
     }
     static from(response) {
         const error = new HttpError();
+        if ((response === null || response === void 0 ? void 0 : response.status) === 429) {
+            error.error = HttpError.MESSAGE_ERROR_429;
+            error.status = response.status;
+            error.message = response.message;
+        }
         // Check that the HttpErrorResponse contains an "error" object before mapping the error properties
         if (!!(response && response.error)) {
             Object.keys(error).forEach((key) => {
@@ -1352,6 +1357,7 @@ class HttpError {
 HttpError.DEFAULT_ERROR = 'Unknown error';
 HttpError.DEFAULT_MESSAGE = 'Something unexpected happened, our technical staff have been automatically notified';
 HttpError.DEFAULT_STATUS = 500;
+HttpError.MESSAGE_ERROR_429 = 'Your request was rate limited. Please wait a few seconds before retrying your document upload';
 class AbstractAppConfig {
     /**
@@ -5034,8 +5040,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) {
@@ -8540,7 +8547,8 @@ class EventCompletionStateMachineService {
     }
     entryActionForStateCheckTasksCanBeCompleted(state, context) {
         context.workAllocationService.getTask(context.task.id).subscribe(taskResponse => {
-            if (taskResponse && taskResponse.task && taskResponse.task.task_state) {
+            var _a;
+            if ((_a = taskResponse === null || taskResponse === void 0 ? void 0 : taskResponse.task) === null || _a === void 0 ? void 0 : _a.task_state) {
                 switch (taskResponse.task.task_state.toUpperCase()) {
                     case TaskState.Unassigned:
                         // Task unassigned
@@ -8570,6 +8578,14 @@ class EventCompletionStateMachineService {
                         break;
                 }
             }
+            else if (!(taskResponse === null || taskResponse === void 0 ? void 0 : taskResponse.task)) {
+                context.alertService.setPreserveAlerts(true);
+                context.alertService.warning({ phrase: 'Task statecheck : no task available for completion', replacements: {} });
+            }
+            else {
+                context.alertService.setPreserveAlerts(true);
+                context.alertService.warning({ phrase: 'Task statecheck : no task state available for completion', replacements: {} });
+            }
         }, error => {
             context.alertService.error(error.message);
             return throwError(error);
@@ -8591,6 +8607,8 @@ class EventCompletionStateMachineService {
             context.component.eventCanBeCompleted.emit(true);
         }
         else {
+            context.alertService.setPreserveAlerts(true);
+            context.alertService.warning({ phrase: 'CompleteEventAndTask : no task available for completion', replacements: {} });
             // Emit event cannot be completed event
             context.component.eventCanBeCompleted.emit(false);
         }
@@ -8611,7 +8629,9 @@ class EventCompletionStateMachineService {
             context.component.eventCanBeCompleted.emit(true);
         }
         else {
-            // Emit event cannot be completed event
+            context.alertService.setPreserveAlerts(true);
+            context.alertService.warning({ phrase: 'Unassigned task : no task available for completion', replacements: {} });
+            // Emit event cannot be completed event
             context.component.eventCanBeCompleted.emit(false);
         }
     }
@@ -8678,16 +8698,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();
@@ -8795,6 +8820,8 @@ class WorkAllocationService {
      */
     completeTask(taskId) {
         if (!this.isWAEnabled()) {
+            this.alertService.setPreserveAlerts(true);
+            this.alertService.warning({ phrase: 'completeTask: Work Allocation is not enabled, so the task could not be completed. Please complete the task associated with the case manually.' });
             return of(null);
         }
         const url = `${this.appConfig.getWorkAllocationApiUrl()}/task/${taskId}/complete`;
@@ -8815,6 +8842,8 @@ class WorkAllocationService {
      */
     assignAndCompleteTask(taskId) {
         if (!this.isWAEnabled()) {
+            this.alertService.setPreserveAlerts(true);
+            this.alertService.warning({ phrase: 'assignAndCompleteTask: Work Allocation is not enabled, so the task could not be completed. Please complete the task associated with the case manually.' });
             return of(null);
         }
         const url = `${this.appConfig.getWorkAllocationApiUrl()}/task/${taskId}/complete`;
@@ -9227,7 +9256,7 @@ class CaseEditComponent {
             // If caseField.hidden is NOT truthy and also NOT equal to false, then it must be null/undefined (remember that
             // both null and undefined are equal to *neither false nor true*)
             if (caseField && caseField.retain_hidden_value &&
-                (caseField.hidden || (caseField.hidden !== false && parentField && parentField.hidden))) {
+                (caseField.hidden || (caseField.hidden !== false && (parentField === null || parentField === void 0 ? void 0 : parentField.hidden)))) {
                 if (caseField.field_type.type === 'Complex') {
                     // Note: Deliberate use of equality (==) and non-equality (!=) operators for null checks throughout, to
                     // handle both null and undefined values
@@ -10112,7 +10141,8 @@ class CaseEditPageComponent {
         return this.caseEdit.first();
     }
     currentPageIsNotValid() {
-        return !this.pageValidationService.isPageValid(this.currentPage, this.editForm) ||
+        this.failingCaseFields = this.pageValidationService.getInvalidFields(this.currentPage, this.editForm);
+        return this.failingCaseFields.length > 0 ||
             (this.isLinkedCasesJourney() && !this.isLinkedCasesJourneyAtFinalStep);
     }
     isLinkedCasesJourney() {
@@ -10134,9 +10164,15 @@ class CaseEditPageComponent {
     // Adding validation message to show it as Error Summary
     generateErrorMessage(fields, container, path) {
         const group = container || this.editForm.controls['data'];
-        fields.filter(casefield => !this.caseFieldService.isReadOnly(casefield))
-            .filter(casefield => !this.pageValidationService.isHidden(casefield, this.editForm, path))
+        let validErrorFieldFound = false;
+        let validationErrorAmount = this.validationErrors.length;
+        const failingFields = fields.filter(casefield => !this.caseFieldService.isReadOnly(casefield))
+            .filter(casefield => !this.pageValidationService.isHidden(casefield, this.editForm, path));
+        // note that thougn these checks are on getinvalidfields they are needed for sub field checks
+        failingFields
             .forEach(casefield => {
+            let errorPresent = true;
+            validErrorFieldFound = true;
             const fieldElement = FieldsUtils.isCaseFieldOfType(casefield, ['JudicialUser'])
                 ? group.get(`${casefield.id}_judicialUserControl`)
                 : group.get(casefield.id);
@@ -10181,7 +10217,7 @@ class CaseEditPageComponent {
                 }
                 else if (fieldElement.invalid) {
                     if (casefield.isComplex()) {
-                        this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id);
+                        errorPresent = this.generateErrorMessage(casefield.field_type.complex_fields, fieldElement, id);
                     }
                     else if (casefield.isCollection() && casefield.field_type.collection_field_type.type === 'Complex') {
                         const fieldArray = fieldElement;
@@ -10189,7 +10225,7 @@ class CaseEditPageComponent {
                             id = `${fieldArray['component']['collItems'][0].prefix}`;
                         }
                         fieldArray.controls.forEach((c) => {
-                            this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
+                            errorPresent = this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
                         });
                     }
                     else if (FieldsUtils.isCaseFieldOfType(casefield, ['FlagLauncher'])) {
@@ -10204,8 +10240,29 @@ class CaseEditPageComponent {
                     }
                 }
             }
+            else {
+                validErrorFieldFound = false;
+            }
+            if (!errorPresent && this.validationErrors.length === validationErrorAmount) {
+                // if no error messages have been added in internal field despite parent field failing
+                this.validationErrors.push({ id: casefield.id, message: `A field that is causing an error is ${casefield.id} but it is not producing a valid error message. Please ensure all details are correct` });
+            }
         });
+        if (!validErrorFieldFound) {
+            path ? this.validationErrors.push({ id: path, message: `There is an internal issue with ${path} fields. The field that is causing the error cannot be determined but there is an error present` })
+                : this.validationErrors.push({ id: null, message: `The field that is causing the error cannot be determined but there is an error present` });
+        }
+        else if (this.validationErrors.length === validationErrorAmount) {
+            // if no error messages have been generated
+            if (path) {
+                return false;
+            }
+            else {
+                this.validationErrors.push({ id: null, message: `The field that is causing the error cannot be determined but there is an error present. Please fill in more of the form` });
+            }
+        }
         CaseEditPageComponent.scrollToTop();
+        return true;
     }
     navigateToErrorElement(elementId) {
         /* istanbul ignore else */
@@ -10230,7 +10287,7 @@ class CaseEditPageComponent {
                 CaseEditPageComponent.scrollToTop();
             }
             else {
-                this.generateErrorMessage(this.currentPage.case_fields);
+                this.generateErrorMessage(this.failingCaseFields);
             }
         }
         if (!this.caseEdit.isSubmitting && !this.currentPageIsNotValid()) {
@@ -14226,6 +14283,9 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         if (documentHash) {
             this.uploadedDocument.get(WriteDocumentFieldComponent.DOCUMENT_HASH).setValue(documentHash);
         }
+        if (this.uploadedDocument.get(WriteDocumentFieldComponent.UPLOAD_TIMESTAMP)) {
+            this.uploadedDocument.removeControl(WriteDocumentFieldComponent.UPLOAD_TIMESTAMP);
+        }
     }
     createDocumentFormWithValidator(document) {
         let documentFormGroup = {
@@ -14233,6 +14293,9 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             document_binary_url: new FormControl(document.document_binary_url, Validators.required),
             document_filename: new FormControl(document.document_filename, Validators.required)
         };
+        if (document.upload_timestamp && (typeof document.upload_timestamp === 'string')) {
+            documentFormGroup = Object.assign(Object.assign({}, documentFormGroup), { upload_timestamp: new FormControl(document.upload_timestamp) });
+        }
         documentFormGroup = this.secureModeOn ? Object.assign(Object.assign({}, documentFormGroup), { document_hash: new FormControl(document.document_hash) }) : documentFormGroup;
         this.uploadedDocument = this.registerControl(new FormGroup(documentFormGroup), true);
     }
@@ -14242,27 +14305,38 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             document_binary_url: new FormControl(document.document_binary_url),
             document_filename: new FormControl(document.document_filename)
         };
+        if (document.upload_timestamp && (typeof document.upload_timestamp === 'string')) {
+            documentFormGroup = Object.assign(Object.assign({}, documentFormGroup), { upload_timestamp: new FormControl(document.upload_timestamp) });
+        }
         documentFormGroup = this.secureModeOn ? Object.assign(Object.assign({}, documentFormGroup), { document_hash: new FormControl(document.document_hash) }) : documentFormGroup;
         this.uploadedDocument = this.registerControl(new FormGroup(documentFormGroup), true);
     }
     getErrorMessage(error) {
-        // Document Management unavailable
-        if (0 === error.status || 502 === error.status) {
-            return WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE;
-        }
-        let errorMsg = 'Error uploading file';
-        if (error === null || error === void 0 ? void 0 : error.error) {
-            const fullError = error.error;
-            const start = fullError.indexOf('{');
-            if (start >= 0) {
-                const json = fullError.substring(start, fullError.length - 1).split('<EOL>').join('');
-                const obj = JSON.parse(json);
-                if (obj === null || obj === void 0 ? void 0 : obj.error) {
-                    errorMsg = obj.error;
+        switch (error.status) {
+            case 0:
+            case 502:
+                return WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE;
+            case 422:
+                {
+                    let errorMsg = WriteDocumentFieldComponent.ERROR_UPLOADING_FILE;
+                    if (error === null || error === void 0 ? void 0 : error.error) {
+                        const fullError = error.error;
+                        const start = fullError.indexOf('{');
+                        if (start >= 0) {
+                            const json = fullError.substring(start, fullError.length - 1).split('<EOL>').join('');
+                            const obj = JSON.parse(json);
+                            if (obj === null || obj === void 0 ? void 0 : obj.error) {
+                                errorMsg = obj.error;
+                            }
+                        }
+                    }
+                    return errorMsg;
                 }
-            }
+            case 429:
+                return error === null || error === void 0 ? void 0 : error.error;
+            default:
+                return WriteDocumentFieldComponent.ERROR_UPLOADING_FILE;
         }
-        return errorMsg;
     }
     buildDocumentUploadData(selectedFile) {
         const documentUpload = new FormData();
@@ -14314,9 +14388,11 @@ WriteDocumentFieldComponent.DOCUMENT_URL = 'document_url';
 WriteDocumentFieldComponent.DOCUMENT_BINARY_URL = 'document_binary_url';
 WriteDocumentFieldComponent.DOCUMENT_FILENAME = 'document_filename';
 WriteDocumentFieldComponent.DOCUMENT_HASH = 'document_hash';
+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) {
@@ -22561,11 +22637,11 @@ CaseFileViewFolderSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.currentCategories);
         }
-    }, dependencies: [i4.NgForOf, i4.NgTemplateOutlet], styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#EEE}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#CCC}\n"], encapsulation: 2 });
+    }, dependencies: [i4.NgForOf, i4.NgTemplateOutlet], styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto;background:#fff}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#EEE}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#CCC}\n"], encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderSelectorComponent, [{
             type: Component,
-            args: [{ selector: 'xui-case-file-view-folder-selector', encapsulation: ViewEncapsulation.None, template: "<div class=\"close\" (click)=\"cancel()\"></div>\n<h2 class=\"govuk-heading-l\">Move File</h2>\n<p>Where do you want to move \"{{ data.document.document_filename }}\" file?</p>\n<div class=\"folders govuk-radios govuk-radios--conditional\">\n    <ng-container *ngFor=\"let cat of currentCategories\">\n        <ng-container *ngTemplateOutlet=\"folder;context:{cat:cat,level:1}\"></ng-container>\n    </ng-container>\n</div>\n<div class=\"govuk-button-group\">\n    <button class=\"button button-primary\" type=\"button\" (click)=\"save()\">Save</button>\n    <a (click)=\"cancel()\" class=\"cancel\">Cancel</a>\n</div>\n\n<ng-template #folder let-cat=\"cat\" let-level=\"level\">\n    <div class=\"folder govuk-radios__item\">\n        <input class=\"govuk-radios__input\" type=\"radio\" name=\"level-{{level}}\" [id]=\"cat.category_id\" (click)=\"handleChange($event)\" />\n        <label class=\"govuk-label govuk-radios__label\" [for]=\"cat.category_id\">\n            <img class=\"iconImg\" src=\"/assets/images/folder.png\" alt=\"Folder icon\" />\n            {{ cat.category_name }}\n        </label>\n        <ng-container *ngFor=\"let subcat of cat.sub_categories\">\n            <ng-container *ngTemplateOutlet=\"folder;context:{cat:subcat,level:level+1}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>", styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#EEE}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#CCC}\n"] }]
+            args: [{ selector: 'xui-case-file-view-folder-selector', encapsulation: ViewEncapsulation.None, template: "<div class=\"close\" (click)=\"cancel()\"></div>\n<h2 class=\"govuk-heading-l\">Move File</h2>\n<p>Where do you want to move \"{{ data.document.document_filename }}\" file?</p>\n<div class=\"folders govuk-radios govuk-radios--conditional\">\n    <ng-container *ngFor=\"let cat of currentCategories\">\n        <ng-container *ngTemplateOutlet=\"folder;context:{cat:cat,level:1}\"></ng-container>\n    </ng-container>\n</div>\n<div class=\"govuk-button-group\">\n    <button class=\"button button-primary\" type=\"button\" (click)=\"save()\">Save</button>\n    <a (click)=\"cancel()\" class=\"cancel\">Cancel</a>\n</div>\n\n<ng-template #folder let-cat=\"cat\" let-level=\"level\">\n    <div class=\"folder govuk-radios__item\">\n        <input class=\"govuk-radios__input\" type=\"radio\" name=\"level-{{level}}\" [id]=\"cat.category_id\" (click)=\"handleChange($event)\" />\n        <label class=\"govuk-label govuk-radios__label\" [for]=\"cat.category_id\">\n            <img class=\"iconImg\" src=\"/assets/images/folder.png\" alt=\"Folder icon\" />\n            {{ cat.category_name }}\n        </label>\n        <ng-container *ngFor=\"let subcat of cat.sub_categories\">\n            <ng-container *ngTemplateOutlet=\"folder;context:{cat:subcat,level:level+1}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>", styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto;background:#fff}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#EEE}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#CCC}\n"] }]
         }], function () {
         return [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
@@ -22939,9 +23015,10 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
         i0.ɵɵelement(6, "br");
         i0.ɵɵelementStart(7, "span", 17);
         i0.ɵɵtext(8);
+        i0.ɵɵpipe(9, "date");
         i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(9, "div", 18)(10, "ccd-case-file-view-folder-document-actions", 19);
-        i0.ɵɵlistener("changeFolderAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_changeFolderAction_10_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.triggerDocumentAction("changeFolder", node_r4)); })("openInANewTabAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_openInANewTabAction_10_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.triggerDocumentAction("openInANewTab", node_r4)); })("downloadAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_downloadAction_10_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.triggerDocumentAction("download", node_r4)); })("printAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_printAction_10_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.triggerDocumentAction("print", node_r4)); });
+        i0.ɵɵelementStart(10, "div", 18)(11, "ccd-case-file-view-folder-document-actions", 19);
+        i0.ɵɵlistener("changeFolderAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_changeFolderAction_11_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.triggerDocumentAction("changeFolder", node_r4)); })("openInANewTabAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_openInANewTabAction_11_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r8.triggerDocumentAction("openInANewTab", node_r4)); })("downloadAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_downloadAction_11_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.triggerDocumentAction("download", node_r4)); })("printAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_printAction_11_listener() { const restoredCtx = i0.ɵɵrestoreView(_r6); const node_r4 = restoredCtx.$implicit; const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.triggerDocumentAction("print", node_r4)); });
         i0.ɵɵelementEnd()()()();
     }
     if (rf & 2) {
@@ -22952,8 +23029,8 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
         i0.ɵɵadvance(4);
         i0.ɵɵtextInterpolate1(" ", node_r4.name, " ");
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(node_r4.upload_timestamp);
-        i0.ɵɵadvance(2);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, node_r4.upload_timestamp, "dd MMM YYYY"));
+        i0.ɵɵadvance(3);
         i0.ɵɵproperty("allowMoving", ctx_r2.allowMoving);
     }
 }
@@ -22991,7 +23068,7 @@ function CaseFileViewFolderComponent_div_8_Template(rf, ctx) {
         i0.ɵɵelementStart(0, "div", 7);
         i0.ɵɵtemplate(1, CaseFileViewFolderComponent_div_8_div_1_Template, 2, 0, "div", 8);
         i0.ɵɵelementStart(2, "div")(3, "cdk-tree", 9);
-        i0.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 11, 5, "cdk-nested-tree-node", 10);
+        i0.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 12, 8, "cdk-nested-tree-node", 10);
         i0.ɵɵtemplate(5, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_5_Template, 10, 6, "cdk-nested-tree-node", 11);
         i0.ɵɵelementEnd()()();
     }
@@ -23065,10 +23142,11 @@ class CaseFileViewFolderComponent {
             newDocumentTreeNode.name = node.category_name;
             newDocumentTreeNode.type = DocumentTreeNodeType.FOLDER;
             newDocumentTreeNode.children = [...this.generateTreeData(node.sub_categories), ...this.getDocuments(node.documents)];
+            newDocumentTreeNode.category_order = node.category_order;
             return [
                 ...tree,
                 newDocumentTreeNode,
-            ];
+            ].sort((a, b) => a.category_order - b.category_order);
         }, []);
     }
     getDocuments(documents) {
@@ -23081,7 +23159,7 @@ class CaseFileViewFolderComponent {
             documentTreeNode.document_binary_url = document.document_binary_url;
             documentTreeNode.attribute_path = document.attribute_path;
             documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1()
-                && document.upload_timestamp ? moment$1(document.upload_timestamp).format('DD MMM YYYY') : '';
+                && document.upload_timestamp ? moment$1(document.upload_timestamp).format('DD MMM YYYY HH:mm:ss') : '';
             documentsToReturn.push(documentTreeNode);
         });
         return documentsToReturn;
@@ -23096,7 +23174,7 @@ class CaseFileViewFolderComponent {
             documentTreeNode.document_binary_url = document.document_binary_url;
             documentTreeNode.attribute_path = document.attribute_path;
             documentTreeNode.upload_timestamp = this.appConfig.getEnableCaseFileViewVersion1_1()
-                && document.upload_timestamp ? moment$1(document.upload_timestamp).format('DD MMM YYYY') : '';
+                && document.upload_timestamp ? moment$1(document.upload_timestamp).format('DD MMM YYYY HH:mm:ss') : '';
             documents.push(documentTreeNode);
         });
         const uncategorisedNode = new DocumentTreeNode();
@@ -23218,7 +23296,7 @@ CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised docum
 CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl';
 CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS = 1;
 CaseFileViewFolderComponent.ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
-CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "allowMoving", "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
+CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", "aria-label", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "allowMoving", "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵelement(2, "input", 2);
@@ -23239,11 +23317,11 @@ CaseFileViewFolderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.documentTreeData);
         }
-    }, 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], 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}"] });
+    }, 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}}</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: [{
@@ -33506,7 +33584,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"])));
     }
@@ -33990,7 +34068,7 @@ CaseFullAccessViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFullAccessViewComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-describedby]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}\n"] }]
+            args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\" (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-label]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}\n"] }]
         }], function () { return [{ type: i0.NgZone }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1$3.MatLegacyDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i4.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }]; }, { hasPrint: [{
                 type: Input
             }], hasEventSelector: [{