@hmcts/ccd-case-ui-toolkit 7.3.79-govuk5-v3 → 7.3.79-govuk5-v6

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

@@ -18,13 +18,16 @@ 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 from '@hmcts/ccpay-web-component';
 import { PaymentLibModule } from '@hmcts/ccpay-web-component';
 import { v4 } from 'uuid';
@@ -42,22 +45,22 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import * as i6$1 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
 import { cloneDeep } from 'lodash';
-import * as i4$2 from '@ngxmc/datetime-picker';
-import { NgxMatDatetimepicker, NgxMatDatepickerToggle, NgxMatDatepickerActions, NgxMatDatepickerInput, NgxMatDatepickerApply } from '@ngxmc/datetime-picker';
-import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';
-import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
-import * as i5$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4$2 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$1 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 i15 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import * as i15 from '@angular/material/legacy-input';
+import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i14 from '@hmcts/media-viewer';
 import { MediaViewerModule } from '@hmcts/media-viewer';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i2$1 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$1a = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
@@ -12123,7 +12126,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(); });
@@ -12161,7 +12164,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() {
@@ -13267,7 +13270,7 @@ class CaseEditPageComponent {
         }
         return caseField.id;
     }
-    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) {
@@ -13305,7 +13308,7 @@ class CaseEditPageComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEditPageComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-edit-page', standalone: false, template: "<ng-container *ngIf=\"eventTrigger\">\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]=\"demoteCaseTitleHeadingLevel(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    <div id=\"fieldset-case-data\">\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    </div>\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: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}.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]
         }] }); })();
@@ -16314,7 +16317,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(); });
@@ -16352,7 +16355,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$W = ["collectionItem"];
@@ -16774,7 +16777,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$W, 5);
         } if (rf & 2) {
@@ -16809,13 +16812,13 @@ 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: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}.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}}@media print{.complex-panel .complex-panel-title{font-size:14pt}}.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,
             args: ['collectionItem']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCollectionFieldComponent, { className: "WriteCollectionFieldComponent", filePath: "lib/shared/components/palette/collection/write-collection-field.component.ts", lineNumber: 31 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCollectionFieldComponent, { className: "WriteCollectionFieldComponent", filePath: "lib/shared/components/palette/collection/write-collection-field.component.ts", lineNumber: 32 }); })();
 
 function ReadComplexFieldComponent_ccd_read_complex_field_raw_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-read-complex-field-raw", 4);
@@ -17039,7 +17042,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(); });
@@ -17077,7 +17080,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 {
@@ -17472,7 +17475,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$V, 5);
         } if (rf & 2) {
@@ -17533,11 +17536,11 @@ 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 }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteDocumentFieldComponent, { className: "WriteDocumentFieldComponent", filePath: "lib/shared/components/palette/document/write-document-field.component.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteDocumentFieldComponent, { className: "WriteDocumentFieldComponent", filePath: "lib/shared/components/palette/document/write-document-field.component.ts", lineNumber: 26 }); })();
 
 class DynamicListPipe {
     static EMPTY = '';
@@ -18816,7 +18819,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: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormControlDirective, i4.FormGroupDirective, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger, i5.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: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormControlDirective, i4.FormGroupDirective, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption, i5.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,
@@ -19134,7 +19137,7 @@ class WriteStaffUserFieldComponent extends WriteComplexFieldComponent {
             i0.ɵɵproperty("ngIf", ctx.noResults && ctx.searchTerm && ctx.searchTerm.length > ctx.minSearchCharacters && ctx.showAutocomplete);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.invalidSearchTerm);
-        } }, dependencies: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormControlDirective, i4.FormGroupDirective, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger, i5.AsyncPipe], encapsulation: 2 });
+        } }, dependencies: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormControlDirective, i4.FormGroupDirective, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption, i5.AsyncPipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteStaffUserFieldComponent, [{
         type: Component,
@@ -30052,7 +30055,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);
@@ -30086,9 +30089,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 }); })();
 
@@ -30822,7 +30825,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", 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", "", 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 ");
@@ -30851,7 +30854,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          [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          [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
@@ -34968,7 +34971,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);
@@ -34977,13 +34980,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");
@@ -34992,7 +34995,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
             i0.ɵɵelementStart(8, "div", 6)(9, "input", 7, 0);
             i0.ɵɵlistener("focusin", function DatetimePickerComponent_Template_input_focusin_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.focusIn()); })("focusout", function DatetimePickerComponent_Template_input_focusout_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.focusOut()); })("dateChange", function DatetimePickerComponent_Template_input_dateChange_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.valueChanged()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(11, "ngx-mat-datepicker-toggle", 8);
+            i0.ɵɵelement(11, "mat-datepicker-toggle", 8);
             i0.ɵɵelementStart(12, "ngx-mat-datetime-picker", 9, 1);
             i0.ɵɵlistener("yearSelected", function DatetimePickerComponent_Template_ngx_mat_datetime_picker_yearSelected_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.yearSelected($event)); })("monthSelected", function DatetimePickerComponent_Template_ngx_mat_datetime_picker_monthSelected_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.monthSelected($event)); })("opened", function DatetimePickerComponent_Template_ngx_mat_datetime_picker_opened_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleClick()); });
             i0.ɵɵelementStart(14, "ngx-mat-datepicker-actions")(15, "button", 10);
@@ -35018,22 +35021,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: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.FormControlDirective, i4$2.NgxMatDatetimepicker, i4$2.NgxMatDatepickerInput, i4$2.NgxMatDatepickerToggle, i4$2.NgxMatDatepickerActions, i4$2.NgxMatDatepickerApply, i5$1.MatSuffix, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}.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: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.FormControlDirective, i4$2.NgxMatDatetimepicker, i4$2.NgxMatDatepickerInput, i4$2.NgxMatDatepickerActions, i4$2.NgxMatDatepickerApply, i5$1.MatLegacySuffix, i6$2.MatDatepickerToggle, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}.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 } }
-                ], 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      <ngx-mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></ngx-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: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}.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"] }]
+                    { 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: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}.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 }]
@@ -35043,7 +35046,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: 33 }); })();
+(() => { (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;
@@ -36642,7 +36645,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,
@@ -36659,20 +36662,20 @@ class PaletteModule {
             LabelSubstitutorModule,
             TranslatedMarkdownModule,
             MarkdownModule.forChild(),
-            NgxMatDatetimepicker,
-            NgxMatDatepickerToggle,
-            NgxMatDatepickerActions,
-            MatFormFieldModule,
-            MatInputModule,
+            NgxMatDatetimePickerModule,
+            NgxMatTimepickerModule,
+            NgxMatNativeDateModule,
+            MatLegacyFormFieldModule,
+            MatLegacyInputModule,
             MatDatepickerModule,
-            MatAutocompleteModule,
+            MatLegacyAutocompleteModule,
             CdkTreeModule,
             OverlayModule,
             PaymentLibModule,
             RpxTranslationModule.forChild(),
             CdkTreeModule,
             OverlayModule,
-            MatDialogModule,
+            MatLegacyDialogModule,
             MediaViewerModule,
             LoadingModule,
             MarkdownComponentModule,
@@ -36689,7 +36692,10 @@ class PaletteModule {
                     undo: 'Undo',
                     redo: 'Redo'
                 }
-            }), TabsModule,
+            }), NgxMatDatetimePickerModule,
+            NgxMatNativeDateModule,
+            NgxMatTimepickerModule,
+            TabsModule,
             PaletteUtilsModule,
             PipesModule,
             MarkdownComponentModule] });
@@ -36714,22 +36720,20 @@ class PaletteModule {
                     LabelSubstitutorModule,
                     TranslatedMarkdownModule,
                     MarkdownModule.forChild(),
-                    NgxMatDatetimepicker,
-                    NgxMatDatepickerInput,
-                    NgxMatDatepickerToggle,
-                    NgxMatDatepickerActions,
-                    NgxMatDatepickerApply,
-                    MatFormFieldModule,
-                    MatInputModule,
+                    NgxMatDatetimePickerModule,
+                    NgxMatTimepickerModule,
+                    NgxMatNativeDateModule,
+                    MatLegacyFormFieldModule,
+                    MatLegacyInputModule,
                     MatDatepickerModule,
-                    MatAutocompleteModule,
+                    MatLegacyAutocompleteModule,
                     CdkTreeModule,
                     OverlayModule,
                     PaymentLibModule,
                     RpxTranslationModule.forChild(),
                     CdkTreeModule,
                     OverlayModule,
-                    MatDialogModule,
+                    MatLegacyDialogModule,
                     MediaViewerModule,
                     LoadingModule,
                     MarkdownComponentModule,
@@ -36761,11 +36765,9 @@ class PaletteModule {
                     ...PALETTE_COMPONENTS
                 ],
                 exports: [
-                    NgxMatDatetimepicker,
-                    NgxMatDatepickerInput,
-                    NgxMatDatepickerToggle,
-                    NgxMatDatepickerActions,
-                    NgxMatDatepickerApply,
+                    NgxMatDatetimePickerModule,
+                    NgxMatNativeDateModule,
+                    NgxMatTimepickerModule,
                     TabsModule,
                     PaletteUtilsModule,
                     PipesModule,
@@ -36788,7 +36790,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]
             }]
@@ -36944,28 +36946,24 @@ class PaletteModule {
         FormModule,
         TabsModule,
         LabelSubstitutorModule,
-        TranslatedMarkdownModule, i1$4.MarkdownModule, NgxMatDatetimepicker,
-        NgxMatDatepickerInput,
-        NgxMatDatepickerToggle,
-        NgxMatDatepickerActions,
-        NgxMatDatepickerApply,
-        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, i3$1.NgxEditorModule], exports: [NgxMatDatetimepicker,
-        NgxMatDatepickerInput,
-        NgxMatDatepickerToggle,
-        NgxMatDatepickerActions,
-        NgxMatDatepickerApply,
+        ErrorsModule, i3$1.NgxEditorModule], exports: [NgxMatDatetimePickerModule,
+        NgxMatNativeDateModule,
+        NgxMatTimepickerModule,
         TabsModule,
         PaletteUtilsModule,
         PipesModule,
@@ -37156,7 +37154,7 @@ i0.ɵɵsetComponentScope(
 // Components for case flags
 CaseFlagTableComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf]; }, function () { return [i5.DatePipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
 i0.ɵɵsetComponentScope(SelectFlagTypeComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
-i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i15.MatInput, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger]; }, function () { return [i5.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
+i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i15.MatLegacyInput, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption]; }, function () { return [i5.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
     LanguageInterpreterDisplayPipe]; });
 i0.ɵɵsetComponentScope(ManageCaseFlagsComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective]; }, function () { return [i1.RpxTranslatePipe, ManageCaseFlagsLabelDisplayPipe]; });
 i0.ɵɵsetComponentScope(UpdateFlagComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i5.NgTemplateOutlet, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, UpdateFlagTitleDisplayPipe]; });
@@ -40947,7 +40945,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(); });
@@ -40985,7 +40983,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 {
@@ -41736,7 +41734,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(i5.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(i5.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) {
@@ -41781,7 +41779,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--' + field.id\" scope=\"row\" *ngIf=\"!isFieldToHaveNoLabel(field) && field.label\">\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                      <td role=\"rowheader\" [attr.aria-label]=\"(field.label || field.id) | rpxTranslate\" [id]=\"'case-viewer-field-read--' + field.id\">\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                  </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,.compound-field>td{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.compound-field>td{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.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: i5.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: i5.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }, { type: LoadingService }, { type: LinkedCasesService }, { type: CaseFlagStateService }, { type: i0.NgZone }], { hasPrint: [{
             type: Input
         }], hasEventSelector: [{
             type: Input
@@ -44348,7 +44346,7 @@ class CaseViewerModule {
             CaseEditorModule,
             ConditionalShowModule,
             CaseHistoryModule,
-            MatTabsModule,
+            MatLegacyTabsModule,
             ReactiveFormsModule,
             AlertModule,
             LabelSubstitutorModule,
@@ -44373,7 +44371,7 @@ class CaseViewerModule {
                     CaseEditorModule,
                     ConditionalShowModule,
                     CaseHistoryModule,
-                    MatTabsModule,
+                    MatLegacyTabsModule,
                     ReactiveFormsModule,
                     AlertModule,
                     LabelSubstitutorModule,
@@ -44442,7 +44440,7 @@ class CaseViewerModule {
         CaseEditorModule,
         ConditionalShowModule,
         CaseHistoryModule,
-        MatTabsModule,
+        MatLegacyTabsModule,
         ReactiveFormsModule,
         AlertModule,
         LabelSubstitutorModule, i1.RpxTranslationModule, BannersModule,
@@ -44454,7 +44452,7 @@ i0.ɵɵsetComponentScope(CaseEventTriggerComponent, function () { return [i5.NgI
 i0.ɵɵsetComponentScope(CasePrinterComponent, function () { return [i5.NgForOf, i5.NgIf, CaseHeaderComponent]; }, function () { return [i1.RpxTranslatePipe, PrintUrlPipe]; });
 i0.ɵɵsetComponentScope(CaseViewerComponent, function () { return [i5.NgIf, CaseFullAccessViewComponent,
     CaseBasicAccessViewComponent]; }, []);
-i0.ɵɵsetComponentScope(CaseFullAccessViewComponent, function () { return [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.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 [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.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 [i5.NgIf, CaseViewerComponent]; }, []);
 i0.ɵɵsetComponentScope(CaseChallengedAccessRequestComponent, function () { return [i5.NgClass, i5.NgIf, i4.ɵNgNoValidate, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, AlertComponent, ErrorMessageComponent]; }, function () { return [i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseSpecificAccessRequestComponent, function () { return [i5.NgClass, i5.NgIf, i4.ɵNgNoValidate, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, AlertComponent, ErrorMessageComponent]; }, function () { return [i1.RpxTranslatePipe]; });