@hmcts/ccd-case-ui-toolkit 7.3.76 → 7.3.77-4923

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, Injectable, DOCUMENT, Inject, InjectionToken, Optional, ChangeDetectorRef, Directive, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, SecurityContext, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, Injectable, DOCUMENT, Inject, InjectionToken, Optional, ChangeDetectorRef, Directive, ViewChild, createNgModule, ViewContainerRef, ChangeDetectionStrategy, Injector, SecurityContext, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -12,6 +12,8 @@ import { BehaviorSubject, throwError, Subject, EMPTY, concat, defer, timer, Obse
 import { distinctUntilChanged, catchError, map, switchMap, repeat, retry, publish, refCount, debounceTime, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, take, first, takeUntil, filter } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
+import { safeJsonParse } from '@hmcts/ccd-case-ui-toolkit/json-utils';
+export { safeJsonParse } from '@hmcts/ccd-case-ui-toolkit/json-utils';
 import { Type, Exclude, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
 import moment from 'moment';
 import { __decorate, __metadata } from 'tslib';
@@ -29,8 +31,6 @@ import * as i6 from '@angular/material/legacy-autocomplete';
 import { MatLegacyAutocompleteModule } from '@angular/material/legacy-autocomplete';
 import * as i7 from '@angular/material/legacy-core';
 import { MAT_LEGACY_DATE_LOCALE } from '@angular/material/legacy-core';
-import * as i3$1 from '@hmcts/ccpay-web-component';
-import { PaymentLibModule } from '@hmcts/ccpay-web-component';
 import { v4 } from 'uuid';
 import * as i2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -45,10 +45,8 @@ import * as i5 from '@angular/material/legacy-form-field';
 import { MatLegacyFormFieldModule } from '@angular/material/legacy-form-field';
 import * as i6$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i14 from '@angular/material/legacy-input';
+import * as i13 from '@angular/material/legacy-input';
 import { MatLegacyInputModule } from '@angular/material/legacy-input';
-import * as i13 from '@hmcts/media-viewer';
-import { MediaViewerModule } from '@hmcts/media-viewer';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i2$2 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
@@ -56,7 +54,7 @@ import * as i10 from '@angular/material/legacy-tabs';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
 import { compressToUTF16, decompressFromUTF16 } from 'lz-string';
 
-const _c0$18 = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
+const _c0$1b = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
 const _c1$u = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
 function FooterComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
@@ -134,7 +132,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$u, 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$18);
+            i0.ɵɵprojectionDef(_c0$1b);
             i0.ɵɵelementStart(0, "footer", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, FooterComponent_div_2_Template, 20, 15, "div", 2)(3, FooterComponent_div_3_Template, 20, 16, "div", 2);
             i0.ɵɵelementEnd()();
@@ -161,7 +159,7 @@ class FooterComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FooterComponent, { className: "FooterComponent", filePath: "lib/components/footer/footer.component.ts", lineNumber: 9 }); })();
 
-const _c0$17 = [[["", "headerNavigation", ""]]];
+const _c0$1a = [[["", "headerNavigation", ""]]];
 const _c1$t = ["[headerNavigation]"];
 function HeaderBarComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "a", 12);
@@ -204,7 +202,7 @@ class HeaderBarComponent {
     }
     static ɵfac = function HeaderBarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || HeaderBarComponent)(); };
     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$t, 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$17);
+            i0.ɵɵprojectionDef(_c0$1a);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵtemplate(3, HeaderBarComponent_div_3_Template, 4, 1, "div", 3)(4, HeaderBarComponent_div_4_Template, 5, 3, "div", 4);
             i0.ɵɵelementEnd();
@@ -254,13 +252,13 @@ class HeaderBarComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderBarComponent, { className: "HeaderBarComponent", filePath: "lib/components/header/header-bar/header-bar.component.ts", lineNumber: 9 }); })();
 
-const _c0$16 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
+const _c0$19 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
 const _c1$s = ["[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$s, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$16);
+            i0.ɵɵprojectionDef(_c0$19);
             i0.ɵɵelementStart(0, "div")(1, "nav", 0);
             i0.ɵɵprojection(2);
             i0.ɵɵprojection(3, 1);
@@ -378,12 +376,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$15 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
+const _c0$18 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
 const _c1$r = ["[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$r, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$15);
+            i0.ɵɵprojectionDef(_c0$18);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵprojection(2, 1);
@@ -397,7 +395,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$14 = a0 => ({ "govuk-input--error": a0 });
+const _c0$17 = a0 => ({ "govuk-input--error": a0 });
 function DateInputComponent_div_19_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 15)(1, "span", 8);
@@ -414,7 +412,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$14, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(9, _c0$17, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "hour-label-" + ctx_r6.hourId());
 } }
 function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
@@ -433,7 +431,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$14, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(9, _c0$17, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "minute-label-" + ctx_r6.minuteId());
 } }
 function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
@@ -452,7 +450,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$14, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(9, _c0$17, ctx_r6.isInvalid));
     i0.ɵɵattribute("aria-labelledby", "second-label-" + ctx_r6.secondId());
 } }
 class DateInputComponent {
@@ -688,21 +686,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$14, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(30, _c0$17, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "day-label-" + ctx.dayId());
             i0.ɵɵadvance(3);
             i0.ɵɵattribute("id", "month-label-" + ctx.monthId());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 26, "Month"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(32, _c0$14, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(32, _c0$17, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "month-label-" + ctx.monthId());
             i0.ɵɵadvance(3);
             i0.ɵɵattribute("id", "year-label-" + ctx.yearId());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 28, "Year"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(34, _c0$14, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(34, _c0$17, ctx.isInvalid));
             i0.ɵɵattribute("aria-labelledby", "year-label-" + ctx.yearId());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isDateTime);
@@ -739,7 +737,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$13 = ["*"];
+const _c0$16 = ["*"];
 function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵnamespaceSVG();
@@ -789,7 +787,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$13, decls: 11, vars: 12, consts: [[1, "hmcts-banner"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], ["d", "M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"], ["d", "M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AlertComponent, selectors: [["cut-alert"]], inputs: { type: "type", showIcon: "showIcon" }, standalone: false, ngContentSelectors: _c0$16, decls: 11, vars: 12, consts: [[1, "hmcts-banner"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], ["d", "M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"], ["d", "M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelementContainerStart(1, 1);
@@ -1003,14 +1001,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$12 = ["*"];
+const _c0$15 = ["*"];
 const _c1$q = 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$12, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, standalone: false, ngContentSelectors: _c0$15, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
@@ -1032,7 +1030,7 @@ class TabComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabComponent, { className: "TabComponent", filePath: "lib/components/tabs/tab.component.ts", lineNumber: 11 }); })();
 
-const _c0$11 = ["tab"];
+const _c0$14 = ["tab"];
 const _c1$p = ["*"];
 const _c2$4 = () => ["."];
 const _c3 = a0 => ({ "tabs-toggle-selected": a0 });
@@ -1079,7 +1077,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$11, 5);
+            i0.ɵɵviewQuery(_c0$14, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
@@ -1138,7 +1136,7 @@ class TabsModule {
         RouterModule, i1.RpxTranslationModule], exports: [TabsComponent,
         TabComponent] }); })();
 
-const _c0$10 = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
+const _c0$13 = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
 class ActivityBannerComponent {
     bannerType;
     description;
@@ -1157,7 +1155,7 @@ class ActivityBannerComponent {
             i0.ɵɵpipe(6, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c0$10, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(10, _c0$13, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("alt", i0.ɵɵinterpolate(i0.ɵɵpipeBind1(3, 6, ctx.description)))("src", i0.ɵɵinterpolate(ctx.imageLink), i0.ɵɵsanitizeUrl);
             i0.ɵɵadvance(3);
@@ -1777,21 +1775,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 {
@@ -12534,7 +12517,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$$ = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
+const _c0$12 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
 class CaseEventCompletionTaskCancelledComponent {
     context;
     notifyEventCompletionCancelled = new EventEmitter();
@@ -12603,7 +12586,7 @@ class CaseEventCompletionTaskCancelledComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 21, "Continue"), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(25, _c0$$, ctx.jurisdiction, ctx.caseType, ctx.caseId));
+            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(25, _c0$12, ctx.jurisdiction, ctx.caseType, ctx.caseId));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 23, "Cancel"), " ");
         } }, dependencies: [i1$1.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
@@ -12618,7 +12601,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$_ = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
+const _c0$11 = (a0, a1, a2) => ["/", "cases", "case-details", a0, a1, a2, "tasks"];
 function CaseEventCompletionTaskReassignedComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h2", 3);
@@ -12671,7 +12654,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$_, ctx_r1.jurisdiction, ctx_r1.caseType, ctx_r1.caseId));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction3(26, _c0$11, ctx_r1.jurisdiction, ctx_r1.caseType, ctx_r1.caseId));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 24, "Cancel"), " ");
 } }
@@ -13077,7 +13060,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$Z = ["writeComplexFieldComponent"];
+const _c0$10 = ["writeComplexFieldComponent"];
 const _c1$o = a0 => ({ "form-group-error": a0 });
 const _c2$3 = a0 => ({ "govuk-input--error": a0 });
 function WriteAddressFieldComponent_div_1_div_4_span_5_Template(rf, ctx) { if (rf & 1) {
@@ -13344,7 +13327,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$Z, 5);
+            i0.ɵɵviewQuery(_c0$10, 5);
             i0.ɵɵviewQuery(FocusElementDirective, 5);
         } if (rf & 2) {
             let _t;
@@ -13407,7 +13390,7 @@ class AbstractFieldReadComponent extends AbstractFormFieldComponent {
             type: Input
         }] }); })();
 
-const _c0$Y = ["journeyChild"];
+const _c0$$ = ["journeyChild"];
 class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
     multipageComponentStateService;
     journeyStartPageNumber = 0;
@@ -13482,7 +13465,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$Y, 5);
+            i0.ɵɵviewQuery(_c0$$, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
@@ -13497,7 +13480,7 @@ class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
             args: ['journeyChild']
         }] }); })();
 
-const _c0$X = ["journeyChild"];
+const _c0$_ = ["journeyChild"];
 class AbstractJourneyComponent {
     multipageComponentStateService;
     journeyStartPageNumber = 0;
@@ -13559,7 +13542,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$X, 5);
+            i0.ɵɵviewQuery(_c0$_, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
@@ -13588,8 +13571,9 @@ var DisplayContextCustomParameter;
     DisplayContextCustomParameter["QueryManagementWriteTest"] = "QueryManagementWriteTest";
 })(DisplayContextCustomParameter || (DisplayContextCustomParameter = {}));
 
+const _c0$Z = ["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) {
@@ -13599,11 +13583,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) {
@@ -13612,33 +13596,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();
@@ -13649,6 +13629,8 @@ function CaseFileViewFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
 } }
 class CaseFileViewFieldComponent {
     elementRef;
+    changeDetectorRef;
+    environmentInjector;
     route;
     caseFileViewService;
     documentManagementService;
@@ -13669,8 +13651,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;
@@ -13730,6 +13718,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;
@@ -13737,6 +13726,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);
@@ -13762,6 +13752,9 @@ class CaseFileViewFieldComponent {
         this.errorMessages = [];
     }
     ngOnDestroy() {
+        this.mediaViewerRenderId++;
+        this.destroyMediaViewer();
+        this.mediaViewerModuleRef?.destroy();
         if (this.categoriesAndDocumentsSubscription) {
             this.categoriesAndDocumentsSubscription.unsubscribe();
         }
@@ -13769,9 +13762,51 @@ class CaseFileViewFieldComponent {
     isIcpEnabled() {
         return this.icpEnabled && ((this.icp_jurisdictions?.length < 1) || this.icp_jurisdictions.includes(this.caseNotifier?.cachedCaseView?.case_type?.jurisdiction.id));
     }
-    static ɵfac = function CaseFileViewFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], standalone: false, decls: 3, vars: 3, consts: [[4, "ngIf"], ["class", "govuk-grid-column-two-thirds", 4, "ngIf"], ["id", "case-file-view-field-errors", "data-module", "govuk-error-summary", 1, "govuk-error-summary", "govuk-!-margin-bottom-4"], ["role", "alert"], [1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [4, "ngFor", "ngForOf"], ["type", "button", 1, "govuk-js-link"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [1, "document-tree-container__tree", 3, "clickedDocument", "moveDocument", "categoriesAndDocuments", "allowMoving"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType", "enableAnnotations", "enableRedactions", "height", "caseId", "multimediaPlayerEnabled", "enableICP"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseFileViewFieldComponent_ng_container_0_Template, 8, 1, "ng-container", 0)(1, CaseFileViewFieldComponent_div_1_Template, 5, 0, "div", 1)(2, CaseFileViewFieldComponent_div_2_Template, 9, 3, "div", 0);
+    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;
+    }
+    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$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], viewQuery: function CaseFileViewFieldComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$Z, 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();
@@ -13782,9 +13817,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: ["#case-file-view{display:flex;border:2px solid #C9C9C9;height:100vh;position:relative}#case-file-view .document-tree-container{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view .slider{width:.2%;background-color:#6b6b6b}#case-file-view .slider:hover,#case-file-view .slider:focus{cursor:col-resize}#case-file-view .media-viewer-container{background-color:#dee0e2;flex:1 1 0;overflow:hidden}\n"] }]
-    }], () => [{ type: i0.ElementRef }, { type: i1$1.ActivatedRoute }, { type: CaseFileViewService }, { type: DocumentManagementService }, { type: LoadingService }, { type: SessionStorageService }, { type: WindowService }, { type: CaseNotifier }, { type: AbstractAppConfig }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFileViewFieldComponent, { className: "CaseFileViewFieldComponent", filePath: "lib/shared/components/palette/case-file-view/case-file-view-field.component.ts", lineNumber: 19 }); })();
+        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: ["#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$1.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: 32 }); })();
 
 const PVP_FLAG_CODE = 'PF0021';
 const PVP_DISPLAY_TEXT = 'POTENTIALLY VIOLENT PERSON';
@@ -15016,7 +15054,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$W = ["writeComplexFieldComponent"];
+const _c0$Y = ["writeComplexFieldComponent"];
 const _c1$n = a0 => ({ "form-group-error": a0 });
 function WriteCaseLinkFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -15097,7 +15135,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$W, 5);
+            i0.ɵɵviewQuery(_c0$Y, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.writeComplexFieldComponent = _t.first);
@@ -15131,7 +15169,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$V = (a0, a1, a2, a3, a4, a5, a6) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5, parent: a6 });
+const _c0$X = (a0, a1, a2, a3, a4, a5, a6) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5, parent: a6 });
 const _c1$m = (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");
@@ -15142,7 +15180,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$V, ctx_r0.caseField.label, ctx_r0.caseField.label, ctx_r0.caseField.field_type.collection_field_type, ctx_r0.caseField.display_context_parameter, ctx_r0.caseField.value, ctx_r0.caseField.hidden, ctx_r0.caseField))("context", ctx_r0.context)("caseFields", ctx_r0.caseFields)("topLevelFormGroup", ctx_r0.topLevelFormGroup);
+    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction7(4, _c0$X, ctx_r0.caseField.label, ctx_r0.caseField.label, ctx_r0.caseField.field_type.collection_field_type, ctx_r0.caseField.display_context_parameter, ctx_r0.caseField.value, ctx_r0.caseField.hidden, ctx_r0.caseField))("context", ctx_r0.context)("caseFields", ctx_r0.caseFields)("topLevelFormGroup", ctx_r0.topLevelFormGroup);
 } }
 function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
@@ -15264,7 +15302,7 @@ class RemoveDialogComponent {
     }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RemoveDialogComponent, { className: "RemoveDialogComponent", filePath: "lib/shared/components/dialogs/remove-dialog/remove-dialog.component.ts", lineNumber: 10 }); })();
 
-const _c0$U = ["collectionItem"];
+const _c0$W = ["collectionItem"];
 function WriteCollectionFieldComponent_h2_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h2", 7);
     i0.ɵɵtext(1);
@@ -15685,7 +15723,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
     }
     static ɵfac = function WriteCollectionFieldComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WriteCollectionFieldComponent)(i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(ProfileNotifier), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteCollectionFieldComponent, selectors: [["ccd-write-collection-field"]], viewQuery: function WriteCollectionFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$U, 5);
+            i0.ɵɵviewQuery(_c0$W, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
@@ -16004,7 +16042,7 @@ class FileUploadStateService {
         type: Injectable
     }], null, null); })();
 
-const _c0$T = ["fileInput"];
+const _c0$V = ["fileInput"];
 const _c1$l = a0 => ({ "form-group-error bottom-30": a0 });
 function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 12);
@@ -16383,7 +16421,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.MatLegacyDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService), i0.ɵɵdirectiveInject(SessionStorageService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$T, 5);
+            i0.ɵɵviewQuery(_c0$V, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
@@ -16498,7 +16536,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$S = a0 => ({ "form-group-error": a0 });
+const _c0$U = a0 => ({ "form-group-error": a0 });
 function WriteDynamicListFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -16586,7 +16624,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$S, !ctx.dynamicListFormControl.valid && (ctx.dynamicListFormControl.dirty || ctx.dynamicListFormControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c0$U, !ctx.dynamicListFormControl.valid && (ctx.dynamicListFormControl.dirty || ctx.dynamicListFormControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -16767,7 +16805,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$R = a0 => ({ "error": a0 });
+const _c0$T = a0 => ({ "error": a0 });
 function WriteDynamicMultiSelectListFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -16887,7 +16925,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$R, !ctx.checkboxes.valid && ctx.checkboxes.touched))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$T, !ctx.checkboxes.valid && ctx.checkboxes.touched))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
@@ -16967,7 +17005,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$Q = a0 => ({ "form-group-error": a0 });
+const _c0$S = a0 => ({ "form-group-error": a0 });
 const _c1$k = a0 => ({ selected: a0 });
 function WriteDynamicRadioListFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -17062,7 +17100,7 @@ class WriteDynamicRadioListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$Q, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$S, !ctx.dynamicRadioListControl.valid && ctx.dynamicRadioListControl.dirty))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -17116,7 +17154,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$P = a0 => ({ "form-group-error": a0 });
+const _c0$R = a0 => ({ "form-group-error": a0 });
 const _c1$j = a0 => ({ "govuk-input--error": a0 });
 function WriteEmailFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -17162,7 +17200,7 @@ class WriteEmailFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$P, !ctx.emailControl.valid && (ctx.emailControl.dirty || ctx.emailControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$R, !ctx.emailControl.valid && (ctx.emailControl.dirty || ctx.emailControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -17204,7 +17242,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$O = a0 => ({ "form-group-error": a0 });
+const _c0$Q = a0 => ({ "form-group-error": a0 });
 function WriteFixedListFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -17279,7 +17317,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$O, !ctx.fixedListFormControl.valid && (ctx.fixedListFormControl.dirty || ctx.fixedListFormControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$Q, !ctx.fixedListFormControl.valid && (ctx.fixedListFormControl.dirty || ctx.fixedListFormControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -17342,7 +17380,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$N = a0 => ({ "form-group-error": a0 });
+const _c0$P = a0 => ({ "form-group-error": a0 });
 const _c1$i = a0 => ({ selected: a0 });
 function WriteFixedRadioListFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -17410,7 +17448,7 @@ class WriteFixedRadioListFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementContainerEnd();
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$N, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$P, !ctx.fixedRadioListControl.valid && (ctx.fixedRadioListControl.dirty || ctx.fixedRadioListControl.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -17486,7 +17524,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$M = a0 => ({ "form-group-error": a0 });
+const _c0$O = a0 => ({ "form-group-error": a0 });
 const _c1$h = a0 => ({ "hide-autocomplete": a0 });
 function WriteJudicialUserFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 10);
@@ -17706,7 +17744,7 @@ class WriteJudicialUserFieldComponent extends WriteComplexFieldComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             const autoComplete_r5 = i0.ɵɵreference(7);
-            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$M, !!ctx.judicialUserControl && ctx.errors));
+            i0.ɵɵproperty("formGroup", ctx.formGroup)("ngClass", i0.ɵɵpureFunction1(15, _c0$O, !!ctx.judicialUserControl && ctx.errors));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -18171,7 +18209,7 @@ class ValidatorsUtils {
         args: [{ providedIn: 'root' }]
     }], null, null); })();
 
-const _c0$L = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$N = a0 => ({ "govuk-form-group--error": a0 });
 const _c1$g = 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);
@@ -18238,7 +18276,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$L, !!ctx_r1.caseReasonCommentsError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$N, !!ctx_r1.caseReasonCommentsError));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonCommentsError);
 } }
@@ -18282,11 +18320,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$L, !!ctx_r1.caseNumberError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$N, !!ctx_r1.caseNumberError));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.caseNumberError);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$L, !!ctx_r1.caseReasonError));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(10, _c0$N, !!ctx_r1.caseReasonError));
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonError);
     i0.ɵɵadvance(2);
@@ -18714,7 +18752,7 @@ class LinkCasesComponent extends AbstractJourneyComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.linkCaseForm);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$L, !!ctx.noSelectedCaseError));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0$N, !!ctx.noSelectedCaseError));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.noSelectedCaseError);
             i0.ɵɵadvance(18);
@@ -19307,7 +19345,7 @@ class NoLinkedCasesComponent extends AbstractJourneyComponent {
     }], () => [{ type: i1$1.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$K = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$M = 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:");
@@ -19345,7 +19383,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$K, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$M, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.unlinkErrorMessage);
     i0.ɵɵadvance(2);
@@ -20282,7 +20320,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$J = a0 => ({ "form-group-error": a0 });
+const _c0$L = a0 => ({ "form-group-error": a0 });
 function WriteMoneyGbpFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
     i0.ɵɵtext(1);
@@ -20331,7 +20369,7 @@ class WriteMoneyGbpFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵpipe(9, "ccdIsMandatory");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$J, !ctx.moneyGbpControl.valid && (ctx.moneyGbpControl.dirty || ctx.moneyGbpControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$L, !ctx.moneyGbpControl.valid && (ctx.moneyGbpControl.dirty || ctx.moneyGbpControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -20390,7 +20428,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$I = a0 => ({ "error": a0 });
+const _c0$K = a0 => ({ "error": a0 });
 function WriteMultiSelectListFieldComponent_span_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1);
@@ -20491,7 +20529,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$I, !ctx.checkboxes.valid && (ctx.checkboxes.dirty || ctx.checkboxes.touched)))("id", ctx.id());
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c0$K, !ctx.checkboxes.valid && (ctx.checkboxes.dirty || ctx.checkboxes.touched)))("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
@@ -20530,7 +20568,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$H = a0 => ({ "form-group-error": a0 });
+const _c0$J = a0 => ({ "form-group-error": a0 });
 const _c1$f = a0 => ({ "govuk-input--error": a0 });
 function WriteNumberFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -20576,7 +20614,7 @@ class WriteNumberFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$H, !ctx.numberControl.valid && ctx.numberControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$J, !ctx.numberControl.valid && ctx.numberControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -20755,7 +20793,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$G = a0 => ({ "scroll-container ": a0 });
+const _c0$I = a0 => ({ "scroll-container ": a0 });
 function WriteOrganisationFieldComponent_fieldset_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "fieldset", 3);
     i0.ɵɵelement(1, "legend", 4);
@@ -20834,7 +20872,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$G, ((tmp_3_0 = i0.ɵɵpipeBind1(1, 3, ctx_r2.simpleOrganisations$)) == null ? null : tmp_3_0.length) > 10));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c0$I, ((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);
@@ -21176,38 +21214,98 @@ class PaymentField extends AbstractFieldReadComponent {
     }
 }
 
+const _c0$H = ["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-warning-text__assistive"], [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$H, 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-warning-text__assistive"], ["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$1.PaymentLibComponent, i1.RpxTranslatePipe], styles: [".govuk-warning-text[_ngcontent-%COMP%]{margin-top:20px;margin-bottom:-20px}"] });
+            i0.ɵɵproperty("ngIf", ctx.paymentLoadError);
+        } }, dependencies: [i4.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-warning-text__assistive\">{{'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>", 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-warning-text__assistive\">{{'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); }; })();
@@ -21230,7 +21328,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$F = a0 => ({ "form-group-error": a0 });
+const _c0$G = a0 => ({ "form-group-error": a0 });
 const _c1$e = a0 => ({ "govuk-input--error": a0 });
 function WritePhoneUKFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -21276,7 +21374,7 @@ class WritePhoneUKFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelement(5, "input", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$F, !ctx.phoneUkControl.valid && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$G, !ctx.phoneUkControl.valid && (ctx.phoneUkControl.dirty || ctx.phoneUkControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -23756,7 +23854,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$E = a0 => ({ "govuk-form-group--error": a0 });
+const _c0$F = a0 => ({ "govuk-form-group--error": a0 });
 function QueryWriteRaiseQueryComponent_ccd_query_case_details_header_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ccd-query-case-details-header", 5);
 } if (rf & 2) {
@@ -23836,7 +23934,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$E, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 3, "What is the date of the hearing?"), " ");
     i0.ɵɵadvance(2);
@@ -23903,7 +24001,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$E, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 25, "Query subject"), " ");
     i0.ɵɵadvance(3);
@@ -23911,7 +24009,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$E, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 29, "Query detail"), " ");
     i0.ɵɵadvance(3);
@@ -23922,7 +24020,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$E, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(47, _c0$F, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 33, "Is the query hearing related?"), " ");
     i0.ɵɵadvance(2);
@@ -24546,7 +24644,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$D = (a0, a1) => ["/query-management", "query", a0, "4", a1];
+const _c0$E = (a0, a1) => ["/query-management", "query", a0, "4", a1];
 function ReadQueryManagementFieldComponent_ng_container_0_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 6)(1, "ccd-query-list", 7);
@@ -24585,7 +24683,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$D, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$E, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
@@ -24599,7 +24697,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$D, ctx_r1.caseId, ctx_r1.query.id));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction2(4, _c0$E, ctx_r1.caseId, ctx_r1.query.id));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
@@ -24787,7 +24885,7 @@ class ReadTextAreaFieldComponent extends AbstractFieldReadComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadTextAreaFieldComponent, { className: "ReadTextAreaFieldComponent", filePath: "lib/shared/components/palette/text-area/read-text-area-field.component.ts", lineNumber: 9 }); })();
 
-const _c0$C = a0 => ({ "form-group-error": a0 });
+const _c0$D = a0 => ({ "form-group-error": a0 });
 const _c1$d = a0 => ({ "govuk-textarea--error": a0 });
 function WriteTextAreaFieldComponent_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 6);
@@ -24846,7 +24944,7 @@ class WriteTextAreaFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵlistener("input", function WriteTextAreaFieldComponent_Template_textarea_input_5_listener($event) { return ctx.autoGrow($event); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$C, !ctx.textareaControl.valid && ctx.textareaControl.dirty));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$D, !ctx.textareaControl.valid && ctx.textareaControl.dirty));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
@@ -24886,7 +24984,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$B = a0 => ({ "form-group-error": a0 });
+const _c0$C = a0 => ({ "form-group-error": a0 });
 const _c1$c = a0 => ({ "govuk-input--error": a0 });
 function WriteTextFieldComponent_label_1_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -24944,7 +25042,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$B, !!ctx.textControl && !ctx.textControl.valid && (ctx.textControl.dirty || ctx.textControl.touched)));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$C, !!ctx.textControl && !ctx.textControl.valid && (ctx.textControl.dirty || ctx.textControl.touched)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.caseField.hidden);
             i0.ɵɵadvance();
@@ -24979,31 +25077,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: [i4.NgIf, i3$1.PaymentLibComponent], encapsulation: 2 });
+            i0.ɵɵproperty("ngIf", ctx.paymentLoadError);
+        } }, dependencies: [i4.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 = [
@@ -32215,12 +32368,10 @@ class PaletteModule {
             MatLegacyAutocompleteModule,
             CdkTreeModule,
             OverlayModule,
-            PaymentLibModule,
             RpxTranslationModule.forChild(),
             CdkTreeModule,
             OverlayModule,
             MatLegacyDialogModule,
-            MediaViewerModule,
             LoadingModule,
             MarkdownComponentModule,
             ErrorsModule, NgxMatDatetimePickerModule,
@@ -32260,12 +32411,10 @@ class PaletteModule {
                     MatLegacyAutocompleteModule,
                     CdkTreeModule,
                     OverlayModule,
-                    PaymentLibModule,
                     RpxTranslationModule.forChild(),
                     CdkTreeModule,
                     OverlayModule,
                     MatLegacyDialogModule,
-                    MediaViewerModule,
                     LoadingModule,
                     MarkdownComponentModule,
                     ErrorsModule
@@ -32468,11 +32617,9 @@ class PaletteModule {
         MatDatepickerModule,
         MatLegacyAutocompleteModule,
         CdkTreeModule,
-        OverlayModule,
-        PaymentLibModule, i1.RpxTranslationModule, CdkTreeModule,
+        OverlayModule, i1.RpxTranslationModule, CdkTreeModule,
         OverlayModule,
         MatLegacyDialogModule,
-        MediaViewerModule,
         LoadingModule,
         MarkdownComponentModule,
         ErrorsModule], exports: [NgxMatDatetimePickerModule,
@@ -32659,12 +32806,12 @@ i0.ɵɵsetComponentScope(WriteDateContainerFieldComponent, function () { return
 i0.ɵɵsetComponentScope(WriteCollectionFieldComponent, function () { return [i4.NgForOf, i4.NgIf, i3.NgControlStatusGroup, i3.FormGroupDirective, MarkdownComponent, FieldWriteComponent]; }, function () { return [FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(
 // ComponentLauncher web components
-CaseFileViewFieldComponent, function () { return [i4.NgForOf, i4.NgIf, i13.MediaViewerComponent, CaseFileViewFolderComponent]; }, []);
+CaseFileViewFieldComponent, function () { return [i4.NgForOf, i4.NgIf, CaseFileViewFolderComponent]; }, []);
 i0.ɵɵsetComponentScope(
 // Components for case flags
 CaseFlagTableComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf]; }, function () { return [i4.DatePipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
 i0.ɵɵsetComponentScope(SelectFlagTypeComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName]; }, function () { return [i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
-i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i14.MatLegacyInput, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption]; }, function () { return [i4.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
+i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName, i13.MatLegacyInput, i6.MatLegacyAutocomplete, i6.MatLegacyAutocompleteTrigger, i7.MatLegacyOption]; }, function () { return [i4.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
     LanguageInterpreterDisplayPipe]; });
 i0.ɵɵsetComponentScope(ManageCaseFlagsComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i3.NgControlStatusGroup, i3.FormGroupDirective]; }, function () { return [i1.RpxTranslatePipe, ManageCaseFlagsLabelDisplayPipe]; });
 i0.ɵɵsetComponentScope(UpdateFlagComponent, function () { return [i4.NgClass, i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgControlStatusGroup, i3.FormGroupDirective, i3.FormControlName]; }, function () { return [i1.RpxTranslatePipe, UpdateFlagTitleDisplayPipe]; });
@@ -41887,5 +42034,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, MEDIA_VIEWER_LOCALSTORAGE_KEY, 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, 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, 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, WriteTextAreaFieldComponent, WriteTextFieldComponent, WriteYesNoFieldComponent, YesNoService, aCaseField, caseMessagesMockData, createACL, createCaseEventTrigger, createCaseField, createComplexFieldOverride, createFieldType, createFixedListFieldType, createHiddenComplexFieldOverride, createMultiSelectListFieldType, createWizardPage, createWizardPageField, editorRouting, initDialog, newCaseField, 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, MEDIA_VIEWER_LOCALSTORAGE_KEY, 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, 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, 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, WriteTextAreaFieldComponent, WriteTextFieldComponent, WriteYesNoFieldComponent, YesNoService, aCaseField, caseMessagesMockData, createACL, createCaseEventTrigger, createCaseField, createComplexFieldOverride, createFieldType, createFixedListFieldType, createHiddenComplexFieldOverride, createMultiSelectListFieldType, createWizardPage, createWizardPageField, editorRouting, initDialog, newCaseField, textFieldType, viewerRouting };
 //# sourceMappingURL=hmcts-ccd-case-ui-toolkit.mjs.map