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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, Injectable, DOCUMENT, Inject, NgModule, EventEmitter, Optional, Output, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, InjectionToken, ChangeDetectorRef, Directive, ViewChild, ChangeDetectionStrategy, SecurityContext, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, Injectable, DOCUMENT, Inject, NgModule, EventEmitter, Optional, Output, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, InjectionToken, ChangeDetectorRef, Directive, ViewChild, createNgModule, ViewContainerRef, ChangeDetectionStrategy, SecurityContext, Injector, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -14,6 +14,8 @@ import * as i1$2 from '@angular/router';
 import { RouterModule, NavigationStart, NavigationEnd } from '@angular/router';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { safeJsonParse } from '@hmcts/ccd-case-ui-toolkit/json-utils';
+export { safeJsonParse } from '@hmcts/ccd-case-ui-toolkit/json-utils';
 import moment from 'moment';
 import * as _ from 'underscore';
 import 'reflect-metadata';
@@ -25,11 +27,9 @@ 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$1 from 'ngx-editor';
+import * as i3 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 import { nodes, marks } from 'ngx-editor/schema';
 import { setBlockType } from 'prosemirror-commands';
@@ -50,10 +50,8 @@ import * as i5$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i15 from '@angular/material/input';
+import * as i14 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i14 from '@hmcts/media-viewer';
-import { MediaViewerModule } from '@hmcts/media-viewer';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i2$1 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
@@ -61,7 +59,7 @@ import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { compressToUTF16, decompressFromUTF16 } from 'lz-string';
 
-const _c0$1a = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
+const _c0$1d = [[["", "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);
@@ -139,7 +137,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$1a);
+            i0.ɵɵprojectionDef(_c0$1d);
             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()();
@@ -780,7 +778,7 @@ class ProfileService {
         type: Injectable
     }], () => [{ type: HttpService }, { type: AbstractAppConfig }], null); })();
 
-const _c0$19 = [[["", "headerNavigation", ""]]];
+const _c0$1c = [[["", "headerNavigation", ""]]];
 const _c1$v = ["[headerNavigation]"];
 function HeaderBarComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "a", 12);
@@ -831,7 +829,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$19);
+            i0.ɵɵprojectionDef(_c0$1c);
             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();
@@ -885,13 +883,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$18 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
+const _c0$1b = [[["", "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$18);
+            i0.ɵɵprojectionDef(_c0$1b);
             i0.ɵɵelementStart(0, "div")(1, "nav", 0);
             i0.ɵɵprojection(2);
             i0.ɵɵprojection(3, 1);
@@ -1009,12 +1007,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$17 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
+const _c0$1a = [[["", "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$17);
+            i0.ɵɵprojectionDef(_c0$1a);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵprojection(2, 1);
@@ -1028,7 +1026,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$16 = a0 => ({ "govuk-input--error": a0 });
+const _c0$19 = 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);
@@ -1045,7 +1043,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$16, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(9, _c0$19, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "hour-label-" + ctx_r6.hourId());
 } }
 function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
@@ -1064,7 +1062,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$16, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(9, _c0$19, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "minute-label-" + ctx_r6.minuteId());
 } }
 function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
@@ -1083,7 +1081,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$16, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(9, _c0$19, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "second-label-" + ctx_r6.secondId());
 } }
 class DateInputComponent {
@@ -1319,21 +1317,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$16, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(30, _c0$19, 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$16, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(32, _c0$19, 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$16, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(34, _c0$19, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "year-label-" + ctx.yearId());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isDateTime);
@@ -1370,7 +1368,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$15 = ["*"];
+const _c0$18 = ["*"];
 function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵnamespaceSVG();
@@ -1420,7 +1418,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$15, 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$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) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelementContainerStart(1, 1);
@@ -1634,14 +1632,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$14 = ["*"];
+const _c0$17 = ["*"];
 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$14, 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$17, 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);
@@ -1663,7 +1661,7 @@ class TabComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabComponent, { className: "TabComponent", filePath: "lib/components/tabs/tab.component.ts", lineNumber: 11 }); })();
 
-const _c0$13 = ["tab"];
+const _c0$16 = ["tab"];
 const _c1$r = ["*"];
 const _c2$5 = () => ["."];
 const _c3$1 = a0 => ({ "tabs-toggle-selected": a0 });
@@ -1710,7 +1708,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$13, 5);
+            i0.ɵɵviewQuery(_c0$16, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
@@ -1769,7 +1767,7 @@ class TabsModule {
         RouterModule, i1.RpxTranslationModule], exports: [TabsComponent,
         TabComponent] }); })();
 
-const _c0$12 = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
+const _c0$15 = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
 class ActivityBannerComponent {
     bannerType;
     description;
@@ -1788,7 +1786,7 @@ class ActivityBannerComponent {
             i0.ɵɵpipe(6, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c0$12, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c0$15, 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);
@@ -1891,21 +1889,6 @@ class SessionStorageService {
             }]
     }], null, null); })();
 
-const logger = new StructuredLoggerService();
-function safeJsonParse(value, fallback = null) {
-    if (!value) {
-        return fallback;
-    }
-    try {
-        return JSON.parse(value);
-    }
-    catch (error) {
-        // Log for diagnostics, then return fallback to avoid UI crashes.
-        logger.error('safeJsonParse failed to parse JSON.', { error });
-        return fallback;
-    }
-}
-
 const SessionErrorRoute = new InjectionToken('SessionErrorRoute');
 const SessionJsonErrorLogger = new InjectionToken('SessionJsonErrorLogger');
 class SessionStorageGuard {
@@ -4053,6 +4036,7 @@ class CaseTab {
     order;
     fields;
     show_condition;
+    defaultFocus;
 }
 __decorate([
     Type(() => CaseField),
@@ -13682,7 +13666,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$11 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
+const _c0$14 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
 class CaseEventCompletionTaskCancelledComponent {
     context;
     notifyEventCompletionCancelled = new EventEmitter();
@@ -13751,7 +13735,7 @@ class CaseEventCompletionTaskCancelledComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 21, "Continue"), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(25, _c0$11, ctx.jurisdiction, ctx.caseType, ctx.caseId));
+            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(25, _c0$14, ctx.jurisdiction, ctx.caseType, ctx.caseId));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 23, "Cancel"), " ");
         } }, dependencies: [i1$2.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
@@ -13766,7 +13750,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$10 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
+const _c0$13 = (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);
@@ -13819,7 +13803,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$10, ctx_r1.jurisdiction, ctx_r1.caseType, ctx_r1.caseId));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(26, _c0$13, ctx_r1.jurisdiction, ctx_r1.caseType, ctx_r1.caseId));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 24, "Cancel"), " ");
 } }
@@ -14222,7 +14206,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$$ = ["writeComplexFieldComponent"];
+const _c0$12 = ["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) {
@@ -14501,7 +14485,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$$, 5);
+            i0.ɵɵviewQuery(_c0$12, 5);
             i0.ɵɵviewQuery(FocusElementDirective, 5);
         } if (rf & 2) {
             let _t;
@@ -14564,7 +14548,7 @@ class AbstractFieldReadComponent extends AbstractFormFieldComponent {
             type: Input
         }] }); })();
 
-const _c0$_ = ["journeyChild"];
+const _c0$11 = ["journeyChild"];
 class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
     multipageComponentStateService;
     journeyStartPageNumber = 0;
@@ -14639,7 +14623,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$_, 5);
+            i0.ɵɵviewQuery(_c0$11, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
@@ -14654,7 +14638,7 @@ class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
             args: ['journeyChild']
         }] }); })();
 
-const _c0$Z = ["journeyChild"];
+const _c0$10 = ["journeyChild"];
 class AbstractJourneyComponent {
     multipageComponentStateService;
     journeyStartPageNumber = 0;
@@ -14716,7 +14700,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$Z, 5);
+            i0.ɵɵviewQuery(_c0$10, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
@@ -14745,8 +14729,9 @@ var DisplayContextCustomParameter;
     DisplayContextCustomParameter["QueryManagementWriteTest"] = "QueryManagementWriteTest";
 })(DisplayContextCustomParameter || (DisplayContextCustomParameter = {}));
 
+const _c0$$ = ["mediaViewerHost"];
 function CaseFileViewFieldComponent_ng_container_0_li_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "li")(1, "button", 8);
+    i0.ɵɵelementStart(0, "li")(1, "button", 9);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -14756,11 +14741,11 @@ function CaseFileViewFieldComponent_ng_container_0_li_7_Template(rf, ctx) { if (
 } }
 function CaseFileViewFieldComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 2)(2, "div", 3)(3, "h2", 4);
+    i0.ɵɵelementStart(1, "div", 3)(2, "div", 4)(3, "h2", 5);
     i0.ɵɵtext(4, "There is a problem");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 5)(6, "ul", 6);
-    i0.ɵɵtemplate(7, CaseFileViewFieldComponent_ng_container_0_li_7_Template, 3, 1, "li", 7);
+    i0.ɵɵelementStart(5, "div", 6)(6, "ul", 7);
+    i0.ɵɵtemplate(7, CaseFileViewFieldComponent_ng_container_0_li_7_Template, 3, 1, "li", 8);
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -14769,33 +14754,29 @@ function CaseFileViewFieldComponent_ng_container_0_Template(rf, ctx) { if (rf &
     i0.ɵɵproperty("ngForOf", ctx_r1.errorMessages);
 } }
 function CaseFileViewFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "h1", 10);
+    i0.ɵɵelementStart(0, "div", 10)(1, "h1", 11);
     i0.ɵɵtext(2, "Sorry, there is a problem with the service");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 11);
+    i0.ɵɵelementStart(3, "p", 12);
     i0.ɵɵtext(4, "Try again later.");
     i0.ɵɵelementEnd()();
 } }
 function CaseFileViewFieldComponent_div_2_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "mv-media-viewer", 18);
+    i0.ɵɵelementContainer(1, null, 0);
     i0.ɵɵelementContainerEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("url", ctx_r1.currentDocument.document_binary_url)("downloadFileName", ctx_r1.currentDocument.document_filename)("showToolbar", true)("contentType", ctx_r1.currentDocument.content_type)("enableAnnotations", true)("enableRedactions", true)("height", "94.5vh")("caseId", ctx_r1.caseId)("multimediaPlayerEnabled", true)("enableICP", ctx_r1.isIcpEnabled());
 } }
 function CaseFileViewFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "h2", 12);
+    i0.ɵɵelementStart(0, "div")(1, "h2", 13);
     i0.ɵɵtext(2, "Case file");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 13)(4, "div", 14)(5, "ccd-case-file-view-folder", 15);
+    i0.ɵɵelementStart(3, "div", 14)(4, "div", 15)(5, "ccd-case-file-view-folder", 16);
     i0.ɵɵlistener("clickedDocument", function CaseFileViewFieldComponent_div_2_Template_ccd_case_file_view_folder_clickedDocument_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.setMediaViewerFile($event); return i0.ɵɵresetView(ctx_r1.resetErrorMessages()); })("moveDocument", function CaseFileViewFieldComponent_div_2_Template_ccd_case_file_view_folder_moveDocument_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.moveDocument($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "div", 16);
-    i0.ɵɵelementStart(7, "div", 17);
-    i0.ɵɵtemplate(8, CaseFileViewFieldComponent_div_2_ng_container_8_Template, 2, 10, "ng-container", 0);
+    i0.ɵɵelement(6, "div", 17);
+    i0.ɵɵelementStart(7, "div", 18);
+    i0.ɵɵtemplate(8, CaseFileViewFieldComponent_div_2_ng_container_8_Template, 3, 0, "ng-container", 1);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -14806,6 +14787,8 @@ function CaseFileViewFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 } }
 class CaseFileViewFieldComponent {
     elementRef;
+    changeDetectorRef;
+    environmentInjector;
     route;
     caseFileViewService;
     documentManagementService;
@@ -14826,8 +14809,14 @@ class CaseFileViewFieldComponent {
     icp_jurisdictions = [];
     icpEnabled = false;
     caseId;
-    constructor(elementRef, route, caseFileViewService, documentManagementService, loadingService, sessionStorageService, windowService, caseNotifier, abstractConfig) {
+    mediaViewerHost;
+    mediaViewerComponentRef;
+    mediaViewerModuleRef;
+    mediaViewerRenderId = 0;
+    constructor(elementRef, changeDetectorRef, environmentInjector, route, caseFileViewService, documentManagementService, loadingService, sessionStorageService, windowService, caseNotifier, abstractConfig) {
         this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.environmentInjector = environmentInjector;
         this.route = route;
         this.caseFileViewService = caseFileViewService;
         this.documentManagementService = documentManagementService;
@@ -14890,6 +14879,7 @@ class CaseFileViewFieldComponent {
         if (this.documentManagementService.isHtmlDocument(documentDetails)) {
             const documentBinaryUrl = this.documentManagementService.getDocumentBinaryUrl(documentDetails);
             if (documentBinaryUrl) {
+                this.destroyMediaViewer();
                 this.currentDocument = undefined;
                 this.windowService.openOnNewTab(documentBinaryUrl);
                 return;
@@ -14897,6 +14887,7 @@ class CaseFileViewFieldComponent {
         }
         const mediaViewerInfo = this.documentManagementService.getMediaViewerInfo(documentDetails);
         this.currentDocument = JSON.parse(mediaViewerInfo);
+        void this.renderMediaViewer();
     }
     moveDocument(data) {
         const cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
@@ -14922,6 +14913,9 @@ class CaseFileViewFieldComponent {
         this.errorMessages = [];
     }
     ngOnDestroy() {
+        this.mediaViewerRenderId++;
+        this.destroyMediaViewer();
+        this.mediaViewerModuleRef?.destroy();
         if (this.categoriesAndDocumentsSubscription) {
             this.categoriesAndDocumentsSubscription.unsubscribe();
         }
@@ -14929,6 +14923,43 @@ class CaseFileViewFieldComponent {
     isIcpEnabled() {
         return this.icpEnabled && ((this.icp_jurisdictions?.length < 1) || this.icp_jurisdictions.includes(this.caseNotifier?.cachedCaseView?.case_type?.jurisdiction.id));
     }
+    async renderMediaViewer() {
+        const renderId = ++this.mediaViewerRenderId;
+        this.destroyMediaViewer();
+        this.changeDetectorRef.detectChanges();
+        let mediaViewer;
+        try {
+            mediaViewer = await import('@hmcts/media-viewer');
+        }
+        catch {
+            if (renderId === this.mediaViewerRenderId) {
+                this.errorMessages = ['The document viewer could not be loaded. Please try again.'];
+            }
+            return;
+        }
+        if (renderId !== this.mediaViewerRenderId || !this.currentDocument || !this.mediaViewerHost) {
+            return;
+        }
+        const { MediaViewerComponent, MediaViewerModule } = mediaViewer;
+        this.mediaViewerModuleRef ??= createNgModule(MediaViewerModule, this.environmentInjector);
+        this.mediaViewerComponentRef = this.mediaViewerHost.createComponent(MediaViewerComponent, {
+            ngModuleRef: this.mediaViewerModuleRef
+        });
+        this.mediaViewerComponentRef.setInput('url', this.currentDocument.document_binary_url);
+        this.mediaViewerComponentRef.setInput('downloadFileName', this.currentDocument.document_filename);
+        this.mediaViewerComponentRef.setInput('showToolbar', true);
+        this.mediaViewerComponentRef.setInput('contentType', this.currentDocument.content_type);
+        this.mediaViewerComponentRef.setInput('enableAnnotations', true);
+        this.mediaViewerComponentRef.setInput('enableRedactions', true);
+        this.mediaViewerComponentRef.setInput('height', '94.5vh');
+        this.mediaViewerComponentRef.setInput('caseId', this.caseId);
+        this.mediaViewerComponentRef.setInput('multimediaPlayerEnabled', true);
+        this.mediaViewerComponentRef.setInput('enableICP', this.isIcpEnabled());
+    }
+    destroyMediaViewer() {
+        this.mediaViewerHost?.clear();
+        this.mediaViewerComponentRef = undefined;
+    }
     moveDocumentError(err) {
         const defaultMsg = 'We couldn\'t move the document. Please try again.';
         if (!(err instanceof HttpErrorResponse)) {
@@ -14954,9 +14985,14 @@ class CaseFileViewFieldComponent {
                 return defaultMsg;
         }
     }
-    static ɵfac = function CaseFileViewFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), 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"]], standalone: false, decls: 3, vars: 3, consts: [[4, "ngIf"], ["class", "govuk-grid-column-two-thirds", 4, "ngIf"], ["id", "case-file-view-field-errors", "data-module", "govuk-error-summary", 1, "govuk-error-summary", "govuk-!-margin-bottom-4"], ["role", "alert"], [1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["type", "button", 1, "govuk-js-link"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [1, "document-tree-container__tree", 3, "clickedDocument", "moveDocument", "categoriesAndDocuments", "allowMoving"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType", "enableAnnotations", "enableRedactions", "height", "caseId", "multimediaPlayerEnabled", "enableICP"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseFileViewFieldComponent_ng_container_0_Template, 8, 1, "ng-container", 0)(1, CaseFileViewFieldComponent_div_1_Template, 5, 0, "div", 1)(2, CaseFileViewFieldComponent_div_2_Template, 9, 3, "div", 0);
+    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 ɵ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);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.mediaViewerHost = _t.first);
+        } }, standalone: false, decls: 3, vars: 3, consts: [["mediaViewerHost", ""], [4, "ngIf"], ["class", "govuk-grid-column-two-thirds", 4, "ngIf"], ["id", "case-file-view-field-errors", "data-module", "govuk-error-summary", 1, "govuk-error-summary", "govuk-!-margin-bottom-4"], ["role", "alert"], [1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["type", "button", 1, "govuk-js-link"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [1, "document-tree-container__tree", 3, "clickedDocument", "moveDocument", "categoriesAndDocuments", "allowMoving"], [1, "slider"], [1, "media-viewer-container"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CaseFileViewFieldComponent_ng_container_0_Template, 8, 1, "ng-container", 1)(1, CaseFileViewFieldComponent_div_1_Template, 5, 0, "div", 2)(2, CaseFileViewFieldComponent_div_2_Template, 9, 3, "div", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.errorMessages == null ? null : ctx.errorMessages.length);
             i0.ɵɵadvance();
@@ -14967,9 +15003,12 @@ 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        <mv-media-viewer\n          [url]=\"currentDocument.document_binary_url\"\n          [downloadFileName]=\"currentDocument.document_filename\"\n          [showToolbar]=\"true\"\n          [contentType]=\"currentDocument.content_type\"\n          [enableAnnotations]=\"true\"\n          [enableRedactions]=\"true\"\n          [height]=\"'94.5vh'\"\n          [caseId]=\"caseId\"\n          [multimediaPlayerEnabled]=\"true\"\n          [enableICP]=\"isIcpEnabled()\"\n        >\n        </mv-media-viewer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".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: i1$2.ActivatedRoute }, { type: CaseFileViewService }, { type: DocumentManagementService }, { type: LoadingService }, { type: SessionStorageService }, { type: WindowService }, { type: CaseNotifier }, { type: AbstractAppConfig }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 20 }); })();
+        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: 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 }); })();
 
 const PVP_FLAG_CODE = 'PF0021';
 const PVP_DISPLAY_TEXT = 'POTENTIALLY VIOLENT PERSON';
@@ -16201,7 +16240,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$Y = ["writeComplexFieldComponent"];
+const _c0$_ = ["writeComplexFieldComponent"];
 const _c1$p = a0 => ({ "form-group-error": a0 });
 function WriteCaseLinkFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -16282,7 +16321,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$Y, 5);
+            i0.ɵɵviewQuery(_c0$_, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.writeComplexFieldComponent = _t.first);
@@ -16316,7 +16355,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$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 _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 _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");
@@ -16327,7 +16366,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$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);
+    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);
 } }
 function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
@@ -16449,7 +16488,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$W = ["collectionItem"];
+const _c0$Y = ["collectionItem"];
 function WriteCollectionFieldComponent_h2_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h2", 7);
     i0.ɵɵtext(1);
@@ -16870,7 +16909,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$W, 5);
+            i0.ɵɵviewQuery(_c0$Y, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
@@ -17186,7 +17225,7 @@ class FileUploadStateService {
         type: Injectable
     }], null, null); })();
 
-const _c0$V = ["fileInput"];
+const _c0$X = ["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);
@@ -17565,7 +17604,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$V, 5);
+            i0.ɵɵviewQuery(_c0$X, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
@@ -17680,7 +17719,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$U = a0 => ({ "form-group-error": a0 });
+const _c0$W = a0 => ({ "form-group-error": a0 });
 function WriteDynamicListFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -17768,7 +17807,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$U, !ctx.dynamicListFormControl.valid && (ctx.dynamicListFormControl.dirty || ctx.dynamicListFormControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c0$W, !ctx.dynamicListFormControl.valid && (ctx.dynamicListFormControl.dirty || ctx.dynamicListFormControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -17949,7 +17988,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$T = a0 => ({ "error": a0 });
+const _c0$V = a0 => ({ "error": a0 });
 function WriteDynamicMultiSelectListFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -18069,7 +18108,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$T, !ctx.checkboxes.valid && ctx.checkboxes.touched))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$V, !ctx.checkboxes.valid && ctx.checkboxes.touched))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
@@ -18149,7 +18188,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$S = a0 => ({ "form-group-error": a0 });
+const _c0$U = 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);
@@ -18244,7 +18283,7 @@ class WriteDynamicRadioListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$S, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$U, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18298,7 +18337,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$R = a0 => ({ "form-group-error": a0 });
+const _c0$T = 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);
@@ -18344,7 +18383,7 @@ class WriteEmailFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$R, !ctx.emailControl.valid && (ctx.emailControl.dirty || ctx.emailControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$T, !ctx.emailControl.valid && (ctx.emailControl.dirty || ctx.emailControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18386,7 +18425,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$Q = a0 => ({ "form-group-error": a0 });
+const _c0$S = a0 => ({ "form-group-error": a0 });
 function WriteFixedListFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -18461,7 +18500,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$Q, !ctx.fixedListFormControl.valid && (ctx.fixedListFormControl.dirty || ctx.fixedListFormControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$S, !ctx.fixedListFormControl.valid && (ctx.fixedListFormControl.dirty || ctx.fixedListFormControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18524,7 +18563,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$P = a0 => ({ "form-group-error": a0 });
+const _c0$R = 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);
@@ -18592,7 +18631,7 @@ class WriteFixedRadioListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$P, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$R, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18668,7 +18707,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$O = a0 => ({ "form-group-error": a0 });
+const _c0$Q = 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);
@@ -18902,7 +18941,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$O, !!ctx.judicialUserControl && ctx.errors));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$Q, !!ctx.judicialUserControl && ctx.errors));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18984,7 +19023,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$N = a0 => ({ "form-group-error": a0 });
+const _c0$P = 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);
@@ -19223,7 +19262,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$N, !!ctx.staffUserControl && ctx.errors));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$P, !!ctx.staffUserControl && ctx.errors));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -19688,7 +19727,7 @@ class ValidatorsUtils {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
-const _c0$M = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$O = 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);
@@ -19755,7 +19794,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$M, !!ctx_r1.caseReasonCommentsError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$O, !!ctx_r1.caseReasonCommentsError));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonCommentsError);
 } }
@@ -19799,11 +19838,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$M, !!ctx_r1.caseNumberError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$O, !!ctx_r1.caseNumberError));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.caseNumberError);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$M, !!ctx_r1.caseReasonError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$O, !!ctx_r1.caseReasonError));
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonError);
     i0.ɵɵadvance(2);
@@ -20231,7 +20270,7 @@ class LinkCasesComponent extends AbstractJourneyComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.linkCaseForm);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$M, !!ctx.noSelectedCaseError));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$O, !!ctx.noSelectedCaseError));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.noSelectedCaseError);
             i0.ɵɵadvance(18);
@@ -20824,7 +20863,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$L = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$N = 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:");
@@ -20862,7 +20901,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$L, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$N, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.unlinkErrorMessage);
     i0.ɵɵadvance(2);
@@ -21799,7 +21838,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$K = a0 => ({ "form-group-error": a0 });
+const _c0$M = a0 => ({ "form-group-error": a0 });
 function WriteMoneyGbpFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -21848,7 +21887,7 @@ class WriteMoneyGbpFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵpipe(9, "ccdIsMandatory");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$K, !ctx.moneyGbpControl.valid && (ctx.moneyGbpControl.dirty || ctx.moneyGbpControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$M, !ctx.moneyGbpControl.valid && (ctx.moneyGbpControl.dirty || ctx.moneyGbpControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -21914,7 +21953,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$J = a0 => ({ "error": a0 });
+const _c0$L = a0 => ({ "error": a0 });
 function WriteMultiSelectListFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -22015,7 +22054,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$J, !ctx.checkboxes.valid && (ctx.checkboxes.dirty || ctx.checkboxes.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$L, !ctx.checkboxes.valid && (ctx.checkboxes.dirty || ctx.checkboxes.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
@@ -22054,7 +22093,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$I = a0 => ({ "form-group-error": a0 });
+const _c0$K = 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);
@@ -22100,7 +22139,7 @@ class WriteNumberFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$I, !ctx.numberControl.valid && ctx.numberControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$K, !ctx.numberControl.valid && ctx.numberControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -22279,7 +22318,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$H = a0 => ({ "scroll-container ": a0 });
+const _c0$J = a0 => ({ "scroll-container ": a0 });
 function WriteOrganisationFieldComponent_fieldset_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "fieldset", 3);
     i0.ɵɵelement(1, "legend", 4);
@@ -22358,7 +22397,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$H, ((tmp_3_0 = i0.ɵɵpipeBind1(1, 3, ctx_r2.simpleOrganisations$)) == null ? null : tmp_3_0.length) > 10));
+    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.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(3, 5, ctx_r2.simpleOrganisations$));
     i0.ɵɵadvance(2);
@@ -22700,38 +22739,98 @@ 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.';
-    constructor(appConfig, sessionStorage) {
+    paymentLoadError = false;
+    paymentHost;
+    paymentComponentRef;
+    paymentModuleRef;
+    constructor(appConfig, sessionStorage, environmentInjector) {
         super(appConfig, sessionStorage);
+        this.environmentInjector = environmentInjector;
+    }
+    ngAfterViewInit() {
+        void this.renderPayment();
+    }
+    ngOnDestroy() {
+        this.paymentHost?.clear();
+        this.paymentComponentRef = undefined;
+        this.paymentModuleRef?.destroy();
     }
-    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);
+    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);
             i0.ɵɵtext(2, "!");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "strong", 2)(4, "span", 3);
+            i0.ɵɵelementStart(3, "strong", 3)(4, "span", 4);
             i0.ɵɵtext(5);
             i0.ɵɵpipe(6, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵtext(7);
             i0.ɵɵpipe(8, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelement(9, "ccpay-payment-lib", 4);
+            i0.ɵɵtemplate(9, CasePaymentHistoryViewerFieldComponent_p_9_Template, 2, 0, "p", 5);
+            i0.ɵɵelementContainer(10, null, 0);
         } if (rf & 2) {
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 18, "Warning"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 3, "Warning"));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 20, ctx.PAYMENT_HISTORY_WARNING), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 5, ctx.PAYMENT_HISTORY_WARNING), " ");
             i0.ɵɵadvance(2);
-            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}"] });
+            i0.ɵɵproperty("ngIf", ctx.paymentLoadError);
+        } }, dependencies: [i5.NgIf, 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<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 }); })();
+        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 }); })();
 
 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); }; })();
@@ -22754,7 +22853,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$G = a0 => ({ "form-group-error": a0 });
+const _c0$H = 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);
@@ -22800,7 +22899,7 @@ class WritePhoneUKFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$G, !ctx.phoneUkControl.valid && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$H, !ctx.phoneUkControl.valid && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -25294,7 +25393,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$F = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$G = 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) {
@@ -25374,7 +25473,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$F, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
+    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.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 3, "What is the date of the hearing?"), " ");
     i0.ɵɵadvance(2);
@@ -25441,7 +25540,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$F, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c0$G, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 25, "Query subject"), " ");
     i0.ɵɵadvance(3);
@@ -25449,7 +25548,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$F, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$G, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 29, "Query detail"), " ");
     i0.ɵɵadvance(3);
@@ -25460,7 +25559,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$F, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(47, _c0$G, 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);
@@ -26084,7 +26183,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$E = (a0, a1) => ["/query-management", "query", a0, "4", a1];
+const _c0$F = (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);
@@ -26123,7 +26222,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$E, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$F, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
@@ -26137,7 +26236,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$E, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$F, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
@@ -26550,7 +26649,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$D = ["editorHost"];
+const _c0$E = ["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 });
@@ -29172,7 +29271,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$D, 5);
+            i0.ɵɵviewQuery(_c0$E, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editorHost = _t.first);
@@ -29333,7 +29432,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$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 });
+        } }, 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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteRichTextAreaFieldComponent, [{
         type: Component,
@@ -29365,7 +29464,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$C = a0 => ({ "form-group-error": a0 });
+const _c0$D = 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);
@@ -29423,7 +29522,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$C, !!ctx.textControl && !ctx.textControl.valid && (ctx.textControl.dirty || ctx.textControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$D, !!ctx.textControl && !ctx.textControl.valid && (ctx.textControl.dirty || ctx.textControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.caseField.hidden);
             i0.ɵɵadvance();
@@ -29461,7 +29560,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$B = a0 => ({ "form-group-error": a0 });
+const _c0$C = 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);
@@ -29520,7 +29619,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$B, !ctx.textareaControl.valid && ctx.textareaControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$C, !ctx.textareaControl.valid && ctx.textareaControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -29557,31 +29656,86 @@ class UnsupportedFieldComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnsupportedFieldComponent, { className: "UnsupportedFieldComponent", filePath: "lib/shared/components/palette/unsupported-field.component.ts", lineNumber: 8 }); })();
 
-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");
+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();
 } }
 class WaysToPayFieldComponent extends PaymentField {
-    constructor(appConfig, sessionStorage) {
+    environmentInjector;
+    paymentLoadError = false;
+    paymentHost;
+    paymentComponentRef;
+    paymentModuleRef;
+    constructor(appConfig, sessionStorage, environmentInjector) {
         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();
     }
-    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);
+    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);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.getUserRoles().length > 0);
-        } }, dependencies: [i5.NgIf, i3.PaymentLibComponent], encapsulation: 2 });
+            i0.ɵɵproperty("ngIf", ctx.paymentLoadError);
+        } }, dependencies: [i5.NgIf], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaysToPayFieldComponent, [{
         type: Component,
-        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 }); })();
+        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 }); })();
 
 class YesNoService {
     static YES_INPUTS = [
@@ -36852,12 +37006,10 @@ class PaletteModule {
             MatAutocompleteModule,
             CdkTreeModule,
             OverlayModule,
-            PaymentLibModule,
             RpxTranslationModule.forChild(),
             CdkTreeModule,
             OverlayModule,
             MatDialogModule,
-            MediaViewerModule,
             LoadingModule,
             MarkdownComponentModule,
             ErrorsModule,
@@ -36908,12 +37060,10 @@ class PaletteModule {
                     MatAutocompleteModule,
                     CdkTreeModule,
                     OverlayModule,
-                    PaymentLibModule,
                     RpxTranslationModule.forChild(),
                     CdkTreeModule,
                     OverlayModule,
                     MatDialogModule,
-                    MediaViewerModule,
                     LoadingModule,
                     MarkdownComponentModule,
                     ErrorsModule,
@@ -37135,14 +37285,12 @@ class PaletteModule {
         MatDatepickerModule,
         MatAutocompleteModule,
         CdkTreeModule,
-        OverlayModule,
-        PaymentLibModule, i1.RpxTranslationModule, CdkTreeModule,
+        OverlayModule, i1.RpxTranslationModule, CdkTreeModule,
         OverlayModule,
         MatDialogModule,
-        MediaViewerModule,
         LoadingModule,
         MarkdownComponentModule,
-        ErrorsModule, i3$1.NgxEditorModule], exports: [NgxMatDatepickerActions,
+        ErrorsModule, i3.NgxEditorModule], exports: [NgxMatDatepickerActions,
         NgxMatDatepickerApply,
         NgxMatDatepickerInput,
         NgxMatDatetimepicker,
@@ -37331,12 +37479,12 @@ i0.ɵɵsetComponentScope(WriteDateContainerFieldComponent, function () { return
 i0.ɵɵsetComponentScope(WriteCollectionFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective, MarkdownComponent, FieldWriteComponent]; }, function () { return [FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(
 // ComponentLauncher web components
-CaseFileViewFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i14.MediaViewerComponent, CaseFileViewFolderComponent]; }, []);
+CaseFileViewFieldComponent, function () { return [i5.NgForOf, i5.NgIf, CaseFileViewFolderComponent]; }, []);
 i0.ɵɵsetComponentScope(
 // Components for case flags
 CaseFlagTableComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf]; }, function () { return [i5.DatePipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
 i0.ɵɵsetComponentScope(SelectFlagTypeComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
-i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i15.MatInput, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger]; }, function () { return [i5.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
+i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i14.MatInput, i6.MatAutocomplete, i6.MatOption, i6.MatAutocompleteTrigger]; }, function () { return [i5.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
     LanguageInterpreterDisplayPipe]; });
 i0.ɵɵsetComponentScope(ManageCaseFlagsComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective]; }, function () { return [i1.RpxTranslatePipe, ManageCaseFlagsLabelDisplayPipe]; });
 i0.ɵɵsetComponentScope(UpdateFlagComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i5.NgTemplateOutlet, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, UpdateFlagTitleDisplayPipe]; });
@@ -41714,7 +41862,7 @@ class CaseFullAccessViewComponent {
         if (!hasHash && !isSpecialTabPath) {
             const paths = url.split('/');
             const lastPath = decodeURIComponent(paths[paths.length - 1]);
-            let foundTab = null;
+            let foundTab;
             if (!this.prependedTabs) {
                 this.prependedTabs = [];
             }
@@ -41735,10 +41883,13 @@ class CaseFullAccessViewComponent {
                 });
             }
             else {
-                this.caseDetails.tabs.sort((aTab, bTab) => aTab.order > bTab.order ? 1 : (bTab.order > aTab.order ? -1 : 0));
+                this.caseDetails.tabs = this.orderService.sort(this.caseDetails.tabs);
+                // Presuming default focus only set for one tab here - multiple tabs with default focus are not handled as is a contradiction
+                let preSelectTab = this.caseDetails.tabs.find((tab) => tab.defaultFocus === true) ?? null;
+                // Attempt to pre-select the tab based on the preferred label for the current case type
                 const preferredLabel = FieldsUtils.defaultTabList?.[this.caseDetails?.case_type?.id];
-                let preSelectTab = null;
-                if (preferredLabel) {
+                // If no tab has default focus, attempt to use the preferred label for the current case type
+                if (!preSelectTab && preferredLabel) {
                     preSelectTab = this.caseDetails.tabs.find((tab) => (tab.label === preferredLabel) || (tab.id === preferredLabel)) ?? null;
                 }
                 if (!preSelectTab) {
@@ -46637,5 +46788,5 @@ class TestRouteSnapshotBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAppConfig, AbstractFieldReadComponent, AbstractFieldWriteComponent, AbstractFieldWriteJourneyComponent, AbstractJourneyComponent, Activity, ActivityBannerComponent, ActivityComponent, ActivityIconComponent, ActivityInfo, ActivityModule, ActivityPollingService, ActivityService, AddCommentsComponent, AddCommentsErrorMessage, AddCommentsStep, AddressModel, AddressOption, AddressesService, Alert, AlertComponent, AlertIconClassPipe, AlertMessageType, AlertModule, AlertService, AuthService, Banner, BannersService, BeforeYouStartComponent, BodyComponent, BrowserService, CCDCaseLinkType, COMPONENT_PORTAL_INJECTION_TOKEN, CallbackErrorsComponent, CallbackErrorsContext, CaseAccessUtils, CaseBasicAccessViewComponent, CaseChallengedAccessRequestComponent, CaseChallengedAccessSuccessComponent, CaseCreateComponent, CaseDetails, CaseEditComponent, CaseEditConfirmComponent, CaseEditDataModule, CaseEditDataService, CaseEditFormComponent, CaseEditPageComponent, CaseEditSubmitComponent, CaseEditWizardGuard, CaseEditorConfig, CaseEditorModule, CaseEvent, CaseEventCompletionComponent, CaseEventCompletionTaskCancelledComponent, CaseEventCompletionTaskReassignedComponent, CaseEventData, CaseEventTrigger, CaseEventTriggerComponent, CaseField, CaseFieldService, CaseFileViewFieldComponent, CaseFileViewFolderComponent, CaseFileViewFolderDocumentActionsComponent, CaseFileViewFolderSelectorComponent, CaseFileViewFolderSortComponent, CaseFileViewFolderToggleComponent, CaseFileViewOverlayMenuComponent, CaseFileViewService, CaseFlagCheckYourAnswersPageStep, CaseFlagDisplayContextParameter, CaseFlagErrorMessage, CaseFlagFieldState, CaseFlagFormFields, CaseFlagRefdataService, CaseFlagStatus, CaseFlagSummaryListComponent, CaseFlagSummaryListDisplayMode, CaseFlagTableComponent, CaseFlagWizardStepTitle, CaseFullAccessViewComponent, CaseHeaderComponent, CaseHeaderModule, CaseHistoryViewerFieldComponent, CaseLink, CaseLinkResponse, CaseListComponent, CaseListFiltersComponent, CaseListFiltersModule, CaseListModule, CaseNotifier, CasePaymentHistoryViewerFieldComponent, CasePrintDocument, CasePrinterComponent, CaseProgressComponent, CaseReferencePipe, CaseResolver, CaseSpecificAccessRequestComponent, CaseSpecificAccessSuccessComponent, CaseState, CaseTab, CaseTimelineComponent, CaseTimelineDisplayMode, CaseTimelineModule, CaseType, CaseTypeLite, CaseView, CaseViewComponent, CaseViewEvent, CaseViewTrigger, CaseViewerComponent, CaseViewerModule, CasesService, CaseworkerService, CcdCYAPageLabelFilterPipe, CcdCaseTitlePipe, CcdCollectionTableCaseFieldsFilterPipe, CcdPageFieldsPipe, CcdTabFieldsPipe, CheckYourAnswersComponent, CloseQueryComponent, ConditionalShowFormDirective, ConditionalShowModule, ConditionalShowRegistrarService, ConfirmFlagStatusComponent, ConfirmStatusErrorMessage, ConfirmStatusStep, Confirmation, ConvertHrefToRouterService, CreateCaseFiltersComponent, CreateCaseFiltersModule, CreateCaseFiltersSelection, DRAFT_PREFIX, DRAFT_QUERY_PARAM, DashPipe, DateInputComponent, DatePipe, DateTimeFormatUtils, DatetimePickerComponent, DefinitionsModule, DefinitionsService, DeleteOrCancelDialogComponent, DialogsModule, DisplayMode, Document, DocumentData, DocumentDialogComponent, DocumentLinks, DocumentManagementService, DocumentUrlPipe, Draft, DraftService, DynamicListPipe, DynamicRadioListPipe, ESQueryType, Embedded, EnumDisplayDescriptionPipe, ErrorMessageComponent, ErrorNotifierService, EventCaseField, EventCompletionReturnStates, EventCompletionStateMachineService, EventCompletionStates, EventLogComponent, EventLogDetailsComponent, EventLogTableComponent, EventMessageModule, EventStartComponent, EventStartModule, EventStartStateMachineService, EventStatusService, EventTriggerResolver, EventTriggerService, Fee, FeeValue, Field, FieldLabelPipe, FieldReadComponent, FieldReadLabelComponent, FieldType, FieldTypeSanitiser, FieldWriteComponent, FieldsFilterPipe, FieldsPurger, FieldsUtils, FirstErrorPipe, FixedListItem, FixedListPipe, FixedRadioListPipe, FlagFieldDisplayPipe, FocusElementDirective, FocusElementModule, FocusService, FooterComponent, FormDocument, FormErrorService, FormValidatorsService, FormValueService, FormatTranslatorService, GreyBarService, HRef, HeaderBarComponent, HeadersModule, HttpError, HttpErrorService, HttpService, IsCompoundPipe, IsMandatoryPipe, IsReadOnlyAndNotCollectionPipe, IsReadOnlyPipe, JudicialworkerService, Jurisdiction, JurisdictionService, LabelFieldComponent, LabelSubstitutorDirective, LabelSubstitutorModule, LanguageInterpreterDisplayPipe, LinkCaseReason, LinkCasesComponent, LinkCasesFromReasonValuePipe, LinkCasesReasonValuePipe, LinkDetails, LinkFromReason, LinkReason, LinkedCasesErrorMessages, LinkedCasesEventTriggers, LinkedCasesFromTableComponent, LinkedCasesPages, LinkedCasesResponse, LinkedCasesToTableComponent, LoadingModule, LoadingService, LoadingSpinnerComponent, LoadingSpinnerModule, MULTIPLE_TASKS_FOUND, ManageCaseFlagsComponent, ManageCaseFlagsLabelDisplayPipe, MarkdownComponent, MarkdownComponentModule, MoneyGbpInputComponent, MultipageComponentStateService, MultipleTasksExistComponent, NavigationComponent, NavigationItemComponent, NavigationNotifierService, NavigationOrigin, NoLinkedCasesComponent, NoTasksAvailableComponent, NotificationBannerComponent, NotificationBannerHeaderClass, NotificationBannerType, OrderService, OrderSummary, OrganisationConverter, OrganisationService, PageValidationService, PaginationComponent, PaginationMetadata, PaginationModule, PaletteContext, PaletteModule, PaletteService, PaletteUtilsModule, Patterns, PaymentField, PhaseComponent, PipesModule, PlaceholderService, PrintUrlPipe, Profile, ProfileNotifier, ProfileResolver, ProfileService, QualifyingQuestionDetailComponent, QualifyingQuestionOptionsComponent, QualifyingQuestionService, QualifyingQuestionsErrorMessage, QueryAttachmentsReadComponent, QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryConfirmationComponent, QueryCreateContext, QueryDetailsComponent, QueryEventCompletionComponent, QueryItemResponseStatus, QueryListComponent, QueryListData, QueryListItem, QueryManagementService, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, RaiseQueryErrorMessage, ReadCaseFlagFieldComponent, ReadCaseLinkFieldComponent, ReadCollectionFieldComponent, ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, ReadCookieService, ReadDateFieldComponent, ReadDocumentFieldComponent, ReadDynamicListFieldComponent, ReadDynamicMultiSelectListFieldComponent, ReadDynamicRadioListFieldComponent, ReadEmailFieldComponent, ReadFieldsFilterPipe, ReadFixedListFieldComponent, ReadFixedRadioListFieldComponent, ReadJudicialUserFieldComponent, ReadLinkedCasesFieldComponent, ReadMoneyGbpFieldComponent, ReadMultiSelectListFieldComponent, ReadNumberFieldComponent, ReadOrderSummaryFieldComponent, ReadOrderSummaryRowComponent, ReadOrganisationFieldComponent, ReadOrganisationFieldRawComponent, ReadOrganisationFieldTableComponent, ReadPhoneUKFieldComponent, ReadQueryManagementFieldComponent, ReadRichTextAreaFieldComponent, ReadStaffUserFieldComponent, ReadTextAreaFieldComponent, ReadTextFieldComponent, ReadYesNoFieldComponent, RefdataCaseFlagType, RemoveDialogComponent, RequestOptionsBuilder, RespondToQueryErrorMessages, RetryUtil, RouterHelperService, RouterLinkComponent, SaveOrDiscardDialogComponent, SearchFiltersComponent, SearchFiltersModule, SearchFiltersWrapperComponent, SearchInput, SearchLanguageInterpreterComponent, SearchLanguageInterpreterErrorMessage, SearchLanguageInterpreterStep, SearchResultComponent, SearchResultModule, SearchResultView, SearchResultViewColumn, SearchResultViewItem, SearchResultViewItemComparatorFactory, SearchService, SelectFlagErrorMessage, SelectFlagLocationComponent, SelectFlagLocationErrorMessage, SelectFlagTypeComponent, SelectFlagTypeErrorMessage, SessionErrorPageComponent, SessionErrorRoute, SessionJsonErrorLogger, SessionStorageGuard, SessionStorageService, ShowCondition, SortOrder$1 as SortOrder, SortParameters, SortSearchResultPipe, StructuredLoggerService, TabComponent, TableColumnConfig, TableConfig, TabsComponent, TabsModule, TaskAssignedComponent, TaskCancelledComponent, TaskConflictComponent, TaskUnassignedComponent, Terms, TestRouteSnapshotBuilder, TranslatedMarkdownDirective, TranslatedMarkdownModule, UnLinkCasesComponent, UnsupportedFieldComponent, UpdateFlagAddTranslationErrorMessage, UpdateFlagAddTranslationFormComponent, UpdateFlagAddTranslationStep, UpdateFlagComponent, UpdateFlagErrorMessage, UpdateFlagStep, UpdateFlagTitleDisplayPipe, WaysToPayFieldComponent, WindowService, Wizard, WizardFactoryService, WizardPage, WizardPageField, WorkAllocationService, WorkbasketFiltersComponent, WorkbasketFiltersModule, WorkbasketInput, WorkbasketInputFilterService, WorkbasketInputModel, WriteAddressFieldComponent, WriteCaseFlagFieldComponent, WriteCaseLinkFieldComponent, WriteCollectionFieldComponent, WriteComplexFieldComponent, WriteDateContainerFieldComponent, WriteDateFieldComponent, WriteDocumentFieldComponent, WriteDynamicListFieldComponent, WriteDynamicMultiSelectListFieldComponent, WriteDynamicRadioListFieldComponent, WriteEmailFieldComponent, WriteFixedListFieldComponent, WriteFixedRadioListFieldComponent, WriteJudicialUserFieldComponent, WriteLinkedCasesFieldComponent, WriteMoneyGbpFieldComponent, WriteMultiSelectListFieldComponent, WriteNumberFieldComponent, WriteOrderSummaryFieldComponent, WriteOrganisationComplexFieldComponent, WriteOrganisationFieldComponent, WritePhoneUKFieldComponent, WriteRichTextAreaFieldComponent, WriteStaffUserFieldComponent, WriteTextAreaFieldComponent, WriteTextFieldComponent, WriteYesNoFieldComponent, YesNoService, aCaseField, caseMessagesMockData, createACL, createCaseEventTrigger, createCaseField, createComplexFieldOverride, createFieldType, createFixedListFieldType, createHiddenComplexFieldOverride, createMultiSelectListFieldType, createWizardPage, createWizardPageField, editorRouting, initDialog, newCaseField, parseStaffUserSearchConfiguration, safeJsonParse, textFieldType, viewerRouting };
+export { AbstractAppConfig, AbstractFieldReadComponent, AbstractFieldWriteComponent, AbstractFieldWriteJourneyComponent, AbstractJourneyComponent, Activity, ActivityBannerComponent, ActivityComponent, ActivityIconComponent, ActivityInfo, ActivityModule, ActivityPollingService, ActivityService, AddCommentsComponent, AddCommentsErrorMessage, AddCommentsStep, AddressModel, AddressOption, AddressesService, Alert, AlertComponent, AlertIconClassPipe, AlertMessageType, AlertModule, AlertService, AuthService, Banner, BannersService, BeforeYouStartComponent, BodyComponent, BrowserService, CCDCaseLinkType, COMPONENT_PORTAL_INJECTION_TOKEN, CallbackErrorsComponent, CallbackErrorsContext, CaseAccessUtils, CaseBasicAccessViewComponent, CaseChallengedAccessRequestComponent, CaseChallengedAccessSuccessComponent, CaseCreateComponent, CaseDetails, CaseEditComponent, CaseEditConfirmComponent, CaseEditDataModule, CaseEditDataService, CaseEditFormComponent, CaseEditPageComponent, CaseEditSubmitComponent, CaseEditWizardGuard, CaseEditorConfig, CaseEditorModule, CaseEvent, CaseEventCompletionComponent, CaseEventCompletionTaskCancelledComponent, CaseEventCompletionTaskReassignedComponent, CaseEventData, CaseEventTrigger, CaseEventTriggerComponent, CaseField, CaseFieldService, CaseFileViewFieldComponent, CaseFileViewFolderComponent, CaseFileViewFolderDocumentActionsComponent, CaseFileViewFolderSelectorComponent, CaseFileViewFolderSortComponent, CaseFileViewFolderToggleComponent, CaseFileViewOverlayMenuComponent, CaseFileViewService, CaseFlagCheckYourAnswersPageStep, CaseFlagDisplayContextParameter, CaseFlagErrorMessage, CaseFlagFieldState, CaseFlagFormFields, CaseFlagRefdataService, CaseFlagStatus, CaseFlagSummaryListComponent, CaseFlagSummaryListDisplayMode, CaseFlagTableComponent, CaseFlagWizardStepTitle, CaseFullAccessViewComponent, CaseHeaderComponent, CaseHeaderModule, CaseHistoryViewerFieldComponent, CaseLink, CaseLinkResponse, CaseListComponent, CaseListFiltersComponent, CaseListFiltersModule, CaseListModule, CaseNotifier, CasePaymentHistoryViewerFieldComponent, CasePrintDocument, CasePrinterComponent, CaseProgressComponent, CaseReferencePipe, CaseResolver, CaseSpecificAccessRequestComponent, CaseSpecificAccessSuccessComponent, CaseState, CaseTab, CaseTimelineComponent, CaseTimelineDisplayMode, CaseTimelineModule, CaseType, CaseTypeLite, CaseView, CaseViewComponent, CaseViewEvent, CaseViewTrigger, CaseViewerComponent, CaseViewerModule, CasesService, CaseworkerService, CcdCYAPageLabelFilterPipe, CcdCaseTitlePipe, CcdCollectionTableCaseFieldsFilterPipe, CcdPageFieldsPipe, CcdTabFieldsPipe, CheckYourAnswersComponent, CloseQueryComponent, ConditionalShowFormDirective, ConditionalShowModule, ConditionalShowRegistrarService, ConfirmFlagStatusComponent, ConfirmStatusErrorMessage, ConfirmStatusStep, Confirmation, ConvertHrefToRouterService, CreateCaseFiltersComponent, CreateCaseFiltersModule, CreateCaseFiltersSelection, DRAFT_PREFIX, DRAFT_QUERY_PARAM, DashPipe, DateInputComponent, DatePipe, DateTimeFormatUtils, DatetimePickerComponent, DefinitionsModule, DefinitionsService, DeleteOrCancelDialogComponent, DialogsModule, DisplayMode, Document, DocumentData, DocumentDialogComponent, DocumentLinks, DocumentManagementService, DocumentUrlPipe, Draft, DraftService, DynamicListPipe, DynamicRadioListPipe, ESQueryType, Embedded, EnumDisplayDescriptionPipe, ErrorMessageComponent, ErrorNotifierService, EventCaseField, EventCompletionReturnStates, EventCompletionStateMachineService, EventCompletionStates, EventLogComponent, EventLogDetailsComponent, EventLogTableComponent, EventMessageModule, EventStartComponent, EventStartModule, EventStartStateMachineService, EventStatusService, EventTriggerResolver, EventTriggerService, Fee, FeeValue, Field, FieldLabelPipe, FieldReadComponent, FieldReadLabelComponent, FieldType, FieldTypeSanitiser, FieldWriteComponent, FieldsFilterPipe, FieldsPurger, FieldsUtils, FirstErrorPipe, FixedListItem, FixedListPipe, FixedRadioListPipe, FlagFieldDisplayPipe, FocusElementDirective, FocusElementModule, FocusService, FooterComponent, FormDocument, FormErrorService, FormValidatorsService, FormValueService, FormatTranslatorService, GreyBarService, HRef, HeaderBarComponent, HeadersModule, HttpError, HttpErrorService, HttpService, IsCompoundPipe, IsMandatoryPipe, IsReadOnlyAndNotCollectionPipe, IsReadOnlyPipe, JudicialworkerService, Jurisdiction, JurisdictionService, LabelFieldComponent, LabelSubstitutorDirective, LabelSubstitutorModule, LanguageInterpreterDisplayPipe, LinkCaseReason, LinkCasesComponent, LinkCasesFromReasonValuePipe, LinkCasesReasonValuePipe, LinkDetails, LinkFromReason, LinkReason, LinkedCasesErrorMessages, LinkedCasesEventTriggers, LinkedCasesFromTableComponent, LinkedCasesPages, LinkedCasesResponse, LinkedCasesToTableComponent, LoadingModule, LoadingService, LoadingSpinnerComponent, LoadingSpinnerModule, MULTIPLE_TASKS_FOUND, ManageCaseFlagsComponent, ManageCaseFlagsLabelDisplayPipe, MarkdownComponent, MarkdownComponentModule, MoneyGbpInputComponent, MultipageComponentStateService, MultipleTasksExistComponent, NavigationComponent, NavigationItemComponent, NavigationNotifierService, NavigationOrigin, NoLinkedCasesComponent, NoTasksAvailableComponent, NotificationBannerComponent, NotificationBannerHeaderClass, NotificationBannerType, OrderService, OrderSummary, OrganisationConverter, OrganisationService, PageValidationService, PaginationComponent, PaginationMetadata, PaginationModule, PaletteContext, PaletteModule, PaletteService, PaletteUtilsModule, Patterns, PaymentField, PhaseComponent, PipesModule, PlaceholderService, PrintUrlPipe, Profile, ProfileNotifier, ProfileResolver, ProfileService, QualifyingQuestionDetailComponent, QualifyingQuestionOptionsComponent, QualifyingQuestionService, QualifyingQuestionsErrorMessage, QueryAttachmentsReadComponent, QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryConfirmationComponent, QueryCreateContext, QueryDetailsComponent, QueryEventCompletionComponent, QueryItemResponseStatus, QueryListComponent, QueryListData, QueryListItem, QueryManagementService, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, RaiseQueryErrorMessage, ReadCaseFlagFieldComponent, ReadCaseLinkFieldComponent, ReadCollectionFieldComponent, ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, ReadCookieService, ReadDateFieldComponent, ReadDocumentFieldComponent, ReadDynamicListFieldComponent, ReadDynamicMultiSelectListFieldComponent, ReadDynamicRadioListFieldComponent, ReadEmailFieldComponent, ReadFieldsFilterPipe, ReadFixedListFieldComponent, ReadFixedRadioListFieldComponent, ReadJudicialUserFieldComponent, ReadLinkedCasesFieldComponent, ReadMoneyGbpFieldComponent, ReadMultiSelectListFieldComponent, ReadNumberFieldComponent, ReadOrderSummaryFieldComponent, ReadOrderSummaryRowComponent, ReadOrganisationFieldComponent, ReadOrganisationFieldRawComponent, ReadOrganisationFieldTableComponent, ReadPhoneUKFieldComponent, ReadQueryManagementFieldComponent, ReadRichTextAreaFieldComponent, ReadStaffUserFieldComponent, ReadTextAreaFieldComponent, ReadTextFieldComponent, ReadYesNoFieldComponent, RefdataCaseFlagType, RemoveDialogComponent, RequestOptionsBuilder, RespondToQueryErrorMessages, RetryUtil, RouterHelperService, RouterLinkComponent, SaveOrDiscardDialogComponent, SearchFiltersComponent, SearchFiltersModule, SearchFiltersWrapperComponent, SearchInput, SearchLanguageInterpreterComponent, SearchLanguageInterpreterErrorMessage, SearchLanguageInterpreterStep, SearchResultComponent, SearchResultModule, SearchResultView, SearchResultViewColumn, SearchResultViewItem, SearchResultViewItemComparatorFactory, SearchService, SelectFlagErrorMessage, SelectFlagLocationComponent, SelectFlagLocationErrorMessage, SelectFlagTypeComponent, SelectFlagTypeErrorMessage, SessionErrorPageComponent, SessionErrorRoute, SessionJsonErrorLogger, SessionStorageGuard, SessionStorageService, ShowCondition, SortOrder$1 as SortOrder, SortParameters, SortSearchResultPipe, StructuredLoggerService, TabComponent, TableColumnConfig, TableConfig, TabsComponent, TabsModule, TaskAssignedComponent, TaskCancelledComponent, TaskConflictComponent, TaskUnassignedComponent, Terms, TestRouteSnapshotBuilder, TranslatedMarkdownDirective, TranslatedMarkdownModule, UnLinkCasesComponent, UnsupportedFieldComponent, UpdateFlagAddTranslationErrorMessage, UpdateFlagAddTranslationFormComponent, UpdateFlagAddTranslationStep, UpdateFlagComponent, UpdateFlagErrorMessage, UpdateFlagStep, UpdateFlagTitleDisplayPipe, WaysToPayFieldComponent, WindowService, Wizard, WizardFactoryService, WizardPage, WizardPageField, WorkAllocationService, WorkbasketFiltersComponent, WorkbasketFiltersModule, WorkbasketInput, WorkbasketInputFilterService, WorkbasketInputModel, WriteAddressFieldComponent, WriteCaseFlagFieldComponent, WriteCaseLinkFieldComponent, WriteCollectionFieldComponent, WriteComplexFieldComponent, WriteDateContainerFieldComponent, WriteDateFieldComponent, WriteDocumentFieldComponent, WriteDynamicListFieldComponent, WriteDynamicMultiSelectListFieldComponent, WriteDynamicRadioListFieldComponent, WriteEmailFieldComponent, WriteFixedListFieldComponent, WriteFixedRadioListFieldComponent, WriteJudicialUserFieldComponent, WriteLinkedCasesFieldComponent, WriteMoneyGbpFieldComponent, WriteMultiSelectListFieldComponent, WriteNumberFieldComponent, WriteOrderSummaryFieldComponent, WriteOrganisationComplexFieldComponent, WriteOrganisationFieldComponent, WritePhoneUKFieldComponent, WriteRichTextAreaFieldComponent, WriteStaffUserFieldComponent, WriteTextAreaFieldComponent, WriteTextFieldComponent, WriteYesNoFieldComponent, YesNoService, aCaseField, caseMessagesMockData, createACL, createCaseEventTrigger, createCaseField, createComplexFieldOverride, createFieldType, createFixedListFieldType, createHiddenComplexFieldOverride, createMultiSelectListFieldType, createWizardPage, createWizardPageField, editorRouting, initDialog, newCaseField, parseStaffUserSearchConfiguration, textFieldType, viewerRouting };
 //# sourceMappingURL=hmcts-ccd-case-ui-toolkit.mjs.map