@hmcts/ccd-case-ui-toolkit 7.3.83-CME-1008-dart-sass → 7.3.84

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

@@ -11,20 +11,23 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormArray, FormGroup, FormControl, Va
 import { BehaviorSubject, throwError, Subject, EMPTY, concat, defer, timer, Observable, skip, of, forkJoin, fromEvent, Subscription, combineLatest } from 'rxjs';
 import { distinctUntilChanged, catchError, map, switchMap, repeat, retry, publish, refCount, debounceTime, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, take, first, takeUntil, filter } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
-import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpErrorResponse, HttpHeaders, HttpParams, HttpStatusCode } from '@angular/common/http';
 import { Type, Exclude, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
 import moment from 'moment';
 import { __decorate, __metadata } from 'tslib';
 import * as _ from 'underscore';
 import 'reflect-metadata';
 import { StateMachine } from '@edium/fsm';
-import * as i1$3 from '@angular/material/dialog';
-import { MatDialogConfig, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$3 from '@angular/material/legacy-dialog';
+import { MAT_LEGACY_DIALOG_DATA, MatLegacyDialogModule } from '@angular/material/legacy-dialog';
+import { MatDialogConfig } from '@angular/material/dialog';
 import * as marked from 'marked';
 import * as i1$4 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
-import * as i6 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i6 from '@angular/material/legacy-autocomplete';
+import { MatLegacyAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import * as i7 from '@angular/material/legacy-core';
+import { MAT_LEGACY_DATE_LOCALE } from '@angular/material/legacy-core';
 import * as i3$1 from '@hmcts/ccpay-web-component';
 import { PaymentLibModule } from '@hmcts/ccpay-web-component';
 import { v4 } from 'uuid';
@@ -34,23 +37,22 @@ import * as i6$1 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
 import * as i2$1 from '@angular/platform-browser';
 import { cloneDeep } from 'lodash';
-import * as i4$1 from '@ngxmc/datetime-picker';
-import { NgxMatDatepickerActions, NgxMatDatetimepicker, NgxMatDatepickerApply, NgxMatDatepickerInput } from '@ngxmc/datetime-picker';
-import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
-import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';
-import * as i5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$1 from '@angular-material-components/datetime-picker';
+import { NGX_MAT_DATE_FORMATS, NgxMatDateAdapter, NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
+import { NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, NgxMatMomentAdapter } from '@angular-material-components/moment-adapter';
+import * as i5 from '@angular/material/legacy-form-field';
+import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
 import * as i6$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i14 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import * as i14 from '@angular/material/legacy-input';
+import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i13 from '@hmcts/media-viewer';
 import { MediaViewerModule } from '@hmcts/media-viewer';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i2$2 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
-import * as i10 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
+import * as i10 from '@angular/material/legacy-tabs';
+import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
 import { compressToUTF16, decompressFromUTF16 } from 'lz-string';
 
 const _c0$18 = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
@@ -235,11 +237,11 @@ class HeaderBarComponent {
             i0.ɵɵtextInterpolate(ctx.username);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 12, "Sign Out"));
-        } }, dependencies: [i4.NgIf, i1.RpxTranslatePipe], styles: [".global-header[_ngcontent-%COMP%]:after, .global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]:after, .global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]:after, .title[_ngcontent-%COMP%]:after{content:\"\";display:block;clear:both}.global-header[_ngcontent-%COMP%]{background-color:#000;width:100%}.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16pt;line-height:1.25}@media(min-width:641px){.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{font-size:20pt;line-height:1.3}}.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{float:left;font-weight:700;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{width:50%}}@media screen and (max-width:379px){.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{width:auto;float:none}}.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   .header-title-span[_ngcontent-%COMP%]{padding-left:22px}.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:12pt;line-height:1.25}@media(min-width:641px){.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{font-size:14pt;line-height:1.4285714286}}.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{float:right;text-align:right;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{width:50%}}.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]   .header-username-span[_ngcontent-%COMP%]{padding-right:15px}#global-header[_ngcontent-%COMP%]   .full-screen[_ngcontent-%COMP%]{max-width:100%}.title[_ngcontent-%COMP%]{font-weight:700;color:#fff;font-size:24px}.title-solicitor[_ngcontent-%COMP%]{float:left}.proposition-right[_ngcontent-%COMP%]{float:right;padding-top:5px}#global-header.with-proposition[_ngcontent-%COMP%]   .header-wrapper[_ngcontent-%COMP%]   .header-logo[_ngcontent-%COMP%]{width:27%}#global-header.with-proposition[_ngcontent-%COMP%]   .header-wrapper[_ngcontent-%COMP%]   .header-proposition[_ngcontent-%COMP%]{width:100%;float:none}#global-header.with-proposition[_ngcontent-%COMP%]   .header-wrapper[_ngcontent-%COMP%]   .header-proposition[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]{margin:0}#user-name[_ngcontent-%COMP%], #sign-out[_ngcontent-%COMP%]{font-size:16px;font-weight:700;border:none;color:#fff;margin:0 0 0 9px;text-decoration:none;background-color:#000}#user-name[_ngcontent-%COMP%]:focus, #sign-out[_ngcontent-%COMP%]:focus{color:#fff}#sign-out[_ngcontent-%COMP%]:hover{text-decoration:underline}"] });
+        } }, dependencies: [i4.NgIf, i1.RpxTranslatePipe], styles: [".title[_ngcontent-%COMP%]:after, .global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]:after, .global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]:after, .global-header[_ngcontent-%COMP%]:after{content:\"\";display:block;clear:both}.global-header[_ngcontent-%COMP%]{background-color:#000;width:100%}.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16pt;line-height:1.25}@media(min-width:641px){.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{font-size:20pt;line-height:1.3}}.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{float:left;font-weight:700;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{width:50%}}@media screen and (max-width:379px){.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]{width:auto;float:none}}.global-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   .header-title-span[_ngcontent-%COMP%]{padding-left:22px}.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:12pt;line-height:1.25}@media(min-width:641px){.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{font-size:14pt;line-height:1.4285714286}}.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{float:right;text-align:right;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]{width:50%}}.global-header[_ngcontent-%COMP%]   .header-username[_ngcontent-%COMP%]   .header-username-span[_ngcontent-%COMP%]{padding-right:15px}#global-header[_ngcontent-%COMP%]   .full-screen[_ngcontent-%COMP%]{max-width:100%}.title[_ngcontent-%COMP%]{font-weight:700;color:#fff;font-size:24px}.title-solicitor[_ngcontent-%COMP%]{float:left}.proposition-right[_ngcontent-%COMP%]{float:right;padding-top:5px}#global-header.with-proposition[_ngcontent-%COMP%]   .header-wrapper[_ngcontent-%COMP%]   .header-logo[_ngcontent-%COMP%]{width:27%}#global-header.with-proposition[_ngcontent-%COMP%]   .header-wrapper[_ngcontent-%COMP%]   .header-proposition[_ngcontent-%COMP%]{width:100%;float:none}#global-header.with-proposition[_ngcontent-%COMP%]   .header-wrapper[_ngcontent-%COMP%]   .header-proposition[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]{margin:0}#user-name[_ngcontent-%COMP%], #sign-out[_ngcontent-%COMP%]{font-size:16px;font-weight:700;border:none;color:#fff;margin:0 0 0 9px;text-decoration:none;background-color:#000}#user-name[_ngcontent-%COMP%]:focus, #sign-out[_ngcontent-%COMP%]:focus{color:#fff}#sign-out[_ngcontent-%COMP%]:hover{text-decoration:underline}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderBarComponent, [{
         type: Component,
-        args: [{ selector: 'cut-header-bar', standalone: false, template: "<header role=\"banner\" id=\"global-header\" class=\"with-proposition\">\n  <div [class.full-screen]=\"!isSolicitor\" class=\"header-wrapper\">\n\n    <div class=\"header-global\" [class.header-logo]=\"isSolicitor\">\n      <div *ngIf=\"isSolicitor\">\n        <a href=\"https://www.gov.uk\" title=\"Go to the GOV.UK homepage\" id=\"logo\" class=\"content\" style=\"margin-left: 0px;\">\n          <img src=\"/img/gov.uk_logotype_crown_invert_trans.png?0.23.0\" width=\"36\" height=\"32\" alt=\"\"> {{'GOV.UK'}}\n        </a>\n      </div>\n      <div class=\"global-header\" *ngIf=\"!isSolicitor\">\n        <div class=\"title\">\n          <span>{{title | rpxTranslate}}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"header-proposition\">\n      <div class=\"content\">\n        <a href=\"#proposition-links\" class=\"js-header-toggle menu\">{{'Menu' | rpxTranslate}}</a>\n        <div *ngIf=\"isSolicitor\" id=\"proposition-menu\">\n          <div class=\"title-solicitor\">\n            <span id=\"proposition-name\">{{title | rpxTranslate}}</span>\n            <ng-content select=\"[headerNavigation]\"></ng-content>\n          </div>\n        </div>\n\n        <div class=\"proposition-right\">\n          <span id=\"user-name\">{{username}}</span>\n          <button type=\"button\" class=\"govuk-js-link\" (click)=\"signOut()\" id=\"sign-out\">{{'Sign Out' | rpxTranslate}}</button>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</header>\n", styles: [".global-header:after,.global-header .header-title:after,.global-header .header-username:after,.title:after{content:\"\";display:block;clear:both}.global-header{background-color:#000;width:100%}.global-header .header-title{font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16pt;line-height:1.25}@media(min-width:641px){.global-header .header-title{font-size:20pt;line-height:1.3}}.global-header .header-title{float:left;font-weight:700;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header .header-title{width:50%}}@media screen and (max-width:379px){.global-header .header-title{width:auto;float:none}}.global-header .header-title .header-title-span{padding-left:22px}.global-header .header-username{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:12pt;line-height:1.25}@media(min-width:641px){.global-header .header-username{font-size:14pt;line-height:1.4285714286}}.global-header .header-username{float:right;text-align:right;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header .header-username{width:50%}}.global-header .header-username .header-username-span{padding-right:15px}#global-header .full-screen{max-width:100%}.title{font-weight:700;color:#fff;font-size:24px}.title-solicitor{float:left}.proposition-right{float:right;padding-top:5px}#global-header.with-proposition .header-wrapper .header-logo{width:27%}#global-header.with-proposition .header-wrapper .header-proposition{width:100%;float:none}#global-header.with-proposition .header-wrapper .header-proposition .content{margin:0}#user-name,#sign-out{font-size:16px;font-weight:700;border:none;color:#fff;margin:0 0 0 9px;text-decoration:none;background-color:#000}#user-name:focus,#sign-out:focus{color:#fff}#sign-out:hover{text-decoration:underline}\n"] }]
+        args: [{ selector: 'cut-header-bar', standalone: false, template: "<header role=\"banner\" id=\"global-header\" class=\"with-proposition\">\n  <div [class.full-screen]=\"!isSolicitor\" class=\"header-wrapper\">\n\n    <div class=\"header-global\" [class.header-logo]=\"isSolicitor\">\n      <div *ngIf=\"isSolicitor\">\n        <a href=\"https://www.gov.uk\" title=\"Go to the GOV.UK homepage\" id=\"logo\" class=\"content\" style=\"margin-left: 0px;\">\n          <img src=\"/img/gov.uk_logotype_crown_invert_trans.png?0.23.0\" width=\"36\" height=\"32\" alt=\"\"> {{'GOV.UK'}}\n        </a>\n      </div>\n      <div class=\"global-header\" *ngIf=\"!isSolicitor\">\n        <div class=\"title\">\n          <span>{{title | rpxTranslate}}</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"header-proposition\">\n      <div class=\"content\">\n        <a href=\"#proposition-links\" class=\"js-header-toggle menu\">{{'Menu' | rpxTranslate}}</a>\n        <div *ngIf=\"isSolicitor\" id=\"proposition-menu\">\n          <div class=\"title-solicitor\">\n            <span id=\"proposition-name\">{{title | rpxTranslate}}</span>\n            <ng-content select=\"[headerNavigation]\"></ng-content>\n          </div>\n        </div>\n\n        <div class=\"proposition-right\">\n          <span id=\"user-name\">{{username}}</span>\n          <button type=\"button\" class=\"govuk-js-link\" (click)=\"signOut()\" id=\"sign-out\">{{'Sign Out' | rpxTranslate}}</button>\n        </div>\n      </div>\n    </div>\n\n  </div>\n</header>\n", styles: [".title:after,.global-header .header-username:after,.global-header .header-title:after,.global-header:after{content:\"\";display:block;clear:both}.global-header{background-color:#000;width:100%}.global-header .header-title{font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16pt;line-height:1.25}@media(min-width:641px){.global-header .header-title{font-size:20pt;line-height:1.3}}.global-header .header-title{float:left;font-weight:700;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header .header-title{width:50%}}@media screen and (max-width:379px){.global-header .header-title{width:auto;float:none}}.global-header .header-title .header-title-span{padding-left:22px}.global-header .header-username{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:12pt;line-height:1.25}@media(min-width:641px){.global-header .header-username{font-size:14pt;line-height:1.4285714286}}.global-header .header-username{float:right;text-align:right;color:#fff;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}@media(min-width:769px){.global-header .header-username{width:50%}}.global-header .header-username .header-username-span{padding-right:15px}#global-header .full-screen{max-width:100%}.title{font-weight:700;color:#fff;font-size:24px}.title-solicitor{float:left}.proposition-right{float:right;padding-top:5px}#global-header.with-proposition .header-wrapper .header-logo{width:27%}#global-header.with-proposition .header-wrapper .header-proposition{width:100%;float:none}#global-header.with-proposition .header-wrapper .header-proposition .content{margin:0}#user-name,#sign-out{font-size:16px;font-weight:700;border:none;color:#fff;margin:0 0 0 9px;text-decoration:none;background-color:#000}#user-name:focus,#sign-out:focus{color:#fff}#sign-out:hover{text-decoration:underline}\n"] }]
     }], null, { title: [{
             type: Input
         }], isSolicitor: [{
@@ -11996,7 +11998,7 @@ class SaveOrDiscardDialogComponent {
         this.result = 'Discard';
         this.matDialogRef.close(this.result);
     }
-    static ɵfac = function SaveOrDiscardDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SaveOrDiscardDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialogRef)); };
+    static ɵfac = function SaveOrDiscardDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SaveOrDiscardDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialogRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SaveOrDiscardDialogComponent, selectors: [["ccd-save-or-discard-dialog"]], standalone: false, decls: 19, vars: 12, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Save", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Discard", 1, "button", "button-secondary", 3, "click"]], template: function SaveOrDiscardDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2", 1);
             i0.ɵɵlistener("click", function SaveOrDiscardDialogComponent_Template_h2_click_2_listener() { return ctx.cancel(); });
@@ -12034,7 +12036,7 @@ class SaveOrDiscardDialogComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveOrDiscardDialogComponent, [{
         type: Component,
         args: [{ selector: 'ccd-save-or-discard-dialog', standalone: false, template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Would you like to save changes to this page?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">{{'You will be taken back to your case list.' | rpxTranslate}}</span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Save\" class=\"button action-button\" (click)=\"save()\">{{'Save' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Discard\" class=\"button button-secondary\" (click)=\"discard()\">{{'Discard' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media(prefers-color-scheme:dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
-    }], () => [{ type: i1$3.MatDialogRef }], null); })();
+    }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveOrDiscardDialogComponent, { className: "SaveOrDiscardDialogComponent", filePath: "lib/shared/components/dialogs/save-or-discard-dialog/save-or-discard-dialog.component.ts", lineNumber: 10 }); })();
 
 function initDialog() {
@@ -13123,7 +13125,7 @@ class CaseEditPageComponent {
             }
         });
     }
-    static ɵfac = function CaseEditPageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseEditPageComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(FormValueService), i0.ɵɵdirectiveInject(FormErrorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PageValidationService), i0.ɵɵdirectiveInject(i1$3.MatDialog), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(ValidPageListCaseFieldsService), i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(AddressesService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(CaseFlagStateService), i0.ɵɵdirectiveInject(FocusService)); };
+    static ɵfac = function CaseEditPageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseEditPageComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(FormValueService), i0.ɵɵdirectiveInject(FormErrorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PageValidationService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(ValidPageListCaseFieldsService), i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(AddressesService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(CaseFlagStateService), i0.ɵɵdirectiveInject(FocusService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditPageComponent, selectors: [["ccd-case-edit-page"]], viewQuery: function CaseEditPageComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(CaseEditFormComponent, 5);
         } if (rf & 2) {
@@ -13161,7 +13163,7 @@ class CaseEditPageComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEditPageComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-edit-page', standalone: false, template: "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name | rpxTranslate}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label | rpxTranslate}}</h1>\n  </ng-container>\n</ng-container>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data'] | rpxTranslate\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Error message summary -->\n<div *ngIf=\"validationErrors.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    {{'There is a problem' | rpxTranslate}}\n  </h2>\n  <div *ngFor=\"let validationError of validationErrors\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(validationError.id)\" (keyup.enter)=\"navigateToErrorElement(validationError.id)\" tabindex=\"0\" class=\"validation-error\">\n          {{ validationError.message | rpxTranslate: getRpxTranslatePipeArgs(validationError.label | rpxTranslate): null }}\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"nextStep()\">\n    <fieldset id=\"fieldset-case-data\">\n      <legend style=\"display: none;\"></legend>\n      <!-- single column -->\n      <ccd-case-edit-form id='caseEditForm' *ngIf=\"!currentPage.isMultiColumn()\" [fields]=\"currentPage.getCol1Fields()\"\n                          [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"\n                          [pageChangeSubject]=\"pageChangeSubject\"\n                          (valuesChanged)=\"applyValuesChanged($event)\"></ccd-case-edit-form>\n      <!-- two columns -->\n      <div *ngIf=\"currentPage.isMultiColumn()\" class=\"grid-row\">\n        <div class=\"column-two-thirds rightBorderSeparator\">\n          <ccd-case-edit-form id='caseEditForm1' [fields]=\"currentPage.getCol1Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n        <div class=\"column-one-third\">\n          <ccd-case-edit-form id='caseEditForm2' [fields]=\"currentPage.getCol2Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n      </div>\n    </fieldset>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" (click)=\"toPreviousPage()\" *ngIf=\"!isAtStart()\" [disabled]=\"isDisabled()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText | rpxTranslate}}</button>\n    </div>\n\n    <p class=\"cancel\"><button type=\"button\" (click)=\"cancel()\" class=\"govuk-js-link\">{{getCancelText() | rpxTranslate}}</button></p>\n  </form>\n</div>\n\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: [".rightBorderSeparator{border-right-width:4px;border-right-color:#ffcc02;border-right-style:solid}.validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
-    }], () => [{ type: CaseEditComponent }, { type: i1$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0.ChangeDetectorRef }, { type: PageValidationService }, { type: i1$3.MatDialog }, { type: CaseFieldService }, { type: CaseEditDataService }, { type: LoadingService }, { type: ValidPageListCaseFieldsService }, { type: MultipageComponentStateService }, { type: AddressesService }, { type: LinkedCasesService }, { type: CaseFlagStateService }, { type: FocusService }], { caseEditFormComponents: [{
+    }], () => [{ type: CaseEditComponent }, { type: i1$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0.ChangeDetectorRef }, { type: PageValidationService }, { type: i1$3.MatLegacyDialog }, { type: CaseFieldService }, { type: CaseEditDataService }, { type: LoadingService }, { type: ValidPageListCaseFieldsService }, { type: MultipageComponentStateService }, { type: AddressesService }, { type: LinkedCasesService }, { type: CaseFlagStateService }, { type: FocusService }], { caseEditFormComponents: [{
             type: ViewChildren,
             args: [CaseEditFormComponent]
         }] }); })();
@@ -14651,8 +14653,8 @@ class CaseFileViewFieldComponent {
         this.caseFileViewService.updateDocumentCategory(cid, this.caseVersion, data.document.attribute_path, data.newCategory)
             .pipe(finalize(() => {
             this.loadingService.unregister(loadingToken);
-        }), catchError(() => {
-            this.errorMessages = ['You do not have permission to move this document to the selected folder.'];
+        }), catchError((err) => {
+            this.errorMessages = [this.moveDocumentError(err)];
             return of(null);
         }))
             .subscribe(res => {
@@ -14676,6 +14678,31 @@ class CaseFileViewFieldComponent {
     isIcpEnabled() {
         return this.icpEnabled && ((this.icp_jurisdictions?.length < 1) || this.icp_jurisdictions.includes(this.caseNotifier?.cachedCaseView?.case_type?.jurisdiction.id));
     }
+    moveDocumentError(err) {
+        const defaultMsg = 'We couldn\'t move the document. Please try again.';
+        if (!(err instanceof HttpErrorResponse)) {
+            return defaultMsg;
+        }
+        switch (err.status) {
+            case HttpStatusCode.BadRequest:
+                // e.g. malformed PUT, invalid attribute_path, invalid target category
+                return 'The request was invalid. Check the document path and destination folder.';
+            case HttpStatusCode.Conflict:
+                // optimistic concurrency / stale case version
+                return 'This case changed since you opened it. Refresh and try again.';
+            case HttpStatusCode.NotFound:
+                return 'The document or destination folder could not be found.';
+            case HttpStatusCode.Forbidden:
+            case HttpStatusCode.Unauthorized:
+                return 'You do not have permission to move this document to the selected folder.';
+            case HttpStatusCode.ServiceUnavailable:
+            case HttpStatusCode.GatewayTimeout:
+                return 'The service is temporarily unavailable. Please try again in a moment.';
+            default:
+                // Any other status (including 500)
+                return defaultMsg;
+        }
+    }
     static ɵfac = function CaseFileViewFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], standalone: false, decls: 3, vars: 3, consts: [[4, "ngIf"], ["class", "govuk-grid-column-two-thirds", 4, "ngIf"], ["id", "case-file-view-field-errors", "data-module", "govuk-error-summary", 1, "govuk-error-summary", "govuk-!-margin-bottom-4"], ["role", "alert"], [1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["type", "button", 1, "govuk-js-link"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [1, "document-tree-container__tree", 3, "clickedDocument", "moveDocument", "categoriesAndDocuments", "allowMoving"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType", "enableAnnotations", "enableRedactions", "height", "caseId", "multimediaPlayerEnabled", "enableICP"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseFileViewFieldComponent_ng_container_0_Template, 8, 1, "ng-container", 0)(1, CaseFileViewFieldComponent_div_1_Template, 5, 0, "div", 1)(2, CaseFileViewFieldComponent_div_2_Template, 9, 3, "div", 0);
@@ -14691,7 +14718,7 @@ class CaseFileViewFieldComponent {
         type: Component,
         args: [{ selector: 'ccd-case-file-view-field', standalone: false, template: "<ng-container *ngIf=\"errorMessages?.length\">\n  <div\n    id=\"case-file-view-field-errors\"\n    class=\"govuk-error-summary govuk-!-margin-bottom-4\"\n    data-module=\"govuk-error-summary\"\n  >\n    <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title\">There is a problem</h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li *ngFor=\"let errorMessage of errorMessages\">\n            <button type=\"button\" class=\"govuk-js-link\">{{ errorMessage }}</button>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div\n  *ngIf=\"getCategoriesAndDocumentsError\"\n  class=\"govuk-grid-column-two-thirds\"\n>\n  <h1 class=\"govuk-heading-xl\">Sorry, there is a problem with the service</h1>\n  <p class=\"govuk-body\">Try again later.</p>\n</div>\n<div *ngIf=\"!getCategoriesAndDocumentsError\">\n  <h2 class=\"govuk-heading-l\">Case file</h2>\n  <div class=\"govuk-form-group\" id=\"case-file-view\">\n    <!-- Document tree -->\n    <div class=\"document-tree-container\">\n      <ccd-case-file-view-folder \n          class=\"document-tree-container__tree\"\n          [categoriesAndDocuments]=\"categoriesAndDocuments$\"\n          (clickedDocument)=\"setMediaViewerFile($event); resetErrorMessages()\" \n          (moveDocument)=\"moveDocument($event)\"\n          [allowMoving]=\"allowMoving\">\n      </ccd-case-file-view-folder>\n    </div>\n    <!-- Slider -->\n    <div class=\"slider\"></div>\n    <!-- Media viewer -->\n    <div class=\"media-viewer-container\">\n      <ng-container *ngIf=\"currentDocument\">\n        <mv-media-viewer\n          [url]=\"currentDocument.document_binary_url\"\n          [downloadFileName]=\"currentDocument.document_filename\"\n          [showToolbar]=\"true\"\n          [contentType]=\"currentDocument.content_type\"\n          [enableAnnotations]=\"true\"\n          [enableRedactions]=\"true\"\n          [height]=\"'94.5vh'\"\n          [caseId]=\"caseId\"\n          [multimediaPlayerEnabled]=\"true\"\n          [enableICP]=\"isIcpEnabled()\"\n        >\n        </mv-media-viewer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: ["#case-file-view{display:flex;border:2px solid #C9C9C9;height:100vh;position:relative}#case-file-view .document-tree-container{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view .slider{width:.2%;background-color:#6b6b6b}#case-file-view .slider:hover,#case-file-view .slider:focus{cursor:col-resize}#case-file-view .media-viewer-container{background-color:#dee0e2;flex:1 1 0;overflow:hidden}\n"] }]
     }], () => [{ type: i0.ElementRef }, { type: i1$1.ActivatedRoute }, { type: CaseFileViewService }, { type: DocumentManagementService }, { type: LoadingService }, { type: SessionStorageService }, { type: WindowService }, { type: CaseNotifier }, { type: AbstractAppConfig }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 19 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 20 }); })();
 
 const PVP_FLAG_CODE = 'PF0021';
 const PVP_DISPLAY_TEXT = 'POTENTIALLY VIOLENT PERSON';
@@ -16130,7 +16157,7 @@ class RemoveDialogComponent {
         this.result = 'Cancel';
         this.matDialogRef.close(this.result);
     }
-    static ɵfac = function RemoveDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RemoveDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialogRef)); };
+    static ɵfac = function RemoveDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RemoveDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialogRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RemoveDialogComponent, selectors: [["ccd-remove-dialog"]], standalone: false, decls: 19, vars: 12, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Remove", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Cancel", 1, "button", "button-secondary", 3, "click"]], template: function RemoveDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2", 1);
             i0.ɵɵlistener("click", function RemoveDialogComponent_Template_h2_click_2_listener() { return ctx.cancel(); });
@@ -16168,7 +16195,7 @@ class RemoveDialogComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RemoveDialogComponent, [{
         type: Component,
         args: [{ selector: 'ccd-remove-dialog', standalone: false, template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to remove the item?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">\n      {{'You are about to permanently remove an item, are you sure you want to remove this item?' | rpxTranslate}}\n    </span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Remove\" class=\"button action-button\" (click)=\"remove()\">{{'Remove' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media(prefers-color-scheme:dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
-    }], () => [{ type: i1$3.MatDialogRef }], null); })();
+    }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RemoveDialogComponent, { className: "RemoveDialogComponent", filePath: "lib/shared/components/dialogs/remove-dialog/remove-dialog.component.ts", lineNumber: 10 }); })();
 
 const _c0$U = ["collectionItem"];
@@ -16590,7 +16617,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
         const notSimple = ['Collection', 'Complex'];
         return notSimple.indexOf(caseField.field_type.collection_field_type.type) < 0;
     }
-    static ɵfac = function WriteCollectionFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteCollectionFieldComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialog), i0.ɵɵdirectiveInject(ProfileNotifier), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function WriteCollectionFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteCollectionFieldComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(ProfileNotifier), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteCollectionFieldComponent, selectors: [["ccd-write-collection-field"]], viewQuery: function WriteCollectionFieldComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$U, 5);
         } if (rf & 2) {
@@ -16625,7 +16652,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCollectionFieldComponent, [{
         type: Component,
         args: [{ selector: 'ccd-write-collection-field', standalone: false, template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"!caseField.hidden\">\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\">\n      <ccd-markdown [content]=\"caseField.hint_text | rpxTranslate\"></ccd-markdown>\n      </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      <fieldset class=\"govuk-fieldset\">\n        <div *ngFor=\"let item of collItems; let i = index; trackBy: trackByCollectionItem\" #collectionItem\n            [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n          <div class=\"collection-title\">\n            <div class=\"float-left\">\n              <legend class=\"govuk-fieldset__legend\">\n                <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n              </legend>\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      </fieldset>\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"] }]
-    }], () => [{ type: i1$3.MatDialog }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }], { caseFields: [{
+    }], () => [{ type: i1$3.MatLegacyDialog }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }], { caseFields: [{
             type: Input
         }], items: [{
             type: ViewChildren,
@@ -16855,7 +16882,7 @@ class DocumentDialogComponent {
         this.result = 'Cancel';
         this.matDialogRef.close(this.result);
     }
-    static ɵfac = function DocumentDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DocumentDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialogRef)); };
+    static ɵfac = function DocumentDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DocumentDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialogRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DocumentDialogComponent, selectors: [["ccd-document-dialog"]], standalone: false, decls: 19, vars: 12, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Replace", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Cancel", 1, "button", "button-secondary", 3, "click"]], template: function DocumentDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2", 1);
             i0.ɵɵlistener("click", function DocumentDialogComponent_Template_h2_click_2_listener() { return ctx.cancel(); });
@@ -16893,7 +16920,7 @@ class DocumentDialogComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DocumentDialogComponent, [{
         type: Component,
         args: [{ selector: 'ccd-document-dialog', standalone: false, template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to replace the existing file?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">{{'You are about to delete the original file uploaded. Are you sure you want to proceed?' | rpxTranslate}}</span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Replace\" class=\"button action-button\" (click)=\"replace()\">{{'Replace file' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media(prefers-color-scheme:dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
-    }], () => [{ type: i1$3.MatDialogRef }], null); })();
+    }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DocumentDialogComponent, { className: "DocumentDialogComponent", filePath: "lib/shared/components/dialogs/document-dialog/document-dialog.component.ts", lineNumber: 10 }); })();
 
 class FileUploadStateService {
@@ -17288,7 +17315,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         this.valid = false;
         this.fileUploadStateService.setUploadInProgress(false);
     }
-    static ɵfac = function WriteDocumentFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteDocumentFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService), i0.ɵɵdirectiveInject(SessionStorageService)); };
+    static ɵfac = function WriteDocumentFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteDocumentFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService), i0.ɵɵdirectiveInject(SessionStorageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$T, 5);
         } if (rf & 2) {
@@ -17349,7 +17376,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDocumentFieldComponent, [{
         type: Component,
         args: [{ selector: 'ccd-write-document-field', standalone: false, template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">\n    <markdown [data]=\"caseField.hint_text | rpxTranslate\"></markdown>\n  </span>\n  <span class=\"error-message\"\n        role=\"alert\"\n        tabindex=\"0\"\n        [hidden]=\"!(fileUploadMessages && !valid)\">\n    {{ fileUploadMessages | rpxTranslate }}\n  </span>\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field *ngIf=\"caseField\" [caseField]=\"caseField\"></ccd-read-document-field>\n  </div>\n\n  <div style='position:relative'>\n    <div [id]=\"createElementId('fileInputWrapper')\" (click)=\"fileSelectEvent()\" (keyup)=\"fileSelectEvent()\"></div>\n    <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"file\" (keydown.Tab)=\"fileValidationsOnTab()\" (change)=\"fileChangeEvent($event, caseField.field_type.regular_expression)\"\n           accept=\"{{caseField.field_type.regular_expression}}\" #fileInput/>\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button class=\"button button-secondary\" type=\"button\" aria-label=\"Cancel upload\" (click)=\"cancelUpload()\" [disabled]=\"!isUploadInProgress()\">{{'Cancel upload' | rpxTranslate}}</button>\n</div>\n" }]
-    }], () => [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1$3.MatDialog }, { type: FileUploadStateService }, { type: JurisdictionService }, { type: SessionStorageService }], { fileInput: [{
+    }], () => [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: FileUploadStateService }, { type: JurisdictionService }, { type: SessionStorageService }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
         }] }); })();
@@ -18632,7 +18659,7 @@ class WriteJudicialUserFieldComponent extends WriteComplexFieldComponent {
             i0.ɵɵproperty("ngIf", ctx.noResults && ctx.searchTerm && ctx.searchTerm.length > ctx.minSearchCharacters && ctx.showAutocomplete);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.invalidSearchTerm);
-        } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormControlDirective, i3.FormGroupDirective, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger, i4.AsyncPipe, FieldLabelPipe, FirstErrorPipe], styles: [".mat-option[_ngcontent-%COMP%]:hover{background:#2596be}.mat-option.select-option[_ngcontent-%COMP%]:hover{background:#1d70b8;color:#fff}.hide-autocomplete[_ngcontent-%COMP%]{display:none}"] });
+        } }, dependencies: [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormControlDirective, i3.FormGroupDirective, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption, i4.AsyncPipe, FieldLabelPipe, FirstErrorPipe], styles: [".mat-option[_ngcontent-%COMP%]:hover{background:#2596be}.mat-option.select-option[_ngcontent-%COMP%]:hover{background:#1d70b8;color:#fff}.hide-autocomplete[_ngcontent-%COMP%]{display:none}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteJudicialUserFieldComponent, [{
         type: Component,
@@ -26408,11 +26435,11 @@ class FieldReadLabelComponent extends AbstractFieldReadComponent {
             i0.ɵɵproperty("hidden", ctx.caseField.hidden);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.withLabel && !ctx.isLabel() && (!ctx.isComplex() || ctx.isCaseLink()))("ngIfElse", caseFieldValue_r2);
-        } }, dependencies: [i4.NgIf, i4.NgTemplateOutlet, i1.RpxTranslatePipe], styles: [".form   [_nghost-%COMP%]  .grey-bar>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}.case-field[_ngcontent-%COMP%]:after{content:\"\";display:block;clear:both}.case-field[_ngcontent-%COMP%]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:15px}@media(min-width:641px){.case-field[_ngcontent-%COMP%]{margin-bottom:30px}}.case-field[_ngcontent-%COMP%]   .case-field__label[_ngcontent-%COMP%]{display:block;color:#0b0c0c;padding-bottom:2px;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field[_ngcontent-%COMP%]   .case-field__label[_ngcontent-%COMP%]{font-size:19px;line-height:1.3157894737}}.case-field[_ngcontent-%COMP%]   .case-field__value[_ngcontent-%COMP%]{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field[_ngcontent-%COMP%]   .case-field__value[_ngcontent-%COMP%]{font-size:19px;line-height:1.3157894737}}"] });
+        } }, dependencies: [i4.NgIf, i4.NgTemplateOutlet, i1.RpxTranslatePipe], styles: [".case-field[_ngcontent-%COMP%]:after{content:\"\";display:block;clear:both}.case-field[_ngcontent-%COMP%]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:15px}@media(min-width:641px){.case-field[_ngcontent-%COMP%]{margin-bottom:30px}}.case-field[_ngcontent-%COMP%]   .case-field__label[_ngcontent-%COMP%]{display:block;color:#0b0c0c;padding-bottom:2px;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field[_ngcontent-%COMP%]   .case-field__label[_ngcontent-%COMP%]{font-size:19px;line-height:1.3157894737}}.case-field[_ngcontent-%COMP%]   .case-field__value[_ngcontent-%COMP%]{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field[_ngcontent-%COMP%]   .case-field__value[_ngcontent-%COMP%]{font-size:19px;line-height:1.3157894737}}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FieldReadLabelComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-field-read-label', standalone: false, template: "<div [hidden]=\"caseField.hidden\" [class.grey-bar]=\"canHaveGreyBar && !caseField.hiddenCannotChange\">\n  <dl class=\"case-field\" *ngIf=\"withLabel && !isLabel() && (!isComplex() || isCaseLink()); else caseFieldValue\">\n    <dt class=\"case-field__label\">{{caseField.label | rpxTranslate}}</dt>\n    <dd class=\"case-field__value\">\n      <ng-container *ngTemplateOutlet=\"caseFieldValue\"></ng-container>\n    </dd>\n  </dl>\n  <ng-template #caseFieldValue>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n", styles: [".form :host::ng-deep .grey-bar>*>.form-group,.form :host::ng-deep .grey-bar>*>*>.form-group,.form :host::ng-deep .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form :host::ng-deep .grey-bar>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form :host::ng-deep .grey-bar>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field input:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field select:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}.case-field:after{content:\"\";display:block;clear:both}.case-field{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:15px}@media(min-width:641px){.case-field{margin-bottom:30px}}.case-field .case-field__label{display:block;color:#0b0c0c;padding-bottom:2px;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field .case-field__label{font-size:19px;line-height:1.3157894737}}.case-field .case-field__value{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field .case-field__value{font-size:19px;line-height:1.3157894737}}\n"] }]
+        args: [{ selector: 'ccd-field-read-label', standalone: false, template: "<div [hidden]=\"caseField.hidden\" [class.grey-bar]=\"canHaveGreyBar && !caseField.hiddenCannotChange\">\n  <dl class=\"case-field\" *ngIf=\"withLabel && !isLabel() && (!isComplex() || isCaseLink()); else caseFieldValue\">\n    <dt class=\"case-field__label\">{{caseField.label | rpxTranslate}}</dt>\n    <dd class=\"case-field__value\">\n      <ng-container *ngTemplateOutlet=\"caseFieldValue\"></ng-container>\n    </dd>\n  </dl>\n  <ng-template #caseFieldValue>\n    <ng-content></ng-content>\n  </ng-template>\n</div>\n", styles: [".case-field:after{content:\"\";display:block;clear:both}.case-field{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:15px}@media(min-width:641px){.case-field{margin-bottom:30px}}.case-field .case-field__label{display:block;color:#0b0c0c;padding-bottom:2px;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field .case-field__label{font-size:19px;line-height:1.3157894737}}.case-field .case-field__value{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:16px;line-height:1.25}@media(min-width:641px){.case-field .case-field__value{font-size:19px;line-height:1.3157894737}}.form :host::ng-deep .grey-bar>*>.form-group,.form :host::ng-deep .grey-bar>*>*>.form-group,.form :host::ng-deep .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form :host::ng-deep .grey-bar>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form :host::ng-deep .grey-bar>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field input:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field select:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}\n"] }]
     }], null, { withLabel: [{
             type: Input
         }] }); })();
@@ -26530,7 +26557,7 @@ class CaseFileViewFolderSelectorComponent {
         }
         return null;
     }
-    static ɵfac = function CaseFileViewFolderSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFolderSelectorComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+    static ɵfac = function CaseFileViewFolderSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFolderSelectorComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialogRef), i0.ɵɵdirectiveInject(MAT_LEGACY_DIALOG_DATA)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderSelectorComponent, selectors: [["xui-case-file-view-folder-selector"]], standalone: false, decls: 14, vars: 2, consts: [["folder", ""], ["tabindex", "0", "aria-label", "close", 1, "close", 3, "click", "keyup"], [1, "govuk-heading-l"], [1, "folders", "govuk-radios", "govuk-radios--conditional"], [4, "ngFor", "ngForOf"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"], ["href", "#", 1, "cancel", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "folder", "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "click", "keyup", "name", "id"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["src", "/assets/images/folder.png", "alt", "Folder icon", 1, "iconImg"]], template: function CaseFileViewFolderSelectorComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "span", 1);
@@ -26564,9 +26591,9 @@ class CaseFileViewFolderSelectorComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderSelectorComponent, [{
         type: Component,
         args: [{ selector: 'xui-case-file-view-folder-selector', encapsulation: ViewEncapsulation.None, standalone: false, template: "<span tabindex=\"0\" aria-label=\"close\" class=\"close\" (click)=\"cancel()\" (keyup)=\"$event.key === 'Enter' ? cancel() : null\"></span>\n<h2 class=\"govuk-heading-l\">Move File</h2>\n<p>Where do you want to move \"{{ data.document.document_filename }}\" file?</p>\n<div class=\"folders govuk-radios govuk-radios--conditional\">\n    <ng-container *ngFor=\"let cat of currentCategories\">\n        <ng-container *ngTemplateOutlet=\"folder;context:{cat:cat,level:1}\"></ng-container>\n    </ng-container>\n</div>\n<div class=\"govuk-button-group\">\n    <button class=\"button button-primary\" type=\"button\" (click)=\"save()\">Save</button>\n    <a (click)=\"cancel(); $event.preventDefault()\" class=\"cancel\" href=\"#\">Cancel</a>\n</div>\n\n<ng-template #folder let-cat=\"cat\" let-level=\"level\">\n    <div class=\"folder govuk-radios__item\">\n        <input class=\"govuk-radios__input\" type=\"radio\" name=\"level-{{level}}\" [id]=\"cat.category_id\" (click)=\"handleChange($event)\" (keyup)=\"$event.key === 'Enter' ? handleChange($event) : null\" />\n        <label class=\"govuk-label govuk-radios__label\" [for]=\"cat.category_id\">\n            <img class=\"iconImg\" src=\"/assets/images/folder.png\" alt=\"Folder icon\" />\n            {{ cat.category_name }}\n        </label>\n        <ng-container *ngFor=\"let subcat of cat.sub_categories\">\n            <ng-container *ngTemplateOutlet=\"folder;context:{cat:subcat,level:level+1}\"></ng-container>\n        </ng-container>\n    </div>\n</ng-template>", styles: [":host{position:relative;display:block}.folders{margin-bottom:20px}.folder{display:none;border-top:1px solid #CCC;margin:0 0 -1px}.folder:last-child{border-bottom:1px solid #CCC}.folders>.folder{display:block}input:checked~.folder{display:block}.iconImg{position:relative;display:inline-block;height:28px}.folder>.folder{margin-left:20px}.folder label:before{top:3px}.folder label:after{top:13px}p{font-weight:700}button{margin-right:20px}.close{float:right;width:30px;height:30px;background:url(/assets/img/x.PNG) no-repeat center center;cursor:pointer}.cancel{cursor:pointer}.cdk-overlay-pane{overflow:auto;background:#fff}.cdk-overlay-pane::-webkit-scrollbar{width:7px}.cdk-overlay-pane::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.cdk-overlay-pane::-webkit-scrollbar-button{display:none}.cdk-overlay-pane::-webkit-scrollbar-track-piece{background:#eee}.cdk-overlay-pane::-webkit-scrollbar-thumb{background:#ccc}\n"] }]
-    }], () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+    }], () => [{ type: i1$3.MatLegacyDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
-                args: [MAT_DIALOG_DATA]
+                args: [MAT_LEGACY_DIALOG_DATA]
             }] }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFolderSelectorComponent, { className: "CaseFileViewFolderSelectorComponent", filePath: "lib/shared/components/palette/case-file-view/components/case-file-view-folder-selector/case-file-view-folder-selector.component.ts", lineNumber: 13 }); })();
 
@@ -27300,7 +27327,7 @@ class CaseFileViewFolderComponent {
         a.click();
         a.remove();
     }
-    static ɵfac = function CaseFileViewFolderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatDialog)); };
+    static ɵfac = function CaseFileViewFolderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, standalone: false, decls: 12, vars: 3, consts: [["role", "search", 1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["for", "document-search", 1, "govuk-visually-hidden"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], ["id", "document-folders-header-title", "aria-hidden", "true", 1, "document-folders-header__title"], ["role", "toolbar", "aria-label", "Document list actions", "aria-labelledby", "document-folders-header-title", 1, "document-folders-header__flex"], [3, "expandAll", "collapseAll"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], ["role", "tree", "aria-label", "Case documents", 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"], ["type", "button", "role", "treeitem", "aria-expanded", "false", 1, "node", "case-file__node", 3, "click"], ["disabled", "", "aria-hidden", "true", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", "aria-hidden", "true", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options", "case-file__action"], [3, "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction", "allowMoving"], [1, "document-tree-container__node", "document-tree-container__folder"], ["type", "button", "cdkTreeNodeToggle", "", "role", "treeitem", 1, "node"], ["aria-hidden", "true", 1, "node__icon"], ["alt", "Folder icon", "aria-hidden", "true", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["role", "group"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "label", 2);
             i0.ɵɵtext(3, " Search by document name ");
@@ -27329,7 +27356,7 @@ class CaseFileViewFolderComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-file-view-folder', standalone: false, template: "<div class=\"document-filter-container\" role=\"search\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <label\n      class=\"govuk-visually-hidden\"\n      for=\"document-search\">\n      Search by document name\n    </label>\n    <input\n      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\" id=\"document-folders-header-title\" aria-hidden=\"true\">\n    Documents ({{ documentCount }})\n  </div>\n  <div\n    class=\"document-folders-header__flex\"\n    role=\"toolbar\"\n    aria-label=\"Document list actions\"\n    aria-labelledby=\"document-folders-header-title\">\n    <ccd-case-file-view-folder-toggle\n      (expandAll)=\"expandAll($event)\"\n      (collapseAll)=\"collapseAll($event)\">\n    </ccd-case-file-view-folder-toggle>\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\n      [dataSource]=\"nestedDataSource\"\n      [treeControl]=\"nestedTreeControl\"\n      role=\"tree\"\n      aria-label=\"Case documents\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button\n          type=\"button\"\n          class=\"node case-file__node\"\n          role=\"treeitem\"\n          aria-expanded=\"false\"\n          [attr.aria-label]=\"node.name\"\n          (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n          [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled aria-hidden=\"true\">\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\"\n              class=\"node__iconImg\"\n              alt=\"Document icon\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <span class=\"node__name node-name-document\" [attr.title]=\"node.name\">\n            {{ node.name }}\n            <br />\n            <span class=\"node__document-upload-timestamp\">{{\n              node.upload_timestamp | ccdDate: \"local\":\"dd MMM yyyy HH:mm\"\n              }}</span>\n          </span>\n        </button>\n        <div class=\"node__document-options case-file__action\">\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      </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\n          type=\"button\"\n          class=\"node\"\n          cdkTreeNodeToggle\n          role=\"treeitem\"\n          [attr.aria-expanded]=\"nestedTreeControl.isExpanded(node)\"\n          [attr.aria-label]=\"node.name + ' folder, ' + node.childDocumentCount + ' documents'\">\n          <div class=\"node__icon\" aria-hidden=\"true\">\n            <img class=\"node__iconImg\"\n                [src]=\"nestedTreeControl.isExpanded(node)\n                  ? '/assets/images/folder-open.png'\n                  : '/assets/images/folder.png'\n              \"\n              alt=\"Folder icon\"\n              aria-hidden=\"true\" />\n            <span class=\"node__count\">{{ node.childDocumentCount }}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{ node.name }}</span>\n        </button>\n        <div\n          role=\"group\"\n          [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-folders-header__flex{display:flex;flex-direction:row}.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}.node.case-file__node{width:80%;float:left}.node__document-options.case-file__action{width:15%;float:left;box-sizing:border-box;padding:12px}\n"] }]
-    }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatDialog }], { categoriesAndDocuments: [{
+    }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }], { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
             type: Input
@@ -31431,7 +31458,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
             this.dateControl.setValue('');
         }
     }
-    static ɵfac = function DatetimePickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatetimePickerComponent)(i0.ɵɵdirectiveInject(FormatTranslatorService), i0.ɵɵdirectiveInject(MAT_DATE_FORMATS)); };
+    static ɵfac = function DatetimePickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatetimePickerComponent)(i0.ɵɵdirectiveInject(FormatTranslatorService), i0.ɵɵdirectiveInject(NGX_MAT_DATE_FORMATS)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DatetimePickerComponent, selectors: [["ccd-datetime-picker"]], viewQuery: function DatetimePickerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$i, 5);
             i0.ɵɵviewQuery(_c1$6, 5);
@@ -31440,13 +31467,13 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.datetimePicker = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
         } }, inputs: { dateControl: "dateControl" }, standalone: false, features: [i0.ɵɵProvidersFeature([
-                { provide: MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
+                { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
                 {
-                    provide: DateAdapter,
-                    useClass: MomentDateAdapter,
-                    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
+                    provide: NgxMatDateAdapter,
+                    useClass: NgxMatMomentAdapter,
+                    deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
                 },
-                { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+                { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
             ]), i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 27, consts: [["input", ""], ["picker", ""], [1, "govuk-form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "datepicker-container"], ["ng-model-options", "{timezone:'utc'}", 1, "govuk-input", 3, "focusin", "focusout", "dateChange", "min", "max", "formControl", "ngxMatDatetimePicker"], ["matSuffix", "", "id", "pickerOpener", 3, "for"], [3, "yearSelected", "monthSelected", "opened", "color", "touchUi", "hideTime", "startView", "stepHour", "stepSecond", "stepMinute", "showSeconds", "showSpinners", "disableMinute", "enableMeridian"], ["mat-raised-button", "", "color", "primary", "ngxMatDatepickerApply", ""], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function DatetimePickerComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "fieldset")(2, "legend");
@@ -31481,22 +31508,22 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
             i0.ɵɵproperty("for", picker_r3);
             i0.ɵɵadvance();
             i0.ɵɵproperty("color", ctx.color)("touchUi", ctx.touchUi)("hideTime", ctx.hideTime)("startView", ctx.startView)("stepHour", ctx.stepHour)("stepSecond", ctx.stepSecond)("stepMinute", ctx.stepMinute)("showSeconds", ctx.showSeconds)("showSpinners", ctx.showSpinners)("disableMinute", ctx.disableMinute)("enableMeridian", ctx.enableMeridian);
-        } }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4$1.NgxMatDatepickerActions, i4$1.NgxMatDatepickerApply, i4$1.NgxMatDatepickerInput, i4$1.NgxMatDatetimepicker, i5.MatSuffix, i6$2.MatDatepickerToggle, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px;background:#fff}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;column-width:20px;text-transform:uppercase}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{padding-top:0;justify-content:flex-start;padding-left:15px}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.526315em 1em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:auto;min-width:96px;white-space:nowrap;overflow:visible;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:16px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.526315em 1em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:auto;min-width:96px;white-space:nowrap;overflow:visible;cursor:pointer}\n"], encapsulation: 2 });
+        } }, dependencies: [i4.NgClass, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.FormControlDirective, i4$1.NgxMatDatetimepicker, i4$1.NgxMatDatepickerInput, i4$1.NgxMatDatepickerActions, i4$1.NgxMatDatepickerApply, i5.MatLegacySuffix, i6$2.MatDatepickerToggle, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px;background:#fff}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;column-width:20px;text-transform:uppercase}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{padding-top:0;justify-content:flex-start;padding-left:15px}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.526315em 1em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:auto;min-width:96px;white-space:nowrap;overflow:visible;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:16px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.526315em 1em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:auto;min-width:96px;white-space:nowrap;overflow:visible;cursor:pointer}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimePickerComponent, [{
         type: Component,
         args: [{ selector: 'ccd-datetime-picker', encapsulation: ViewEncapsulation.None, providers: [
-                    { provide: MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
+                    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
                     {
-                        provide: DateAdapter,
-                        useClass: MomentDateAdapter,
-                        deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
+                        provide: NgxMatDateAdapter,
+                        useClass: NgxMatMomentAdapter,
+                        deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
                     },
-                    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+                    { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
                 ], standalone: false, template: "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)\">{{(dateControl.errors | ccdFirstError:caseField.label)}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && minError\">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && maxError\">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             attr.aria-label=\"Please enter a date and time in the format | rpxTranslate {{dateTimeEntryFormat}}\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"dateControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (focusout)=\"focusOut()\"\n             (dateChange)=\"valueChanged()\"\n             ng-model-options=\"{timezone:'utc'}\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n        <ngx-mat-datepicker-actions>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>Confirm</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n", styles: [".datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px;background:#fff}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;column-width:20px;text-transform:uppercase}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{padding-top:0;justify-content:flex-start;padding-left:15px}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.526315em 1em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:auto;min-width:96px;white-space:nowrap;overflow:visible;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:16px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.526315em 1em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:auto;min-width:96px;white-space:nowrap;overflow:visible;cursor:pointer}\n"] }]
     }], () => [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
                 type: Inject,
-                args: [MAT_DATE_FORMATS]
+                args: [NGX_MAT_DATE_FORMATS]
             }] }], { datetimePicker: [{
             type: ViewChild,
             args: ['picker', { static: false }]
@@ -31506,7 +31533,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
         }], dateControl: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatetimePickerComponent, { className: "DatetimePickerComponent", filePath: "lib/shared/components/palette/datetime-picker/datetime-picker.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DatetimePickerComponent, { className: "DatetimePickerComponent", filePath: "lib/shared/components/palette/datetime-picker/datetime-picker.component.ts", lineNumber: 36 }); })();
 
 class DocumentUrlPipe {
     appConfig;
@@ -33101,7 +33128,7 @@ class PaletteModule {
             QualifyingQuestionService,
             QueryManagementUtils,
             QueryManagementService,
-            { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
+            { provide: MAT_LEGACY_DATE_LOCALE, useValue: 'en-GB' }
         ], imports: [CommonModule,
             RouterModule,
             FormsModule,
@@ -33118,23 +33145,27 @@ class PaletteModule {
             LabelSubstitutorModule,
             TranslatedMarkdownModule,
             MarkdownModule.forChild(),
-            NgxMatDatepickerActions,
-            NgxMatDatetimepicker,
-            MatFormFieldModule,
-            MatInputModule,
+            NgxMatDatetimePickerModule,
+            NgxMatTimepickerModule,
+            NgxMatNativeDateModule,
+            MatLegacyFormFieldModule,
+            MatLegacyInputModule,
             MatDatepickerModule,
-            MatAutocompleteModule,
+            MatLegacyAutocompleteModule,
             CdkTreeModule,
             OverlayModule,
             PaymentLibModule,
             RpxTranslationModule.forChild(),
             CdkTreeModule,
             OverlayModule,
-            MatDialogModule,
+            MatLegacyDialogModule,
             MediaViewerModule,
             LoadingModule,
             MarkdownComponentModule,
-            ErrorsModule, TabsModule,
+            ErrorsModule, NgxMatDatetimePickerModule,
+            NgxMatNativeDateModule,
+            NgxMatTimepickerModule,
+            TabsModule,
             PaletteUtilsModule,
             PipesModule,
             MarkdownComponentModule] });
@@ -33159,21 +33190,20 @@ class PaletteModule {
                     LabelSubstitutorModule,
                     TranslatedMarkdownModule,
                     MarkdownModule.forChild(),
-                    NgxMatDatepickerActions,
-                    NgxMatDatepickerApply,
-                    NgxMatDatepickerInput,
-                    NgxMatDatetimepicker,
-                    MatFormFieldModule,
-                    MatInputModule,
+                    NgxMatDatetimePickerModule,
+                    NgxMatTimepickerModule,
+                    NgxMatNativeDateModule,
+                    MatLegacyFormFieldModule,
+                    MatLegacyInputModule,
                     MatDatepickerModule,
-                    MatAutocompleteModule,
+                    MatLegacyAutocompleteModule,
                     CdkTreeModule,
                     OverlayModule,
                     PaymentLibModule,
                     RpxTranslationModule.forChild(),
                     CdkTreeModule,
                     OverlayModule,
-                    MatDialogModule,
+                    MatLegacyDialogModule,
                     MediaViewerModule,
                     LoadingModule,
                     MarkdownComponentModule,
@@ -33192,10 +33222,9 @@ class PaletteModule {
                     ...PALETTE_COMPONENTS
                 ],
                 exports: [
-                    NgxMatDatepickerActions,
-                    NgxMatDatepickerApply,
-                    NgxMatDatepickerInput,
-                    NgxMatDatetimepicker,
+                    NgxMatDatetimePickerModule,
+                    NgxMatNativeDateModule,
+                    NgxMatTimepickerModule,
                     TabsModule,
                     PaletteUtilsModule,
                     PipesModule,
@@ -33218,7 +33247,7 @@ class PaletteModule {
                     QualifyingQuestionService,
                     QueryManagementUtils,
                     QueryManagementService,
-                    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
+                    { provide: MAT_LEGACY_DATE_LOCALE, useValue: 'en-GB' }
                 ],
                 schemas: [CUSTOM_ELEMENTS_SCHEMA]
             }]
@@ -33370,26 +33399,24 @@ class PaletteModule {
         FormModule,
         TabsModule,
         LabelSubstitutorModule,
-        TranslatedMarkdownModule, i1$4.MarkdownModule, NgxMatDatepickerActions,
-        NgxMatDatepickerApply,
-        NgxMatDatepickerInput,
-        NgxMatDatetimepicker,
-        MatFormFieldModule,
-        MatInputModule,
+        TranslatedMarkdownModule, i1$4.MarkdownModule, NgxMatDatetimePickerModule,
+        NgxMatTimepickerModule,
+        NgxMatNativeDateModule,
+        MatLegacyFormFieldModule,
+        MatLegacyInputModule,
         MatDatepickerModule,
-        MatAutocompleteModule,
+        MatLegacyAutocompleteModule,
         CdkTreeModule,
         OverlayModule,
         PaymentLibModule, i1.RpxTranslationModule, CdkTreeModule,
         OverlayModule,
-        MatDialogModule,
+        MatLegacyDialogModule,
         MediaViewerModule,
         LoadingModule,
         MarkdownComponentModule,
-        ErrorsModule], exports: [NgxMatDatepickerActions,
-        NgxMatDatepickerApply,
-        NgxMatDatepickerInput,
-        NgxMatDatetimepicker,
+        ErrorsModule], exports: [NgxMatDatetimePickerModule,
+        NgxMatNativeDateModule,
+        NgxMatTimepickerModule,
         TabsModule,
         PaletteUtilsModule,
         PipesModule,
@@ -33576,7 +33603,7 @@ i0.ɵɵsetComponentScope(
 // Components for case flags
 CaseFlagTableComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf]; }, function () { return [i4.DatePipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
 i0.ɵɵsetComponentScope(SelectFlagTypeComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName]; }, function () { return [i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
-i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i14.MatInput, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger]; }, function () { return [i4.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
+i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i14.MatLegacyInput, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption]; }, function () { return [i4.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
     LanguageInterpreterDisplayPipe]; });
 i0.ɵɵsetComponentScope(ManageCaseFlagsComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.NgControlStatusGroup, i3.FormGroupDirective]; }, function () { return [i1.RpxTranslatePipe, ManageCaseFlagsLabelDisplayPipe]; });
 i0.ɵɵsetComponentScope(UpdateFlagComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName]; }, function () { return [i1.RpxTranslatePipe, UpdateFlagTitleDisplayPipe]; });
@@ -37367,7 +37394,7 @@ class DeleteOrCancelDialogComponent {
         this.result = 'Cancel';
         this.matDialogRef.close(this.result);
     }
-    static ɵfac = function DeleteOrCancelDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DeleteOrCancelDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialogRef)); };
+    static ɵfac = function DeleteOrCancelDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DeleteOrCancelDialogComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialogRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DeleteOrCancelDialogComponent, selectors: [["ccd-delete-or-cancel-dialog"]], standalone: false, decls: 19, vars: 12, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Delete", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Cancel", 1, "button", "button-secondary", 3, "click"]], template: function DeleteOrCancelDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "h2", 1);
             i0.ɵɵlistener("click", function DeleteOrCancelDialogComponent_Template_h2_click_2_listener() { return ctx.cancel(); });
@@ -37405,7 +37432,7 @@ class DeleteOrCancelDialogComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeleteOrCancelDialogComponent, [{
         type: Component,
         args: [{ selector: 'ccd-delete-or-cancel-dialog', standalone: false, template: "<div>\n    <div class=\"dialog-header\">\n      <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n    </div>\n    <div>\n      <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to delete this draft?' | rpxTranslate}}</h2>\n    </div>\n    <div class=\"dialog-info\">\n      <span class=\"text-info\">{{'You are about to delete this draft. Are you sure you want to proceed?' | rpxTranslate}}</span>\n    </div>\n    <div>\n      <button type=\"button\" title=\"Delete\" class=\"button action-button\" (click)=\"delete()\">{{'Delete draft' | rpxTranslate}}</button>\n      <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n    </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media(prefers-color-scheme:dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
-    }], () => [{ type: i1$3.MatDialogRef }], null); })();
+    }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DeleteOrCancelDialogComponent, { className: "DeleteOrCancelDialogComponent", filePath: "lib/shared/components/dialogs/delete-or-cancel-dialog/delete-or-cancel-dialog.component.ts", lineNumber: 10 }); })();
 
 class DialogsModule {
@@ -38152,7 +38179,7 @@ class CaseFullAccessViewComponent {
         this.errorNotifierService.announceError(null);
         this.alertService.clear();
     }
-    static ɵfac = function CaseFullAccessViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFullAccessViewComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(NavigationNotifierService), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(ActivityPollingService), i0.ɵɵdirectiveInject(i1$3.MatDialog), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(DraftService), i0.ɵɵdirectiveInject(ErrorNotifierService), i0.ɵɵdirectiveInject(ConvertHrefToRouterService), i0.ɵɵdirectiveInject(i4.Location), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(i1.RpxTranslatePipe), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(CaseFlagStateService), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵfac = function CaseFullAccessViewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFullAccessViewComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(NavigationNotifierService), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(ActivityPollingService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(DraftService), i0.ɵɵdirectiveInject(ErrorNotifierService), i0.ɵɵdirectiveInject(ConvertHrefToRouterService), i0.ɵɵdirectiveInject(i4.Location), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(i1.RpxTranslatePipe), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(CaseFlagStateService), i0.ɵɵdirectiveInject(i0.NgZone)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFullAccessViewComponent, selectors: [["ccd-case-full-access-view"]], viewQuery: function CaseFullAccessViewComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$c, 5);
         } if (rf & 2) {
@@ -38197,7 +38224,7 @@ class CaseFullAccessViewComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFullAccessViewComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-full-access-view', standalone: false, template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\"\n                       [eventId]=\"eventId\"\n                       (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\" [(selectedIndex)]=\"selectedTabIndex\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <ng-container *ngIf=\"tab.id === 'tasks'\">\n              <exui-tasks-ce></exui-tasks-ce>\n            </ng-container>\n            <ng-container *ngIf=\"tab.id === 'roles-and-access'\">\n              <exui-roles-and-access-ce></exui-roles-and-access-ce>\n            </ng-container>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\" [aria-label]=\"curIdx === 0 ? tab.label + ', Please use left and right arrow keys to navigate case tabs' : '' | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-label]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup?.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup?.controls['data']\" [caseFields]=\"caseFields\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\" [caseFields]=\"caseFields\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <ng-container *ngIf=\"tab.id === 'hearings'\">\n              <exui-case-hearings-ce></exui-case-hearings-ce>\n            </ng-container>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}.hide-table-capion{position:absolute;visibility:hidden}\n"] }]
-    }], () => [{ type: i0.NgZone }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1$3.MatDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i4.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }, { type: LoadingService }, { type: LinkedCasesService }, { type: CaseFlagStateService }, { type: i0.NgZone }], { hasPrint: [{
+    }], () => [{ 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 }, { type: LoadingService }, { type: LinkedCasesService }, { type: CaseFlagStateService }, { type: i0.NgZone }], { hasPrint: [{
             type: Input
         }], hasEventSelector: [{
             type: Input
@@ -40690,7 +40717,7 @@ class CaseViewerModule {
             CaseEditorModule,
             ConditionalShowModule,
             CaseHistoryModule,
-            MatTabsModule,
+            MatLegacyTabsModule,
             ReactiveFormsModule,
             AlertModule,
             LabelSubstitutorModule,
@@ -40715,7 +40742,7 @@ class CaseViewerModule {
                     CaseEditorModule,
                     ConditionalShowModule,
                     CaseHistoryModule,
-                    MatTabsModule,
+                    MatLegacyTabsModule,
                     ReactiveFormsModule,
                     AlertModule,
                     LabelSubstitutorModule,
@@ -40784,7 +40811,7 @@ class CaseViewerModule {
         CaseEditorModule,
         ConditionalShowModule,
         CaseHistoryModule,
-        MatTabsModule,
+        MatLegacyTabsModule,
         ReactiveFormsModule,
         AlertModule,
         LabelSubstitutorModule, i1.RpxTranslationModule, BannersModule,
@@ -40796,7 +40823,7 @@ i0.ɵɵsetComponentScope(CaseEventTriggerComponent, function () { return [i4.NgI
 i0.ɵɵsetComponentScope(CasePrinterComponent, function () { return [i4.NgForOf, i4.NgIf, CaseHeaderComponent]; }, function () { return [i1.RpxTranslatePipe, PrintUrlPipe]; });
 i0.ɵɵsetComponentScope(CaseViewerComponent, function () { return [i4.NgIf, CaseFullAccessViewComponent,
     CaseBasicAccessViewComponent]; }, []);
-i0.ɵɵsetComponentScope(CaseFullAccessViewComponent, function () { return [i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i1$1.RouterLink, CallbackErrorsComponent, ActivityComponent, CaseHeaderComponent, EventTriggerComponent, FieldReadComponent, i10.MatTabContent, i10.MatTab, i10.MatTabGroup, LabelSubstitutorDirective, NotificationBannerComponent]; }, function () { return [IsCompoundPipe, ReadFieldsFilterPipe, CcdTabFieldsPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(CaseFullAccessViewComponent, function () { return [i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i1$1.RouterLink, CallbackErrorsComponent, ActivityComponent, CaseHeaderComponent, EventTriggerComponent, FieldReadComponent, i10.MatLegacyTabGroup, i10.MatLegacyTab, i10.MatLegacyTabContent, LabelSubstitutorDirective, NotificationBannerComponent]; }, function () { return [IsCompoundPipe, ReadFieldsFilterPipe, CcdTabFieldsPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseViewComponent, function () { return [i4.NgIf, CaseViewerComponent]; }, []);
 i0.ɵɵsetComponentScope(CaseChallengedAccessRequestComponent, function () { return [i4.NgClass, i4.NgIf, i3.ɵNgNoValidate, i3.DefaultValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, AlertComponent, ErrorMessageComponent]; }, function () { return [i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseSpecificAccessRequestComponent, function () { return [i4.NgClass, i4.NgIf, i3.ɵNgNoValidate, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, AlertComponent, ErrorMessageComponent]; }, function () { return [i1.RpxTranslatePipe]; });