@hmcts/ccd-case-ui-toolkit 7.4.26-4923 → 7.4.26-4923-rc2

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

@@ -27,9 +27,11 @@ import * as i1$4 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
 import * as i6 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i3 from '@hmcts/ccpay-web-component';
+import { PaymentLibModule } from '@hmcts/ccpay-web-component';
 import { v4 } from 'uuid';
 import * as i4$1 from '@angular/platform-browser';
-import * as i3 from 'ngx-editor';
+import * as i3$1 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 import { nodes, marks } from 'ngx-editor/schema';
 import { setBlockType } from 'prosemirror-commands';
@@ -59,7 +61,7 @@ import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { compressToUTF16, decompressFromUTF16 } from 'lz-string';
 
-const _c0$1d = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
+const _c0$1b = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
 const _c1$w = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
 function FooterComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
@@ -137,7 +139,7 @@ class FooterComponent {
     workhours;
     static ɵfac = function FooterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FooterComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, standalone: false, ngContentSelectors: _c1$w, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$1d);
+            i0.ɵɵprojectionDef(_c0$1b);
             i0.ɵɵelementStart(0, "footer", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, FooterComponent_div_2_Template, 20, 15, "div", 2)(3, FooterComponent_div_3_Template, 20, 16, "div", 2);
             i0.ɵɵelementEnd()();
@@ -778,7 +780,7 @@ class ProfileService {
         type: Injectable
     }], () => [{ type: HttpService }, { type: AbstractAppConfig }], null); })();
 
-const _c0$1c = [[["", "headerNavigation", ""]]];
+const _c0$1a = [[["", "headerNavigation", ""]]];
 const _c1$v = ["[headerNavigation]"];
 function HeaderBarComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "a", 12);
@@ -829,7 +831,7 @@ class HeaderBarComponent {
     }
     static ɵfac = function HeaderBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HeaderBarComponent)(i0.ɵɵdirectiveInject(ProfileService, 8), i0.ɵɵdirectiveInject(ProfileNotifier, 8)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, standalone: false, ngContentSelectors: _c1$v, decls: 17, vars: 14, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["type", "button", "id", "sign-out", 1, "govuk-js-link", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$1c);
+            i0.ɵɵprojectionDef(_c0$1a);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵtemplate(3, HeaderBarComponent_div_3_Template, 4, 1, "div", 3)(4, HeaderBarComponent_div_4_Template, 5, 3, "div", 4);
             i0.ɵɵelementEnd();
@@ -883,13 +885,13 @@ class HeaderBarComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderBarComponent, { className: "HeaderBarComponent", filePath: "lib/components/header/header-bar/header-bar.component.ts", lineNumber: 11 }); })();
 
-const _c0$1b = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
+const _c0$19 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
 const _c1$u = ["[leftNavLinks]", "[rightNavLinks]"];
 class NavigationComponent {
     isSolicitor;
     static ɵfac = function NavigationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NavigationComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, standalone: false, ngContentSelectors: _c1$u, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$1b);
+            i0.ɵɵprojectionDef(_c0$19);
             i0.ɵɵelementStart(0, "div")(1, "nav", 0);
             i0.ɵɵprojection(2);
             i0.ɵɵprojection(3, 1);
@@ -1007,12 +1009,12 @@ class HeadersModule {
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(HeadersModule, { declarations: [PhaseComponent, HeaderBarComponent, NavigationComponent, NavigationItemComponent], imports: [CommonModule, RouterModule, i1.RpxTranslationModule], exports: [PhaseComponent, HeaderBarComponent, NavigationComponent, NavigationItemComponent] }); })();
 
-const _c0$1a = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
+const _c0$18 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
 const _c1$t = ["[topBody]", "[leftBody]", "[rightBody]"];
 class BodyComponent {
     static ɵfac = function BodyComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BodyComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], standalone: false, ngContentSelectors: _c1$t, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$1a);
+            i0.ɵɵprojectionDef(_c0$18);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵprojection(2, 1);
@@ -1026,7 +1028,7 @@ class BodyComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BodyComponent, { className: "BodyComponent", filePath: "lib/components/body/body.component.ts", lineNumber: 10 }); })();
 
-const _c0$19 = a0 => ({ "govuk-input--error": a0 });
+const _c0$17 = a0 => ({ "govuk-input--error": a0 });
 function DateInputComponent_div_19_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 15)(1, "span", 8);
@@ -1043,7 +1045,7 @@ function DateInputComponent_div_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 7, "Hour"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(9, _c0$19, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(9, _c0$17, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "hour-label-" + ctx_r6.hourId());
 } }
 function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
@@ -1062,7 +1064,7 @@ function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 7, "Minute"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(9, _c0$19, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(9, _c0$17, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "minute-label-" + ctx_r6.minuteId());
 } }
 function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
@@ -1081,7 +1083,7 @@ function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 7, "Second"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(9, _c0$19, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(9, _c0$17, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "second-label-" + ctx_r6.secondId());
 } }
 class DateInputComponent {
@@ -1317,21 +1319,21 @@ class DateInputComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 24, "Day"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(30, _c0$19, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(30, _c0$17, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "day-label-" + ctx.dayId());
             i0.ɵɵadvance(3);
             i0.ɵɵattribute("id", "month-label-" + ctx.monthId());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 26, "Month"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(32, _c0$19, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(32, _c0$17, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "month-label-" + ctx.monthId());
             i0.ɵɵadvance(3);
             i0.ɵɵattribute("id", "year-label-" + ctx.yearId());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 28, "Year"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(34, _c0$19, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(34, _c0$17, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "year-label-" + ctx.yearId());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isDateTime);
@@ -1368,7 +1370,7 @@ class DateInputComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 21 }); })();
 
-const _c0$18 = ["*"];
+const _c0$16 = ["*"];
 function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵnamespaceSVG();
@@ -1418,7 +1420,7 @@ class AlertComponent {
     showIcon = true;
     alertMessageType = AlertMessageType;
     static ɵfac = function AlertComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AlertComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AlertComponent, selectors: [["cut-alert"]], inputs: { type: "type", showIcon: "showIcon" }, standalone: false, ngContentSelectors: _c0$18, decls: 11, vars: 12, consts: [[1, "hmcts-banner"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], ["d", "M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"], ["d", "M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AlertComponent, selectors: [["cut-alert"]], inputs: { type: "type", showIcon: "showIcon" }, standalone: false, ngContentSelectors: _c0$16, decls: 11, vars: 12, consts: [[1, "hmcts-banner"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], ["d", "M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"], ["d", "M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelementContainerStart(1, 1);
@@ -1632,14 +1634,14 @@ class NotificationBannerComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NotificationBannerComponent, { className: "NotificationBannerComponent", filePath: "lib/components/banners/notification-banner/notification-banner.component.ts", lineNumber: 11 }); })();
 
-const _c0$17 = ["*"];
+const _c0$15 = ["*"];
 const _c1$s = a0 => ({ "js-hidden": a0 });
 class TabComponent {
     id;
     title;
     selected;
     static ɵfac = function TabComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TabComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, standalone: false, ngContentSelectors: _c0$17, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, standalone: false, ngContentSelectors: _c0$15, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -1661,7 +1663,7 @@ class TabComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabComponent, { className: "TabComponent", filePath: "lib/components/tabs/tab.component.ts", lineNumber: 11 }); })();
 
-const _c0$16 = ["tab"];
+const _c0$14 = ["tab"];
 const _c1$r = ["*"];
 const _c2$5 = () => ["."];
 const _c3$1 = a0 => ({ "tabs-toggle-selected": a0 });
@@ -1708,7 +1710,7 @@ class TabsComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panels = _t);
         } }, viewQuery: function TabsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$16, 5);
+            i0.ɵɵviewQuery(_c0$14, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
@@ -1767,7 +1769,7 @@ class TabsModule {
         RouterModule, i1.RpxTranslationModule], exports: [TabsComponent,
         TabComponent] }); })();
 
-const _c0$15 = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
+const _c0$13 = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
 class ActivityBannerComponent {
     bannerType;
     description;
@@ -1786,7 +1788,7 @@ class ActivityBannerComponent {
             i0.ɵɵpipe(6, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c0$15, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c0$13, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("alt", i0.ɵɵinterpolate(i0.ɵɵpipeBind1(3, 6, ctx.description)))("src", i0.ɵɵinterpolate(ctx.imageLink), i0.ɵɵsanitizeUrl);
             i0.ɵɵadvance(3);
@@ -13666,7 +13668,7 @@ class CaseEventCompletionComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionComponent, { className: "CaseEventCompletionComponent", filePath: "lib/shared/components/case-editor/case-event-completion/case-event-completion.component.ts", lineNumber: 21 }); })();
 
-const _c0$14 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
+const _c0$12 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
 class CaseEventCompletionTaskCancelledComponent {
     context;
     notifyEventCompletionCancelled = new EventEmitter();
@@ -13735,7 +13737,7 @@ class CaseEventCompletionTaskCancelledComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 21, "Continue"), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(25, _c0$14, ctx.jurisdiction, ctx.caseType, ctx.caseId));
+            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(25, _c0$12, ctx.jurisdiction, ctx.caseType, ctx.caseId));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 23, "Cancel"), " ");
         } }, dependencies: [i1$2.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
@@ -13750,7 +13752,7 @@ class CaseEventCompletionTaskCancelledComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventCompletionTaskCancelledComponent, { className: "CaseEventCompletionTaskCancelledComponent", filePath: "lib/shared/components/case-editor/case-event-completion/components/case-event-completion-task-cancelled/case-event-completion-task-cancelled.component.ts", lineNumber: 10 }); })();
 
-const _c0$13 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
+const _c0$11 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
 function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h2", 3);
@@ -13803,7 +13805,7 @@ function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 22, "Continue"), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(26, _c0$13, ctx_r1.jurisdiction, ctx_r1.caseType, ctx_r1.caseId));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(26, _c0$11, ctx_r1.jurisdiction, ctx_r1.caseType, ctx_r1.caseId));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 24, "Cancel"), " ");
 } }
@@ -14206,7 +14208,7 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteComplexFieldComponent, { className: "WriteComplexFieldComponent", filePath: "lib/shared/components/palette/complex/write-complex-field.component.ts", lineNumber: 22 }); })();
 
-const _c0$12 = ["writeComplexFieldComponent"];
+const _c0$10 = ["writeComplexFieldComponent"];
 const _c1$q = a0 => ({ "form-group-error": a0 });
 const _c2$4 = a0 => ({ "govuk-input--error": a0 });
 function WriteAddressFieldComponent_div_1_span_4_Template(rf, ctx) { if (rf & 1) {
@@ -14485,7 +14487,7 @@ class WriteAddressFieldComponent extends AbstractFieldWriteComponent {
     }
     static ɵfac = function WriteAddressFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteAddressFieldComponent)(i0.ɵɵdirectiveInject(AddressesService), i0.ɵɵdirectiveInject(IsCompoundPipe)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteAddressFieldComponent, selectors: [["ccd-write-address-field"]], viewQuery: function WriteAddressFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$12, 5);
+            i0.ɵɵviewQuery(_c0$10, 5);
             i0.ɵɵviewQuery(FocusElementDirective, 5);
         } if (rf & 2) {
             let _t;
@@ -14548,7 +14550,7 @@ class AbstractFieldReadComponent extends AbstractFormFieldComponent {
             type: Input
         }] }); })();
 
-const _c0$11 = ["journeyChild"];
+const _c0$$ = ["journeyChild"];
 class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
     multipageComponentStateService;
     journeyStartPageNumber = 0;
@@ -14623,7 +14625,7 @@ class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
     ;
     static ɵfac = function AbstractFieldWriteJourneyComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AbstractFieldWriteJourneyComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AbstractFieldWriteJourneyComponent, viewQuery: function AbstractFieldWriteJourneyComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$11, 5);
+            i0.ɵɵviewQuery(_c0$$, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
@@ -14638,7 +14640,7 @@ class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
             args: ['journeyChild']
         }] }); })();
 
-const _c0$10 = ["journeyChild"];
+const _c0$_ = ["journeyChild"];
 class AbstractJourneyComponent {
     multipageComponentStateService;
     journeyStartPageNumber = 0;
@@ -14700,7 +14702,7 @@ class AbstractJourneyComponent {
     onPageChange() { }
     static ɵfac = function AbstractJourneyComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AbstractJourneyComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AbstractJourneyComponent, viewQuery: function AbstractJourneyComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$10, 5);
+            i0.ɵɵviewQuery(_c0$_, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
@@ -14729,7 +14731,29 @@ var DisplayContextCustomParameter;
     DisplayContextCustomParameter["QueryManagementWriteTest"] = "QueryManagementWriteTest";
 })(DisplayContextCustomParameter || (DisplayContextCustomParameter = {}));
 
-const _c0$$ = ["mediaViewerHost"];
+class MediaViewerModuleService {
+    environmentInjector;
+    moduleRef;
+    constructor(environmentInjector) {
+        this.environmentInjector = environmentInjector;
+    }
+    getModuleRef(moduleType) {
+        // Keep the viewer's NgRx feature registered while its asynchronous work settles after navigation.
+        this.moduleRef ??= createNgModule(moduleType, this.environmentInjector);
+        return this.moduleRef;
+    }
+    ngOnDestroy() {
+        this.moduleRef?.destroy();
+    }
+    static ɵfac = function MediaViewerModuleService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MediaViewerModuleService)(i0.ɵɵinject(i0.EnvironmentInjector)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MediaViewerModuleService, factory: MediaViewerModuleService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MediaViewerModuleService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [{ type: i0.EnvironmentInjector }], null); })();
+
+const _c0$Z = ["mediaViewerHost"];
 function CaseFileViewFieldComponent_ng_container_0_li_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li")(1, "button", 9);
     i0.ɵɵtext(2);
@@ -14788,7 +14812,7 @@ function CaseFileViewFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 class CaseFileViewFieldComponent {
     elementRef;
     changeDetectorRef;
-    environmentInjector;
+    mediaViewerModuleService;
     route;
     caseFileViewService;
     documentManagementService;
@@ -14811,12 +14835,13 @@ class CaseFileViewFieldComponent {
     caseId;
     mediaViewerHost;
     mediaViewerComponentRef;
-    mediaViewerModuleRef;
+    dragSubscription;
     mediaViewerRenderId = 0;
-    constructor(elementRef, changeDetectorRef, environmentInjector, route, caseFileViewService, documentManagementService, loadingService, sessionStorageService, windowService, caseNotifier, abstractConfig) {
+    destroyed$ = new Subject();
+    constructor(elementRef, changeDetectorRef, mediaViewerModuleService, route, caseFileViewService, documentManagementService, loadingService, sessionStorageService, windowService, caseNotifier, abstractConfig) {
         this.elementRef = elementRef;
         this.changeDetectorRef = changeDetectorRef;
-        this.environmentInjector = environmentInjector;
+        this.mediaViewerModuleService = mediaViewerModuleService;
         this.route = route;
         this.caseFileViewService = caseFileViewService;
         this.documentManagementService = documentManagementService;
@@ -14865,7 +14890,7 @@ class CaseFileViewFieldComponent {
                 };
             }), takeUntil(mouseup$));
         }));
-        drag$.subscribe(pos => {
+        this.dragSubscription = drag$.subscribe(pos => {
             const calculatedWidth = ((pos.documentTreeContainerWidth + pos.dx) * 100) / slider.parentElement.getBoundingClientRect().width;
             documentTreeContainer.setAttribute('style', `width: ${calculatedWidth}%`);
         });
@@ -14893,7 +14918,7 @@ class CaseFileViewFieldComponent {
         const cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
         const loadingToken = this.loadingService.register();
         this.caseFileViewService.updateDocumentCategory(cid, this.caseVersion, data.document.attribute_path, data.newCategory)
-            .pipe(finalize(() => {
+            .pipe(takeUntil(this.destroyed$), finalize(() => {
             this.loadingService.unregister(loadingToken);
         }), catchError((err) => {
             this.errorMessages = [this.moveDocumentError(err)];
@@ -14914,8 +14939,10 @@ class CaseFileViewFieldComponent {
     }
     ngOnDestroy() {
         this.mediaViewerRenderId++;
+        this.destroyed$.next();
+        this.destroyed$.complete();
         this.destroyMediaViewer();
-        this.mediaViewerModuleRef?.destroy();
+        this.dragSubscription?.unsubscribe();
         if (this.categoriesAndDocumentsSubscription) {
             this.categoriesAndDocumentsSubscription.unsubscribe();
         }
@@ -14941,9 +14968,9 @@ class CaseFileViewFieldComponent {
             return;
         }
         const { MediaViewerComponent, MediaViewerModule } = mediaViewer;
-        this.mediaViewerModuleRef ??= createNgModule(MediaViewerModule, this.environmentInjector);
+        const mediaViewerModuleRef = this.mediaViewerModuleService.getModuleRef(MediaViewerModule);
         this.mediaViewerComponentRef = this.mediaViewerHost.createComponent(MediaViewerComponent, {
-            ngModuleRef: this.mediaViewerModuleRef
+            ngModuleRef: mediaViewerModuleRef
         });
         this.mediaViewerComponentRef.setInput('url', this.currentDocument.document_binary_url);
         this.mediaViewerComponentRef.setInput('downloadFileName', this.currentDocument.document_filename);
@@ -14985,9 +15012,9 @@ class CaseFileViewFieldComponent {
                 return defaultMsg;
         }
     }
-    static ɵfac = function CaseFileViewFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.EnvironmentInjector), i0.ɵɵdirectiveInject(i1$2.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
+    static ɵfac = function CaseFileViewFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MediaViewerModuleService), i0.ɵɵdirectiveInject(i1$2.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], viewQuery: function CaseFileViewFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$$, 5, ViewContainerRef);
+            i0.ɵɵviewQuery(_c0$Z, 5, ViewContainerRef);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mediaViewerHost = _t.first);
@@ -15004,11 +15031,11 @@ class CaseFileViewFieldComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFieldComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-file-view-field', standalone: false, template: "<ng-container *ngIf=\"errorMessages?.length\">\n  <div\n    id=\"case-file-view-field-errors\"\n    class=\"govuk-error-summary govuk-!-margin-bottom-4\"\n    data-module=\"govuk-error-summary\"\n  >\n    <div role=\"alert\">\n      <h2 class=\"govuk-error-summary__title\">There is a problem</h2>\n      <div class=\"govuk-error-summary__body\">\n        <ul class=\"govuk-list govuk-error-summary__list\">\n          <li *ngFor=\"let errorMessage of errorMessages\">\n            <button type=\"button\" class=\"govuk-js-link\">{{ errorMessage }}</button>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div\n  *ngIf=\"getCategoriesAndDocumentsError\"\n  class=\"govuk-grid-column-two-thirds\"\n>\n  <h1 class=\"govuk-heading-xl\">Sorry, there is a problem with the service</h1>\n  <p class=\"govuk-body\">Try again later.</p>\n</div>\n<div *ngIf=\"!getCategoriesAndDocumentsError\">\n  <h2 class=\"govuk-heading-l\">Case file</h2>\n  <div class=\"govuk-form-group\" id=\"case-file-view\">\n    <!-- Document tree -->\n    <div class=\"document-tree-container\">\n      <ccd-case-file-view-folder \n          class=\"document-tree-container__tree\"\n          [categoriesAndDocuments]=\"categoriesAndDocuments$\"\n          (clickedDocument)=\"setMediaViewerFile($event); resetErrorMessages()\" \n          (moveDocument)=\"moveDocument($event)\"\n          [allowMoving]=\"allowMoving\">\n      </ccd-case-file-view-folder>\n    </div>\n    <!-- Slider -->\n    <div class=\"slider\"></div>\n    <!-- Media viewer -->\n    <div class=\"media-viewer-container\">\n      <ng-container *ngIf=\"currentDocument\">\n        <ng-container #mediaViewerHost></ng-container>\n      </ng-container>\n    </div>\n  </div>\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}#case-file-view{display:flex;border:2px solid #C9C9C9;height:100vh;position:relative}#case-file-view .document-tree-container{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view .slider{width:.2%;background-color:#6b6b6b}#case-file-view .slider:hover,#case-file-view .slider:focus{cursor:col-resize}#case-file-view .media-viewer-container{background-color:#dee0e2;flex:1 1 0;overflow:hidden}\n"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.EnvironmentInjector }, { type: i1$2.ActivatedRoute }, { type: CaseFileViewService }, { type: DocumentManagementService }, { type: LoadingService }, { type: SessionStorageService }, { type: WindowService }, { type: CaseNotifier }, { type: AbstractAppConfig }], { mediaViewerHost: [{
+    }], () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: MediaViewerModuleService }, { type: i1$2.ActivatedRoute }, { type: CaseFileViewService }, { type: DocumentManagementService }, { type: LoadingService }, { type: SessionStorageService }, { type: WindowService }, { type: CaseNotifier }, { type: AbstractAppConfig }], { mediaViewerHost: [{
             type: ViewChild,
             args: ['mediaViewerHost', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 31 }); })();
 
 const PVP_FLAG_CODE = 'PF0021';
 const PVP_DISPLAY_TEXT = 'POTENTIALLY VIOLENT PERSON';
@@ -16240,7 +16267,7 @@ class ReadCaseLinkFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadCaseLinkFieldComponent, { className: "ReadCaseLinkFieldComponent", filePath: "lib/shared/components/palette/case-link/read-case-link-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$_ = ["writeComplexFieldComponent"];
+const _c0$Y = ["writeComplexFieldComponent"];
 const _c1$p = a0 => ({ "form-group-error": a0 });
 function WriteCaseLinkFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -16321,7 +16348,7 @@ class WriteCaseLinkFieldComponent extends AbstractFieldWriteComponent {
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵWriteCaseLinkFieldComponent_BaseFactory; return function WriteCaseLinkFieldComponent_Factory(__ngFactoryType__) { return (ɵWriteCaseLinkFieldComponent_BaseFactory || (ɵWriteCaseLinkFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(WriteCaseLinkFieldComponent)))(__ngFactoryType__ || WriteCaseLinkFieldComponent); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteCaseLinkFieldComponent, selectors: [["ccd-write-case-link-field"]], viewQuery: function WriteCaseLinkFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$_, 5);
+            i0.ɵɵviewQuery(_c0$Y, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.writeComplexFieldComponent = _t.first);
@@ -16355,7 +16382,7 @@ class WriteCaseLinkFieldComponent extends AbstractFieldWriteComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCaseLinkFieldComponent, { className: "WriteCaseLinkFieldComponent", filePath: "lib/shared/components/palette/case-link/write-case-link-field.component.ts", lineNumber: 12 }); })();
 
-const _c0$Z = (a0, a1, a2, a3, a4, a5, a6) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5, parent: a6 });
+const _c0$X = (a0, a1, a2, a3, a4, a5, a6) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5, parent: a6 });
 const _c1$o = (a0, a1, a2, a3, a4, a5) => ({ id: a0, label: a1, field_type: a2, value: a3, hidden: a4, parent: a5 });
 function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody")(1, "tr");
@@ -16366,7 +16393,7 @@ function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction7(4, _c0$Z, ctx_r0.caseField.label, ctx_r0.caseField.label, ctx_r0.caseField.field_type.collection_field_type, ctx_r0.caseField.display_context_parameter, ctx_r0.caseField.value, ctx_r0.caseField.hidden, ctx_r0.caseField))("context", ctx_r0.context)("caseFields", ctx_r0.caseFields)("topLevelFormGroup", ctx_r0.topLevelFormGroup);
+    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction7(4, _c0$X, ctx_r0.caseField.label, ctx_r0.caseField.label, ctx_r0.caseField.field_type.collection_field_type, ctx_r0.caseField.display_context_parameter, ctx_r0.caseField.value, ctx_r0.caseField.hidden, ctx_r0.caseField))("context", ctx_r0.context)("caseFields", ctx_r0.caseFields)("topLevelFormGroup", ctx_r0.topLevelFormGroup);
 } }
 function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
@@ -16488,7 +16515,7 @@ class RemoveDialogComponent {
     }], () => [{ type: i1$3.MatDialogRef }], 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$Y = ["collectionItem"];
+const _c0$W = ["collectionItem"];
 function WriteCollectionFieldComponent_h2_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h2", 7);
     i0.ɵɵtext(1);
@@ -16909,7 +16936,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
     }
     static ɵfac = function WriteCollectionFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteCollectionFieldComponent)(i0.ɵɵdirectiveInject(i1$3.MatDialog), 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$Y, 5);
+            i0.ɵɵviewQuery(_c0$W, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
@@ -17225,7 +17252,7 @@ class FileUploadStateService {
         type: Injectable
     }], null, null); })();
 
-const _c0$X = ["fileInput"];
+const _c0$V = ["fileInput"];
 const _c1$n = a0 => ({ "form-group-error bottom-30": a0 });
 function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 12);
@@ -17604,7 +17631,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     }
     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 ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$X, 5);
+            i0.ɵɵviewQuery(_c0$V, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
@@ -17719,7 +17746,7 @@ class ReadDynamicListFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadDynamicListFieldComponent, { className: "ReadDynamicListFieldComponent", filePath: "lib/shared/components/palette/dynamic-list/read-dynamic-list-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$W = a0 => ({ "form-group-error": a0 });
+const _c0$U = a0 => ({ "form-group-error": a0 });
 function WriteDynamicListFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -17807,7 +17834,7 @@ class WriteDynamicListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵtemplate(10, WriteDynamicListFieldComponent_option_10_Template, 3, 4, "option", 7);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c0$W, !ctx.dynamicListFormControl.valid && (ctx.dynamicListFormControl.dirty || ctx.dynamicListFormControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c0$U, !ctx.dynamicListFormControl.valid && (ctx.dynamicListFormControl.dirty || ctx.dynamicListFormControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -17988,7 +18015,7 @@ class ReadDynamicMultiSelectListFieldComponent extends AbstractFieldReadComponen
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadDynamicMultiSelectListFieldComponent, { className: "ReadDynamicMultiSelectListFieldComponent", filePath: "lib/shared/components/palette/dynamic-multi-select-list/read-dynamic-multi-select-list-field.component.ts", lineNumber: 10 }); })();
 
-const _c0$V = a0 => ({ "error": a0 });
+const _c0$T = a0 => ({ "error": a0 });
 function WriteDynamicMultiSelectListFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -18108,7 +18135,7 @@ class WriteDynamicMultiSelectListFieldComponent extends AbstractFieldWriteCompon
             i0.ɵɵtemplate(6, WriteDynamicMultiSelectListFieldComponent_ng_container_6_Template, 6, 12, "ng-container", 4);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$V, !ctx.checkboxes.valid && ctx.checkboxes.touched))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$T, !ctx.checkboxes.valid && ctx.checkboxes.touched))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
@@ -18188,7 +18215,7 @@ class ReadDynamicRadioListFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadDynamicRadioListFieldComponent, { className: "ReadDynamicRadioListFieldComponent", filePath: "lib/shared/components/palette/dynamic-radio-list/read-dynamic-radio-list-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$U = a0 => ({ "form-group-error": a0 });
+const _c0$S = a0 => ({ "form-group-error": a0 });
 const _c1$m = a0 => ({ selected: a0 });
 function WriteDynamicRadioListFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -18283,7 +18310,7 @@ class WriteDynamicRadioListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$U, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$S, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18337,7 +18364,7 @@ class ReadEmailFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadEmailFieldComponent, { className: "ReadEmailFieldComponent", filePath: "lib/shared/components/palette/email/read-email-field.component.ts", lineNumber: 11 }); })();
 
-const _c0$T = a0 => ({ "form-group-error": a0 });
+const _c0$R = a0 => ({ "form-group-error": a0 });
 const _c1$l = a0 => ({ "govuk-input--error": a0 });
 function WriteEmailFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -18383,7 +18410,7 @@ class WriteEmailFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$T, !ctx.emailControl.valid && (ctx.emailControl.dirty || ctx.emailControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$R, !ctx.emailControl.valid && (ctx.emailControl.dirty || ctx.emailControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18425,7 +18452,7 @@ class ReadFixedListFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadFixedListFieldComponent, { className: "ReadFixedListFieldComponent", filePath: "lib/shared/components/palette/fixed-list/read-fixed-list-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$S = a0 => ({ "form-group-error": a0 });
+const _c0$Q = a0 => ({ "form-group-error": a0 });
 function WriteFixedListFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -18500,7 +18527,7 @@ class WriteFixedListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵtemplate(8, WriteFixedListFieldComponent_option_8_Template, 3, 4, "option", 7);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$S, !ctx.fixedListFormControl.valid && (ctx.fixedListFormControl.dirty || ctx.fixedListFormControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$Q, !ctx.fixedListFormControl.valid && (ctx.fixedListFormControl.dirty || ctx.fixedListFormControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18563,7 +18590,7 @@ class ReadFixedRadioListFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadFixedRadioListFieldComponent, { className: "ReadFixedRadioListFieldComponent", filePath: "lib/shared/components/palette/fixed-radio-list/read-fixed-radio-list-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$R = a0 => ({ "form-group-error": a0 });
+const _c0$P = a0 => ({ "form-group-error": a0 });
 const _c1$k = a0 => ({ selected: a0 });
 function WriteFixedRadioListFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -18631,7 +18658,7 @@ class WriteFixedRadioListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$R, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$P, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18707,7 +18734,7 @@ class ReadJudicialUserFieldComponent extends AbstractFieldReadComponent {
     }], () => [{ type: JurisdictionService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadJudicialUserFieldComponent, { className: "ReadJudicialUserFieldComponent", filePath: "lib/shared/components/palette/judicial-user/read-judicial-user-field.component.ts", lineNumber: 12 }); })();
 
-const _c0$Q = a0 => ({ "form-group-error": a0 });
+const _c0$O = a0 => ({ "form-group-error": a0 });
 const _c1$j = a0 => ({ "hide-autocomplete": a0 });
 function WriteJudicialUserFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 10);
@@ -18941,7 +18968,7 @@ class WriteJudicialUserFieldComponent extends WriteComplexFieldComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             const autoComplete_r4 = i0.ɵɵreference(7);
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$Q, !!ctx.judicialUserControl && ctx.errors));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$O, !!ctx.judicialUserControl && ctx.errors));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -19023,7 +19050,7 @@ class ReadStaffUserFieldComponent extends AbstractFieldReadComponent {
     }], () => [{ type: CaseworkerService }, { type: JurisdictionService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadStaffUserFieldComponent, { className: "ReadStaffUserFieldComponent", filePath: "lib/shared/components/palette/staff-user/read-staff-user-field.component.ts", lineNumber: 13 }); })();
 
-const _c0$P = a0 => ({ "form-group-error": a0 });
+const _c0$N = a0 => ({ "form-group-error": a0 });
 const _c1$i = a0 => ({ "hide-autocomplete": a0 });
 function WriteStaffUserFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 10);
@@ -19262,7 +19289,7 @@ class WriteStaffUserFieldComponent extends WriteComplexFieldComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             const autoComplete_r5 = i0.ɵɵreference(7);
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$P, !!ctx.staffUserControl && ctx.errors));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$N, !!ctx.staffUserControl && ctx.errors));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -19727,7 +19754,7 @@ class ValidatorsUtils {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
-const _c0$O = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$M = a0 => ({ "govuk-form-group--error": a0 });
 const _c1$h = a0 => ({ "table-group-error": a0 });
 function LinkCasesComponent_div_8_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 28)(1, "span", 29);
@@ -19794,7 +19821,7 @@ function LinkCasesComponent_div_8_div_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$O, !!ctx_r1.caseReasonCommentsError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$M, !!ctx_r1.caseReasonCommentsError));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonCommentsError);
 } }
@@ -19838,11 +19865,11 @@ function LinkCasesComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("formGroup", ctx_r1.linkCaseForm);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$O, !!ctx_r1.caseNumberError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$M, !!ctx_r1.caseNumberError));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.caseNumberError);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$O, !!ctx_r1.caseReasonError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$M, !!ctx_r1.caseReasonError));
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonError);
     i0.ɵɵadvance(2);
@@ -20270,7 +20297,7 @@ class LinkCasesComponent extends AbstractJourneyComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.linkCaseForm);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$O, !!ctx.noSelectedCaseError));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$M, !!ctx.noSelectedCaseError));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.noSelectedCaseError);
             i0.ɵɵadvance(18);
@@ -20863,7 +20890,7 @@ class NoLinkedCasesComponent extends AbstractJourneyComponent {
     }], () => [{ type: i1$2.Router }, { type: LinkedCasesService }, { type: MultipageComponentStateService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NoLinkedCasesComponent, { className: "NoLinkedCasesComponent", filePath: "lib/shared/components/palette/linked-cases/components/no-linked-cases/no-linked-cases.component.ts", lineNumber: 13 }); })();
 
-const _c0$N = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$L = a0 => ({ "govuk-form-group--error": a0 });
 function UnLinkCasesComponent_div_0_div_4_p_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 9)(1, "span", 10);
     i0.ɵɵtext(2, "Error:");
@@ -20901,7 +20928,7 @@ function UnLinkCasesComponent_div_0_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$N, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$L, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.unlinkErrorMessage);
     i0.ɵɵadvance(2);
@@ -21838,7 +21865,7 @@ class MoneyGbpInputComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MoneyGbpInputComponent, { className: "MoneyGbpInputComponent", filePath: "lib/shared/components/palette/money-gbp/money-gbp-input.component.ts", lineNumber: 28 }); })();
 
-const _c0$M = a0 => ({ "form-group-error": a0 });
+const _c0$K = a0 => ({ "form-group-error": a0 });
 function WriteMoneyGbpFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -21887,7 +21914,7 @@ class WriteMoneyGbpFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵpipe(9, "ccdIsMandatory");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$M, !ctx.moneyGbpControl.valid && (ctx.moneyGbpControl.dirty || ctx.moneyGbpControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$K, !ctx.moneyGbpControl.valid && (ctx.moneyGbpControl.dirty || ctx.moneyGbpControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -21953,7 +21980,7 @@ class ReadMultiSelectListFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadMultiSelectListFieldComponent, { className: "ReadMultiSelectListFieldComponent", filePath: "lib/shared/components/palette/multi-select-list/read-multi-select-list-field.component.ts", lineNumber: 10 }); })();
 
-const _c0$L = a0 => ({ "error": a0 });
+const _c0$J = a0 => ({ "error": a0 });
 function WriteMultiSelectListFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -22054,7 +22081,7 @@ class WriteMultiSelectListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵtemplate(4, WriteMultiSelectListFieldComponent_span_4_Template, 3, 3, "span", 2)(5, WriteMultiSelectListFieldComponent_span_5_Template, 3, 4, "span", 3)(6, WriteMultiSelectListFieldComponent_ng_container_6_Template, 6, 8, "ng-container", 4);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$L, !ctx.checkboxes.valid && (ctx.checkboxes.dirty || ctx.checkboxes.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$J, !ctx.checkboxes.valid && (ctx.checkboxes.dirty || ctx.checkboxes.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
@@ -22093,7 +22120,7 @@ class ReadNumberFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadNumberFieldComponent, { className: "ReadNumberFieldComponent", filePath: "lib/shared/components/palette/number/read-number-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$K = a0 => ({ "form-group-error": a0 });
+const _c0$I = a0 => ({ "form-group-error": a0 });
 const _c1$g = a0 => ({ "govuk-input--error": a0 });
 function WriteNumberFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -22139,7 +22166,7 @@ class WriteNumberFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$K, !ctx.numberControl.valid && ctx.numberControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$I, !ctx.numberControl.valid && ctx.numberControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -22318,7 +22345,7 @@ class ReadOrganisationFieldComponent extends AbstractFieldReadComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadOrganisationFieldComponent, { className: "ReadOrganisationFieldComponent", filePath: "lib/shared/components/palette/organisation/read-organisation-field.component.ts", lineNumber: 11 }); })();
 
-const _c0$J = a0 => ({ "scroll-container ": a0 });
+const _c0$H = a0 => ({ "scroll-container ": a0 });
 function WriteOrganisationFieldComponent_fieldset_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "fieldset", 3);
     i0.ɵɵelement(1, "legend", 4);
@@ -22397,7 +22424,7 @@ function WriteOrganisationFieldComponent_fieldset_3_div_17_Template(rf, ctx) { i
     let tmp_3_0;
     let tmp_5_0;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$J, ((tmp_3_0 = i0.ɵɵpipeBind1(1, 3, ctx_r2.simpleOrganisations$)) == null ? null : tmp_3_0.length) > 10));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$H, ((tmp_3_0 = i0.ɵɵpipeBind1(1, 3, ctx_r2.simpleOrganisations$)) == null ? null : tmp_3_0.length) > 10));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(3, 5, ctx_r2.simpleOrganisations$));
     i0.ɵɵadvance(2);
@@ -22739,98 +22766,38 @@ class PaymentField extends AbstractFieldReadComponent {
     }
 }
 
-const _c0$I = ["paymentHost"];
-function CasePaymentHistoryViewerFieldComponent_p_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 6);
-    i0.ɵɵtext(1, "The payment information could not be loaded. Please try again.");
-    i0.ɵɵelementEnd();
-} }
 class CasePaymentHistoryViewerFieldComponent extends PaymentField {
-    environmentInjector;
     PAYMENT_HISTORY_WARNING = 'Recent payments may take a few minutes to reflect here.';
-    paymentLoadError = false;
-    paymentHost;
-    paymentComponentRef;
-    paymentModuleRef;
-    constructor(appConfig, sessionStorage, environmentInjector) {
+    constructor(appConfig, sessionStorage) {
         super(appConfig, sessionStorage);
-        this.environmentInjector = environmentInjector;
     }
-    ngAfterViewInit() {
-        void this.renderPayment();
-    }
-    ngOnDestroy() {
-        this.paymentHost?.clear();
-        this.paymentComponentRef = undefined;
-        this.paymentModuleRef?.destroy();
-    }
-    async renderPayment() {
-        let paymentLibrary;
-        try {
-            paymentLibrary = await import('@hmcts/ccpay-web-component');
-        }
-        catch {
-            this.paymentLoadError = true;
-            return;
-        }
-        const { PaymentLibComponent, PaymentLibModule } = paymentLibrary;
-        this.paymentModuleRef = createNgModule(PaymentLibModule, this.environmentInjector);
-        this.paymentComponentRef = this.paymentHost.createComponent(PaymentLibComponent, {
-            ngModuleRef: this.paymentModuleRef
-        });
-        this.paymentComponentRef.setInput('API_ROOT', this.getBaseURL());
-        this.paymentComponentRef.setInput('CCD_CASE_NUMBER', this.caseReference);
-        this.paymentComponentRef.setInput('BULKSCAN_API_ROOT', this.getPayBulkScanBaseURL());
-        this.paymentComponentRef.setInput('SELECTED_OPTION', 'CCDorException');
-        this.paymentComponentRef.setInput('ISBSENABLE', 'true');
-        this.paymentComponentRef.setInput('LOGGEDINUSEREMAIL', this.getUserEmail());
-        this.paymentComponentRef.setInput('LOGGEDINUSERROLES', this.getUserRoles());
-        this.paymentComponentRef.setInput('REFUNDS_API_ROOT', this.getRefundsUrl());
-        this.paymentComponentRef.setInput('NOTIFICATION_API_ROOT', this.getNotificationUrl());
-        this.paymentComponentRef.setInput('VIEW', 'case-transactions');
-        this.paymentComponentRef.setInput('TAKEPAYMENT', false);
-        this.paymentComponentRef.setInput('SERVICEREQUEST', false);
-        this.paymentComponentRef.setInput('PAYMENT_GROUP_REF', null);
-        this.paymentComponentRef.setInput('EXC_REFERENCE', this.caseReference);
-        this.paymentComponentRef.setInput('DCN_NUMBER', null);
-        this.paymentComponentRef.setInput('ISPAYMENTSTATUSENABLED', 'Enable');
-    }
-    static ɵfac = function CasePaymentHistoryViewerFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CasePaymentHistoryViewerFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(i0.EnvironmentInjector)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CasePaymentHistoryViewerFieldComponent, selectors: [["ccd-case-payment-history-viewer-field"]], viewQuery: function CasePaymentHistoryViewerFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$I, 5, ViewContainerRef);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.paymentHost = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 7, consts: [["paymentHost", ""], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-visually-hidden"], ["class", "govuk-error-message", 4, "ngIf"], [1, "govuk-error-message"]], template: function CasePaymentHistoryViewerFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1)(1, "span", 2);
+    static ɵfac = function CasePaymentHistoryViewerFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CasePaymentHistoryViewerFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(SessionStorageService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CasePaymentHistoryViewerFieldComponent, selectors: [["ccd-case-payment-history-viewer-field"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 22, consts: [[1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-visually-hidden"], [3, "API_ROOT", "CCD_CASE_NUMBER", "BULKSCAN_API_ROOT", "SELECTED_OPTION", "ISBSENABLE", "LOGGEDINUSEREMAIL", "LOGGEDINUSERROLES", "REFUNDS_API_ROOT", "NOTIFICATION_API_ROOT", "VIEW", "TAKEPAYMENT", "SERVICEREQUEST", "PAYMENT_GROUP_REF", "EXC_REFERENCE", "DCN_NUMBER", "ISPAYMENTSTATUSENABLED"]], template: function CasePaymentHistoryViewerFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
             i0.ɵɵtext(2, "!");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "strong", 3)(4, "span", 4);
+            i0.ɵɵelementStart(3, "strong", 2)(4, "span", 3);
             i0.ɵɵtext(5);
             i0.ɵɵpipe(6, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵtext(7);
             i0.ɵɵpipe(8, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(9, CasePaymentHistoryViewerFieldComponent_p_9_Template, 2, 0, "p", 5);
-            i0.ɵɵelementContainer(10, null, 0);
+            i0.ɵɵelement(9, "ccpay-payment-lib", 4);
         } if (rf & 2) {
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 3, "Warning"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 18, "Warning"));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 5, ctx.PAYMENT_HISTORY_WARNING), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 20, ctx.PAYMENT_HISTORY_WARNING), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.paymentLoadError);
-        } }, dependencies: [i5.NgIf, i1.RpxTranslatePipe], styles: [".govuk-warning-text[_ngcontent-%COMP%]{margin-top:20px;margin-bottom:-20px}"] });
+            i0.ɵɵproperty("API_ROOT", ctx.getBaseURL())("CCD_CASE_NUMBER", ctx.caseReference)("BULKSCAN_API_ROOT", ctx.getPayBulkScanBaseURL())("SELECTED_OPTION", "CCDorException")("ISBSENABLE", "true")("LOGGEDINUSEREMAIL", ctx.getUserEmail())("LOGGEDINUSERROLES", ctx.getUserRoles())("REFUNDS_API_ROOT", ctx.getRefundsUrl())("NOTIFICATION_API_ROOT", ctx.getNotificationUrl())("VIEW", "case-transactions")("TAKEPAYMENT", false)("SERVICEREQUEST", false)("PAYMENT_GROUP_REF", null)("EXC_REFERENCE", ctx.caseReference)("DCN_NUMBER", null)("ISPAYMENTSTATUSENABLED", "Enable");
+        } }, dependencies: [i3.PaymentLibComponent, i1.RpxTranslatePipe], styles: [".govuk-warning-text[_ngcontent-%COMP%]{margin-top:20px;margin-bottom:20px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CasePaymentHistoryViewerFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-payment-history-viewer-field', standalone: false, template: "<div class=\"govuk-warning-text\">\n    <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n    <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">{{'Warning' | rpxTranslate}}</span>\n        {{PAYMENT_HISTORY_WARNING | rpxTranslate}}\n    </strong>\n</div>\n<p *ngIf=\"paymentLoadError\" class=\"govuk-error-message\">The payment information could not be loaded. Please try again.</p>\n<ng-container #paymentHost></ng-container>\n", styles: [".govuk-warning-text{margin-top:20px;margin-bottom:-20px}\n"] }]
-    }], () => [{ type: AbstractAppConfig }, { type: SessionStorageService }, { type: i0.EnvironmentInjector }], { paymentHost: [{
-            type: ViewChild,
-            args: ['paymentHost', { read: ViewContainerRef }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CasePaymentHistoryViewerFieldComponent, { className: "CasePaymentHistoryViewerFieldComponent", filePath: "lib/shared/components/palette/payment/case-payment-history-viewer-field.component.ts", lineNumber: 22 }); })();
+        args: [{ selector: 'ccd-case-payment-history-viewer-field', standalone: false, template: "<div class=\"govuk-warning-text\">\n    <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n    <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-visually-hidden\">{{'Warning' | rpxTranslate}}</span>\n        {{PAYMENT_HISTORY_WARNING | rpxTranslate}}\n    </strong>\n</div>\n<ccpay-payment-lib\n    [API_ROOT]=\"getBaseURL()\"\n    [CCD_CASE_NUMBER]=\"caseReference\"\n    [BULKSCAN_API_ROOT]=\"getPayBulkScanBaseURL()\"\n    [SELECTED_OPTION]=\"'CCDorException'\"\n    [ISBSENABLE]=\"'true'\"\n    [LOGGEDINUSEREMAIL]=\"getUserEmail()\"\n    [LOGGEDINUSERROLES]=\"getUserRoles()\"\n    [REFUNDS_API_ROOT]=\"getRefundsUrl()\"\n    [NOTIFICATION_API_ROOT]=\"getNotificationUrl()\"\n    [VIEW]=\"'case-transactions'\"\n    [TAKEPAYMENT]=\"false\"\n    [SERVICEREQUEST]=\"false\"\n    [PAYMENT_GROUP_REF]=\"null\"\n    [EXC_REFERENCE]=\"caseReference\"\n    [DCN_NUMBER]=\"null\"\n    [ISPAYMENTSTATUSENABLED]=\"'Enable'\"\n></ccpay-payment-lib>\n", styles: [".govuk-warning-text{margin-top:20px;margin-bottom:20px}\n"] }]
+    }], () => [{ type: AbstractAppConfig }, { type: SessionStorageService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CasePaymentHistoryViewerFieldComponent, { className: "CasePaymentHistoryViewerFieldComponent", filePath: "lib/shared/components/palette/payment/case-payment-history-viewer-field.component.ts", lineNumber: 12 }); })();
 
 class ReadPhoneUKFieldComponent extends AbstractFieldReadComponent {
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadPhoneUKFieldComponent_BaseFactory; return function ReadPhoneUKFieldComponent_Factory(__ngFactoryType__) { return (ɵReadPhoneUKFieldComponent_BaseFactory || (ɵReadPhoneUKFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadPhoneUKFieldComponent)))(__ngFactoryType__ || ReadPhoneUKFieldComponent); }; })();
@@ -22853,7 +22820,7 @@ class ReadPhoneUKFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadPhoneUKFieldComponent, { className: "ReadPhoneUKFieldComponent", filePath: "lib/shared/components/palette/phone-uk/read-phone-uk-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$H = a0 => ({ "form-group-error": a0 });
+const _c0$G = a0 => ({ "form-group-error": a0 });
 const _c1$f = a0 => ({ "govuk-input--error": a0 });
 function WritePhoneUKFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -22899,7 +22866,7 @@ class WritePhoneUKFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$H, !ctx.phoneUkControl.valid && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$G, !ctx.phoneUkControl.valid && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -25393,7 +25360,7 @@ class QueryWriteDateInputComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteDateInputComponent, { className: "QueryWriteDateInputComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-date-input/query-write-date-input.component.ts", lineNumber: 16 }); })();
 
-const _c0$G = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$F = a0 => ({ "govuk-form-group--error": a0 });
 function QueryWriteRaiseQueryComponent_ccd_query_case_details_header_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-query-case-details-header", 5);
 } if (rf & 2) {
@@ -25473,7 +25440,7 @@ function QueryWriteRaiseQueryComponent_div_11_ng_container_50_Template(rf, ctx)
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$G, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 3, "What is the date of the hearing?"), " ");
     i0.ɵɵadvance(2);
@@ -25540,7 +25507,7 @@ function QueryWriteRaiseQueryComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(8);
     i0.ɵɵproperty("content", i0.ɵɵpipeBind1(10, 23, ctx_r0.serviceMessage));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c0$G, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 25, "Query subject"), " ");
     i0.ɵɵadvance(3);
@@ -25548,7 +25515,7 @@ function QueryWriteRaiseQueryComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r0.submitted && (ctx_r0.formGroup.get("subject").hasError("required") || ctx_r0.formGroup.get("subject").hasError("maxlength")));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$G, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 29, "Query detail"), " ");
     i0.ɵɵadvance(3);
@@ -25559,7 +25526,7 @@ function QueryWriteRaiseQueryComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("govuk-textarea--error", ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required"));
     i0.ɵɵproperty("formControlName", "body");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(47, _c0$G, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(47, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 33, "Is the query hearing related?"), " ");
     i0.ɵɵadvance(2);
@@ -26183,7 +26150,7 @@ class CloseQueryComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CloseQueryComponent, { className: "CloseQueryComponent", filePath: "lib/shared/components/palette/query-management/components/close-query/close-query.component.ts", lineNumber: 9 }); })();
 
-const _c0$F = (a0, a1) => ["/query-management", "query", a0, "4", a1];
+const _c0$E = (a0, a1) => ["/query-management", "query", a0, "4", a1];
 function ReadQueryManagementFieldComponent_ng_container_0_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 6)(1, "ccd-query-list", 7);
@@ -26222,7 +26189,7 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_conta
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$F, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$E, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
@@ -26236,7 +26203,7 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_container_1_ng_templ
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$F, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$E, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
@@ -26649,7 +26616,7 @@ class ReadRichTextAreaFieldComponent extends AbstractFieldReadComponent {
     }], () => [{ type: i4$1.DomSanitizer }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadRichTextAreaFieldComponent, { className: "ReadRichTextAreaFieldComponent", filePath: "lib/shared/components/palette/rich-text-area/read-rich-text-area-field.component.ts", lineNumber: 13 }); })();
 
-const _c0$E = ["editorHost"];
+const _c0$D = ["editorHost"];
 const _c1$e = a0 => ({ "form-group-error": a0 });
 const _c2$3 = a0 => ({ "ccd-rich-text-area__editor--error": a0 });
 const _c3 = a0 => ({ "ccd-rich-text-area__toolbar-button--active": a0 });
@@ -29271,7 +29238,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵWriteRichTextAreaFieldComponent_BaseFactory; return function WriteRichTextAreaFieldComponent_Factory(__ngFactoryType__) { return (ɵWriteRichTextAreaFieldComponent_BaseFactory || (ɵWriteRichTextAreaFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(WriteRichTextAreaFieldComponent)))(__ngFactoryType__ || WriteRichTextAreaFieldComponent); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteRichTextAreaFieldComponent, selectors: [["ccd-write-rich-text-area-field"]], viewQuery: function WriteRichTextAreaFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$E, 5);
+            i0.ɵɵviewQuery(_c0$D, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorHost = _t.first);
@@ -29432,7 +29399,7 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵproperty("ngIf", !ctx.isOrderedListActive());
             i0.ɵɵadvance(16);
             i0.ɵɵproperty("editor", ctx.editor)("formControl", ctx.richTextAreaControl);
-        } }, dependencies: [i5.NgClass, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.NgControlStatus, i4.FormControlDirective, i3.NgxEditorComponent, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".ccd-rich-text-area{margin-bottom:30px}.ccd-rich-text-area__editor{max-width:100%}.ccd-rich-text-area__keyboard-instructions{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__toolbar{align-items:center;background:#fff;border:1px solid #d8dde0;border-radius:6px;box-sizing:border-box;display:flex;flex-wrap:wrap;column-gap:2px;margin-bottom:10px;max-width:100%;padding:6px 8px;row-gap:6px;width:fit-content}.ccd-rich-text-area__toolbar-group{align-items:center;display:inline-flex;flex:0 0 auto;gap:2px}.ccd-rich-text-area__toolbar-group--list{max-width:100%}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;box-sizing:border-box;height:255px;max-width:100%;min-height:255px;min-width:200px;overflow:hidden;resize:both;width:100%}.ccd-rich-text-area .NgxEditor__Wrapper:focus-within{outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button{background:#fff;align-items:center;border:0;border-radius:2px;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:28px;justify-content:center;min-width:28px;padding:4px;width:28px}.ccd-rich-text-area__toolbar-button:hover{background:#f3f2f1}.ccd-rich-text-area__toolbar-button:focus{background:#fd0;box-shadow:0 0 0 2px #0b0c0c;outline:2px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active,.ccd-rich-text-area__toolbar-button--active:hover{background:#1d70b8;color:#fff}.ccd-rich-text-area__toolbar-button--italic{font-style:italic}.ccd-rich-text-area__toolbar-button--underline{text-decoration:underline}.ccd-rich-text-area__toolbar-separator{border-left:1px solid #b1b4b6;height:24px;margin:0 5px 0 3px}.ccd-rich-text-area__heading-level{display:inline-flex;margin-right:3px}.ccd-rich-text-area__heading-level-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__heading-level-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;min-width:108px;padding:2px 24px 2px 6px;width:150px}.ccd-rich-text-area__heading-level-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__list-style{align-items:center;display:inline-flex;gap:8px;margin:0 4px;min-width:0}.ccd-rich-text-area__list-style-label{font-weight:700;white-space:nowrap}.ccd-rich-text-area__list-style-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;max-width:100%;min-width:0;padding:2px 28px 2px 8px;width:260px}.ccd-rich-text-area__list-style-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}@media(max-width:480px){.ccd-rich-text-area__toolbar-group--list{flex-wrap:wrap}.ccd-rich-text-area__list-style{flex:1 1 100%;margin-left:0}.ccd-rich-text-area__list-style-select{flex:1 1 auto;width:auto}}.ccd-rich-text-area__toolbar-icon{display:block;fill:currentColor;height:20px;width:20px}.ccd-rich-text-area__toolbar-icon--paragraph{display:inline-flex;font-size:18px;line-height:1;width:auto}.ccd-rich-text-area__toolbar-icon--heading{display:inline-flex;font-size:18px;font-weight:700;line-height:1;width:auto}.ccd-rich-text-area .ProseMirror h1{font-size:20px;font-weight:700}.ccd-rich-text-area .ProseMirror h2{font-size:18px;font-weight:700}.ccd-rich-text-area .ProseMirror h3{font-size:16px;font-weight:700}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:100%;min-height:0;overflow:hidden;width:100%}.ccd-rich-text-area__editor--error .NgxEditor__Wrapper{border-color:#d4351c}.ccd-rich-text-area .NgxEditor__Content{box-sizing:border-box;font-size:14px;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 14px}.ccd-rich-text-area .ProseMirror{font-size:14px;min-height:231px;outline:0;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area .ProseMirror [data-indent=\"1\"]{margin-left:40px}.ccd-rich-text-area .ProseMirror [data-indent=\"2\"]{margin-left:80px}.ccd-rich-text-area .ProseMirror [data-indent=\"3\"]{margin-left:120px}.ccd-rich-text-area .ProseMirror [data-indent=\"4\"]{margin-left:160px}.ccd-rich-text-area .ProseMirror [data-indent=\"5\"]{margin-left:200px}.ccd-rich-text-area .ProseMirror [data-indent=\"6\"]{margin-left:240px}.ccd-rich-text-area .ProseMirror strong,.ccd-rich-text-area .ProseMirror strong *,.ccd-rich-text-area .ProseMirror b,.ccd-rich-text-area .ProseMirror b *{font-weight:700}.ccd-rich-text-area .ProseMirror strong u,.ccd-rich-text-area .ProseMirror u strong,.ccd-rich-text-area .ProseMirror b u,.ccd-rich-text-area .ProseMirror u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area .ProseMirror:focus{box-shadow:none;outline:0}.ccd-rich-text-area .ProseMirror p,.ccd-rich-text-area .ProseMirror ul,.ccd-rich-text-area .ProseMirror ol,.ccd-rich-text-area .ProseMirror li{font-size:14px;margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area .ProseMirror p{margin-bottom:5px}.ccd-rich-text-area .ProseMirror ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"1\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"1\"]{margin-left:40px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"2\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"2\"]{margin-left:80px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"3\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"3\"]{margin-left:120px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"4\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"4\"]{margin-left:160px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"5\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"5\"]{margin-left:200px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"6\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"6\"]{margin-left:240px;padding-left:25px}.ccd-rich-text-area .ProseMirror ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area .ProseMirror ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area .ProseMirror ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area .ProseMirror li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}.ccd-rich-text-area .ProseMirror li>ul,.ccd-rich-text-area .ProseMirror li>ol{margin-top:5px}\n"], encapsulation: 2 });
+        } }, dependencies: [i5.NgClass, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.NgControlStatus, i4.FormControlDirective, i3$1.NgxEditorComponent, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], styles: [".ccd-rich-text-area{margin-bottom:30px}.ccd-rich-text-area__editor{max-width:100%}.ccd-rich-text-area__keyboard-instructions{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__toolbar{align-items:center;background:#fff;border:1px solid #d8dde0;border-radius:6px;box-sizing:border-box;display:flex;flex-wrap:wrap;column-gap:2px;margin-bottom:10px;max-width:100%;padding:6px 8px;row-gap:6px;width:fit-content}.ccd-rich-text-area__toolbar-group{align-items:center;display:inline-flex;flex:0 0 auto;gap:2px}.ccd-rich-text-area__toolbar-group--list{max-width:100%}.ccd-rich-text-area .NgxEditor__Wrapper{border:1px solid #000;border-radius:0;box-sizing:border-box;height:255px;max-width:100%;min-height:255px;min-width:200px;overflow:hidden;resize:both;width:100%}.ccd-rich-text-area .NgxEditor__Wrapper:focus-within{outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button{background:#fff;align-items:center;border:0;border-radius:2px;color:#0b0c0c;display:inline-flex;font-family:inherit;font-size:18px;font-weight:700;height:28px;justify-content:center;min-width:28px;padding:4px;width:28px}.ccd-rich-text-area__toolbar-button:hover{background:#f3f2f1}.ccd-rich-text-area__toolbar-button:focus{background:#fd0;box-shadow:0 0 0 2px #0b0c0c;outline:2px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__toolbar-button--active,.ccd-rich-text-area__toolbar-button--active:hover{background:#1d70b8;color:#fff}.ccd-rich-text-area__toolbar-button--italic{font-style:italic}.ccd-rich-text-area__toolbar-button--underline{text-decoration:underline}.ccd-rich-text-area__toolbar-separator{border-left:1px solid #b1b4b6;height:24px;margin:0 5px 0 3px}.ccd-rich-text-area__heading-level{display:inline-flex;margin-right:3px}.ccd-rich-text-area__heading-level-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ccd-rich-text-area__heading-level-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;min-width:108px;padding:2px 24px 2px 6px;width:150px}.ccd-rich-text-area__heading-level-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}.ccd-rich-text-area__list-style{align-items:center;display:inline-flex;gap:8px;margin:0 4px;min-width:0}.ccd-rich-text-area__list-style-label{font-weight:700;white-space:nowrap}.ccd-rich-text-area__list-style-select{background-color:#fff;border:1px solid #0b0c0c;border-radius:0;color:#0b0c0c;font-family:inherit;font-size:16px;height:32px;max-width:100%;min-width:0;padding:2px 28px 2px 8px;width:260px}.ccd-rich-text-area__list-style-select:focus{box-shadow:0 0 0 2px #0b0c0c;outline:3px solid #ffdd00;outline-offset:0}@media(max-width:480px){.ccd-rich-text-area__toolbar-group--list{flex-wrap:wrap}.ccd-rich-text-area__list-style{flex:1 1 100%;margin-left:0}.ccd-rich-text-area__list-style-select{flex:1 1 auto;width:auto}}.ccd-rich-text-area__toolbar-icon{display:block;fill:currentColor;height:20px;width:20px}.ccd-rich-text-area__toolbar-icon--paragraph{display:inline-flex;font-size:18px;line-height:1;width:auto}.ccd-rich-text-area__toolbar-icon--heading{display:inline-flex;font-size:18px;font-weight:700;line-height:1;width:auto}.ccd-rich-text-area .ProseMirror h1{font-size:20px;font-weight:700}.ccd-rich-text-area .ProseMirror h2{font-size:18px;font-weight:700}.ccd-rich-text-area .ProseMirror h3{font-size:16px;font-weight:700}.ccd-rich-text-area .NgxEditor__Wrapper .NgxEditor{border:0;border-radius:0;height:100%;min-height:0;overflow:hidden;width:100%}.ccd-rich-text-area__editor--error .NgxEditor__Wrapper{border-color:#d4351c}.ccd-rich-text-area .NgxEditor__Content{box-sizing:border-box;font-size:14px;height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px 14px}.ccd-rich-text-area .ProseMirror{font-size:14px;min-height:231px;outline:0;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal}.ccd-rich-text-area .ProseMirror [data-indent=\"1\"]{margin-left:40px}.ccd-rich-text-area .ProseMirror [data-indent=\"2\"]{margin-left:80px}.ccd-rich-text-area .ProseMirror [data-indent=\"3\"]{margin-left:120px}.ccd-rich-text-area .ProseMirror [data-indent=\"4\"]{margin-left:160px}.ccd-rich-text-area .ProseMirror [data-indent=\"5\"]{margin-left:200px}.ccd-rich-text-area .ProseMirror [data-indent=\"6\"]{margin-left:240px}.ccd-rich-text-area .ProseMirror strong,.ccd-rich-text-area .ProseMirror strong *,.ccd-rich-text-area .ProseMirror b,.ccd-rich-text-area .ProseMirror b *{font-weight:700}.ccd-rich-text-area .ProseMirror strong u,.ccd-rich-text-area .ProseMirror u strong,.ccd-rich-text-area .ProseMirror b u,.ccd-rich-text-area .ProseMirror u b{font-weight:700!important;text-decoration:underline}.ccd-rich-text-area .ProseMirror:focus{box-shadow:none;outline:0}.ccd-rich-text-area .ProseMirror p,.ccd-rich-text-area .ProseMirror ul,.ccd-rich-text-area .ProseMirror ol,.ccd-rich-text-area .ProseMirror li{font-size:14px;margin-top:0;overflow-wrap:anywhere;word-break:normal}.ccd-rich-text-area .ProseMirror p{margin-bottom:5px}.ccd-rich-text-area .ProseMirror ul{list-style:disc outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ol{list-style:decimal outside;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"1\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"1\"]{margin-left:40px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"2\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"2\"]{margin-left:80px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"3\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"3\"]{margin-left:120px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"4\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"4\"]{margin-left:160px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"5\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"5\"]{margin-left:200px;padding-left:25px}.ccd-rich-text-area .ProseMirror ul[data-indent=\"6\"],.ccd-rich-text-area .ProseMirror ol[data-indent=\"6\"]{margin-left:240px;padding-left:25px}.ccd-rich-text-area .ProseMirror ol[type=a]{list-style-type:lower-alpha}.ccd-rich-text-area .ProseMirror ol[type=i]{list-style-type:lower-roman}.ccd-rich-text-area .ProseMirror ol[type=i]>li::marker{content:\"(\" counter(list-item,lower-roman) \") \"}.ccd-rich-text-area .ProseMirror li{display:list-item;margin-bottom:5px}.ccd-rich-text-area .ProseMirror li>p{margin:0}.ccd-rich-text-area .ProseMirror li>ul,.ccd-rich-text-area .ProseMirror li>ol{margin-top:5px}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteRichTextAreaFieldComponent, [{
         type: Component,
@@ -29464,7 +29431,7 @@ class ReadTextFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadTextFieldComponent, { className: "ReadTextFieldComponent", filePath: "lib/shared/components/palette/text/read-text-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$D = a0 => ({ "form-group-error": a0 });
+const _c0$C = a0 => ({ "form-group-error": a0 });
 const _c1$d = a0 => ({ "govuk-input--error": a0 });
 function WriteTextFieldComponent_label_1_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -29522,7 +29489,7 @@ class WriteTextFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵlistener("blur", function WriteTextFieldComponent_Template_input_blur_4_listener($event) { return ctx.onBlur($event); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$D, !!ctx.textControl && !ctx.textControl.valid && (ctx.textControl.dirty || ctx.textControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$C, !!ctx.textControl && !ctx.textControl.valid && (ctx.textControl.dirty || ctx.textControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.caseField.hidden);
             i0.ɵɵadvance();
@@ -29560,7 +29527,7 @@ class ReadTextAreaFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadTextAreaFieldComponent, { className: "ReadTextAreaFieldComponent", filePath: "lib/shared/components/palette/text-area/read-text-area-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$C = a0 => ({ "form-group-error": a0 });
+const _c0$B = a0 => ({ "form-group-error": a0 });
 const _c1$c = a0 => ({ "govuk-textarea--error": a0 });
 function WriteTextAreaFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -29619,7 +29586,7 @@ class WriteTextAreaFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵlistener("input", function WriteTextAreaFieldComponent_Template_textarea_input_5_listener($event) { return ctx.autoGrow($event); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$C, !ctx.textareaControl.valid && ctx.textareaControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$B, !ctx.textareaControl.valid && ctx.textareaControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -29656,86 +29623,31 @@ class UnsupportedFieldComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnsupportedFieldComponent, { className: "UnsupportedFieldComponent", filePath: "lib/shared/components/palette/unsupported-field.component.ts", lineNumber: 8 }); })();
 
-const _c0$B = ["paymentHost"];
-function WaysToPayFieldComponent_p_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 2);
-    i0.ɵɵtext(1, "The payment information could not be loaded. Please try again.");
-    i0.ɵɵelementEnd();
+function WaysToPayFieldComponent_ccpay_payment_lib_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ccpay-payment-lib", 1);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("API_ROOT", ctx_r0.getBaseURL())("BULKSCAN_API_ROOT", ctx_r0.getPayBulkScanBaseURL())("REFUNDS_API_ROOT", ctx_r0.getRefundsUrl())("NOTIFICATION_API_ROOT", ctx_r0.getNotificationUrl())("CCD_CASE_NUMBER", ctx_r0.caseReference)("VIEW", "case-transactions")("TAKEPAYMENT", false)("SERVICEREQUEST", true)("PAYMENT_GROUP_REF", null)("EXC_REFERENCE", ctx_r0.caseReference)("DCN_NUMBER", null)("SELECTED_OPTION", "CCDorException")("LOGGEDINUSERROLES", ctx_r0.getUserRoles())("CARDPAYMENTRETURNURL", ctx_r0.getCardPaymentReturnUrl())("ISPAYMENTSTATUSENABLED", "Enable");
 } }
 class WaysToPayFieldComponent extends PaymentField {
-    environmentInjector;
-    paymentLoadError = false;
-    paymentHost;
-    paymentComponentRef;
-    paymentModuleRef;
-    constructor(appConfig, sessionStorage, environmentInjector) {
+    constructor(appConfig, sessionStorage) {
         super(appConfig, sessionStorage);
-        this.environmentInjector = environmentInjector;
-    }
-    ngAfterViewInit() {
-        if (this.getUserRoles().length > 0) {
-            void this.renderPayment();
-        }
-    }
-    ngOnDestroy() {
-        this.paymentHost?.clear();
-        this.paymentComponentRef = undefined;
-        this.paymentModuleRef?.destroy();
     }
     getCardPaymentReturnUrl() {
         return this.appConfig.getPaymentReturnUrl();
     }
-    async renderPayment() {
-        let paymentLibrary;
-        try {
-            paymentLibrary = await import('@hmcts/ccpay-web-component');
-        }
-        catch {
-            this.paymentLoadError = true;
-            return;
-        }
-        const { PaymentLibComponent, PaymentLibModule } = paymentLibrary;
-        this.paymentModuleRef = createNgModule(PaymentLibModule, this.environmentInjector);
-        this.paymentComponentRef = this.paymentHost.createComponent(PaymentLibComponent, {
-            ngModuleRef: this.paymentModuleRef
-        });
-        this.paymentComponentRef.setInput('API_ROOT', this.getBaseURL());
-        this.paymentComponentRef.setInput('BULKSCAN_API_ROOT', this.getPayBulkScanBaseURL());
-        this.paymentComponentRef.setInput('REFUNDS_API_ROOT', this.getRefundsUrl());
-        this.paymentComponentRef.setInput('NOTIFICATION_API_ROOT', this.getNotificationUrl());
-        this.paymentComponentRef.setInput('CCD_CASE_NUMBER', this.caseReference);
-        this.paymentComponentRef.setInput('VIEW', 'case-transactions');
-        this.paymentComponentRef.setInput('TAKEPAYMENT', false);
-        this.paymentComponentRef.setInput('SERVICEREQUEST', true);
-        this.paymentComponentRef.setInput('PAYMENT_GROUP_REF', null);
-        this.paymentComponentRef.setInput('EXC_REFERENCE', this.caseReference);
-        this.paymentComponentRef.setInput('DCN_NUMBER', null);
-        this.paymentComponentRef.setInput('SELECTED_OPTION', 'CCDorException');
-        this.paymentComponentRef.setInput('LOGGEDINUSERROLES', this.getUserRoles());
-        this.paymentComponentRef.setInput('CARDPAYMENTRETURNURL', this.getCardPaymentReturnUrl());
-        this.paymentComponentRef.setInput('ISPAYMENTSTATUSENABLED', 'Enable');
-    }
-    static ɵfac = function WaysToPayFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaysToPayFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(i0.EnvironmentInjector)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WaysToPayFieldComponent, selectors: [["ccd-ways-to-pay-field"]], viewQuery: function WaysToPayFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$B, 5, ViewContainerRef);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.paymentHost = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [["paymentHost", ""], ["class", "govuk-error-message", 4, "ngIf"], [1, "govuk-error-message"]], template: function WaysToPayFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, WaysToPayFieldComponent_p_0_Template, 2, 0, "p", 1);
-            i0.ɵɵelementContainer(1, null, 0);
+    static ɵfac = function WaysToPayFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaysToPayFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(SessionStorageService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WaysToPayFieldComponent, selectors: [["ccd-ways-to-pay-field"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[3, "API_ROOT", "BULKSCAN_API_ROOT", "REFUNDS_API_ROOT", "NOTIFICATION_API_ROOT", "CCD_CASE_NUMBER", "VIEW", "TAKEPAYMENT", "SERVICEREQUEST", "PAYMENT_GROUP_REF", "EXC_REFERENCE", "DCN_NUMBER", "SELECTED_OPTION", "LOGGEDINUSERROLES", "CARDPAYMENTRETURNURL", "ISPAYMENTSTATUSENABLED", 4, "ngIf"], [3, "API_ROOT", "BULKSCAN_API_ROOT", "REFUNDS_API_ROOT", "NOTIFICATION_API_ROOT", "CCD_CASE_NUMBER", "VIEW", "TAKEPAYMENT", "SERVICEREQUEST", "PAYMENT_GROUP_REF", "EXC_REFERENCE", "DCN_NUMBER", "SELECTED_OPTION", "LOGGEDINUSERROLES", "CARDPAYMENTRETURNURL", "ISPAYMENTSTATUSENABLED"]], template: function WaysToPayFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, WaysToPayFieldComponent_ccpay_payment_lib_0_Template, 1, 15, "ccpay-payment-lib", 0);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.paymentLoadError);
-        } }, dependencies: [i5.NgIf], encapsulation: 2 });
+            i0.ɵɵproperty("ngIf", ctx.getUserRoles().length > 0);
+        } }, dependencies: [i5.NgIf, i3.PaymentLibComponent], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaysToPayFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-ways-to-pay-field', standalone: false, template: "<p *ngIf=\"paymentLoadError\" class=\"govuk-error-message\">The payment information could not be loaded. Please try again.</p>\n<ng-container #paymentHost></ng-container>\n" }]
-    }], () => [{ type: AbstractAppConfig }, { type: SessionStorageService }, { type: i0.EnvironmentInjector }], { paymentHost: [{
-            type: ViewChild,
-            args: ['paymentHost', { read: ViewContainerRef }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WaysToPayFieldComponent, { className: "WaysToPayFieldComponent", filePath: "lib/shared/components/palette/waystopay/waystopay-field.component.ts", lineNumber: 21 }); })();
+        args: [{ selector: 'ccd-ways-to-pay-field', standalone: false, template: "<ccpay-payment-lib *ngIf=\"getUserRoles().length > 0\"\n    [API_ROOT]=\"getBaseURL()\"\n    [BULKSCAN_API_ROOT]=\"getPayBulkScanBaseURL()\"\n    [REFUNDS_API_ROOT]=\"getRefundsUrl()\"\n    [NOTIFICATION_API_ROOT]=\"getNotificationUrl()\"\n    [CCD_CASE_NUMBER]=\"caseReference\"\n    [VIEW]=\"'case-transactions'\"\n    [TAKEPAYMENT]=\"false\"\n    [SERVICEREQUEST]=\"true\"\n    [PAYMENT_GROUP_REF]=\"null\"\n    [EXC_REFERENCE]=\"caseReference\"\n    [DCN_NUMBER]=\"null\"\n    [SELECTED_OPTION]=\"'CCDorException'\"\n    [LOGGEDINUSERROLES]=\"getUserRoles()\"\n    [CARDPAYMENTRETURNURL]=\"getCardPaymentReturnUrl()\"\n    [ISPAYMENTSTATUSENABLED]=\"'Enable'\"\n></ccpay-payment-lib>" }]
+    }], () => [{ type: AbstractAppConfig }, { type: SessionStorageService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WaysToPayFieldComponent, { className: "WaysToPayFieldComponent", filePath: "lib/shared/components/palette/waystopay/waystopay-field.component.ts", lineNumber: 11 }); })();
 
 class YesNoService {
     static YES_INPUTS = [
@@ -37006,6 +36918,8 @@ class PaletteModule {
             MatAutocompleteModule,
             CdkTreeModule,
             OverlayModule,
+            // Payment services provided at root depend on providers from this module.
+            PaymentLibModule,
             RpxTranslationModule.forChild(),
             CdkTreeModule,
             OverlayModule,
@@ -37060,6 +36974,8 @@ class PaletteModule {
                     MatAutocompleteModule,
                     CdkTreeModule,
                     OverlayModule,
+                    // Payment services provided at root depend on providers from this module.
+                    PaymentLibModule,
                     RpxTranslationModule.forChild(),
                     CdkTreeModule,
                     OverlayModule,
@@ -37285,12 +37201,14 @@ class PaletteModule {
         MatDatepickerModule,
         MatAutocompleteModule,
         CdkTreeModule,
-        OverlayModule, i1.RpxTranslationModule, CdkTreeModule,
+        OverlayModule,
+        // Payment services provided at root depend on providers from this module.
+        PaymentLibModule, i1.RpxTranslationModule, CdkTreeModule,
         OverlayModule,
         MatDialogModule,
         LoadingModule,
         MarkdownComponentModule,
-        ErrorsModule, i3.NgxEditorModule], exports: [NgxMatDatepickerActions,
+        ErrorsModule, i3$1.NgxEditorModule], exports: [NgxMatDatepickerActions,
         NgxMatDatepickerApply,
         NgxMatDatepickerInput,
         NgxMatDatetimepicker,