@hmcts/ccd-case-ui-toolkit 7.0.51-more-null-checks → 7.0.51-ungrey-back-button

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

@@ -58,7 +58,7 @@ import * as i10 from '@angular/material/legacy-tabs';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
 import { decompressFromUTF16, compressToUTF16 } from 'lz-string';
 
-const _c0$14 = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
+const _c0$16 = [[["", "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);
@@ -136,7 +136,7 @@ class FooterComponent {
     workhours;
     static ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, 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$14);
+            i0.ɵɵprojectionDef(_c0$16);
             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()();
@@ -163,7 +163,7 @@ class FooterComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FooterComponent, { className: "FooterComponent", filePath: "lib/components/footer/footer.component.ts", lineNumber: 8 }); })();
 
-const _c0$13 = [[["", "headerNavigation", ""]]];
+const _c0$15 = [[["", "headerNavigation", ""]]];
 const _c1$t = ["[headerNavigation]"];
 function HeaderBarComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "a", 12);
@@ -207,7 +207,7 @@ class HeaderBarComponent {
     }
     static ɵfac = function HeaderBarComponent_Factory(t) { return new (t || HeaderBarComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, 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"], ["id", "sign-out", "href", "javascript:void(0)", 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$13);
+            i0.ɵɵprojectionDef(_c0$15);
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2);
             i0.ɵɵtemplate(3, HeaderBarComponent_div_3_Template, 5, 3, "div", 3)(4, HeaderBarComponent_div_4_Template, 5, 3, "div", 4);
             i0.ɵɵelementEnd();
@@ -257,13 +257,13 @@ class HeaderBarComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HeaderBarComponent, { className: "HeaderBarComponent", filePath: "lib/components/header/header-bar/header-bar.component.ts", lineNumber: 8 }); })();
 
-const _c0$12 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
+const _c0$14 = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
 const _c1$s = ["[leftNavLinks]", "[rightNavLinks]"];
 class NavigationComponent {
     isSolicitor;
     static ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$s, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$12);
+            i0.ɵɵprojectionDef(_c0$14);
             i0.ɵɵelementStart(0, "div")(1, "nav", 0);
             i0.ɵɵprojection(2);
             i0.ɵɵprojection(3, 1);
@@ -382,12 +382,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$11 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
+const _c0$13 = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
 const _c1$r = ["[topBody]", "[leftBody]", "[rightBody]"];
 class BodyComponent {
     static ɵfac = function BodyComponent_Factory(t) { return new (t || BodyComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$r, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$11);
+            i0.ɵɵprojectionDef(_c0$13);
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵprojection(1);
             i0.ɵɵprojection(2, 1);
@@ -401,7 +401,7 @@ class BodyComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BodyComponent, { className: "BodyComponent", filePath: "lib/components/body/body.component.ts", lineNumber: 9 }); })();
 
-const _c0$10 = a0 => ({ "govuk-input--error": a0 });
+const _c0$12 = 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, "label", 8);
@@ -418,7 +418,7 @@ function DateInputComponent_div_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "Hour"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(8, _c0$10, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(8, _c0$12, ctx_r6.isInvalid));
 } }
 function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
@@ -436,7 +436,7 @@ function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "Minute"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(8, _c0$10, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(8, _c0$12, ctx_r6.isInvalid));
 } }
 function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -454,7 +454,7 @@ function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "Second"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(8, _c0$10, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(8, _c0$12, ctx_r6.isInvalid));
 } }
 class DateInputComponent {
     id;
@@ -689,19 +689,19 @@ class DateInputComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 21, "Day"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(27, _c0$10, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(27, _c0$12, ctx.isInvalid));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.monthId());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 23, "Month"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(29, _c0$10, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(29, _c0$12, ctx.isInvalid));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.yearId());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 25, "Year"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(31, _c0$10, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(31, _c0$12, ctx.isInvalid));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isDateTime);
             i0.ɵɵadvance();
@@ -737,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: 20 }); })();
 
-const _c0$$ = ["*"];
+const _c0$11 = ["*"];
 function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵnamespaceSVG();
@@ -787,7 +787,7 @@ class AlertComponent {
     showIcon = true;
     alertMessageType = AlertMessageType;
     static ɵfac = function AlertComponent_Factory(t) { return new (t || AlertComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AlertComponent, selectors: [["cut-alert"]], inputs: { type: "type", showIcon: "showIcon" }, ngContentSelectors: _c0$$, 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" }, ngContentSelectors: _c0$11, 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);
@@ -1000,14 +1000,14 @@ class NotificationBannerComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NotificationBannerComponent, { className: "NotificationBannerComponent", filePath: "lib/components/banners/notification-banner/notification-banner.component.ts", lineNumber: 10 }); })();
 
-const _c0$_ = ["*"];
+const _c0$10 = ["*"];
 const _c1$q = a0 => ({ "js-hidden": a0 });
 class TabComponent {
     id;
     title;
     selected;
     static ɵfac = function TabComponent_Factory(t) { return new (t || TabComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, ngContentSelectors: _c0$_, 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" }, ngContentSelectors: _c0$10, 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);
@@ -1029,7 +1029,7 @@ class TabComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabComponent, { className: "TabComponent", filePath: "lib/components/tabs/tab.component.ts", lineNumber: 10 }); })();
 
-const _c0$Z = ["tab"];
+const _c0$$ = ["tab"];
 const _c1$p = ["*"];
 const _c2$4 = () => ["."];
 const _c3 = a0 => ({ "tabs-toggle-selected": a0 });
@@ -1076,7 +1076,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$Z, 5);
+            i0.ɵɵviewQuery(_c0$$, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
@@ -1135,7 +1135,7 @@ class TabsModule {
         RouterModule, i1.RpxTranslationModule], exports: [TabsComponent,
         TabComponent] }); })();
 
-const _c0$Y = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
+const _c0$_ = (a0, a1) => ({ caseLocked: a0, someoneViewing: a1 });
 class ActivityBannerComponent {
     bannerType;
     description;
@@ -1154,7 +1154,7 @@ class ActivityBannerComponent {
             i0.ɵɵpipe(6, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(8, _c0$Y, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(8, _c0$_, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
             i0.ɵɵadvance(2);
             i0.ɵɵpropertyInterpolate("alt", i0.ɵɵpipeBind1(3, 4, ctx.description));
             i0.ɵɵpropertyInterpolate("src", ctx.imageLink, i0.ɵɵsanitizeUrl);
@@ -4554,7 +4554,7 @@ class ConditionParser {
     }
     static getValue(fields, head) {
         if (this.isDynamicList(fields[head])) {
-            return fields[head]?.value?.code;
+            return fields[head].value.code;
         }
         else {
             return fields[head];
@@ -5650,7 +5650,7 @@ class FieldTypeSanitiser {
         const stringValue = data[field.id];
         if (typeof stringValue === 'string') {
             const listItems = this.getListItems(field);
-            const matches = listItems.filter(value => value?.code === stringValue);
+            const matches = listItems.filter(value => value.code === stringValue);
             if (matches && matches.length > 0) {
                 data[field.id] = {
                     value: matches[0],
@@ -7048,6 +7048,118 @@ class FormErrorService {
         type: Injectable
     }], null, null); })();
 
+class MultipageComponentStateService {
+    //is journey at start will help keep track of the progress through the journey.
+    isJourneyAtStart = false;
+    //journey collection references an upto date list of all the journey components currently rendered!!!!
+    journeyCollection = new Array();
+    //the instigator references the case-edit-page component that will invoke the next and previous methods
+    instigator = null;
+    //each journey will store its state here. this could include form data if needed
+    journeyState = new Map();
+    //setJourneyComponent will be called by the app component to update the journey collection
+    setJourneyCollection(journeyCollection) {
+        this.journeyCollection = journeyCollection;
+    }
+    //getJourneyCollection will be called by the app component to get the journey collection
+    getJourneyCollection() {
+        return this.journeyCollection;
+    }
+    //addToJourneyCollection will be called from the journey
+    addTojourneyCollection(journey) {
+        this.journeyCollection.push(journey);
+    }
+    //resetJourneyCollection will be called
+    resetJourneyCollection() {
+        this.journeyCollection = [];
+    }
+    //setInstigator will be called by the app component to update the instigator
+    setInstigator(instigator) {
+        this.instigator = instigator;
+    }
+    //getInstigator will be called by the app component to get the instigator
+    getInstigator() {
+        return this.instigator;
+    }
+    //setJourneyState will be called by the journey component to update the journey state
+    setJourneyState(journey) {
+        this.journeyState.set(journey.journeyId, journey);
+    }
+    //getJourneyState will be called by the journey component to get the journey state
+    getJourneyState(journey) {
+        return this.journeyState.get(journey.journeyId) || null;
+    }
+    //resetJourneyState will be called by the journey component to reset the journey state
+    resetJourneyState() {
+        this.journeyState.clear();
+    }
+    //reset will be called to ensure that the entire state is reset
+    reset() {
+        this.isJourneyAtStart = false;
+        this.journeyState.clear();
+        this.instigator = null;
+        this.journeyCollection = [];
+    }
+    //next will be called by the instigator that will invoke the next method of the journey component that will invoke the next method of the childpage component
+    next() {
+        if (this.journeyCollection.length <= 0) {
+            this.instigator?.onFinalNext();
+            return;
+        }
+        const isAnyObjectNotFinished = this.journeyCollection.some((journey) => !journey.isFinished());
+        if (!isAnyObjectNotFinished) {
+            this.instigator?.onFinalNext();
+            return;
+        }
+        for (const journey of this.journeyCollection) {
+            if (!journey) {
+                continue;
+            }
+            if (!journey?.isFinished()) {
+                journey?.next();
+                break;
+            }
+        }
+    }
+    //previous will be called by the instigator that will invoke the previous method of the journey component that will invoke the previous method of the childpage component
+    previous() {
+        if (this.journeyCollection.length <= 0) {
+            this.instigator?.onFinalPrevious();
+            return;
+        }
+        const isAnyObjectNotAtStart = this.journeyCollection.some((journey) => !journey.isStart());
+        if (!isAnyObjectNotAtStart) {
+            this.instigator?.onFinalPrevious();
+            return;
+        }
+        for (const journey of this.journeyCollection.slice().reverse()) {
+            if (!journey) {
+                continue;
+            }
+            if (!journey?.isStart()) {
+                journey?.previous();
+                break;
+            }
+        }
+    }
+    //isAtStart can be used to inform the instigator if we're at the start.
+    get isAtStart() {
+        return this.isJourneyAtStart;
+    }
+    //isAtStart can be used to update the value from a journey object, so the instigator knows.
+    set isAtStart(isAtStart) {
+        this.isJourneyAtStart = isAtStart;
+    }
+    static ɵfac = function MultipageComponentStateService_Factory(t) { return new (t || MultipageComponentStateService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MultipageComponentStateService, factory: MultipageComponentStateService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultipageComponentStateService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], null, null); })();
+
 class JurisdictionService {
     httpService;
     // We retain the Subject observable because subscribing code couldn't happen a null value
@@ -10142,25 +10254,24 @@ function CaseEditPageComponent_form_10_div_4_Template(rf, ctx) { if (rf & 1) {
 function CaseEditPageComponent_form_10_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "form", 22);
-    i0.ɵɵlistener("submit", function CaseEditPageComponent_form_10_Template_form_submit_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.submit()); });
+    i0.ɵɵlistener("submit", function CaseEditPageComponent_form_10_Template_form_submit_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.nextStep()); });
     i0.ɵɵelementStart(1, "fieldset", 23);
     i0.ɵɵelement(2, "legend", 24);
     i0.ɵɵtemplate(3, CaseEditPageComponent_form_10_ccd_case_edit_form_3_Template, 1, 4, "ccd-case-edit-form", 25)(4, CaseEditPageComponent_form_10_div_4_Template, 5, 6, "div", 26);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "div", 27)(6, "button", 28);
-    i0.ɵɵpipe(7, "async");
     i0.ɵɵlistener("click", function CaseEditPageComponent_form_10_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toPreviousPage()); });
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "rpxTranslate");
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 29);
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "rpxTranslate");
+    i0.ɵɵelementStart(9, "button", 29);
+    i0.ɵɵtext(10);
+    i0.ɵɵpipe(11, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "p", 30)(14, "a", 31);
-    i0.ɵɵlistener("click", function CaseEditPageComponent_form_10_Template_a_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancel()); });
-    i0.ɵɵtext(15);
-    i0.ɵɵpipe(16, "rpxTranslate");
+    i0.ɵɵelementStart(12, "p", 30)(13, "a", 31);
+    i0.ɵɵlistener("click", function CaseEditPageComponent_form_10_Template_a_click_13_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancel()); });
+    i0.ɵɵtext(14);
+    i0.ɵɵpipe(15, "rpxTranslate");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -10170,15 +10281,15 @@ function CaseEditPageComponent_form_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.currentPage.isMultiColumn());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !i0.ɵɵpipeBind1(7, 8, ctx_r1.hasPreviousPage$));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 10, "Previous"), " ");
+    i0.ɵɵproperty("disabled", ctx_r1.isAtStart());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 8, "Previous"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.submitting());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 12, ctx_r1.triggerText));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 10, ctx_r1.triggerText));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 14, ctx_r1.getCancelText()));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 12, ctx_r1.getCancelText()));
 } }
 function CaseEditPageComponent_ccd_case_event_completion_11_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -10201,6 +10312,7 @@ class CaseEditPageComponent {
     caseEditDataService;
     loadingService;
     validPageListCaseFieldsService;
+    multipageComponentStateService;
     addressService;
     static RESUMED_FORM_DISCARD = 'RESUMED_FORM_DISCARD';
     static NEW_FORM_DISCARD = 'NEW_FORM_DISCARD';
@@ -10242,7 +10354,7 @@ class CaseEditPageComponent {
             topContainer.focus();
         }
     }
-    constructor(caseEdit, route, formValueService, formErrorService, cdRef, pageValidationService, dialog, caseFieldService, caseEditDataService, loadingService, validPageListCaseFieldsService, addressService) {
+    constructor(caseEdit, route, formValueService, formErrorService, cdRef, pageValidationService, dialog, caseFieldService, caseEditDataService, loadingService, validPageListCaseFieldsService, multipageComponentStateService, addressService) {
         this.caseEdit = caseEdit;
         this.route = route;
         this.formValueService = formValueService;
@@ -10254,7 +10366,26 @@ class CaseEditPageComponent {
         this.caseEditDataService = caseEditDataService;
         this.loadingService = loadingService;
         this.validPageListCaseFieldsService = validPageListCaseFieldsService;
+        this.multipageComponentStateService = multipageComponentStateService;
         this.addressService = addressService;
+        this.multipageComponentStateService.setInstigator(this);
+    }
+    onFinalNext() {
+        this.submit();
+    }
+    onFinalPrevious() {
+        this.cancel();
+    }
+    isAtStart() {
+        return this.multipageComponentStateService.isAtStart;
+    }
+    // This method will be triggered by the next button in the app component
+    nextStep() {
+        this.multipageComponentStateService.next();
+    }
+    // This method will be triggered by the previous button in the app component
+    previousStep() {
+        this.multipageComponentStateService.previous();
     }
     ngOnInit() {
         initDialog();
@@ -10313,6 +10444,7 @@ class CaseEditPageComponent {
         this.dialogRefAfterClosedSub?.unsubscribe();
         this.saveDraftSub?.unsubscribe();
         this.caseFormValidationErrorsSub?.unsubscribe();
+        this.multipageComponentStateService.reset();
     }
     applyValuesChanged(valuesChanged) {
         this.formValuesChanged = valuesChanged;
@@ -10339,6 +10471,7 @@ class CaseEditPageComponent {
         caseEventData.data = caseEventData.event_data;
         this.updateFormData(caseEventData);
         this.previous();
+        this.previousStep();
         CaseEditPageComponent.setFocusToTop();
     }
     // Adding validation message to show it as Error Summary
@@ -10615,6 +10748,7 @@ class CaseEditPageComponent {
             this.caseEdit.cancelled.emit();
         }
         this.caseEditDataService.clearFormValidationErrors();
+        this.multipageComponentStateService.reset();
     }
     submitting() {
         return this.caseEdit.isSubmitting;
@@ -10767,7 +10901,7 @@ class CaseEditPageComponent {
             }
         });
     }
-    static ɵfac = function CaseEditPageComponent_Factory(t) { return new (t || CaseEditPageComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(FormValueService), i0.ɵɵdirectiveInject(FormErrorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PageValidationService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(ValidPageListCaseFieldsService), i0.ɵɵdirectiveInject(AddressesService)); };
+    static ɵfac = function CaseEditPageComponent_Factory(t) { return new (t || CaseEditPageComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(FormValueService), i0.ɵɵdirectiveInject(FormErrorService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(PageValidationService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(ValidPageListCaseFieldsService), i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(AddressesService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditPageComponent, selectors: [["ccd-case-edit-page"]], decls: 12, vars: 11, consts: [["titleBlock", ""], ["idBlock", ""], [4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["class", "govuk-error-summary", "aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 4, "ngIf"], [3, "error"], [3, "callbackErrorsContext", "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject"], [1, "width-50"], ["class", "form", 3, "formGroup", "submit", 4, "ngIf"], [3, "eventCompletionParams", "eventCanBeCompleted", 4, "ngIf"], ["class", "govuk-heading-l", 4, "ngIf"], [1, "govuk-heading-l"], [1, "govuk-caption-l"], [3, "content"], ["class", "heading-h2", 4, "ngIf"], [1, "heading-h2"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], ["class", "govuk-error-summary__body", 4, "ngFor", "ngForOf"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [1, "validation-error", 3, "click"], [1, "form", 3, "submit", "formGroup"], ["id", "fieldset-case-data"], [2, "display", "none"], ["id", "caseEditForm", 3, "fields", "formGroup", "caseFields", "pageChangeSubject", "valuesChanged", 4, "ngIf"], ["class", "grid-row", 4, "ngIf"], [1, "form-group", "form-group-related"], ["type", "button", 1, "button", "button-secondary", 3, "click", "disabled"], ["type", "submit", 1, "button", 3, "disabled"], [1, "cancel"], ["href", "javascript:void(0)", 3, "click"], ["id", "caseEditForm", 3, "valuesChanged", "fields", "formGroup", "caseFields", "pageChangeSubject"], [1, "grid-row"], [1, "column-two-thirds", "rightBorderSeparator"], ["id", "caseEditForm1", 3, "fields", "formGroup", "caseFields"], [1, "column-one-third"], ["id", "caseEditForm2", 3, "fields", "formGroup", "caseFields"], [3, "eventCanBeCompleted", "eventCompletionParams"]], template: function CaseEditPageComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵtemplate(0, CaseEditPageComponent_ng_container_0_Template, 3, 2, "ng-container", 2)(1, CaseEditPageComponent_div_1_Template, 1, 0, "div", 3)(2, CaseEditPageComponent_ng_template_2_Template, 2, 5, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(4, CaseEditPageComponent_ng_template_4_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(6, CaseEditPageComponent_div_6_Template, 5, 4, "div", 4);
@@ -10776,7 +10910,7 @@ class CaseEditPageComponent {
             i0.ɵɵlistener("callbackErrorsContext", function CaseEditPageComponent_Template_ccd_callback_errors_callbackErrorsContext_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.callbackErrorsNotify($event)); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(9, "div", 7);
-            i0.ɵɵtemplate(10, CaseEditPageComponent_form_10_Template, 17, 16, "form", 8);
+            i0.ɵɵtemplate(10, CaseEditPageComponent_form_10_Template, 16, 14, "form", 8);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(11, CaseEditPageComponent_ccd_case_event_completion_11_Template, 1, 1, "ccd-case-event-completion", 9);
         } if (rf & 2) {
@@ -10799,9 +10933,9 @@ class CaseEditPageComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEditPageComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-edit-page', template: "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name | rpxTranslate}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label | rpxTranslate}}</h1>\n  </ng-container>\n</ng-container>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data']\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Error message summary -->\n<div *ngIf=\"validationErrors.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    {{'There is a problem' | rpxTranslate}}\n  </h2>\n  <div *ngFor=\"let validationError of validationErrors\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(validationError.id)\" class=\"validation-error\">\n          {{ validationError.message | rpxTranslate: getRpxTranslatePipeArgs(validationError.label | rpxTranslate): null }}\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <fieldset id=\"fieldset-case-data\">\n      <legend style=\"display: none;\"></legend>\n      <!-- single column -->\n      <ccd-case-edit-form id='caseEditForm' *ngIf=\"!currentPage.isMultiColumn()\" [fields]=\"currentPage.getCol1Fields()\"\n                          [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"\n                          [pageChangeSubject]=\"pageChangeSubject\"\n                          (valuesChanged)=\"applyValuesChanged($event)\"></ccd-case-edit-form>\n      <!-- two columns -->\n      <div *ngIf=\"currentPage.isMultiColumn()\" class=\"grid-row\">\n        <div class=\"column-two-thirds rightBorderSeparator\">\n          <ccd-case-edit-form id='caseEditForm1' [fields]=\"currentPage.getCol1Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n        <div class=\"column-one-third\">\n          <ccd-case-edit-form id='caseEditForm2' [fields]=\"currentPage.getCol2Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n      </div>\n    </fieldset>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" [disabled]=\"!(hasPreviousPage$ | async)\" (click)=\"toPreviousPage()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText | rpxTranslate}}</button>\n    </div>\n\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\">{{getCancelText() | rpxTranslate}}</a></p>\n  </form>\n</div>\n\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: [".rightBorderSeparator{border-right-width:4px;border-right-color:#ffcc02;border-right-style:solid}.validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
-    }], () => [{ type: CaseEditComponent }, { type: i1$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0.ChangeDetectorRef }, { type: PageValidationService }, { type: i1$3.MatLegacyDialog }, { type: CaseFieldService }, { type: CaseEditDataService }, { type: LoadingService }, { type: ValidPageListCaseFieldsService }, { type: AddressesService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditPageComponent, { className: "CaseEditPageComponent", filePath: "lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts", lineNumber: 31 }); })();
+        args: [{ selector: 'ccd-case-edit-page', template: "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name | rpxTranslate}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label | rpxTranslate}}</h1>\n  </ng-container>\n</ng-container>\n\n<!--Case ID or Title -->\n<div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n<ng-template #titleBlock>\n  <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: caseFields : editForm.controls['data']\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Error message summary -->\n<div *ngIf=\"validationErrors.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    {{'There is a problem' | rpxTranslate}}\n  </h2>\n  <div *ngFor=\"let validationError of validationErrors\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(validationError.id)\" class=\"validation-error\">\n          {{ validationError.message | rpxTranslate: getRpxTranslatePipeArgs(validationError.label | rpxTranslate): null }}\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"nextStep()\">\n    <fieldset id=\"fieldset-case-data\">\n      <legend style=\"display: none;\"></legend>\n      <!-- single column -->\n      <ccd-case-edit-form id='caseEditForm' *ngIf=\"!currentPage.isMultiColumn()\" [fields]=\"currentPage.getCol1Fields()\"\n                          [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"\n                          [pageChangeSubject]=\"pageChangeSubject\"\n                          (valuesChanged)=\"applyValuesChanged($event)\"></ccd-case-edit-form>\n      <!-- two columns -->\n      <div *ngIf=\"currentPage.isMultiColumn()\" class=\"grid-row\">\n        <div class=\"column-two-thirds rightBorderSeparator\">\n          <ccd-case-edit-form id='caseEditForm1' [fields]=\"currentPage.getCol1Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n        <div class=\"column-one-third\">\n          <ccd-case-edit-form id='caseEditForm2' [fields]=\"currentPage.getCol2Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n      </div>\n    </fieldset>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" (click)=\"toPreviousPage()\" [disabled]=\"isAtStart()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText | rpxTranslate}}</button>\n    </div>\n\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\">{{getCancelText() | rpxTranslate}}</a></p>\n  </form>\n</div>\n\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: [".rightBorderSeparator{border-right-width:4px;border-right-color:#ffcc02;border-right-style:solid}.validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
+    }], () => [{ type: CaseEditComponent }, { type: i1$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0.ChangeDetectorRef }, { type: PageValidationService }, { type: i1$3.MatLegacyDialog }, { type: CaseFieldService }, { type: CaseEditDataService }, { type: LoadingService }, { type: ValidPageListCaseFieldsService }, { type: MultipageComponentStateService }, { type: AddressesService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditPageComponent, { className: "CaseEditPageComponent", filePath: "lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts", lineNumber: 32 }); })();
 
 class CallbackErrorsContext {
     triggerText;
@@ -10950,7 +11084,7 @@ class CallbackErrorsComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CallbackErrorsComponent, { className: "CallbackErrorsComponent", filePath: "lib/shared/components/error/callback-errors.component.ts", lineNumber: 10 }); })();
 
-const _c0$X = a0 => ["/", "cases", "case-details", a0, "tasks"];
+const _c0$Z = a0 => ["/", "cases", "case-details", a0, "tasks"];
 class CaseEventCompletionTaskCancelledComponent {
     parentComponent;
     caseId;
@@ -11013,7 +11147,7 @@ class CaseEventCompletionTaskCancelledComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 21, "Continue"), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction1(25, _c0$X, ctx.caseId));
+            i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction1(25, _c0$Z, ctx.caseId));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 23, "Cancel"), " ");
         } }, dependencies: [i1$1.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
@@ -11027,7 +11161,7 @@ class CaseEventCompletionTaskCancelledComponent {
             }] }], null); })();
 (() => { (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: 8 }); })();
 
-const _c0$W = a0 => ["/", "cases", "case-details", a0, "tasks"];
+const _c0$Y = a0 => ["/", "cases", "case-details", a0, "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);
@@ -11080,7 +11214,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.ɵɵpureFunction1(26, _c0$W, ctx_r1.caseId));
+    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction1(26, _c0$Y, ctx_r1.caseId));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 24, "Cancel"), " ");
 } }
@@ -11552,7 +11686,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: 21 }); })();
 
-const _c0$V = ["writeComplexFieldComponent"];
+const _c0$X = ["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) {
@@ -11794,7 +11928,7 @@ class WriteAddressFieldComponent extends AbstractFieldWriteComponent {
     }
     static ɵfac = function WriteAddressFieldComponent_Factory(t) { return new (t || 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$V, 5);
+            i0.ɵɵviewQuery(_c0$X, 5);
             i0.ɵɵviewQuery(FocusElementDirective, 5);
         } if (rf & 2) {
             let _t;
@@ -11857,6 +11991,172 @@ class AbstractFieldReadComponent extends AbstractFormFieldComponent {
             type: Input
         }] }); })();
 
+const _c0$W = ["journeyChild"];
+class AbstractFieldWriteJourneyComponent extends AbstractFieldWriteComponent {
+    multipageComponentStateService;
+    journeyStartPageNumber = 0;
+    journeyEndPageNumber = 0;
+    journeyPageNumber = 0;
+    journeyPreviousPageNumber = 0;
+    journeyId = 'journey';
+    // todo...
+    childJourney;
+    constructor(multipageComponentStateService) {
+        super();
+        this.multipageComponentStateService = multipageComponentStateService;
+        this.multipageComponentStateService.addTojourneyCollection(this);
+        this.journeyPageNumber = this.journeyStartPageNumber;
+    }
+    next() {
+        if (!this.hasNext()) {
+            return;
+        }
+        this.childJourney.next();
+    }
+    previous() {
+        if (!this.hasPrevious()) {
+            return;
+        }
+        if (this.childJourney['cachedFlagType'] && this.childJourney['subJourneyIndex'] !== 0) {
+            this.childJourney.previous();
+        }
+        else {
+            this.previousPage();
+        }
+    }
+    previousPage() {
+        if (this.hasPrevious()) {
+            this.journeyPageNumber--;
+            this.onPageChange();
+        }
+    }
+    nextPage() {
+        if (this.hasNext()) {
+            this.journeyPageNumber++;
+            this.onPageChange();
+        }
+    }
+    ngOnInit() {
+        this.journeyPageNumber = this.journeyStartPageNumber;
+        const state = this.multipageComponentStateService.getJourneyState(this);
+        if (state) {
+            const { journeyPageNumber, journeyStartPageNumber, journeyEndPageNumber } = state;
+            this.journeyPageNumber = journeyPageNumber;
+            this.journeyStartPageNumber = journeyStartPageNumber;
+            this.journeyEndPageNumber = journeyEndPageNumber;
+        }
+    }
+    ngOnDestroy() {
+        this.multipageComponentStateService.setJourneyState(this);
+    }
+    hasNext() { return this.journeyPageNumber < this.journeyEndPageNumber; }
+    ;
+    hasPrevious() { return this.journeyPageNumber > this.journeyStartPageNumber; }
+    ;
+    isFinished() { return this.journeyPageNumber === this.journeyEndPageNumber; }
+    ;
+    isStart() { return this.journeyPageNumber === this.journeyStartPageNumber; }
+    ;
+    getId() { return this.journeyId; }
+    ;
+    onPageChange() { }
+    ;
+    static ɵfac = function AbstractFieldWriteJourneyComponent_Factory(t) { return new (t || AbstractFieldWriteJourneyComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AbstractFieldWriteJourneyComponent, viewQuery: function AbstractFieldWriteJourneyComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$W, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
+        } }, inputs: { journeyId: "journeyId" }, features: [i0.ɵɵInheritDefinitionFeature] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AbstractFieldWriteJourneyComponent, [{
+        type: Directive
+    }], () => [{ type: MultipageComponentStateService }], { journeyId: [{
+            type: Input
+        }], childJourney: [{
+            type: ViewChild,
+            args: ['journeyChild']
+        }] }); })();
+
+const _c0$V = ["journeyChild"];
+class AbstractJourneyComponent {
+    multipageComponentStateService;
+    journeyStartPageNumber = 0;
+    journeyEndPageNumber = 0;
+    journeyPageNumber = 0;
+    journeyPreviousPageNumber;
+    journeyId = 'journey';
+    // todo...
+    childJourney;
+    constructor(multipageComponentStateService) {
+        this.multipageComponentStateService = multipageComponentStateService;
+        this.multipageComponentStateService.addTojourneyCollection(this);
+        this.journeyPageNumber = this.journeyStartPageNumber;
+    }
+    next() {
+        if (!this.hasNext()) {
+            return;
+        }
+        this.childJourney.next();
+    }
+    previous() {
+        if (!this.hasPrevious()) {
+            return;
+        }
+        this.previousPage();
+    }
+    previousPage() {
+        if (this.hasPrevious()) {
+            this.journeyPageNumber--;
+        }
+    }
+    ngOnInit() {
+        this.journeyPageNumber = this.journeyStartPageNumber;
+        const state = this.multipageComponentStateService.getJourneyState(this);
+        console.log(this.journeyPageNumber);
+        if (state) {
+            const { journeyPageNumber, journeyStartPageNumber, journeyEndPageNumber } = state;
+            this.journeyPageNumber = journeyPageNumber;
+            this.journeyStartPageNumber = journeyStartPageNumber;
+            this.journeyEndPageNumber = journeyEndPageNumber;
+        }
+    }
+    ngOnDestroy() {
+        this.multipageComponentStateService.setJourneyState(this);
+    }
+    hasNext() {
+        return this.journeyPageNumber < this.journeyEndPageNumber;
+    }
+    hasPrevious() {
+        return this.journeyPageNumber > this.journeyStartPageNumber;
+    }
+    isFinished() {
+        return this.journeyPageNumber === this.journeyEndPageNumber;
+    }
+    isStart() {
+        return this.journeyPageNumber === this.journeyStartPageNumber;
+    }
+    getId() {
+        return this.journeyId;
+    }
+    onPageChange() { }
+    static ɵfac = function AbstractJourneyComponent_Factory(t) { return new (t || AbstractJourneyComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AbstractJourneyComponent, viewQuery: function AbstractJourneyComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$V, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.childJourney = _t.first);
+        } }, inputs: { journeyId: "journeyId" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AbstractJourneyComponent, [{
+        type: Directive
+    }], () => [{ type: MultipageComponentStateService }], { journeyId: [{
+            type: Input
+        }], childJourney: [{
+            type: ViewChild,
+            args: ['journeyChild']
+        }] }); })();
+
 var DisplayContextParameter;
 (function (DisplayContextParameter) {
     DisplayContextParameter["Read"] = "READ";
@@ -12316,7 +12616,7 @@ class ReadCaseFlagFieldComponent extends AbstractFieldReadComponent {
 
 function WriteCaseFlagFieldComponent_div_0_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "ul", 6)(2, "li")(3, "a", 7);
+    i0.ɵɵelementStart(0, "div", 6)(1, "ul", 7)(2, "li")(3, "a", 8);
     i0.ɵɵlistener("click", function WriteCaseFlagFieldComponent_div_0_div_4_Template_a_click_3_listener() { const errorMessage_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.navigateToErrorElement(errorMessage_r2.fieldId)); });
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "rpxTranslate");
@@ -12327,11 +12627,11 @@ function WriteCaseFlagFieldComponent_div_0_div_4_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 1, errorMessage_r2.description));
 } }
 function WriteCaseFlagFieldComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "h2", 3);
+    i0.ɵɵelementStart(0, "div", 3)(1, "h2", 4);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, WriteCaseFlagFieldComponent_div_0_div_4_Template, 6, 3, "div", 4);
+    i0.ɵɵtemplate(4, WriteCaseFlagFieldComponent_div_0_div_4_Template, 6, 3, "div", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -12343,7 +12643,7 @@ function WriteCaseFlagFieldComponent_div_0_Template(rf, ctx) { if (rf & 1) {
 function WriteCaseFlagFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-select-flag-location", 11);
+    i0.ɵɵelementStart(1, "ccd-select-flag-location", 12, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_1_ng_container_2_Template_ccd_select_flag_location_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12355,7 +12655,7 @@ function WriteCaseFlagFieldComponent_div_1_ng_container_2_Template(rf, ctx) { if
 function WriteCaseFlagFieldComponent_div_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-select-flag-type", 12);
+    i0.ɵɵelementStart(1, "ccd-select-flag-type", 13, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_1_ng_container_3_Template_ccd_select_flag_type_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); })("flagCommentsOptionalEmitter", function WriteCaseFlagFieldComponent_div_1_ng_container_3_Template_ccd_select_flag_type_flagCommentsOptionalEmitter_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onFlagCommentsOptionalEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12367,7 +12667,7 @@ function WriteCaseFlagFieldComponent_div_1_ng_container_3_Template(rf, ctx) { if
 function WriteCaseFlagFieldComponent_div_1_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-search-language-interpreter", 13);
+    i0.ɵɵelementStart(1, "ccd-search-language-interpreter", 14, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_1_ng_container_4_Template_ccd_search_language_interpreter_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12379,7 +12679,7 @@ function WriteCaseFlagFieldComponent_div_1_ng_container_4_Template(rf, ctx) { if
 function WriteCaseFlagFieldComponent_div_1_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-add-comments", 14);
+    i0.ɵɵelementStart(1, "ccd-add-comments", 15, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_1_ng_container_5_Template_ccd_add_comments_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12391,7 +12691,7 @@ function WriteCaseFlagFieldComponent_div_1_ng_container_5_Template(rf, ctx) { if
 function WriteCaseFlagFieldComponent_div_1_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-confirm-flag-status", 15);
+    i0.ɵɵelementStart(1, "ccd-confirm-flag-status", 16, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_1_ng_container_6_Template_ccd_confirm_flag_status_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12401,8 +12701,8 @@ function WriteCaseFlagFieldComponent_div_1_ng_container_6_Template(rf, ctx) { if
     i0.ɵɵproperty("formGroup", ctx_r2.caseFlagParentFormGroup)("defaultStatus", ctx_r2.flagType.defaultStatus);
 } }
 function WriteCaseFlagFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9);
-    i0.ɵɵtemplate(2, WriteCaseFlagFieldComponent_div_1_ng_container_2_Template, 2, 3, "ng-container", 10)(3, WriteCaseFlagFieldComponent_div_1_ng_container_3_Template, 2, 7, "ng-container", 10)(4, WriteCaseFlagFieldComponent_div_1_ng_container_4_Template, 2, 2, "ng-container", 10)(5, WriteCaseFlagFieldComponent_div_1_ng_container_5_Template, 2, 4, "ng-container", 10)(6, WriteCaseFlagFieldComponent_div_1_ng_container_6_Template, 2, 2, "ng-container", 10);
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
+    i0.ɵɵtemplate(2, WriteCaseFlagFieldComponent_div_1_ng_container_2_Template, 3, 3, "ng-container", 11)(3, WriteCaseFlagFieldComponent_div_1_ng_container_3_Template, 3, 7, "ng-container", 11)(4, WriteCaseFlagFieldComponent_div_1_ng_container_4_Template, 3, 2, "ng-container", 11)(5, WriteCaseFlagFieldComponent_div_1_ng_container_5_Template, 3, 4, "ng-container", 11)(6, WriteCaseFlagFieldComponent_div_1_ng_container_6_Template, 3, 2, "ng-container", 11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -12423,7 +12723,7 @@ function WriteCaseFlagFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
 function WriteCaseFlagFieldComponent_div_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-manage-case-flags", 16);
+    i0.ɵɵelementStart(1, "ccd-manage-case-flags", 17, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_2_ng_container_2_Template_ccd_manage_case_flags_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12435,7 +12735,7 @@ function WriteCaseFlagFieldComponent_div_2_ng_container_2_Template(rf, ctx) { if
 function WriteCaseFlagFieldComponent_div_2_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-update-flag", 17);
+    i0.ɵɵelementStart(1, "ccd-update-flag", 18, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_2_ng_container_3_Template_ccd_update_flag_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12447,7 +12747,7 @@ function WriteCaseFlagFieldComponent_div_2_ng_container_3_Template(rf, ctx) { if
 function WriteCaseFlagFieldComponent_div_2_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-update-flag-add-translation-form", 18);
+    i0.ɵɵelementStart(1, "ccd-update-flag-add-translation-form", 19, 0);
     i0.ɵɵlistener("caseFlagStateEmitter", function WriteCaseFlagFieldComponent_div_2_ng_container_4_Template_ccd_update_flag_add_translation_form_caseFlagStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCaseFlagStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -12457,8 +12757,8 @@ function WriteCaseFlagFieldComponent_div_2_ng_container_4_Template(rf, ctx) { if
     i0.ɵɵproperty("formGroup", ctx_r2.caseFlagParentFormGroup);
 } }
 function WriteCaseFlagFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9);
-    i0.ɵɵtemplate(2, WriteCaseFlagFieldComponent_div_2_ng_container_2_Template, 2, 4, "ng-container", 10)(3, WriteCaseFlagFieldComponent_div_2_ng_container_3_Template, 2, 2, "ng-container", 10)(4, WriteCaseFlagFieldComponent_div_2_ng_container_4_Template, 2, 1, "ng-container", 10);
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
+    i0.ɵɵtemplate(2, WriteCaseFlagFieldComponent_div_2_ng_container_2_Template, 3, 4, "ng-container", 11)(3, WriteCaseFlagFieldComponent_div_2_ng_container_3_Template, 3, 2, "ng-container", 11)(4, WriteCaseFlagFieldComponent_div_2_ng_container_4_Template, 3, 1, "ng-container", 11);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -12472,11 +12772,12 @@ function WriteCaseFlagFieldComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngSwitchCase", ctx_r2.caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION);
 } }
-class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
+class WriteCaseFlagFieldComponent extends AbstractFieldWriteJourneyComponent {
     route;
     caseEditDataService;
     caseFlagStateService;
     rpxTranslationService;
+    //public formGroup: FormGroup;
     fieldState;
     caseFlagFieldState = CaseFlagFieldState;
     errorMessages = [];
@@ -12510,24 +12811,26 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
             this.caseFlagParentFormGroup.value.selectedLocation = selectedLocation;
         }
     }
-    constructor(route, caseEditDataService, caseFlagStateService, rpxTranslationService) {
-        super();
+    constructor(route, caseEditDataService, caseFlagStateService, rpxTranslationService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.route = route;
         this.caseEditDataService = caseEditDataService;
         this.caseFlagStateService = caseFlagStateService;
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
+        let navigatedTo = false;
         // If it is start of the journey or navigation from check your answers page then fieldStateToNavigate property
         // in case flag state service will contain the field state to navigate based on create or manage journey
         this.fieldState = this.caseFlagStateService.fieldStateToNavigate;
-        if (this.fieldState === undefined ||
-            this.fieldState === CaseFlagFieldState.FLAG_LOCATION ||
-            this.fieldState === CaseFlagFieldState.FLAG_MANAGE_CASE_FLAGS) {
+        if (this.fieldState === undefined) {
             const params = this.route.snapshot.params;
             // Clear the form group, field state to navigate and set the page location
             this.caseFlagStateService.resetCache(`../${params['eid']}/${params['page']}`);
         }
+        else {
+            navigatedTo = true;
+        }
         // Reassign the form group from the case flag state service
         this.caseFlagParentFormGroup = this.caseFlagStateService.formGroup;
         // Clear form validation errors as a new page will be rendered based on field state
@@ -12589,6 +12892,45 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
                 });
             }
         }
+        // CSFD-16.
+        // Setup the page number to initially be the same value as 
+        // the start page number. Provided that some state exists within 
+        // the page state service, use that instaead.
+        //
+        // If isDisplayContextParameterUpdate is true, then the starting page must be 
+        // the value of 4. Otherwise, it's 0. However, we're using an enum to simplify
+        // this process.
+        //
+        // It might help to take a look at the template file. 
+        if (this.isDisplayContextParameterUpdate) {
+            this.journeyStartPageNumber = CaseFlagFieldState.FLAG_MANAGE_CASE_FLAGS;
+            this.journeyEndPageNumber = CaseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION;
+        }
+        else {
+            this.journeyStartPageNumber = CaseFlagFieldState.FLAG_LOCATION;
+            this.journeyEndPageNumber = CaseFlagFieldState.FLAG_STATUS;
+        }
+        // Now that we've set the start page number, let's set the current page number. 
+        this.journeyPageNumber = this.journeyStartPageNumber;
+        // If we've navigated to this page, then we know by default, we want to set the 
+        // journey page number to the field state. 
+        if (navigatedTo) {
+            this.journeyPageNumber = this.fieldState;
+            this.journeyPreviousPageNumber = this.journeyEndPageNumber++;
+        }
+        // Provided we have some stored state, i.e. when going backwards, we want 
+        // to get the last visited page, etc. 
+        const state = this.multipageComponentStateService.getJourneyState(this);
+        if (state) {
+            const { journeyPageNumber, journeyStartPageNumber, journeyEndPageNumber } = state;
+            this.journeyPageNumber = journeyPageNumber;
+            this.journeyStartPageNumber = journeyStartPageNumber;
+            this.journeyEndPageNumber = journeyEndPageNumber;
+        }
+        this.multipageComponentStateService.isAtStart = this.journeyPageNumber === this.journeyStartPageNumber;
+    }
+    onPageChange() {
+        this.multipageComponentStateService.isAtStart = this.journeyPageNumber === this.journeyStartPageNumber;
     }
     setDisplayContextParameterUpdate(displayContextParameter) {
         return displayContextParameter === CaseFlagDisplayContextParameter.UPDATE ||
@@ -12644,6 +12986,7 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
     }
     proceedToNextState() {
         if (!this.isAtFinalState()) {
+            this.journeyPreviousPageNumber = this.fieldState;
             // Skip the "language interpreter" state if current state is CaseFlagFieldState.FLAG_TYPE and the flag type doesn't
             // have a "list of values" - currently, this is present only for those flag types that require language interpreter
             // selection
@@ -12653,6 +12996,7 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
             else {
                 this.fieldState++;
             }
+            this.nextPage();
         }
     }
     setFlagsCaseFieldValue() {
@@ -12671,6 +13015,16 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
                 break;
         }
     }
+    previousPage() {
+        this.journeyPreviousPageNumber = this.fieldState;
+        if (this.hasPrevious() && this.fieldState === CaseFlagFieldState.FLAG_COMMENTS && !this.flagType?.listOfValues) {
+            this.fieldState = CaseFlagFieldState.FLAG_TYPE;
+        }
+        else if (this.hasPrevious()) {
+            this.fieldState--;
+        }
+        super.previousPage();
+    }
     addFlagToCollection() {
         // Ensure no more than one new flag is being added at a time, by iterating through each Flags case field and removing
         // any previous entry from the details array where that entry has no id (hence it is new - and there should be only
@@ -12969,6 +13323,7 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
         }
     }
     ngOnDestroy() {
+        this.multipageComponentStateService.setJourneyState(this);
         // Reset the fieldstateToNavigate as the write journey completes at this point
         this.caseFlagStateService.fieldStateToNavigate = undefined;
         this.caseTitleSubscription?.unsubscribe();
@@ -12980,9 +13335,9 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
     setDisplayContextParameter(caseFields) {
         return caseFields.find(caseField => FieldsUtils.isCaseFieldOfType(caseField, ['FlagLauncher']))?.display_context_parameter;
     }
-    static ɵfac = function WriteCaseFlagFieldComponent_Factory(t) { return new (t || WriteCaseFlagFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(CaseFlagStateService), i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteCaseFlagFieldComponent, selectors: [["ccd-write-case-flag-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [["class", "govuk-error-summary", "aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 4, "ngIf"], ["class", "form-group", 3, "formGroup", 4, "ngIf"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], ["class", "govuk-error-summary__body", 4, "ngFor", "ngForOf"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [1, "validation-error", 3, "click"], [1, "form-group", 3, "formGroup"], [1, "govuk-form-group", 3, "ngSwitch"], [4, "ngSwitchCase"], [3, "caseFlagStateEmitter", "formGroup", "flagsData", "isDisplayContextParameterExternal"], [3, "caseFlagStateEmitter", "flagCommentsOptionalEmitter", "formGroup", "jurisdiction", "caseTypeId", "hmctsServiceId", "isDisplayContextParameterExternal", "isDisplayContextParameter2Point1Enabled", "selectedFlagsLocation"], [3, "caseFlagStateEmitter", "formGroup", "flagType"], [3, "caseFlagStateEmitter", "formGroup", "optional", "isDisplayContextParameterExternal", "isDisplayContextParameter2Point1Enabled"], [3, "caseFlagStateEmitter", "formGroup", "defaultStatus"], [3, "caseFlagStateEmitter", "formGroup", "flagsData", "caseTitle", "displayContextParameter"], [3, "caseFlagStateEmitter", "formGroup", "displayContextParameter"], [3, "caseFlagStateEmitter", "formGroup"]], template: function WriteCaseFlagFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, WriteCaseFlagFieldComponent_div_0_Template, 5, 4, "div", 0)(1, WriteCaseFlagFieldComponent_div_1_Template, 7, 7, "div", 1)(2, WriteCaseFlagFieldComponent_div_2_Template, 5, 5, "div", 1);
+    static ɵfac = function WriteCaseFlagFieldComponent_Factory(t) { return new (t || WriteCaseFlagFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(CaseFlagStateService), i0.ɵɵdirectiveInject(i1.RpxTranslationService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteCaseFlagFieldComponent, selectors: [["ccd-write-case-flag-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 3, consts: [["journeyChild", ""], ["class", "govuk-error-summary", "aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 4, "ngIf"], ["class", "form-group", 3, "formGroup", 4, "ngIf"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], ["class", "govuk-error-summary__body", 4, "ngFor", "ngForOf"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [1, "validation-error", 3, "click"], [1, "form-group", 3, "formGroup"], [1, "govuk-form-group", 3, "ngSwitch"], [4, "ngSwitchCase"], [3, "caseFlagStateEmitter", "formGroup", "flagsData", "isDisplayContextParameterExternal"], [3, "caseFlagStateEmitter", "flagCommentsOptionalEmitter", "formGroup", "jurisdiction", "caseTypeId", "hmctsServiceId", "isDisplayContextParameterExternal", "isDisplayContextParameter2Point1Enabled", "selectedFlagsLocation"], [3, "caseFlagStateEmitter", "formGroup", "flagType"], [3, "caseFlagStateEmitter", "formGroup", "optional", "isDisplayContextParameterExternal", "isDisplayContextParameter2Point1Enabled"], [3, "caseFlagStateEmitter", "formGroup", "defaultStatus"], [3, "caseFlagStateEmitter", "formGroup", "flagsData", "caseTitle", "displayContextParameter"], [3, "caseFlagStateEmitter", "formGroup", "displayContextParameter"], [3, "caseFlagStateEmitter", "formGroup"]], template: function WriteCaseFlagFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, WriteCaseFlagFieldComponent_div_0_Template, 5, 4, "div", 1)(1, WriteCaseFlagFieldComponent_div_1_Template, 7, 7, "div", 2)(2, WriteCaseFlagFieldComponent_div_2_Template, 5, 5, "div", 2);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.errorMessages.length > 0);
             i0.ɵɵadvance();
@@ -12993,9 +13348,9 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCaseFlagFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-case-flag-field', template: "<!-- Error message summary -->\n<div *ngIf=\"errorMessages.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    {{'There is a problem' | rpxTranslate}}\n  </h2>\n  <div *ngFor=\"let errorMessage of errorMessages\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(errorMessage.fieldId)\" class=\"validation-error\">{{errorMessage.description | rpxTranslate}}</a>\n      </li>\n    </ul>\n  </div>\n</div>\n<div *ngIf=\"!isDisplayContextParameterUpdate\" class=\"form-group\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngSwitch]=\"fieldState\">\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_LOCATION\">\n      <ccd-select-flag-location\n        [formGroup]=\"caseFlagParentFormGroup\" [flagsData]=\"flagsData\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"\n        [isDisplayContextParameterExternal]=\"isDisplayContextParameterExternal\"\n      ></ccd-select-flag-location>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_TYPE\">\n      <ccd-select-flag-type [formGroup]=\"caseFlagParentFormGroup\" [jurisdiction]=\"jurisdiction\" [caseTypeId]=\"caseTypeId\"\n        [hmctsServiceId]=\"hmctsServiceId\" [isDisplayContextParameterExternal]=\"isDisplayContextParameterExternal\"\n        [isDisplayContextParameter2Point1Enabled]=\"isDisplayContextParameter2Point1Enabled\"\n        [selectedFlagsLocation]=\"selectedFlagsLocation\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"\n        (flagCommentsOptionalEmitter)=\"onFlagCommentsOptionalEmitted($event)\"></ccd-select-flag-type>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_LANGUAGE_INTERPRETER\">\n      <ccd-search-language-interpreter [formGroup]=\"caseFlagParentFormGroup\"\n        [flagType]=\"flagType\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-search-language-interpreter>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_COMMENTS\">\n      <ccd-add-comments [formGroup]=\"caseFlagParentFormGroup\" [optional]=\"flagCommentsOptional\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"\n        [isDisplayContextParameterExternal]=\"isDisplayContextParameterExternal\"\n        [isDisplayContextParameter2Point1Enabled]=\"isDisplayContextParameter2Point1Enabled\">\n      </ccd-add-comments>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_STATUS\">\n      <ccd-confirm-flag-status [formGroup]=\"caseFlagParentFormGroup\" [defaultStatus]=\"flagType.defaultStatus\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"></ccd-confirm-flag-status>\n    </ng-container>\n  </div>\n</div>\n<div *ngIf=\"isDisplayContextParameterUpdate\" class=\"form-group\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngSwitch]=\"fieldState\">\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS\">\n      <ccd-manage-case-flags [formGroup]=\"caseFlagParentFormGroup\" [flagsData]=\"flagsData\" [caseTitle]=\"caseTitle\"\n        [displayContextParameter]=\"displayContextParameter\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"></ccd-manage-case-flags>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_UPDATE\">\n      <ccd-update-flag [formGroup]=\"caseFlagParentFormGroup\"\n        [displayContextParameter]=\"displayContextParameter\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"></ccd-update-flag>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION\">\n      <ccd-update-flag-add-translation-form\n        [formGroup]=\"caseFlagParentFormGroup\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"\n      ></ccd-update-flag-add-translation-form>\n    </ng-container>\n  </div>\n</div>\n", styles: [".validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
-    }], () => [{ type: i1$1.ActivatedRoute }, { type: CaseEditDataService }, { type: CaseFlagStateService }, { type: i1.RpxTranslationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCaseFlagFieldComponent, { className: "WriteCaseFlagFieldComponent", filePath: "lib/shared/components/palette/case-flag/write-case-flag-field.component.ts", lineNumber: 20 }); })();
+        args: [{ selector: 'ccd-write-case-flag-field', template: "<!-- Error message summary -->\n<div *ngIf=\"errorMessages.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\"\n  tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    {{'There is a problem' | rpxTranslate}}\n  </h2>\n  <div *ngFor=\"let errorMessage of errorMessages\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(errorMessage.fieldId)\" class=\"validation-error\">{{errorMessage.description |\n          rpxTranslate}}</a>\n      </li>\n    </ul>\n  </div>\n</div>\n<div *ngIf=\"!isDisplayContextParameterUpdate\" class=\"form-group\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngSwitch]=\"fieldState\">\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_LOCATION\">\n      <ccd-select-flag-location \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\" \n        [flagsData]=\"flagsData\"\n        [isDisplayContextParameterExternal]=\"isDisplayContextParameterExternal\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-select-flag-location>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_TYPE\">\n      <ccd-select-flag-type \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\" \n        [jurisdiction]=\"jurisdiction\"\n        [caseTypeId]=\"caseTypeId\" \n        [hmctsServiceId]=\"hmctsServiceId\"\n        [isDisplayContextParameterExternal]=\"isDisplayContextParameterExternal\"\n        [isDisplayContextParameter2Point1Enabled]=\"isDisplayContextParameter2Point1Enabled\"\n        [selectedFlagsLocation]=\"selectedFlagsLocation\" \n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\"\n        (flagCommentsOptionalEmitter)=\"onFlagCommentsOptionalEmitted($event)\">\n      </ccd-select-flag-type>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_LANGUAGE_INTERPRETER\">\n      <ccd-search-language-interpreter \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\" \n        [flagType]=\"flagType\" \n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-search-language-interpreter>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_COMMENTS\">\n      <ccd-add-comments \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\" \n        [optional]=\"flagCommentsOptional\"\n        [isDisplayContextParameterExternal]=\"isDisplayContextParameterExternal\"\n        [isDisplayContextParameter2Point1Enabled]=\"isDisplayContextParameter2Point1Enabled\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-add-comments>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_STATUS\">\n      <ccd-confirm-flag-status \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\"\n        [defaultStatus]=\"flagType.defaultStatus\" \n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-confirm-flag-status>\n    </ng-container>\n  </div>\n</div>\n<div *ngIf=\"isDisplayContextParameterUpdate\" class=\"form-group\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngSwitch]=\"fieldState\">\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS\">\n      <ccd-manage-case-flags \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\" \n        [flagsData]=\"flagsData\"\n        [caseTitle]=\"caseTitle\" \n        [displayContextParameter]=\"displayContextParameter\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-manage-case-flags>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_UPDATE\">\n      <ccd-update-flag \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\"\n        [displayContextParameter]=\"displayContextParameter\" \n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-update-flag>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION\">\n      <ccd-update-flag-add-translation-form \n        #journeyChild \n        [formGroup]=\"caseFlagParentFormGroup\"\n        (caseFlagStateEmitter)=\"onCaseFlagStateEmitted($event)\">\n      </ccd-update-flag-add-translation-form>\n    </ng-container>\n  </div>\n</div>", styles: [".validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
+    }], () => [{ type: i1$1.ActivatedRoute }, { type: CaseEditDataService }, { type: CaseFlagStateService }, { type: i1.RpxTranslationService }, { type: MultipageComponentStateService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCaseFlagFieldComponent, { className: "WriteCaseFlagFieldComponent", filePath: "lib/shared/components/palette/case-flag/write-case-flag-field.component.ts", lineNumber: 21 }); })();
 
 class CaseReferencePipe {
     transform(caseReference) {
@@ -13768,7 +14123,7 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
                     field.list_items = this.caseField.value[field.id]?.list_items;
                     field.value = {
                         list_items: field.list_items,
-                        value: this.caseField.value[field.id]?.value && this.caseField.value[field.id].value?.code ?
+                        value: this.caseField.value[field.id]?.value && this.caseField.value[field.id].value.code ?
                             this.caseField.value[field.id].value.code :
                             this.caseField.value[field.id]?.value
                     };
@@ -14970,8 +15325,8 @@ class WriteDynamicRadioListFieldComponent extends AbstractFieldWriteComponent {
         if (!this.caseField.list_items && this.caseField.formatted_value && this.caseField.formatted_value.list_items) {
             this.caseField.list_items = this.caseField.formatted_value.list_items;
         }
-        if (!this.caseField.value && this.caseField.formatted_value?.value) {
-            this.caseField.value = this.caseField.formatted_value.value?.code;
+        if (!this.caseField.value && this.caseField.formatted_value && this.caseField.formatted_value.value) {
+            this.caseField.value = this.caseField.formatted_value.value.code;
         }
         const isNull = this.caseField.value === undefined || this.caseField.value === '';
         if (isNull || typeof this.caseField.value === 'object') {
@@ -15893,7 +16248,7 @@ function BeforeYouStartComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.serverLinkedApiError);
 } }
 function BeforeYouStartComponent_div_2_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11)(1, "p", 3);
+    i0.ɵɵelementStart(0, "div", 9)(1, "p", 3);
     i0.ɵɵtext(2, "If a group of linked cases has a lead case, you must start from the lead case.");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p", 3);
@@ -15901,20 +16256,16 @@ function BeforeYouStartComponent_div_2_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
 } }
 function BeforeYouStartComponent_div_2_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "p", 3);
+    i0.ɵɵelementStart(0, "div", 10)(1, "p", 3);
     i0.ɵɵtext(2, "If there are linked hearings for the case you need to un-link then you must unlink the hearing first.");
     i0.ɵɵelementEnd()();
 } }
 function BeforeYouStartComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div")(1, "h1", 1);
     i0.ɵɵtext(2, "Before you start");
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(3, BeforeYouStartComponent_div_2_div_3_Template, 5, 0, "div", 7)(4, BeforeYouStartComponent_div_2_div_4_Template, 3, 0, "div", 8);
-    i0.ɵɵelementStart(5, "div", 9)(6, "button", 10);
-    i0.ɵɵlistener("click", function BeforeYouStartComponent_div_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNext()); });
-    i0.ɵɵtext(7, "Next");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
@@ -15922,14 +16273,15 @@ function BeforeYouStartComponent_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.isLinkCasesJourney);
 } }
-class BeforeYouStartComponent {
+class BeforeYouStartComponent extends AbstractJourneyComponent {
     router;
     linkedCasesService;
     linkedCasesStateEmitter = new EventEmitter();
     isLinkCasesJourney = false;
     errorMessages;
     serverLinkedApiError;
-    constructor(router, linkedCasesService) {
+    constructor(router, linkedCasesService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.router = router;
         this.linkedCasesService = linkedCasesService;
         this.isLinkCasesJourney = this.linkedCasesService.isLinkedCasesEventTrigger;
@@ -15946,13 +16298,22 @@ class BeforeYouStartComponent {
             navigateToNextPage: true
         });
     }
+    next() {
+        this.onNext();
+        const isAnArray = Array.isArray(this.errorMessages);
+        const isNotAnArray = !isAnArray;
+        const isValid = (isAnArray && this.errorMessages.length === 0) || isNotAnArray;
+        if (isValid) {
+            super.next();
+        }
+    }
     onBack() {
         this.router.navigate(['cases', 'case-details', this.linkedCasesService.caseId], { fragment: 'Linked cases' });
     }
-    static ɵfac = function BeforeYouStartComponent_Factory(t) { return new (t || BeforeYouStartComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(LinkedCasesService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BeforeYouStartComponent, selectors: [["ccd-linked-cases-before-you-start"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter" }, decls: 3, vars: 2, consts: [[4, "ngIf"], [1, "govuk-heading-xl"], ["id", "unlink-cases-error", "class", "govuk-error-message", 4, "ngIf"], [1, "govuk-body"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], ["id", "unlink-cases-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "link-cases-journey", 4, "ngIf"], ["id", "manage-link-cases-journey", 4, "ngIf"], [1, "govuk-button-group"], ["type", "button", "id", "next-button", 1, "button", "button-primary", 3, "click"], ["id", "link-cases-journey"], ["id", "manage-link-cases-journey"]], template: function BeforeYouStartComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function BeforeYouStartComponent_Factory(t) { return new (t || BeforeYouStartComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BeforeYouStartComponent, selectors: [["ccd-linked-cases-before-you-start"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [[4, "ngIf"], [1, "govuk-heading-xl"], ["id", "unlink-cases-error", "class", "govuk-error-message", 4, "ngIf"], [1, "govuk-body"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], ["id", "unlink-cases-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "link-cases-journey", 4, "ngIf"], ["id", "manage-link-cases-journey", 4, "ngIf"], ["id", "link-cases-journey"], ["id", "manage-link-cases-journey"]], template: function BeforeYouStartComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div");
-            i0.ɵɵtemplate(1, BeforeYouStartComponent_div_1_Template, 7, 1, "div", 0)(2, BeforeYouStartComponent_div_2_Template, 8, 2, "div", 0);
+            i0.ɵɵtemplate(1, BeforeYouStartComponent_div_1_Template, 7, 1, "div", 0)(2, BeforeYouStartComponent_div_2_Template, 5, 2, "div", 0);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -15963,11 +16324,11 @@ class BeforeYouStartComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BeforeYouStartComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-linked-cases-before-you-start', template: "<div>\n  <div *ngIf=\"serverLinkedApiError\">\n    <h1 class=\"govuk-heading-xl\">There is a problem</h1>\n    <p id=\"unlink-cases-error\" class=\"govuk-error-message\" *ngIf=\"serverLinkedApiError\">\n      <span class=\"govuk-visually-hidden\">Error:</span> {{serverLinkedApiError.message}}\n    </p>\n    <p class=\"govuk-body\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"onBack()\">Go back to the Linked cases tab</a>\n    </p>\n  </div>\n  <div *ngIf=\"!serverLinkedApiError\">\n    <h1 class=\"govuk-heading-xl\">Before you start</h1>\n    <div id=\"link-cases-journey\" *ngIf=\"isLinkCasesJourney\">\n      <p class=\"govuk-body\">If a group of linked cases has a lead case, you must start from the lead case.</p>\n      <p class=\"govuk-body\">If the cases to be linked has no lead, you can start the linking journey from any of those\n        cases.</p>\n    </div>\n    <div id=\"manage-link-cases-journey\" *ngIf=\"!isLinkCasesJourney\">\n      <p class=\"govuk-body\">If there are linked hearings for the case you need to un-link then you must unlink the\n        hearing first.</p>\n    </div>\n    <div class=\"govuk-button-group\">\n      <button class=\"button button-primary\" type=\"button\" id=\"next-button\" (click)=\"onNext()\">Next</button>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: i1$1.Router }, { type: LinkedCasesService }], { linkedCasesStateEmitter: [{
+        args: [{ selector: 'ccd-linked-cases-before-you-start', template: "<div>\n  <div *ngIf=\"serverLinkedApiError\">\n    <h1 class=\"govuk-heading-xl\">There is a problem</h1>\n    <p id=\"unlink-cases-error\" class=\"govuk-error-message\" *ngIf=\"serverLinkedApiError\">\n      <span class=\"govuk-visually-hidden\">Error:</span> {{serverLinkedApiError.message}}\n    </p>\n    <p class=\"govuk-body\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"onBack()\">Go back to the Linked cases tab</a>\n    </p>\n  </div>\n  <div *ngIf=\"!serverLinkedApiError\">\n    <h1 class=\"govuk-heading-xl\">Before you start</h1>\n    <div id=\"link-cases-journey\" *ngIf=\"isLinkCasesJourney\">\n      <p class=\"govuk-body\">If a group of linked cases has a lead case, you must start from the lead case.</p>\n      <p class=\"govuk-body\">If the cases to be linked has no lead, you can start the linking journey from any of those\n        cases.</p>\n    </div>\n    <div id=\"manage-link-cases-journey\" *ngIf=\"!isLinkCasesJourney\">\n      <p class=\"govuk-body\">If there are linked hearings for the case you need to un-link then you must unlink the\n        hearing first.</p>\n    </div>\n  </div>\n</div>\n" }]
+    }], () => [{ type: i1$1.Router }, { type: LinkedCasesService }, { type: MultipageComponentStateService }], { linkedCasesStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BeforeYouStartComponent, { className: "BeforeYouStartComponent", filePath: "lib/shared/components/palette/linked-cases/components/before-you-start/before-you-start.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BeforeYouStartComponent, { className: "BeforeYouStartComponent", filePath: "lib/shared/components/palette/linked-cases/components/before-you-start/before-you-start.component.ts", lineNumber: 14 }); })();
 
 function CheckYourAnswersComponent_table_4_tr_9_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -16089,14 +16450,15 @@ function CheckYourAnswersComponent_tr_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(2, " None ");
     i0.ɵɵelementEnd()();
 } }
-class CheckYourAnswersComponent {
+class CheckYourAnswersComponent extends AbstractJourneyComponent {
     linkedCasesService;
     linkedCasesStateEmitter = new EventEmitter();
     linkedCases;
     casesToUnlink;
     isLinkCasesJourney;
     linkedCasesTableCaption;
-    constructor(linkedCasesService) {
+    constructor(linkedCasesService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.linkedCasesService = linkedCasesService;
     }
     ngOnInit() {
@@ -16113,8 +16475,16 @@ class CheckYourAnswersComponent {
             navigateToNextPage: true
         });
     }
-    static ɵfac = function CheckYourAnswersComponent_Factory(t) { return new (t || CheckYourAnswersComponent)(i0.ɵɵdirectiveInject(LinkedCasesService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckYourAnswersComponent, selectors: [["ccd-linked-cases-check-your-answers"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter" }, decls: 19, vars: 5, consts: [[1, "govuk-grid-row"], [1, "govuk-grid-column-full"], [1, "govuk-heading-xl"], ["id", "cases-to-unlink-table", "class", "govuk-table", 4, "ngIf"], ["id", "linked-cases-table", 1, "govuk-table"], [1, "govuk-table__caption", "govuk-table__caption--m"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["scope", "col", 1, "govuk-table__header"], ["scope", "col", "class", "govuk-table__header", 4, "ngIf"], [1, "govuk-table__body"], ["class", "govuk-table__row", 4, "ngFor", "ngForOf"], ["class", "govuk-table__row", 4, "ngIf"], ["id", "cases-to-unlink-table", 1, "govuk-table"], [1, "govuk-table__cell"], ["href", "javascript:void(0)", 1, "govuk-link", "govuk-link--no-visited-state", "float-right", 3, "click"], ["colspan", "2", 1, "govuk-table__cell"], [4, "ngFor", "ngForOf"], ["class", "govuk-table__cell", 4, "ngIf"], [4, "ngIf"], ["colspan", "4", 1, "govuk-table__cell"]], template: function CheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.linkedCasesStateEmitter.emit({
+            currentLinkedCasesPage: LinkedCasesPages.CHECK_YOUR_ANSWERS,
+            navigateToPreviousPage: false,
+            navigateToNextPage: true
+        });
+        super.next();
+    }
+    static ɵfac = function CheckYourAnswersComponent_Factory(t) { return new (t || CheckYourAnswersComponent)(i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckYourAnswersComponent, selectors: [["ccd-linked-cases-check-your-answers"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 5, consts: [[1, "govuk-grid-row"], [1, "govuk-grid-column-full"], [1, "govuk-heading-xl"], ["id", "cases-to-unlink-table", "class", "govuk-table", 4, "ngIf"], ["id", "linked-cases-table", 1, "govuk-table"], [1, "govuk-table__caption", "govuk-table__caption--m"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["scope", "col", 1, "govuk-table__header"], ["scope", "col", "class", "govuk-table__header", 4, "ngIf"], [1, "govuk-table__body"], ["class", "govuk-table__row", 4, "ngFor", "ngForOf"], ["class", "govuk-table__row", 4, "ngIf"], ["id", "cases-to-unlink-table", 1, "govuk-table"], [1, "govuk-table__cell"], ["href", "javascript:void(0)", 1, "govuk-link", "govuk-link--no-visited-state", "float-right", 3, "click"], ["colspan", "2", 1, "govuk-table__cell"], [4, "ngFor", "ngForOf"], ["class", "govuk-table__cell", 4, "ngIf"], [4, "ngIf"], ["colspan", "4", 1, "govuk-table__cell"]], template: function CheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h1", 2);
             i0.ɵɵtext(3, "Check your answers");
             i0.ɵɵelementEnd();
@@ -16150,10 +16520,10 @@ class CheckYourAnswersComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckYourAnswersComponent, [{
         type: Component,
         args: [{ selector: 'ccd-linked-cases-check-your-answers', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-full\">\n    <h1 class=\"govuk-heading-xl\">Check your answers</h1>\n    <!-- Top table for manage link cases journey -->\n    <table id=\"cases-to-unlink-table\" class=\"govuk-table\" *ngIf=\"!isLinkCasesJourney\">\n      <caption class=\"govuk-table__caption govuk-table__caption--m\">Cases to unlink</caption>\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"col\" class=\"govuk-table__header\">Case name and number</th>\n          <th scope=\"col\" class=\"govuk-table__header\"></th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let case of casesToUnlink\">\n          <td class=\"govuk-table__cell\">\n            {{case.caseName}}  <br> {{case.caseReference | ccdCaseReference}}\n          </td>\n          <td class=\"govuk-table__cell\">\n            <a href=\"javascript:void(0)\" class=\"govuk-link govuk-link--no-visited-state float-right\" (click)=\"onChange()\">Change</a>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\" *ngIf=\"!casesToUnlink.length\">\n          <td class=\"govuk-table__cell\" colspan=\"2\">\n            None\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <!-- Table for both link case and manage link case journeys -->\n    <table id=\"linked-cases-table\" class=\"govuk-table\">\n      <caption class=\"govuk-table__caption govuk-table__caption--m\">{{linkedCasesTableCaption}}</caption>\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"col\" class=\"govuk-table__header\">Case name and number</th>\n          <th scope=\"col\" class=\"govuk-table__header\">Reasons for case link</th>\n          <th scope=\"col\" class=\"govuk-table__header\"></th>\n          <th scope=\"col\" class=\"govuk-table__header\" *ngIf=\"isLinkCasesJourney\"></th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let case of linkedCases\">\n          <td class=\"govuk-table__cell\">\n            <span>{{case.caseName}}  <br> {{case.caseReference | ccdCaseReference}} </span>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngFor=\"let reason of case.reasons; last as isLast\">\n              <span *ngIf=\"isLinkCasesJourney\">\n                {{reason | ccdLinkCasesReasonValue}}\n              </span>\n              <span *ngIf=\"!isLinkCasesJourney\">\n                {{reason.Reason.value | ccdLinkCasesReasonValue}}\n              </span>\n              <br *ngIf=\"!isLast\">\n            </span>\n          </td>\n          <td class=\"govuk-table__cell\"></td>\n          <td class=\"govuk-table__cell\" *ngIf=\"isLinkCasesJourney\">\n            <a href=\"javascript:void(0)\" class=\"govuk-link govuk-link--no-visited-state float-right\" (click)=\"onChange()\">Change</a>\n          </td>\n        </tr>\n        <tr class=\"govuk-table__row\" *ngIf=\"!linkedCases.length\">\n          <td class=\"govuk-table__cell\" colspan=\"4\">\n            None\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: [".float-right{float:right}\n"] }]
-    }], () => [{ type: LinkedCasesService }], { linkedCasesStateEmitter: [{
+    }], () => [{ type: LinkedCasesService }, { type: MultipageComponentStateService }], { linkedCasesStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckYourAnswersComponent, { className: "CheckYourAnswersComponent", filePath: "lib/shared/components/palette/linked-cases/components/check-your-answers/check-your-answers.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckYourAnswersComponent, { className: "CheckYourAnswersComponent", filePath: "lib/shared/components/palette/linked-cases/components/check-your-answers/check-your-answers.component.ts", lineNumber: 14 }); })();
 
 class ValidatorsUtils {
     numberLengthValidator(inputLength) {
@@ -16183,7 +16553,7 @@ class ValidatorsUtils {
 const _c0$J = 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", 30)(1, "span", 31);
+    i0.ɵɵelementStart(0, "span", 28)(1, "span", 29);
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -16194,7 +16564,7 @@ function LinkCasesComponent_div_8_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", ctx_r1.caseNumberError, " ");
 } }
 function LinkCasesComponent_div_8_span_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30)(1, "span", 31);
+    i0.ɵɵelementStart(0, "span", 28)(1, "span", 29);
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -16206,10 +16576,10 @@ function LinkCasesComponent_div_8_span_11_Template(rf, ctx) { if (rf & 1) {
 } }
 function LinkCasesComponent_div_8_div_13_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "input", 33);
+    i0.ɵɵelementStart(0, "div", 30)(1, "input", 31);
     i0.ɵɵlistener("change", function LinkCasesComponent_div_8_div_13_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleLinkCaseReasonOtherComments($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 34);
+    i0.ɵɵelementStart(2, "label", 32);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -16225,7 +16595,7 @@ function LinkCasesComponent_div_8_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(reason_r4.value_en);
 } }
 function LinkCasesComponent_div_8_div_14_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30)(1, "span", 31);
+    i0.ɵɵelementStart(0, "span", 28)(1, "span", 29);
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -16236,14 +16606,14 @@ function LinkCasesComponent_div_8_div_14_span_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtextInterpolate1(" ", ctx_r1.caseReasonCommentsError, " ");
 } }
 function LinkCasesComponent_div_8_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35)(1, "h3", 22);
+    i0.ɵɵelementStart(0, "div", 33)(1, "h3", 20);
     i0.ɵɵtext(2, "Comments");
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(3, LinkCasesComponent_div_8_div_14_span_3_Template, 4, 1, "span", 6);
-    i0.ɵɵelementStart(4, "textarea", 36);
+    i0.ɵɵelementStart(4, "textarea", 34);
     i0.ɵɵtext(5, "          ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 37);
+    i0.ɵɵelementStart(6, "div", 35);
     i0.ɵɵtext(7, " You can enter up to 100 characters ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -16253,7 +16623,7 @@ function LinkCasesComponent_div_8_div_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.caseReasonCommentsError);
 } }
 function LinkCasesComponent_div_8_span_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30)(1, "span", 31);
+    i0.ɵɵelementStart(0, "span", 28)(1, "span", 29);
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -16265,26 +16635,26 @@ function LinkCasesComponent_div_8_span_17_Template(rf, ctx) { if (rf & 1) {
 } }
 function LinkCasesComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 5)(2, "h3", 22);
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 5)(2, "h3", 20);
     i0.ɵɵtext(3, "Enter case reference");
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(4, LinkCasesComponent_div_8_span_4_Template, 4, 1, "span", 6);
-    i0.ɵɵelement(5, "input", 23);
+    i0.ɵɵelement(5, "input", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 24)(7, "h3", 22);
+    i0.ɵɵelementStart(6, "div", 22)(7, "h3", 20);
     i0.ɵɵtext(8, "Why should these cases be linked?");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 25);
+    i0.ɵɵelementStart(9, "div", 23);
     i0.ɵɵtext(10, " Select all that apply. ");
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(11, LinkCasesComponent_div_8_span_11_Template, 4, 1, "span", 6);
-    i0.ɵɵelementStart(12, "div", 26);
-    i0.ɵɵtemplate(13, LinkCasesComponent_div_8_div_13_Template, 4, 5, "div", 27);
+    i0.ɵɵelementStart(12, "div", 24);
+    i0.ɵɵtemplate(13, LinkCasesComponent_div_8_div_13_Template, 4, 5, "div", 25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(14, LinkCasesComponent_div_8_div_14_Template, 8, 4, "div", 28);
+    i0.ɵɵtemplate(14, LinkCasesComponent_div_8_div_14_Template, 8, 4, "div", 26);
     i0.ɵɵelement(15, "br")(16, "br");
     i0.ɵɵtemplate(17, LinkCasesComponent_div_8_span_17_Template, 4, 1, "span", 6);
-    i0.ɵɵelementStart(18, "button", 29);
+    i0.ɵɵelementStart(18, "button", 27);
     i0.ɵɵlistener("click", function LinkCasesComponent_div_8_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.submitCaseInfo()); });
     i0.ɵɵtext(19, "Propose case link");
     i0.ɵɵelementEnd()();
@@ -16307,7 +16677,7 @@ function LinkCasesComponent_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r1.caseSelectionError);
 } }
 function LinkCasesComponent_span_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30)(1, "span", 31);
+    i0.ɵɵelementStart(0, "span", 28)(1, "span", 29);
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -16330,27 +16700,27 @@ function LinkCasesComponent_tr_31_span_15_Template(rf, ctx) { if (rf & 1) {
 } }
 function LinkCasesComponent_tr_31_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 10)(1, "td", 38);
-    i0.ɵɵelement(2, "div", 39);
+    i0.ɵɵelementStart(0, "tr", 10)(1, "td", 36);
+    i0.ɵɵelement(2, "div", 37);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelement(5, "br");
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "ccdCaseReference");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "td", 40);
+    i0.ɵɵelementStart(8, "td", 38);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "td", 38);
+    i0.ɵɵelementStart(10, "td", 36);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "td", 40);
+    i0.ɵɵelementStart(12, "td", 38);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "td", 38);
-    i0.ɵɵtemplate(15, LinkCasesComponent_tr_31_span_15_Template, 4, 3, "span", 41);
+    i0.ɵɵelementStart(14, "td", 36);
+    i0.ɵɵtemplate(15, LinkCasesComponent_tr_31_span_15_Template, 4, 3, "span", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "td", 38)(17, "a", 42);
+    i0.ɵɵelementStart(16, "td", 36)(17, "a", 40);
     i0.ɵɵlistener("click", function LinkCasesComponent_tr_31_Template_a_click_17_listener() { const ctx_r7 = i0.ɵɵrestoreView(_r6); const case_r9 = ctx_r7.$implicit; const pos_r10 = ctx_r7.index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectedLinkedCaseRemove(pos_r10, case_r9.caseReference)); });
     i0.ɵɵtext(18, "Remove");
     i0.ɵɵelementEnd()()();
@@ -16379,11 +16749,11 @@ function LinkCasesComponent_tr_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵattribute("id", case_r9.caseReference);
 } }
 function LinkCasesComponent_tr_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 10)(1, "td", 43);
+    i0.ɵɵelementStart(0, "tr", 10)(1, "td", 41);
     i0.ɵɵtext(2, " None ");
     i0.ɵɵelementEnd()();
 } }
-class LinkCasesComponent {
+class LinkCasesComponent extends AbstractJourneyComponent {
     casesService;
     fb;
     validatorsUtils;
@@ -16402,7 +16772,8 @@ class LinkCasesComponent {
     linkCaseReasons;
     showComments = false;
     ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSS';
-    constructor(casesService, fb, validatorsUtils, linkedCasesService) {
+    constructor(casesService, fb, validatorsUtils, linkedCasesService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.casesService = casesService;
         this.fb = fb;
         this.validatorsUtils = validatorsUtils;
@@ -16647,8 +17018,14 @@ class LinkCasesComponent {
         }
         this.emitLinkedCasesState(navigateToNextPage);
     }
-    static ɵfac = function LinkCasesComponent_Factory(t) { return new (t || LinkCasesComponent)(i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(ValidatorsUtils), i0.ɵɵdirectiveInject(LinkedCasesService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LinkCasesComponent, selectors: [["ccd-link-cases"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter" }, decls: 36, vars: 11, consts: [[1, "govuk-grid-row"], [1, "govuk-grid-column-full"], [1, "govuk-caption-l"], [1, "govuk-heading-xl"], ["class", "form-group", 3, "formGroup", 4, "ngIf"], ["id", "caseNumber", 1, "govuk-form-group", 3, "ngClass"], ["class", "govuk-error-message", 4, "ngIf"], [1, "govuk-table"], [1, "govuk-table__caption", "govuk-table__caption--m"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["scope", "col", "width", "300", 1, "govuk-table__header"], ["scope", "col", "width", "150", 1, "govuk-table__header"], ["scope", "col", "width", "200", 1, "govuk-table__header"], ["scope", "col", "width", "400", 1, "govuk-table__header"], ["scope", "col", "width", "50", 1, "govuk-table__header"], [1, "govuk-table__body"], ["class", "govuk-table__row", 4, "ngFor", "ngForOf"], ["class", "govuk-table__row", 4, "ngIf"], [1, "govuk-button-group"], ["type", "button", "id", "next-button", 1, "button", "button-primary", 3, "click"], [1, "form-group", 3, "formGroup"], [1, "govuk-heading-s"], ["formControlName", "caseNumber", "id", "width-20", "name", "width-20", "type", "text", 1, "govuk-input", "govuk-input--width-20"], [1, "govuk-!-margin-top-3", 3, "ngClass"], ["id", "waste-hint", 1, "govuk-hint"], ["data-module", "govuk-checkboxes", "formArrayName", "reasonType", "id", "caseReason", 1, "govuk-checkboxes"], ["class", "govuk-checkboxes__item", 3, "formGroupName", 4, "ngFor", "ngForOf"], ["id", "other-description-char-limit-error", "class", "govuk-!-margin-top-3", 3, "ngClass", 4, "ngIf"], ["id", "propose", "type", "button", "data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "click"], [1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-checkboxes__item", 3, "formGroupName"], ["formControlName", "selected", "name", "pos", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "value"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["id", "other-description-char-limit-error", 1, "govuk-!-margin-top-3", 3, "ngClass"], ["id", "otherDescription", "name", "otherDescription", "formControlName", "otherDescription", "rows", "5", "aria-describedby", "other-description-hint other-description-char-limit-info other-description-char-limit-error", 1, "govuk-textarea", "govuk-input--width-30"], ["id", "other-description-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-table__cell"], [1, "govuk-form-group--error", 3, "ngClass"], [1, "govuk-table__cell", 3, "title"], [4, "ngFor", "ngForOf"], [1, "govuk-link", "no-visited-state", 3, "click"], ["colspan", "6", 1, "govuk-table__cell"]], template: function LinkCasesComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = function LinkCasesComponent_Factory(t) { return new (t || LinkCasesComponent)(i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(ValidatorsUtils), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LinkCasesComponent, selectors: [["ccd-link-cases"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 33, vars: 11, consts: [[1, "govuk-grid-row"], [1, "govuk-grid-column-full"], [1, "govuk-caption-l"], [1, "govuk-heading-xl"], ["class", "form-group", 3, "formGroup", 4, "ngIf"], ["id", "caseNumber", 1, "govuk-form-group", 3, "ngClass"], ["class", "govuk-error-message", 4, "ngIf"], [1, "govuk-table"], [1, "govuk-table__caption", "govuk-table__caption--m"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["scope", "col", "width", "300", 1, "govuk-table__header"], ["scope", "col", "width", "150", 1, "govuk-table__header"], ["scope", "col", "width", "200", 1, "govuk-table__header"], ["scope", "col", "width", "400", 1, "govuk-table__header"], ["scope", "col", "width", "50", 1, "govuk-table__header"], [1, "govuk-table__body"], ["class", "govuk-table__row", 4, "ngFor", "ngForOf"], ["class", "govuk-table__row", 4, "ngIf"], [1, "form-group", 3, "formGroup"], [1, "govuk-heading-s"], ["formControlName", "caseNumber", "id", "width-20", "name", "width-20", "type", "text", 1, "govuk-input", "govuk-input--width-20"], [1, "govuk-!-margin-top-3", 3, "ngClass"], ["id", "waste-hint", 1, "govuk-hint"], ["data-module", "govuk-checkboxes", "formArrayName", "reasonType", "id", "caseReason", 1, "govuk-checkboxes"], ["class", "govuk-checkboxes__item", 3, "formGroupName", 4, "ngFor", "ngForOf"], ["id", "other-description-char-limit-error", "class", "govuk-!-margin-top-3", 3, "ngClass", 4, "ngIf"], ["id", "propose", "type", "button", "data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "click"], [1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-checkboxes__item", 3, "formGroupName"], ["formControlName", "selected", "name", "pos", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "value"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["id", "other-description-char-limit-error", 1, "govuk-!-margin-top-3", 3, "ngClass"], ["id", "otherDescription", "name", "otherDescription", "formControlName", "otherDescription", "rows", "5", "aria-describedby", "other-description-hint other-description-char-limit-info other-description-char-limit-error", 1, "govuk-textarea", "govuk-input--width-30"], ["id", "other-description-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-table__cell"], [1, "govuk-form-group--error", 3, "ngClass"], [1, "govuk-table__cell", 3, "title"], [4, "ngFor", "ngForOf"], [1, "govuk-link", "no-visited-state", 3, "click"], ["colspan", "6", 1, "govuk-table__cell"]], template: function LinkCasesComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div")(3, "span", 2);
             i0.ɵɵtext(4);
             i0.ɵɵpipe(5, "ccdCaseReference");
@@ -16682,11 +17059,7 @@ class LinkCasesComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(30, "tbody", 16);
             i0.ɵɵtemplate(31, LinkCasesComponent_tr_31_Template, 19, 14, "tr", 17)(32, LinkCasesComponent_tr_32_Template, 3, 0, "tr", 18);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(33, "div", 19)(34, "button", 20);
-            i0.ɵɵlistener("click", function LinkCasesComponent_Template_button_click_34_listener() { return ctx.onNext(); });
-            i0.ɵɵtext(35, "Next");
-            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementEnd()()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate2("Link cases to ", ctx.caseName, " ", i0.ɵɵpipeBind1(5, 7, ctx.caseId), "");
@@ -16704,11 +17077,11 @@ class LinkCasesComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LinkCasesComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-link-cases', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-full\">\n    <div>\n      <span class=\"govuk-caption-l\">Link cases to {{caseName}} {{caseId | ccdCaseReference}}</span>\n      <h1 class=\"govuk-heading-xl\">Select a&nbsp;case you want to link to this case</h1>\n      <div class=\"form-group\" [formGroup]=\"linkCaseForm\" *ngIf=\"linkCaseForm\">\n        <div class=\"govuk-form-group\" id=\"caseNumber\" [ngClass]=\"{'govuk-form-group--error': !!caseNumberError}\">\n          <h3 class=\"govuk-heading-s\">Enter case reference</h3>\n          <span class=\"govuk-error-message\" *ngIf=\"caseNumberError\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{caseNumberError}}\n          </span>\n          <input class=\"govuk-input govuk-input--width-20\" formControlName=\"caseNumber\" id=\"width-20\" name=\"width-20\"\n            type=\"text\">\n        </div>\n        <div [ngClass]=\"{'govuk-form-group--error': !!caseReasonError}\" class=\"govuk-!-margin-top-3\">\n          <h3 class=\"govuk-heading-s\">Why should these cases be linked?</h3>\n          <div id=\"waste-hint\" class=\"govuk-hint\">\n            Select all that apply.\n          </div>\n          <span class=\"govuk-error-message\" *ngIf=\"caseReasonError\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{caseReasonError}}\n          </span>\n          <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\" formArrayName=\"reasonType\" id=\"caseReason\">\n            <div class=\"govuk-checkboxes__item\" *ngFor=\"let reason of linkCaseReasons;index as pos\" [formGroupName]=\"pos\">\n              <input class=\"govuk-checkboxes__input\" id=\"{{reason.key}}\" formControlName=\"selected\" name=\"pos\"\n                type=\"checkbox\" [value]=\"reason.value_en\" (change)=\"toggleLinkCaseReasonOtherComments($event)\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{reason.key}}\">{{reason.value_en}}</label>\n            </div>\n          </div>\n        </div>\n        <div id=\"other-description-char-limit-error\" [ngClass]=\"{'govuk-form-group--error': !!caseReasonCommentsError}\" class=\"govuk-!-margin-top-3\" *ngIf=\"showComments\">\n          <h3 class=\"govuk-heading-s\">Comments</h3>\n          <span class=\"govuk-error-message\" *ngIf=\"caseReasonCommentsError\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{caseReasonCommentsError}}\n          </span>\n          <textarea class=\"govuk-textarea govuk-input--width-30\" id=\"otherDescription\"\n            name=\"otherDescription\" formControlName=\"otherDescription\" rows=\"5\"\n            aria-describedby=\"other-description-hint other-description-char-limit-info other-description-char-limit-error\">\n          </textarea>\n          <div id=\"other-description-char-limit-info\" aria-live=\"polite\" class=\"govuk-hint govuk-character-count__message\">\n            You can enter up to 100 characters\n          </div>\n        </div>\n        <br><br>\n        <span class=\"govuk-error-message\" *ngIf=\"caseSelectionError\">\n          <span class=\"govuk-visually-hidden\">Error:</span> {{caseSelectionError}}\n        </span>\n        <button id=\"propose\" type=\"button\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\"\n          (click)=\"submitCaseInfo()\">Propose case link</button>\n      </div>\n      <hr>\n      <br><br>\n      <div class=\"govuk-form-group\" id=\"caseNumber\" [ngClass]=\"{'govuk-form-group--error': !!noSelectedCaseError}\">\n        <span class=\"govuk-error-message\" *ngIf=\"noSelectedCaseError\">\n          <span class=\"govuk-visually-hidden\">Error:</span> {{noSelectedCaseError}}\n        </span>\n        <table class=\"govuk-table\">\n          <caption class=\"govuk-table__caption govuk-table__caption--m\">Proposed case links </caption>\n          <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"300\">Case name and number</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"150\">Case type </th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"200\">Service</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"200\">State</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"400\">Reasons for case link</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"50\"></th>\n            </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let case of selectedCases; let pos = index\">\n              <td class=\"govuk-table__cell\">\n                <div class=\"govuk-form-group--error\"\n                  [ngClass]=\"{'table-group-error':caseSelectionError && case.caseReference === linkCaseForm.value.caseNumber}\">\n                </div>\n                <span>{{case.caseName}} <br> {{case.caseReference | ccdCaseReference}}</span>\n              </td>\n              <td class=\"govuk-table__cell\" [title]=\"case.caseTypeDescription\">{{case.caseType}}</td>\n              <td class=\"govuk-table__cell\">{{case.caseService}}</td>\n              <td class=\"govuk-table__cell\" [title]=\"case.caseStateDescription\">{{case.caseState}}</td>\n              <td class=\"govuk-table__cell\"><span\n                  *ngFor=\"let reason of case.reasons\">{{reason | ccdLinkCasesReasonValue}}<br></span></td>\n              <td class=\"govuk-table__cell\"><a [attr.id]=\"case.caseReference\" (click)=\"onSelectedLinkedCaseRemove(pos, case.caseReference);\"\n                  class=\"govuk-link no-visited-state\">Remove</a></td>\n            </tr>\n            <tr class=\"govuk-table__row\" *ngIf=\"!selectedCases.length\">\n              <td class=\"govuk-table__cell\" colspan=\"6\">\n                None\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <div class=\"govuk-button-group\">\n        <button class=\"button button-primary\" type=\"button\" id=\"next-button\" (click)=\"onNext()\">Next</button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".no-visited-state{color:#1d70b8;cursor:pointer}.no-visited-state:hover{color:#003078}.govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap;max-height:500px;width:100%;overflow-x:auto;overflow-y:hidden;padding-top:5px}.govuk-checkboxes .govuk-checkboxes__item{display:flex}::ng-deep .govuk-width-container .screen-990 .width-50{width:100%}.govuk-table__row{position:relative}.govuk-table__row .table-group-error{position:absolute;height:calc(100% - 20px);margin-left:-15px}\n"] }]
-    }], () => [{ type: CasesService }, { type: i4.FormBuilder }, { type: ValidatorsUtils }, { type: LinkedCasesService }], { linkedCasesStateEmitter: [{
+        args: [{ selector: 'ccd-link-cases', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-full\">\n    <div>\n      <span class=\"govuk-caption-l\">Link cases to {{caseName}} {{caseId | ccdCaseReference}}</span>\n      <h1 class=\"govuk-heading-xl\">Select a&nbsp;case you want to link to this case</h1>\n      <div class=\"form-group\" [formGroup]=\"linkCaseForm\" *ngIf=\"linkCaseForm\">\n        <div class=\"govuk-form-group\" id=\"caseNumber\" [ngClass]=\"{'govuk-form-group--error': !!caseNumberError}\">\n          <h3 class=\"govuk-heading-s\">Enter case reference</h3>\n          <span class=\"govuk-error-message\" *ngIf=\"caseNumberError\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{caseNumberError}}\n          </span>\n          <input class=\"govuk-input govuk-input--width-20\" formControlName=\"caseNumber\" id=\"width-20\" name=\"width-20\"\n            type=\"text\">\n        </div>\n        <div [ngClass]=\"{'govuk-form-group--error': !!caseReasonError}\" class=\"govuk-!-margin-top-3\">\n          <h3 class=\"govuk-heading-s\">Why should these cases be linked?</h3>\n          <div id=\"waste-hint\" class=\"govuk-hint\">\n            Select all that apply.\n          </div>\n          <span class=\"govuk-error-message\" *ngIf=\"caseReasonError\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{caseReasonError}}\n          </span>\n          <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\" formArrayName=\"reasonType\" id=\"caseReason\">\n            <div class=\"govuk-checkboxes__item\" *ngFor=\"let reason of linkCaseReasons;index as pos\" [formGroupName]=\"pos\">\n              <input class=\"govuk-checkboxes__input\" id=\"{{reason.key}}\" formControlName=\"selected\" name=\"pos\"\n                type=\"checkbox\" [value]=\"reason.value_en\" (change)=\"toggleLinkCaseReasonOtherComments($event)\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{reason.key}}\">{{reason.value_en}}</label>\n            </div>\n          </div>\n        </div>\n        <div id=\"other-description-char-limit-error\" [ngClass]=\"{'govuk-form-group--error': !!caseReasonCommentsError}\" class=\"govuk-!-margin-top-3\" *ngIf=\"showComments\">\n          <h3 class=\"govuk-heading-s\">Comments</h3>\n          <span class=\"govuk-error-message\" *ngIf=\"caseReasonCommentsError\">\n            <span class=\"govuk-visually-hidden\">Error:</span> {{caseReasonCommentsError}}\n          </span>\n          <textarea class=\"govuk-textarea govuk-input--width-30\" id=\"otherDescription\"\n            name=\"otherDescription\" formControlName=\"otherDescription\" rows=\"5\"\n            aria-describedby=\"other-description-hint other-description-char-limit-info other-description-char-limit-error\">\n          </textarea>\n          <div id=\"other-description-char-limit-info\" aria-live=\"polite\" class=\"govuk-hint govuk-character-count__message\">\n            You can enter up to 100 characters\n          </div>\n        </div>\n        <br><br>\n        <span class=\"govuk-error-message\" *ngIf=\"caseSelectionError\">\n          <span class=\"govuk-visually-hidden\">Error:</span> {{caseSelectionError}}\n        </span>\n        <button id=\"propose\" type=\"button\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\"\n          (click)=\"submitCaseInfo()\">Propose case link</button>\n      </div>\n      <hr>\n      <br><br>\n      <div class=\"govuk-form-group\" id=\"caseNumber\" [ngClass]=\"{'govuk-form-group--error': !!noSelectedCaseError}\">\n        <span class=\"govuk-error-message\" *ngIf=\"noSelectedCaseError\">\n          <span class=\"govuk-visually-hidden\">Error:</span> {{noSelectedCaseError}}\n        </span>\n        <table class=\"govuk-table\">\n          <caption class=\"govuk-table__caption govuk-table__caption--m\">Proposed case links </caption>\n          <thead class=\"govuk-table__head\">\n            <tr class=\"govuk-table__row\">\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"300\">Case name and number</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"150\">Case type </th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"200\">Service</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"200\">State</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"400\">Reasons for case link</th>\n              <th scope=\"col\" class=\"govuk-table__header\" width=\"50\"></th>\n            </tr>\n          </thead>\n          <tbody class=\"govuk-table__body\">\n            <tr class=\"govuk-table__row\" *ngFor=\"let case of selectedCases; let pos = index\">\n              <td class=\"govuk-table__cell\">\n                <div class=\"govuk-form-group--error\"\n                  [ngClass]=\"{'table-group-error':caseSelectionError && case.caseReference === linkCaseForm.value.caseNumber}\">\n                </div>\n                <span>{{case.caseName}} <br> {{case.caseReference | ccdCaseReference}}</span>\n              </td>\n              <td class=\"govuk-table__cell\" [title]=\"case.caseTypeDescription\">{{case.caseType}}</td>\n              <td class=\"govuk-table__cell\">{{case.caseService}}</td>\n              <td class=\"govuk-table__cell\" [title]=\"case.caseStateDescription\">{{case.caseState}}</td>\n              <td class=\"govuk-table__cell\"><span\n                  *ngFor=\"let reason of case.reasons\">{{reason | ccdLinkCasesReasonValue}}<br></span></td>\n              <td class=\"govuk-table__cell\"><a [attr.id]=\"case.caseReference\" (click)=\"onSelectedLinkedCaseRemove(pos, case.caseReference);\"\n                  class=\"govuk-link no-visited-state\">Remove</a></td>\n            </tr>\n            <tr class=\"govuk-table__row\" *ngIf=\"!selectedCases.length\">\n              <td class=\"govuk-table__cell\" colspan=\"6\">\n                None\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".no-visited-state{color:#1d70b8;cursor:pointer}.no-visited-state:hover{color:#003078}.govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap;max-height:500px;width:100%;overflow-x:auto;overflow-y:hidden;padding-top:5px}.govuk-checkboxes .govuk-checkboxes__item{display:flex}::ng-deep .govuk-width-container .screen-990 .width-50{width:100%}.govuk-table__row{position:relative}.govuk-table__row .table-group-error{position:absolute;height:calc(100% - 20px);margin-left:-15px}\n"] }]
+    }], () => [{ type: CasesService }, { type: i4.FormBuilder }, { type: ValidatorsUtils }, { type: LinkedCasesService }, { type: MultipageComponentStateService }], { linkedCasesStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LinkCasesComponent, { className: "LinkCasesComponent", filePath: "lib/shared/components/palette/linked-cases/components/link-cases/link-cases.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LinkCasesComponent, { className: "LinkCasesComponent", filePath: "lib/shared/components/palette/linked-cases/components/link-cases/link-cases.component.ts", lineNumber: 26 }); })();
 
 function LinkedCasesFromTableComponent_a_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -17244,11 +17617,12 @@ function NoLinkedCasesComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, "There are no cases linked to this one.");
     i0.ɵɵelementEnd();
 } }
-class NoLinkedCasesComponent {
+class NoLinkedCasesComponent extends AbstractJourneyComponent {
     router;
     linkedCasesService;
     serverLinkedApiError;
-    constructor(router, linkedCasesService) {
+    constructor(router, linkedCasesService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.router = router;
         this.linkedCasesService = linkedCasesService;
     }
@@ -17258,8 +17632,8 @@ class NoLinkedCasesComponent {
     onBack() {
         this.router.navigate(['cases', 'case-details', this.linkedCasesService.caseId], { fragment: 'Linked cases' });
     }
-    static ɵfac = function NoLinkedCasesComponent_Factory(t) { return new (t || NoLinkedCasesComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(LinkedCasesService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NoLinkedCasesComponent, selectors: [["ccd-no-linked-cases"]], decls: 12, vars: 3, consts: [["noLinkedCases", ""], [1, "govuk-grid-row"], [1, "govuk-grid-column-full"], ["class", "govuk-heading-xl", 4, "ngIf"], ["id", "unlink-cases-error", "class", "govuk-error-message", 4, "ngIf", "ngIfElse"], [1, "govuk-body"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-button-group"], ["type", "button", "id", "back-button", 1, "button", "button-primary", 3, "click"], [1, "govuk-heading-xl"], ["id", "unlink-cases-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"]], template: function NoLinkedCasesComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function NoLinkedCasesComponent_Factory(t) { return new (t || NoLinkedCasesComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NoLinkedCasesComponent, selectors: [["ccd-no-linked-cases"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 3, consts: [["noLinkedCases", ""], [1, "govuk-grid-row"], [1, "govuk-grid-column-full"], ["class", "govuk-heading-xl", 4, "ngIf"], ["id", "unlink-cases-error", "class", "govuk-error-message", 4, "ngIf", "ngIfElse"], [1, "govuk-body"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-button-group"], ["type", "button", "id", "back-button", 1, "button", "button-primary", 3, "click"], [1, "govuk-heading-xl"], ["id", "unlink-cases-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"]], template: function NoLinkedCasesComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵtemplate(2, NoLinkedCasesComponent_h1_2_Template, 2, 0, "h1", 3)(3, NoLinkedCasesComponent_p_3_Template, 4, 1, "p", 4)(4, NoLinkedCasesComponent_ng_template_4_Template, 2, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
@@ -17282,70 +17656,66 @@ class NoLinkedCasesComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NoLinkedCasesComponent, [{
         type: Component,
         args: [{ selector: 'ccd-no-linked-cases', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-full\">\n    <h1 class=\"govuk-heading-xl\" *ngIf=\"serverLinkedApiError\">There is a problem</h1>\n    <p id=\"unlink-cases-error\" class=\"govuk-error-message\"\n      *ngIf=\"serverLinkedApiError;else noLinkedCases;\">\n      <span class=\"govuk-visually-hidden\">Error:</span> {{serverLinkedApiError.message}}\n    </p>\n    <ng-template #noLinkedCases>\n      <p class=\"govuk-body\">There are no cases linked to this one.</p>\n    </ng-template>\n    <p class=\"govuk-body\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"onBack()\">Go back to the Linked cases tab</a>\n    </p>\n    <div class=\"govuk-button-group\">\n      <button class=\"button button-primary\" type=\"button\" id=\"back-button\" (click)=\"onBack()\">Back</button>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: i1$1.Router }, { type: LinkedCasesService }], 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: 9 }); })();
+    }], () => [{ 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: 12 }); })();
 
 const _c0$I = a0 => ({ "govuk-form-group--error": a0 });
 function UnLinkCasesComponent_div_0_div_4_p_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 11)(1, "span", 12);
+    i0.ɵɵelementStart(0, "p", 9)(1, "span", 10);
     i0.ɵɵtext(2, "Error:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.unlinkErrorMessage, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.unlinkErrorMessage, " ");
 } }
 function UnLinkCasesComponent_div_0_div_4_div_3_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 13)(1, "input", 14);
-    i0.ɵɵlistener("change", function UnLinkCasesComponent_div_0_div_4_div_3_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onChange($event.target)); });
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "input", 12);
+    i0.ɵɵlistener("change", function UnLinkCasesComponent_div_0_div_4_div_3_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onChange($event.target)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 15);
+    i0.ɵɵelementStart(2, "label", 13);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "ccdCaseReference");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const case_r4 = ctx.$implicit;
+    const case_r3 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate1("id", "case-reference-", case_r4.caseReference, "");
-    i0.ɵɵproperty("value", case_r4.caseReference)("checked", case_r4.unlink);
+    i0.ɵɵpropertyInterpolate1("id", "case-reference-", case_r3.caseReference, "");
+    i0.ɵɵproperty("value", case_r3.caseReference)("checked", case_r3.unlink);
     i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate("for", case_r4.caseReference);
+    i0.ɵɵpropertyInterpolate("for", case_r3.caseReference);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" ", case_r4.caseName, " ", i0.ɵɵpipeBind1(4, 7, case_r4.caseReference), " ");
+    i0.ɵɵtextInterpolate2(" ", case_r3.caseName, " ", i0.ɵɵpipeBind1(4, 7, case_r3.caseReference), " ");
 } }
 function UnLinkCasesComponent_div_0_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵtemplate(1, UnLinkCasesComponent_div_0_div_4_p_1_Template, 4, 1, "p", 8);
-    i0.ɵɵelementStart(2, "div", 9);
-    i0.ɵɵtemplate(3, UnLinkCasesComponent_div_0_div_4_div_3_Template, 5, 9, "div", 10);
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵtemplate(1, UnLinkCasesComponent_div_0_div_4_p_1_Template, 4, 1, "p", 6);
+    i0.ɵɵelementStart(2, "div", 7);
+    i0.ɵɵtemplate(3, UnLinkCasesComponent_div_0_div_4_div_3_Template, 5, 9, "div", 8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$I, ctx_r1.unlinkErrorMessage))("formGroup", ctx_r1.unlinkCaseForm);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(4, _c0$I, ctx_r0.unlinkErrorMessage))("formGroup", ctx_r0.unlinkCaseForm);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.unlinkErrorMessage);
+    i0.ɵɵproperty("ngIf", ctx_r0.unlinkErrorMessage);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.linkedCases);
+    i0.ɵɵproperty("ngForOf", ctx_r0.linkedCases);
 } }
 function UnLinkCasesComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h1", 3);
     i0.ɵɵtext(3, "Select the cases you want to unlink from this case");
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(4, UnLinkCasesComponent_div_0_div_4_Template, 4, 6, "div", 4);
-    i0.ɵɵelementStart(5, "div", 5)(6, "button", 6);
-    i0.ɵɵlistener("click", function UnLinkCasesComponent_div_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNext()); });
-    i0.ɵɵtext(7, "Next");
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r1.unlinkCaseForm);
+    i0.ɵɵproperty("ngIf", ctx_r0.unlinkCaseForm);
 } }
-class UnLinkCasesComponent {
+class UnLinkCasesComponent extends AbstractFieldWriteJourneyComponent {
     fb;
     casesService;
     linkedCasesService;
@@ -17360,7 +17730,8 @@ class UnLinkCasesComponent {
     unlinkErrorMessage;
     isLoaded;
     isServerError = false;
-    constructor(fb, casesService, linkedCasesService) {
+    constructor(fb, casesService, linkedCasesService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.fb = fb;
         this.casesService = casesService;
         this.linkedCasesService = linkedCasesService;
@@ -17453,6 +17824,12 @@ class UnLinkCasesComponent {
         // Return linked cases state and error messages to the parent
         this.emitLinkedCasesState(navigateToNextPage);
     }
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
     // Return linked cases state and error messages to the parent
     emitLinkedCasesState(isNavigateToNextPage) {
         this.linkedCasesStateEmitter.emit({
@@ -17465,22 +17842,22 @@ class UnLinkCasesComponent {
         this.errorMessages = [];
         this.unlinkErrorMessage = null;
     }
-    static ɵfac = function UnLinkCasesComponent_Factory(t) { return new (t || UnLinkCasesComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(LinkedCasesService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnLinkCasesComponent, selectors: [["ccd-unlink-cases"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter", notifyAPIFailure: "notifyAPIFailure" }, decls: 1, vars: 1, consts: [["class", "govuk-grid-row", 4, "ngIf"], [1, "govuk-grid-row"], [1, "govuk-grid-column-full"], [1, "govuk-heading-xl"], ["class", "govuk-form-group form-group", 3, "ngClass", "formGroup", 4, "ngIf"], [1, "govuk-button-group"], ["type", "button", "id", "next-button", 1, "button", "button-primary", 3, "click"], [1, "govuk-form-group", "form-group", 3, "ngClass", "formGroup"], ["id", "unlink-cases-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes"], ["class", "govuk-checkboxes__item", 4, "ngFor", "ngForOf"], ["id", "unlink-cases-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-checkboxes__item"], ["formArrayName", "linkedCases", "name", "linkedCases", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "value", "checked"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"]], template: function UnLinkCasesComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, UnLinkCasesComponent_div_0_Template, 8, 1, "div", 0);
+    static ɵfac = function UnLinkCasesComponent_Factory(t) { return new (t || UnLinkCasesComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnLinkCasesComponent, selectors: [["ccd-unlink-cases"]], outputs: { linkedCasesStateEmitter: "linkedCasesStateEmitter", notifyAPIFailure: "notifyAPIFailure" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["class", "govuk-grid-row", 4, "ngIf"], [1, "govuk-grid-row"], [1, "govuk-grid-column-full"], [1, "govuk-heading-xl"], ["class", "govuk-form-group form-group", 3, "ngClass", "formGroup", 4, "ngIf"], [1, "govuk-form-group", "form-group", 3, "ngClass", "formGroup"], ["id", "unlink-cases-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes"], ["class", "govuk-checkboxes__item", 4, "ngFor", "ngForOf"], ["id", "unlink-cases-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-checkboxes__item"], ["formArrayName", "linkedCases", "name", "linkedCases", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "value", "checked"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"]], template: function UnLinkCasesComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, UnLinkCasesComponent_div_0_Template, 5, 1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.linkedCases.length > 0);
         } }, dependencies: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormArrayName, CaseReferencePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnLinkCasesComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-unlink-cases', template: "<div class=\"govuk-grid-row\" *ngIf=\"linkedCases.length > 0\">\n  <div class=\"govuk-grid-column-full\">\n    <h1 class=\"govuk-heading-xl\">Select the cases you want to unlink from this case</h1>\n    <div class=\"govuk-form-group form-group\" [ngClass]=\"{'govuk-form-group--error': unlinkErrorMessage}\" [formGroup]=\"unlinkCaseForm\" *ngIf=\"unlinkCaseForm\">\n      <p id=\"unlink-cases-error\" class=\"govuk-error-message\" *ngIf=\"unlinkErrorMessage\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{unlinkErrorMessage}}\n      </p>\n      <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n        <div class=\"govuk-checkboxes__item\" *ngFor=\"let case of linkedCases\">\n          <input class=\"govuk-checkboxes__input\" id=\"case-reference-{{case.caseReference}}\" formArrayName=\"linkedCases\" name=\"linkedCases\"\n            type=\"checkbox\" [value]=\"case.caseReference\" [checked]=\"case.unlink\" (change)=\"onChange($event.target)\">\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{case.caseReference}}\">\n              {{case.caseName }} {{case.caseReference | ccdCaseReference}}\n          </label>\n        </div>\n      </div>\n    </div>\n    <div class=\"govuk-button-group\">\n      <button class=\"button button-primary\" type=\"button\" id=\"next-button\" (click)=\"onNext()\">Next</button>\n    </div>\n  </div>\n</div>\n" }]
-    }], () => [{ type: i4.FormBuilder }, { type: CasesService }, { type: LinkedCasesService }], { linkedCasesStateEmitter: [{
+        args: [{ selector: 'ccd-unlink-cases', template: "<div class=\"govuk-grid-row\" *ngIf=\"linkedCases.length > 0\">\n  <div class=\"govuk-grid-column-full\">\n    <h1 class=\"govuk-heading-xl\">Select the cases you want to unlink from this case</h1>\n    <div class=\"govuk-form-group form-group\" [ngClass]=\"{'govuk-form-group--error': unlinkErrorMessage}\" [formGroup]=\"unlinkCaseForm\" *ngIf=\"unlinkCaseForm\">\n      <p id=\"unlink-cases-error\" class=\"govuk-error-message\" *ngIf=\"unlinkErrorMessage\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{unlinkErrorMessage}}\n      </p>\n      <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n        <div class=\"govuk-checkboxes__item\" *ngFor=\"let case of linkedCases\">\n          <input class=\"govuk-checkboxes__input\" id=\"case-reference-{{case.caseReference}}\" formArrayName=\"linkedCases\" name=\"linkedCases\"\n            type=\"checkbox\" [value]=\"case.caseReference\" [checked]=\"case.unlink\" (change)=\"onChange($event.target)\">\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"{{case.caseReference}}\">\n              {{case.caseName }} {{case.caseReference | ccdCaseReference}}\n          </label>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+    }], () => [{ type: i4.FormBuilder }, { type: CasesService }, { type: LinkedCasesService }, { type: MultipageComponentStateService }], { linkedCasesStateEmitter: [{
             type: Output
         }], notifyAPIFailure: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnLinkCasesComponent, { className: "UnLinkCasesComponent", filePath: "lib/shared/components/palette/linked-cases/components/unlink-cases/unlink-cases.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnLinkCasesComponent, { className: "UnLinkCasesComponent", filePath: "lib/shared/components/palette/linked-cases/components/unlink-cases/unlink-cases.component.ts", lineNumber: 16 }); })();
 
 // tslint:disable:variable-name
 class LinkCaseReason {
@@ -17734,7 +18111,7 @@ class ReadLinkedCasesFieldComponent {
 function WriteLinkedCasesFieldComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-linked-cases-before-you-start", 3);
+    i0.ɵɵelementStart(1, "ccd-linked-cases-before-you-start", 4, 0);
     i0.ɵɵlistener("linkedCasesStateEmitter", function WriteLinkedCasesFieldComponent_ng_container_2_Template_ccd_linked_cases_before_you_start_linkedCasesStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLinkedCasesStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -17742,7 +18119,7 @@ function WriteLinkedCasesFieldComponent_ng_container_2_Template(rf, ctx) { if (r
 function WriteLinkedCasesFieldComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-no-linked-cases", 3);
+    i0.ɵɵelementStart(1, "ccd-no-linked-cases", 4, 0);
     i0.ɵɵlistener("linkedCasesStateEmitter", function WriteLinkedCasesFieldComponent_ng_container_3_Template_ccd_no_linked_cases_linkedCasesStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLinkedCasesStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -17750,7 +18127,7 @@ function WriteLinkedCasesFieldComponent_ng_container_3_Template(rf, ctx) { if (r
 function WriteLinkedCasesFieldComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-link-cases", 3);
+    i0.ɵɵelementStart(1, "ccd-link-cases", 4, 0);
     i0.ɵɵlistener("linkedCasesStateEmitter", function WriteLinkedCasesFieldComponent_ng_container_4_Template_ccd_link_cases_linkedCasesStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLinkedCasesStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -17758,7 +18135,7 @@ function WriteLinkedCasesFieldComponent_ng_container_4_Template(rf, ctx) { if (r
 function WriteLinkedCasesFieldComponent_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-unlink-cases", 3);
+    i0.ɵɵelementStart(1, "ccd-unlink-cases", 4, 0);
     i0.ɵɵlistener("linkedCasesStateEmitter", function WriteLinkedCasesFieldComponent_ng_container_5_Template_ccd_unlink_cases_linkedCasesStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLinkedCasesStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
@@ -17766,12 +18143,12 @@ function WriteLinkedCasesFieldComponent_ng_container_5_Template(rf, ctx) { if (r
 function WriteLinkedCasesFieldComponent_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "ccd-linked-cases-check-your-answers", 3);
+    i0.ɵɵelementStart(1, "ccd-linked-cases-check-your-answers", 4, 0);
     i0.ɵɵlistener("linkedCasesStateEmitter", function WriteLinkedCasesFieldComponent_ng_container_6_Template_ccd_linked_cases_check_your_answers_linkedCasesStateEmitter_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLinkedCasesStateEmitted($event)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } }
-class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
+class WriteLinkedCasesFieldComponent extends AbstractFieldWriteJourneyComponent {
     appConfig;
     commonDataService;
     casesService;
@@ -17784,8 +18161,8 @@ class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
     linkedCasesEventTriggers = LinkedCasesEventTriggers;
     linkedCases = [];
     subscriptions = new Subscription();
-    constructor(appConfig, commonDataService, casesService, linkedCasesService, caseEditDataService) {
-        super();
+    constructor(appConfig, commonDataService, casesService, linkedCasesService, caseEditDataService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.appConfig = appConfig;
         this.commonDataService = commonDataService;
         this.casesService = casesService;
@@ -17810,6 +18187,13 @@ class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
         this.subscriptions.add(this.caseEditDataService.caseEditForm$.subscribe({
             next: editForm => this.caseEditForm = editForm
         }));
+        this.journeyPageNumber = this.journeyStartPageNumber = LinkedCasesPages.BEFORE_YOU_START;
+        this.journeyEndPageNumber = LinkedCasesPages.CHECK_YOUR_ANSWERS;
+        this.multipageComponentStateService.isAtStart = this.journeyPageNumber === this.journeyStartPageNumber;
+    }
+    onPageChange() {
+        const isAtStart = this.journeyPageNumber === this.journeyStartPageNumber || this.linkedCasesPage === LinkedCasesPages.BEFORE_YOU_START;
+        this.multipageComponentStateService.isAtStart = isAtStart;
     }
     initialiseCaseDetails(caseDetails) {
         if (caseDetails) {
@@ -17867,6 +18251,8 @@ class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
     }
     proceedToNextPage() {
         if (this.isAtFinalPage()) {
+            // Set the journey page to the end page. 
+            this.journeyPageNumber = this.journeyEndPageNumber;
             // Continue button event must be allowed in final page
             this.caseEditDataService.setLinkedCasesJourneyAtFinalStep(true);
             // Trigger validation to clear the "notAtFinalPage" error if now at the final state
@@ -17878,6 +18264,7 @@ class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
             // Continue button event must not be allowed if not in final page
             this.caseEditDataService.setLinkedCasesJourneyAtFinalStep(false);
         }
+        this.nextPage();
     }
     submitLinkedCases() {
         if (!this.linkedCasesService.isLinkedCasesEventTrigger) {
@@ -17922,10 +18309,22 @@ class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    static ɵfac = function WriteLinkedCasesFieldComponent_Factory(t) { return new (t || WriteLinkedCasesFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CommonDataService), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(CaseEditDataService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteLinkedCasesFieldComponent, selectors: [["ccd-write-linked-cases-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 7, consts: [[1, "form-group", "govuk-!-margin-bottom-2", 3, "formGroup"], [1, "govuk-form-group", 3, "ngSwitch"], [4, "ngSwitchCase"], [3, "linkedCasesStateEmitter"]], template: function WriteLinkedCasesFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵtemplate(2, WriteLinkedCasesFieldComponent_ng_container_2_Template, 2, 0, "ng-container", 2)(3, WriteLinkedCasesFieldComponent_ng_container_3_Template, 2, 0, "ng-container", 2)(4, WriteLinkedCasesFieldComponent_ng_container_4_Template, 2, 0, "ng-container", 2)(5, WriteLinkedCasesFieldComponent_ng_container_5_Template, 2, 0, "ng-container", 2)(6, WriteLinkedCasesFieldComponent_ng_container_6_Template, 2, 0, "ng-container", 2);
+    previousPage() {
+        if (this.linkedCasesPage === LinkedCasesPages.CHECK_YOUR_ANSWERS) {
+            this.linkedCasesPage = LinkedCasesPages.LINK_CASE;
+        }
+        else if (this.linkedCasesPage === LinkedCasesPages.LINK_CASE) {
+            this.linkedCasesPage = LinkedCasesPages.BEFORE_YOU_START;
+        }
+        else {
+            this.linkedCasesPage--;
+        }
+        super.previousPage();
+    }
+    static ɵfac = function WriteLinkedCasesFieldComponent_Factory(t) { return new (t || WriteLinkedCasesFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CommonDataService), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(LinkedCasesService), i0.ɵɵdirectiveInject(CaseEditDataService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteLinkedCasesFieldComponent, selectors: [["ccd-write-linked-cases-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 7, consts: [["journeyChild", ""], [1, "form-group", "govuk-!-margin-bottom-2", 3, "formGroup"], [1, "govuk-form-group", 3, "ngSwitch"], [4, "ngSwitchCase"], [3, "linkedCasesStateEmitter"]], template: function WriteLinkedCasesFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+            i0.ɵɵtemplate(2, WriteLinkedCasesFieldComponent_ng_container_2_Template, 3, 0, "ng-container", 3)(3, WriteLinkedCasesFieldComponent_ng_container_3_Template, 3, 0, "ng-container", 3)(4, WriteLinkedCasesFieldComponent_ng_container_4_Template, 3, 0, "ng-container", 3)(5, WriteLinkedCasesFieldComponent_ng_container_5_Template, 3, 0, "ng-container", 3)(6, WriteLinkedCasesFieldComponent_ng_container_6_Template, 3, 0, "ng-container", 3);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
@@ -17945,9 +18344,9 @@ class WriteLinkedCasesFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteLinkedCasesFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-linked-cases-field', template: "<div class=\"form-group govuk-!-margin-bottom-2\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngSwitch]=\"linkedCasesPage\">\n    <ng-container *ngSwitchCase=\"linkedCasesPages.BEFORE_YOU_START\">\n      <ccd-linked-cases-before-you-start\n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\"></ccd-linked-cases-before-you-start>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.NO_LINKED_CASES\">\n      <ccd-no-linked-cases\n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\"></ccd-no-linked-cases>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.LINK_CASE\">\n      <ccd-link-cases\n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\"></ccd-link-cases>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.UNLINK_CASE\">\n      <ccd-unlink-cases\n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\"></ccd-unlink-cases>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.CHECK_YOUR_ANSWERS\">\n      <ccd-linked-cases-check-your-answers\n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\"></ccd-linked-cases-check-your-answers>\n    </ng-container>\n  </div>\n</div>\n" }]
-    }], () => [{ type: AbstractAppConfig }, { type: CommonDataService }, { type: CasesService }, { type: LinkedCasesService }, { type: CaseEditDataService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteLinkedCasesFieldComponent, { className: "WriteLinkedCasesFieldComponent", filePath: "lib/shared/components/palette/linked-cases/write-linked-cases-field.component.ts", lineNumber: 19 }); })();
+        args: [{ selector: 'ccd-write-linked-cases-field', template: "<div class=\"form-group govuk-!-margin-bottom-2\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngSwitch]=\"linkedCasesPage\">\n    <ng-container *ngSwitchCase=\"linkedCasesPages.BEFORE_YOU_START\">\n      <ccd-linked-cases-before-you-start\n        #journeyChild \n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\">\n      </ccd-linked-cases-before-you-start>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.NO_LINKED_CASES\">\n      <ccd-no-linked-cases\n        #journeyChild \n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\">\n      </ccd-no-linked-cases>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.LINK_CASE\">\n      <ccd-link-cases\n        #journeyChild \n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\">\n      </ccd-link-cases>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.UNLINK_CASE\">\n      <ccd-unlink-cases\n        #journeyChild \n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\">\n      </ccd-unlink-cases>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"linkedCasesPages.CHECK_YOUR_ANSWERS\">\n      <ccd-linked-cases-check-your-answers\n        #journeyChild \n        (linkedCasesStateEmitter)=\"onLinkedCasesStateEmitted($event)\">\n      </ccd-linked-cases-check-your-answers>\n    </ng-container>\n  </div>\n</div>\n" }]
+    }], () => [{ type: AbstractAppConfig }, { type: CommonDataService }, { type: CasesService }, { type: LinkedCasesService }, { type: CaseEditDataService }, { type: MultipageComponentStateService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteLinkedCasesFieldComponent, { className: "WriteLinkedCasesFieldComponent", filePath: "lib/shared/components/palette/linked-cases/write-linked-cases-field.component.ts", lineNumber: 20 }); })();
 
 function ReadMoneyGbpFieldComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -22709,10 +23108,10 @@ function AddCommentsComponent_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" (", i0.ɵɵpipeBind1(2, 1, "optional"), ")");
 } }
 function AddCommentsComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "span", 15);
+    i0.ɵɵelementStart(0, "div", 12)(1, "span", 13);
     i0.ɵɵtext(2, "!");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "strong", 16)(4, "span", 17);
+    i0.ɵɵelementStart(3, "strong", 14)(4, "span", 15);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22727,7 +23126,7 @@ function AddCommentsComponent_div_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 4, ctx_r0.addCommentsStepEnum.WARNING_TEXT), " ");
 } }
 function AddCommentsComponent_div_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
+    i0.ɵɵelementStart(0, "div", 16)(1, "span", 17);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22742,7 +23141,7 @@ function AddCommentsComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagCommentsNotEnteredErrorMessage), " ");
 } }
 function AddCommentsComponent_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "span", 19);
+    i0.ɵɵelementStart(0, "div", 18)(1, "span", 17);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -22756,7 +23155,7 @@ function AddCommentsComponent_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagCommentsCharLimitErrorMessage), " ");
 } }
-class AddCommentsComponent {
+class AddCommentsComponent extends AbstractJourneyComponent {
     formGroup;
     optional = false;
     isDisplayContextParameterExternal = false;
@@ -22815,8 +23214,14 @@ class AddCommentsComponent {
             });
         }
     }
-    static ɵfac = function AddCommentsComponent_Factory(t) { return new (t || AddCommentsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddCommentsComponent, selectors: [["ccd-add-comments"]], inputs: { formGroup: "formGroup", optional: "optional", isDisplayContextParameterExternal: "isDisplayContextParameterExternal", isDisplayContextParameter2Point1Enabled: "isDisplayContextParameter2Point1Enabled" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 22, vars: 24, consts: [[3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], [1, "govuk-label", "govuk-label--m", 3, "for"], [4, "ngIf"], ["id", "add-comments-hint", 1, "govuk-hint"], ["class", "govuk-warning-text", 4, "ngIf"], ["id", "flag-comments-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "add-comments-hint add-comments-char-limit-info add-comments-char-limit-error", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "add-comments-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], ["id", "flag-comments-not-entered-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "add-comments-char-limit-error", 1, "govuk-error-message"]], template: function AddCommentsComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵAddCommentsComponent_BaseFactory; return function AddCommentsComponent_Factory(t) { return (ɵAddCommentsComponent_BaseFactory || (ɵAddCommentsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AddCommentsComponent)))(t || AddCommentsComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AddCommentsComponent, selectors: [["ccd-add-comments"]], inputs: { formGroup: "formGroup", optional: "optional", isDisplayContextParameterExternal: "isDisplayContextParameterExternal", isDisplayContextParameter2Point1Enabled: "isDisplayContextParameter2Point1Enabled" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 21, consts: [[3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], [1, "govuk-label", "govuk-label--m", 3, "for"], [4, "ngIf"], ["id", "add-comments-hint", 1, "govuk-hint"], ["class", "govuk-warning-text", 4, "ngIf"], ["id", "flag-comments-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "add-comments-hint add-comments-char-limit-info add-comments-char-limit-error", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "add-comments-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], ["id", "flag-comments-not-entered-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "add-comments-char-limit-error", 1, "govuk-error-message"]], template: function AddCommentsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "h1", 3)(4, "label", 4);
             i0.ɵɵtext(5);
@@ -22834,23 +23239,18 @@ class AddCommentsComponent {
             i0.ɵɵpipe(17, "rpxTranslate");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵelementStart(18, "div", 12)(19, "button", 13);
-            i0.ɵɵlistener("click", function AddCommentsComponent_Template_button_click_19_listener() { return ctx.onNext(); });
-            i0.ɵɵtext(20);
-            i0.ɵɵpipe(21, "rpxTranslate");
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(22, _c0$s, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(19, _c0$s, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("for", ctx.flagCommentsControlName);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 14, ctx.addCommentsTitle), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 13, ctx.addCommentsTitle), "");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.optional);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 16, ctx.addCommentsHint), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 15, ctx.addCommentsHint), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !ctx.isDisplayContextParameterExternal && ctx.isDisplayContextParameter2Point1Enabled && !ctx.otherInternalFlagTypeSelected);
             i0.ɵɵadvance();
@@ -22860,14 +23260,12 @@ class AddCommentsComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.flagCommentsControlName)("name", ctx.flagCommentsControlName)("formControlName", ctx.flagCommentsControlName);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 18, ctx.addCommentsStepEnum.CHARACTER_LIMIT_INFO), " ");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(21, 20, "Next"));
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 17, ctx.addCommentsStepEnum.CHARACTER_LIMIT_INFO), " ");
         } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AddCommentsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-add-comments', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--m\" [for]=\"flagCommentsControlName\">\n          {{addCommentsTitle | rpxTranslate}}<span *ngIf=\"optional\"> ({{'optional' | rpxTranslate}})</span>\n        </label>\n      </h1>\n      <div id=\"add-comments-hint\" class=\"govuk-hint\">\n        {{addCommentsHint | rpxTranslate}}\n      </div>\n      <div class=\"govuk-warning-text\"\n        *ngIf=\"!isDisplayContextParameterExternal && isDisplayContextParameter2Point1Enabled && !otherInternalFlagTypeSelected\">\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          {{addCommentsStepEnum.WARNING_TEXT | rpxTranslate}}\n        </strong>\n      </div>\n      <div id=\"flag-comments-not-entered-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"flagCommentsNotEnteredErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsNotEnteredErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"add-comments-char-limit-error\" class=\"govuk-error-message\"\n        *ngIf=\"flagCommentsCharLimitErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsCharLimitErrorMessage | rpxTranslate}}\n      </div>\n      <textarea class=\"govuk-textarea\" [id]=\"flagCommentsControlName\"\n        [name]=\"flagCommentsControlName\" [formControlName]=\"flagCommentsControlName\" rows=\"5\"\n        aria-describedby=\"add-comments-hint add-comments-char-limit-info add-comments-char-limit-error\"></textarea>\n      <div id=\"add-comments-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n        {{addCommentsStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\">\n  <button class=\"button button-primary\" type=\"button\" (click)=\"onNext()\">{{'Next' | rpxTranslate}}</button>\n</div>\n" }]
+        args: [{ selector: 'ccd-add-comments', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--m\" [for]=\"flagCommentsControlName\">\n          {{addCommentsTitle | rpxTranslate}}<span *ngIf=\"optional\"> ({{'optional' | rpxTranslate}})</span>\n        </label>\n      </h1>\n      <div id=\"add-comments-hint\" class=\"govuk-hint\">\n        {{addCommentsHint | rpxTranslate}}\n      </div>\n      <div class=\"govuk-warning-text\"\n        *ngIf=\"!isDisplayContextParameterExternal && isDisplayContextParameter2Point1Enabled && !otherInternalFlagTypeSelected\">\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          {{addCommentsStepEnum.WARNING_TEXT | rpxTranslate}}\n        </strong>\n      </div>\n      <div id=\"flag-comments-not-entered-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"flagCommentsNotEnteredErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsNotEnteredErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"add-comments-char-limit-error\" class=\"govuk-error-message\"\n        *ngIf=\"flagCommentsCharLimitErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsCharLimitErrorMessage | rpxTranslate}}\n      </div>\n      <textarea class=\"govuk-textarea\" [id]=\"flagCommentsControlName\"\n        [name]=\"flagCommentsControlName\" [formControlName]=\"flagCommentsControlName\" rows=\"5\"\n        aria-describedby=\"add-comments-hint add-comments-char-limit-info add-comments-char-limit-error\"></textarea>\n      <div id=\"add-comments-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n        {{addCommentsStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n      </div>\n    </div>\n  </div>\n</ng-container>" }]
     }], null, { formGroup: [{
             type: Input
         }], optional: [{
@@ -22879,7 +23277,7 @@ class AddCommentsComponent {
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddCommentsComponent, { className: "AddCommentsComponent", filePath: "lib/shared/components/palette/case-flag/components/add-comments/add-comments.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AddCommentsComponent, { className: "AddCommentsComponent", filePath: "lib/shared/components/palette/case-flag/components/add-comments/add-comments.component.ts", lineNumber: 12 }); })();
 
 function CaseFlagSummaryListComponent_dl_0_div_28_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -23381,7 +23779,7 @@ class CaseFlagTableComponent {
 
 const _c0$r = a0 => ({ "form-group-error": a0 });
 function ManageCaseFlagsComponent_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "span", 10);
+    i0.ɵɵelementStart(0, "div", 8)(1, "span", 9);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23396,8 +23794,8 @@ function ManageCaseFlagsComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.manageCaseFlagSelectedErrorMessage), " ");
 } }
 function ManageCaseFlagsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "input", 12)(2, "label", 13);
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "input", 11)(2, "label", 12);
     i0.ɵɵpipe(3, "manageCaseFlagsLabelDisplay");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -23411,18 +23809,7 @@ function ManageCaseFlagsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpropertyInterpolate1("for", "flag-selection-", i_r3, "");
     i0.ɵɵproperty("innerHtml", i0.ɵɵpipeBind1(3, 8, flagDisplay_r2), i0.ɵɵsanitizeHtml);
 } }
-function ManageCaseFlagsComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "button", 15);
-    i0.ɵɵlistener("click", function ManageCaseFlagsComponent_div_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNext()); });
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "Next"));
-} }
-class ManageCaseFlagsComponent {
+class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     formGroup;
     flagsData;
     caseTitle;
@@ -23556,8 +23943,14 @@ class ManageCaseFlagsComponent {
             errorMessages: this.errorMessages
         });
     }
-    static ɵfac = function ManageCaseFlagsComponent_Factory(t) { return new (t || ManageCaseFlagsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ManageCaseFlagsComponent, selectors: [["ccd-manage-case-flags"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", caseTitle: "caseTitle", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 11, vars: 10, consts: [[3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "manage-case-flag-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "manage-case-flag-heading", 1, "govuk-fieldset__heading"], ["id", "manage-case-flag-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["class", "govuk-button-group", 4, "ngIf"], ["id", "manage-case-flag-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for", "innerHtml"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"]], template: function ManageCaseFlagsComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵManageCaseFlagsComponent_BaseFactory; return function ManageCaseFlagsComponent_Factory(t) { return (ɵManageCaseFlagsComponent_BaseFactory || (ɵManageCaseFlagsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ManageCaseFlagsComponent)))(t || ManageCaseFlagsComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ManageCaseFlagsComponent, selectors: [["ccd-manage-case-flags"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", caseTitle: "caseTitle", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 9, consts: [[3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "manage-case-flag-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "manage-case-flag-heading", 1, "govuk-fieldset__heading"], ["id", "manage-case-flag-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "manage-case-flag-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for", "innerHtml"]], template: function ManageCaseFlagsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "fieldset", 2)(3, "legend", 3)(4, "h1", 4);
             i0.ɵɵtext(5);
@@ -23568,24 +23961,21 @@ class ManageCaseFlagsComponent {
             i0.ɵɵtemplate(9, ManageCaseFlagsComponent_div_9_Template, 4, 10, "div", 7);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵtemplate(10, ManageCaseFlagsComponent_div_10_Template, 4, 3, "div", 8);
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$r, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$r, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 6, ctx.manageCaseFlagTitle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 5, ctx.manageCaseFlagTitle), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.manageCaseFlagSelectedErrorMessage);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.flagsDisplayData);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.noFlagsError);
         } }, styles: [".flag-name-and-description{font-weight:700}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManageCaseFlagsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-manage-case-flags', encapsulation: ViewEncapsulation.None, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"manage-case-flag-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"manage-case-flag-heading\" class=\"govuk-fieldset__heading\">\n          {{manageCaseFlagTitle | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"manage-case-flag-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"manageCaseFlagSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{manageCaseFlagSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagDisplay of flagsDisplayData; index as i\">\n          <input class=\"govuk-radios__input\" id=\"flag-selection-{{i}}\" [name]=\"selectedControlName\"\n            type=\"radio\" [value]=\"flagDisplay\" [formControlName]=\"selectedControlName\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-selection-{{i}}\" [innerHtml]=\"flagDisplay | manageCaseFlagsLabelDisplay\"></label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\" *ngIf=\"!noFlagsError\">\n  <button class=\"button button-primary\" type=\"button\" (click)=\"onNext()\">{{'Next' | rpxTranslate}}</button>\n</div>\n", styles: [".flag-name-and-description{font-weight:700}\n"] }]
+        args: [{ selector: 'ccd-manage-case-flags', encapsulation: ViewEncapsulation.None, template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"manage-case-flag-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"manage-case-flag-heading\" class=\"govuk-fieldset__heading\">\n          {{manageCaseFlagTitle | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"manage-case-flag-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"manageCaseFlagSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{manageCaseFlagSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagDisplay of flagsDisplayData; index as i\">\n          <input class=\"govuk-radios__input\" id=\"flag-selection-{{i}}\" [name]=\"selectedControlName\"\n            type=\"radio\" [value]=\"flagDisplay\" [formControlName]=\"selectedControlName\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-selection-{{i}}\" [innerHtml]=\"flagDisplay | manageCaseFlagsLabelDisplay\"></label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>", styles: [".flag-name-and-description{font-weight:700}\n"] }]
     }], null, { formGroup: [{
             type: Input
         }], flagsData: [{
@@ -23597,7 +23987,7 @@ class ManageCaseFlagsComponent {
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ManageCaseFlagsComponent, { className: "ManageCaseFlagsComponent", filePath: "lib/shared/components/palette/case-flag/components/manage-case-flags/manage-case-flags.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ManageCaseFlagsComponent, { className: "ManageCaseFlagsComponent", filePath: "lib/shared/components/palette/case-flag/components/manage-case-flags/manage-case-flags.component.ts", lineNumber: 15 }); })();
 
 // tslint:disable:variable-name
 /**
@@ -23662,7 +24052,7 @@ var SearchLanguageInterpreterControlNames;
 
 const _c0$q = a0 => ({ "form-group-error": a0 });
 function SearchLanguageInterpreterComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
+    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23677,7 +24067,7 @@ function SearchLanguageInterpreterComponent_div_10_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageNotSelectedErrorMessage), " ");
 } }
 function SearchLanguageInterpreterComponent_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "span", 21);
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 19);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23692,7 +24082,7 @@ function SearchLanguageInterpreterComponent_div_11_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageEnteredInBothFieldsErrorMessage), " ");
 } }
 function SearchLanguageInterpreterComponent_mat_option_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-option", 23);
+    i0.ɵɵelementStart(0, "mat-option", 21);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "languageInterpreterDisplay");
     i0.ɵɵelementEnd();
@@ -23703,7 +24093,7 @@ function SearchLanguageInterpreterComponent_mat_option_15_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, language_r3), " ");
 } }
 function SearchLanguageInterpreterComponent_mat_option_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-option", 24);
+    i0.ɵɵelementStart(0, "mat-option", 22);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23712,7 +24102,7 @@ function SearchLanguageInterpreterComponent_mat_option_17_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "No results found"));
 } }
 function SearchLanguageInterpreterComponent_div_24_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30)(1, "span", 21);
+    i0.ɵɵelementStart(0, "div", 28)(1, "span", 19);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23727,7 +24117,7 @@ function SearchLanguageInterpreterComponent_div_24_div_5_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageNotEnteredErrorMessage), " ");
 } }
 function SearchLanguageInterpreterComponent_div_24_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "span", 21);
+    i0.ɵɵelementStart(0, "div", 29)(1, "span", 19);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23742,12 +24132,12 @@ function SearchLanguageInterpreterComponent_div_24_div_6_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageCharLimitErrorMessage), " ");
 } }
 function SearchLanguageInterpreterComponent_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 2)(2, "label", 26);
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 2)(2, "label", 24);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, SearchLanguageInterpreterComponent_div_24_div_5_Template, 6, 6, "div", 27)(6, SearchLanguageInterpreterComponent_div_24_div_6_Template, 6, 6, "div", 28);
-    i0.ɵɵelement(7, "input", 29);
+    i0.ɵɵtemplate(5, SearchLanguageInterpreterComponent_div_24_div_5_Template, 6, 6, "div", 25)(6, SearchLanguageInterpreterComponent_div_24_div_6_Template, 6, 6, "div", 26);
+    i0.ɵɵelement(7, "input", 27);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -23762,7 +24152,7 @@ function SearchLanguageInterpreterComponent_div_24_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("name", ctx_r1.SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY)("formControlName", ctx_r1.SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY);
 } }
-class SearchLanguageInterpreterComponent {
+class SearchLanguageInterpreterComponent extends AbstractJourneyComponent {
     rpxTranslationService;
     get searchLanguageInterpreterStep() {
         return SearchLanguageInterpreterStep;
@@ -23784,7 +24174,8 @@ class SearchLanguageInterpreterComponent {
     noResults = false;
     languageMaxCharLimit = 80;
     signLanguageFlagCode = 'RA0042';
-    constructor(rpxTranslationService) {
+    constructor(rpxTranslationService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
@@ -23884,8 +24275,14 @@ class SearchLanguageInterpreterComponent {
                 !language.value && language.value_cy.toLowerCase().includes(searchTerm.toLowerCase(), 0))
             : [];
     }
-    static ɵfac = function SearchLanguageInterpreterComponent_Factory(t) { return new (t || SearchLanguageInterpreterComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLanguageInterpreterComponent, selectors: [["ccd-search-language-interpreter"]], inputs: { formGroup: "formGroup", flagType: "flagType" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 29, vars: 28, consts: [["autoSearchLanguage", "matAutocomplete"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], [1, "govuk-label", "govuk-label--m", 3, "for"], ["id", "language-search-box-hint", 1, "govuk-hint"], [1, "auto-complete-container"], ["id", "language-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "language-entered-in-both-fields-error-message", "class", "govuk-error-message", 4, "ngIf"], ["aria-label", "Language search box", "matInput", "", "type", "text", 1, "govuk-input", "search-language__input", 3, "formControlName", "matAutocomplete"], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend", 3, "displayWith"], [3, "value", 4, "ngFor", "ngForOf"], ["disabled", "", 4, "ngIf"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes", "govuk-checkboxes--small", "govuk-checkboxes--conditional"], [1, "govuk-radios__item"], ["id", "enter-language-manually", "name", "enter-language-manually", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change"], ["for", "enter-language-manually", 1, "govuk-label", "govuk-checkboxes__label"], ["class", "govuk-radios__conditional", 4, "ngIf"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"], ["id", "language-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "language-entered-in-both-fields-error-message", 1, "govuk-error-message"], [3, "value"], ["disabled", ""], [1, "govuk-radios__conditional"], ["for", "manual-language-entry", 1, "govuk-label"], ["id", "language-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "language-char-limit-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "manual-language-entry", "type", "text", 1, "govuk-input", "govuk-input--width-20", 3, "name", "formControlName"], ["id", "language-not-entered-error-message", 1, "govuk-error-message"], ["id", "language-char-limit-error-message", 1, "govuk-error-message"]], template: function SearchLanguageInterpreterComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = function SearchLanguageInterpreterComponent_Factory(t) { return new (t || SearchLanguageInterpreterComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLanguageInterpreterComponent, selectors: [["ccd-search-language-interpreter"]], inputs: { formGroup: "formGroup", flagType: "flagType" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 25, consts: [["autoSearchLanguage", "matAutocomplete"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], [1, "govuk-label", "govuk-label--m", 3, "for"], ["id", "language-search-box-hint", 1, "govuk-hint"], [1, "auto-complete-container"], ["id", "language-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "language-entered-in-both-fields-error-message", "class", "govuk-error-message", 4, "ngIf"], ["aria-label", "Language search box", "matInput", "", "type", "text", 1, "govuk-input", "search-language__input", 3, "formControlName", "matAutocomplete"], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend", 3, "displayWith"], [3, "value", 4, "ngFor", "ngForOf"], ["disabled", "", 4, "ngIf"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes", "govuk-checkboxes--small", "govuk-checkboxes--conditional"], [1, "govuk-radios__item"], ["id", "enter-language-manually", "name", "enter-language-manually", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change"], ["for", "enter-language-manually", 1, "govuk-label", "govuk-checkboxes__label"], ["class", "govuk-radios__conditional", 4, "ngIf"], ["id", "language-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "language-entered-in-both-fields-error-message", 1, "govuk-error-message"], [3, "value"], ["disabled", ""], [1, "govuk-radios__conditional"], ["for", "manual-language-entry", 1, "govuk-label"], ["id", "language-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "language-char-limit-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "manual-language-entry", "type", "text", 1, "govuk-input", "govuk-input--width-20", 3, "name", "formControlName"], ["id", "language-not-entered-error-message", 1, "govuk-error-message"], ["id", "language-char-limit-error-message", 1, "govuk-error-message"]], template: function SearchLanguageInterpreterComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementContainerStart(0, 1);
             i0.ɵɵelementStart(1, "div", 2)(2, "h1", 3)(3, "label", 4);
@@ -23914,22 +24311,17 @@ class SearchLanguageInterpreterComponent {
             i0.ɵɵtemplate(24, SearchLanguageInterpreterComponent_div_24_Template, 8, 10, "div", 17);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵelementStart(25, "div", 18)(26, "button", 19);
-            i0.ɵɵlistener("click", function SearchLanguageInterpreterComponent_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onNext()); });
-            i0.ɵɵtext(27);
-            i0.ɵɵpipe(28, "rpxTranslate");
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             const autoSearchLanguage_r4 = i0.ɵɵreference(14);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(26, _c0$q, ctx.languageNotSelectedErrorMessage || ctx.languageEnteredInBothFieldsErrorMessage));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$q, ctx.languageNotSelectedErrorMessage || ctx.languageEnteredInBothFieldsErrorMessage));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("for", ctx.SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(5, 15, ctx.flagType, "name"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(5, 14, ctx.flagType, "name"), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 18, ctx.searchLanguageInterpreterHint), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 17, ctx.searchLanguageInterpreterHint), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.languageNotSelectedErrorMessage);
             i0.ɵɵadvance();
@@ -23939,32 +24331,30 @@ class SearchLanguageInterpreterComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("displayWith", ctx.displayLanguage);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 20, ctx.filteredLanguages$));
+            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 19, ctx.filteredLanguages$));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.noResults && ctx.searchTerm && ctx.searchTerm.length >= ctx.minSearchCharacters);
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 22, ctx.searchLanguageInterpreterStep.CHECKBOX_LABEL), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 21, ctx.searchLanguageInterpreterStep.CHECKBOX_LABEL), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isCheckboxEnabled);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(28, 24, "Next"));
         } }, styles: [".autocomplete__input--show-all-values[_ngcontent-%COMP%]{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down[_ngcontent-%COMP%]{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu[_ngcontent-%COMP%]{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible[_ngcontent-%COMP%]{display:block}.autocomplete__menu--hidden[_ngcontent-%COMP%]{display:none}.autocomplete__menu--overlay[_ngcontent-%COMP%]{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline[_ngcontent-%COMP%]{position:relative}.autocomplete__option[_ngcontent-%COMP%]{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{pointer-events:none}.autocomplete__option[_ngcontent-%COMP%]:first-of-type{border-top-width:0}.autocomplete__option[_ngcontent-%COMP%]:last-of-type{border-bottom-width:0}.autocomplete__option--odd[_ngcontent-%COMP%]{background-color:#fafafa}.autocomplete__option--focused[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results[_ngcontent-%COMP%]{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__input[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{font-size:13px;line-height:1.25}.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{padding:5px}@media (min-width: 641px){.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__input[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{font-size:13px;line-height:1.31579}}.div-action[_ngcontent-%COMP%]{display:inline-block}.add-location[_ngcontent-%COMP%]{display:inline}.remove-location-button[_ngcontent-%COMP%]{margin:5px}.hide-autocomplete[_ngcontent-%COMP%]{display:none}.auto-complete-container[_ngcontent-%COMP%]{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input[_ngcontent-%COMP%]{line-height:24px;font-size:19px}.hidden[_ngcontent-%COMP%]{display:none}.search-language__input[_ngcontent-%COMP%]{position:relative;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center left -2px;background-size:40px 40px;padding-left:35px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchLanguageInterpreterComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-search-language-interpreter', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': languageNotSelectedErrorMessage || languageEnteredInBothFieldsErrorMessage}\">\n    <h1 class=\"govuk-label-wrapper\">\n      <label class=\"govuk-label govuk-label--m\" [for]=\"SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM\">\n        {{flagType | flagFieldDisplay:'name'}}\n      </label>\n    </h1>\n    <div id=\"language-search-box-hint\" class=\"govuk-hint\">\n      {{searchLanguageInterpreterHint | rpxTranslate}}\n    </div>\n    <div class=\"auto-complete-container\">\n      <div id=\"language-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"languageNotSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageNotSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"language-entered-in-both-fields-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"languageEnteredInBothFieldsErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageEnteredInBothFieldsErrorMessage | rpxTranslate}}\n      </div>\n      <input aria-label=\"Language search box\" matInput [formControlName]=\"SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM\" [matAutocomplete]=\"autoSearchLanguage\"\n        class=\"govuk-input search-language__input\" type=\"text\">\n      <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLanguage=\"matAutocomplete\"\n        [displayWith]=\"displayLanguage\">\n        <mat-option *ngFor=\"let language of filteredLanguages$ | async\" [value]=\"language\">\n          {{language | languageInterpreterDisplay}}\n        </mat-option>\n        <mat-option *ngIf=\"noResults && searchTerm && searchTerm.length >= minSearchCharacters\" disabled>{{'No results found' | rpxTranslate}}</mat-option>\n      </mat-autocomplete>\n    </div>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes--conditional\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"enter-language-manually\" name=\"enter-language-manually\" type=\"checkbox\"\n          (change)=\"onEnterLanguageManually($event)\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"enter-language-manually\">\n          {{searchLanguageInterpreterStep.CHECKBOX_LABEL | rpxTranslate}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" *ngIf=\"isCheckboxEnabled\">\n        <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': languageNotEnteredErrorMessage || languageCharLimitErrorMessage }\">\n          <label class=\"govuk-label\" for=\"manual-language-entry\">{{searchLanguageInterpreterStep.INPUT_LABEL | rpxTranslate}}</label>\n          <div id=\"language-not-entered-error-message\" class=\"govuk-error-message\"\n            *ngIf=\"languageNotEnteredErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageNotEnteredErrorMessage | rpxTranslate}}\n          </div>\n          <div id=\"language-char-limit-error-message\" class=\"govuk-error-message\"\n            *ngIf=\"languageCharLimitErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageCharLimitErrorMessage | rpxTranslate}}\n          </div>\n          <input class=\"govuk-input govuk-input--width-20\" id=\"manual-language-entry\" [name]=\"SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY\" type=\"text\"\n            [formControlName]=\"SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\">\n  <button class=\"button button-primary\" type=\"button\" (click)=\"onNext()\">{{'Next' | rpxTranslate}}</button>\n</div>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}.hidden{display:none}.search-language__input{position:relative;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center left -2px;background-size:40px 40px;padding-left:35px}\n"] }]
-    }], () => [{ type: i1.RpxTranslationService }], { formGroup: [{
+        args: [{ selector: 'ccd-search-language-interpreter', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': languageNotSelectedErrorMessage || languageEnteredInBothFieldsErrorMessage}\">\n    <h1 class=\"govuk-label-wrapper\">\n      <label class=\"govuk-label govuk-label--m\" [for]=\"SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM\">\n        {{flagType | flagFieldDisplay:'name'}}\n      </label>\n    </h1>\n    <div id=\"language-search-box-hint\" class=\"govuk-hint\">\n      {{searchLanguageInterpreterHint | rpxTranslate}}\n    </div>\n    <div class=\"auto-complete-container\">\n      <div id=\"language-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"languageNotSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageNotSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"language-entered-in-both-fields-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"languageEnteredInBothFieldsErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageEnteredInBothFieldsErrorMessage | rpxTranslate}}\n      </div>\n      <input aria-label=\"Language search box\" matInput [formControlName]=\"SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM\" [matAutocomplete]=\"autoSearchLanguage\"\n        class=\"govuk-input search-language__input\" type=\"text\">\n      <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLanguage=\"matAutocomplete\"\n        [displayWith]=\"displayLanguage\">\n        <mat-option *ngFor=\"let language of filteredLanguages$ | async\" [value]=\"language\">\n          {{language | languageInterpreterDisplay}}\n        </mat-option>\n        <mat-option *ngIf=\"noResults && searchTerm && searchTerm.length >= minSearchCharacters\" disabled>{{'No results found' | rpxTranslate}}</mat-option>\n      </mat-autocomplete>\n    </div>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes--conditional\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"enter-language-manually\" name=\"enter-language-manually\" type=\"checkbox\"\n          (change)=\"onEnterLanguageManually($event)\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"enter-language-manually\">\n          {{searchLanguageInterpreterStep.CHECKBOX_LABEL | rpxTranslate}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" *ngIf=\"isCheckboxEnabled\">\n        <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': languageNotEnteredErrorMessage || languageCharLimitErrorMessage }\">\n          <label class=\"govuk-label\" for=\"manual-language-entry\">{{searchLanguageInterpreterStep.INPUT_LABEL | rpxTranslate}}</label>\n          <div id=\"language-not-entered-error-message\" class=\"govuk-error-message\"\n            *ngIf=\"languageNotEnteredErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageNotEnteredErrorMessage | rpxTranslate}}\n          </div>\n          <div id=\"language-char-limit-error-message\" class=\"govuk-error-message\"\n            *ngIf=\"languageCharLimitErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageCharLimitErrorMessage | rpxTranslate}}\n          </div>\n          <input class=\"govuk-input govuk-input--width-20\" id=\"manual-language-entry\" [name]=\"SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY\" type=\"text\"\n            [formControlName]=\"SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}.hidden{display:none}.search-language__input{position:relative;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center left -2px;background-size:40px 40px;padding-left:35px}\n"] }]
+    }], () => [{ type: i1.RpxTranslationService }, { type: MultipageComponentStateService }], { formGroup: [{
             type: Input
         }], flagType: [{
             type: Input
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchLanguageInterpreterComponent, { className: "SearchLanguageInterpreterComponent", filePath: "lib/shared/components/palette/case-flag/components/search-language-interpreter/search-language-interpreter.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchLanguageInterpreterComponent, { className: "SearchLanguageInterpreterComponent", filePath: "lib/shared/components/palette/case-flag/components/search-language-interpreter/search-language-interpreter.component.ts", lineNumber: 20 }); })();
 
 const _c0$p = a0 => ({ "form-group-error": a0 });
 function SelectFlagLocationComponent_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "span", 10);
+    i0.ɵɵelementStart(0, "div", 8)(1, "span", 9);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -23991,7 +24381,7 @@ function SelectFlagLocationComponent_div_9_ng_container_3_ng_container_2_Templat
 function SelectFlagLocationComponent_div_9_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
-    i0.ɵɵtemplate(2, SelectFlagLocationComponent_div_9_ng_container_3_ng_container_2_Template, 3, 3, "ng-container", 14);
+    i0.ɵɵtemplate(2, SelectFlagLocationComponent_div_9_ng_container_3_ng_container_2_Template, 3, 3, "ng-container", 13);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const flagsInstance_r2 = i0.ɵɵnextContext().$implicit;
@@ -24011,10 +24401,10 @@ function SelectFlagLocationComponent_div_9_ng_container_4_Template(rf, ctx) { if
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.caseLevelFlagLabel), " ");
 } }
 function SelectFlagLocationComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "input", 12);
-    i0.ɵɵelementStart(2, "label", 13);
-    i0.ɵɵtemplate(3, SelectFlagLocationComponent_div_9_ng_container_3_Template, 3, 2, "ng-container", 14)(4, SelectFlagLocationComponent_div_9_ng_container_4_Template, 3, 3, "ng-container", 14);
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "input", 11);
+    i0.ɵɵelementStart(2, "label", 12);
+    i0.ɵɵtemplate(3, SelectFlagLocationComponent_div_9_ng_container_3_Template, 3, 2, "ng-container", 13)(4, SelectFlagLocationComponent_div_9_ng_container_4_Template, 3, 3, "ng-container", 13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const flagsInstance_r2 = ctx.$implicit;
@@ -24030,18 +24420,7 @@ function SelectFlagLocationComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !flagsInstance_r2.flags.partyName);
 } }
-function SelectFlagLocationComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "button", 16);
-    i0.ɵɵlistener("click", function SelectFlagLocationComponent_div_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNext()); });
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "Next"));
-} }
-class SelectFlagLocationComponent {
+class SelectFlagLocationComponent extends AbstractJourneyComponent {
     formGroup;
     flagsData;
     isDisplayContextParameterExternal = false;
@@ -24116,8 +24495,14 @@ class SelectFlagLocationComponent {
         // Return case flag field state and error messages to the parent
         this.caseFlagStateEmitter.emit({ currentCaseFlagFieldState: CaseFlagFieldState.FLAG_TYPE, errorMessages: this.errorMessages });
     }
-    static ɵfac = function SelectFlagLocationComponent_Factory(t) { return new (t || SelectFlagLocationComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectFlagLocationComponent, selectors: [["ccd-select-flag-location"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", isDisplayContextParameterExternal: "isDisplayContextParameterExternal" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 11, vars: 10, consts: [[3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "flag-location-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "flag-location-heading", 1, "govuk-fieldset__heading"], ["id", "flag-location-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["class", "govuk-button-group", 4, "ngIf"], ["id", "flag-location-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], [4, "ngIf"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"]], template: function SelectFlagLocationComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵSelectFlagLocationComponent_BaseFactory; return function SelectFlagLocationComponent_Factory(t) { return (ɵSelectFlagLocationComponent_BaseFactory || (ɵSelectFlagLocationComponent_BaseFactory = i0.ɵɵgetInheritedFactory(SelectFlagLocationComponent)))(t || SelectFlagLocationComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectFlagLocationComponent, selectors: [["ccd-select-flag-location"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", isDisplayContextParameterExternal: "isDisplayContextParameterExternal" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 9, consts: [[3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "flag-location-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "flag-location-heading", 1, "govuk-fieldset__heading"], ["id", "flag-location-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "flag-location-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], [4, "ngIf"]], template: function SelectFlagLocationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "fieldset", 2)(3, "legend", 3)(4, "h1", 4);
             i0.ɵɵtext(5);
@@ -24128,24 +24513,21 @@ class SelectFlagLocationComponent {
             i0.ɵɵtemplate(9, SelectFlagLocationComponent_div_9_Template, 5, 9, "div", 7);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵtemplate(10, SelectFlagLocationComponent_div_10_Template, 4, 3, "div", 8);
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$p, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$p, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 6, ctx.flagLocationTitle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 5, ctx.flagLocationTitle), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.flagLocationNotSelectedErrorMessage);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngForOf", ctx.filteredFlagsData);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.caseFlagsConfigError);
         } }, dependencies: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectFlagLocationComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-select-flag-location', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"flag-location-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"flag-location-heading\" class=\"govuk-fieldset__heading\">\n          {{flagLocationTitle | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"flag-location-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"flagLocationNotSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagLocationNotSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagsInstance of filteredFlagsData; index as i\">\n          <input class=\"govuk-radios__input\" id=\"flag-location-{{i}}\" [name]=\"selectedLocationControlName\"\n            type=\"radio\" [value]=\"flagsInstance\" [formControlName]=\"selectedLocationControlName\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-location-{{i}}\">\n            <ng-container *ngIf=\"flagsInstance.flags.partyName\">\n              {{flagsInstance.flags.partyName}}\n              <ng-container *ngIf=\"flagsInstance.flags.roleOnCase\">\n                ({{flagsInstance.flags.roleOnCase | rpxTranslate}})\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!flagsInstance.flags.partyName\">\n              {{caseLevelFlagLabel | rpxTranslate}}\n            </ng-container>\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\" *ngIf=\"!caseFlagsConfigError\">\n  <button class=\"button button-primary\" type=\"button\" (click)=\"onNext()\">{{'Next' | rpxTranslate}}</button>\n</div>\n" }]
+        args: [{ selector: 'ccd-select-flag-location', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"flag-location-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"flag-location-heading\" class=\"govuk-fieldset__heading\">\n          {{flagLocationTitle | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"flag-location-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"flagLocationNotSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagLocationNotSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagsInstance of filteredFlagsData; index as i\">\n          <input class=\"govuk-radios__input\" id=\"flag-location-{{i}}\" [name]=\"selectedLocationControlName\"\n            type=\"radio\" [value]=\"flagsInstance\" [formControlName]=\"selectedLocationControlName\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-location-{{i}}\">\n            <ng-container *ngIf=\"flagsInstance.flags.partyName\">\n              {{flagsInstance.flags.partyName}}\n              <ng-container *ngIf=\"flagsInstance.flags.roleOnCase\">\n                ({{flagsInstance.flags.roleOnCase | rpxTranslate}})\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"!flagsInstance.flags.partyName\">\n              {{caseLevelFlagLabel | rpxTranslate}}\n            </ng-container>\n          </label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>" }]
     }], null, { formGroup: [{
             type: Input
         }], flagsData: [{
@@ -24155,7 +24537,7 @@ class SelectFlagLocationComponent {
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectFlagLocationComponent, { className: "SelectFlagLocationComponent", filePath: "lib/shared/components/palette/case-flag/components/select-flag-location/select-flag-location.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectFlagLocationComponent, { className: "SelectFlagLocationComponent", filePath: "lib/shared/components/palette/case-flag/components/select-flag-location/select-flag-location.component.ts", lineNumber: 12 }); })();
 
 const _c0$o = a0 => ({ "form-group-error": a0 });
 const _c1$8 = a0 => ({ "govuk-input--error": a0 });
@@ -24178,7 +24560,7 @@ function SelectFlagTypeComponent_ng_container_0_ng_template_6_Template(rf, ctx)
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(1, 1, ctx_r0.cachedFlagType, "name"), " ");
 } }
 function SelectFlagTypeComponent_ng_container_0_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13)(1, "span", 14);
+    i0.ɵɵelementStart(0, "div", 12)(1, "span", 13);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24193,9 +24575,9 @@ function SelectFlagTypeComponent_ng_container_0_div_8_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagTypeNotSelectedErrorMessage), " ");
 } }
 function SelectFlagTypeComponent_ng_container_0_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "input", 16);
-    i0.ɵɵelementStart(2, "label", 17);
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵelement(1, "input", 15);
+    i0.ɵɵelementStart(2, "label", 16);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "flagFieldDisplay");
     i0.ɵɵelementEnd()();
@@ -24212,7 +24594,7 @@ function SelectFlagTypeComponent_ng_container_0_div_10_Template(rf, ctx) { if (r
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 8, flagType_r2, "name"), " ");
 } }
 function SelectFlagTypeComponent_ng_container_0_div_11_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 14);
+    i0.ɵɵelementStart(0, "div", 22)(1, "span", 13);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24227,9 +24609,9 @@ function SelectFlagTypeComponent_ng_container_0_div_11_div_6_Template(rf, ctx) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagTypeErrorMessage), " ");
 } }
 function SelectFlagTypeComponent_ng_container_0_div_11_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵelement(1, "input", 25);
-    i0.ɵɵelementStart(2, "label", 26);
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "input", 24);
+    i0.ɵɵelementStart(2, "label", 25);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd()();
@@ -24241,14 +24623,14 @@ function SelectFlagTypeComponent_ng_container_0_div_11_div_8_Template(rf, ctx) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 3, "This flag should only be visible to HMCTS Staff"), " ");
 } }
 function SelectFlagTypeComponent_ng_container_0_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 4)(2, "label", 19);
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 3)(2, "label", 18);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, SelectFlagTypeComponent_ng_container_0_div_11_div_6_Template, 6, 6, "div", 20);
-    i0.ɵɵelement(7, "input", 21);
-    i0.ɵɵtemplate(8, SelectFlagTypeComponent_ng_container_0_div_11_div_8_Template, 5, 5, "div", 22);
+    i0.ɵɵtemplate(6, SelectFlagTypeComponent_ng_container_0_div_11_div_6_Template, 6, 6, "div", 19);
+    i0.ɵɵelement(7, "input", 20);
+    i0.ɵɵtemplate(8, SelectFlagTypeComponent_ng_container_0_div_11_div_8_Template, 5, 5, "div", 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -24264,13 +24646,13 @@ function SelectFlagTypeComponent_ng_container_0_div_11_Template(rf, ctx) { if (r
     i0.ɵɵproperty("ngIf", !ctx_r0.isDisplayContextParameterExternal && !ctx_r0.isCaseLevelFlag && ctx_r0.isDisplayContextParameter2Point1Enabled);
 } }
 function SelectFlagTypeComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0, 3);
-    i0.ɵɵelementStart(1, "div", 4)(2, "fieldset", 5)(3, "legend", 6)(4, "h1", 7);
-    i0.ɵɵtemplate(5, SelectFlagTypeComponent_ng_container_0_ng_container_5_Template, 4, 5, "ng-container", 8)(6, SelectFlagTypeComponent_ng_container_0_ng_template_6_Template, 2, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerStart(0, 2);
+    i0.ɵɵelementStart(1, "div", 3)(2, "fieldset", 4)(3, "legend", 5)(4, "h1", 6);
+    i0.ɵɵtemplate(5, SelectFlagTypeComponent_ng_container_0_ng_container_5_Template, 4, 5, "ng-container", 7)(6, SelectFlagTypeComponent_ng_container_0_ng_template_6_Template, 2, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(8, SelectFlagTypeComponent_ng_container_0_div_8_Template, 6, 6, "div", 9);
-    i0.ɵɵelementStart(9, "div", 10);
-    i0.ɵɵtemplate(10, SelectFlagTypeComponent_ng_container_0_div_10_Template, 5, 11, "div", 11)(11, SelectFlagTypeComponent_ng_container_0_div_11_Template, 9, 15, "div", 12);
+    i0.ɵɵtemplate(8, SelectFlagTypeComponent_ng_container_0_div_8_Template, 6, 6, "div", 8);
+    i0.ɵɵelementStart(9, "div", 9);
+    i0.ɵɵtemplate(10, SelectFlagTypeComponent_ng_container_0_div_10_Template, 5, 11, "div", 10)(11, SelectFlagTypeComponent_ng_container_0_div_11_Template, 9, 15, "div", 11);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -24280,7 +24662,7 @@ function SelectFlagTypeComponent_ng_container_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0$o, ctx_r0.flagTypeNotSelectedErrorMessage.length > 0));
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", !ctx_r0.cachedFlagType)("ngIfElse", priorFlagTypeSelected_r4);
+    i0.ɵɵproperty("ngIf", !ctx_r0.cachedFlagType || ctx_r0.subJourneyIndex == 0)("ngIfElse", priorFlagTypeSelected_r4);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r0.flagTypeNotSelectedErrorMessage.length > 0);
     i0.ɵɵadvance(2);
@@ -24288,18 +24670,7 @@ function SelectFlagTypeComponent_ng_container_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.otherFlagTypeSelected);
 } }
-function SelectFlagTypeComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "button", 28);
-    i0.ɵɵlistener("click", function SelectFlagTypeComponent_div_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onNext()); });
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, "Next"));
-} }
-class SelectFlagTypeComponent {
+class SelectFlagTypeComponent extends AbstractJourneyComponent {
     caseFlagRefdataService;
     formGroup;
     jurisdiction;
@@ -24321,6 +24692,8 @@ class SelectFlagTypeComponent {
     flagTypeControlChangesSubscription;
     caseFlagFormField = CaseFlagFormFields;
     isCaseLevelFlag = false;
+    cachedRDFlagTypes;
+    subJourneyIndex = 0;
     maxCharactersForOtherFlagType = 80;
     // Code for "Other" flag type as defined in Reference Data
     otherFlagTypeCode = 'OT0001';
@@ -24328,15 +24701,16 @@ class SelectFlagTypeComponent {
     get caseFlagWizardStepTitle() {
         return CaseFlagWizardStepTitle;
     }
+    constructor(caseFlagRefdataService, pageStateService) {
+        super(pageStateService);
+        this.caseFlagRefdataService = caseFlagRefdataService;
+    }
     get selectedFlagType() {
         return this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.value;
     }
     get otherFlagTypeSelected() {
         return this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.value?.flagCode === this.otherFlagTypeCode;
     }
-    constructor(caseFlagRefdataService) {
-        this.caseFlagRefdataService = caseFlagRefdataService;
-    }
     ngOnInit() {
         this.isCaseLevelFlag = this.selectedFlagsLocation?.flags?.flagsCaseFieldId === this.caseLevelCaseFlagsFieldId;
         this.flagTypes = [];
@@ -24347,7 +24721,7 @@ class SelectFlagTypeComponent {
         this.formGroup.addControl(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY, new FormControl(false));
         // Should clear descriptionControlName if flagTypeControlName is changed
         this.flagTypeControlChangesSubscription = this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.valueChanges
-            .subscribe(_ => {
+            .subscribe((_) => {
             this.formGroup.get(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION)?.setValue('');
             this.cachedPath = [];
             // required to clear language interpreter
@@ -24361,8 +24735,8 @@ class SelectFlagTypeComponent {
             this.flagRefdata$ = this.caseFlagRefdataService
                 .getCaseFlagsRefdata(this.hmctsServiceId, flagType, true, this.isDisplayContextParameterExternal)
                 .subscribe({
-                next: flagTypes => this.processFlagTypes(flagTypes),
-                error: error => this.onRefdataError(error)
+                next: (flagTypes) => this.processFlagTypes(flagTypes),
+                error: (error) => this.onRefdataError(error)
             });
         }
         else {
@@ -24370,13 +24744,13 @@ class SelectFlagTypeComponent {
             this.flagRefdata$ = this.caseFlagRefdataService.getHmctsServiceDetailsByCaseType(this.caseTypeId)
                 .pipe(
             // If an error occurs retrieving HMCTS service details by case type ID, try by service name instead
-            catchError(_ => this.caseFlagRefdataService.getHmctsServiceDetailsByServiceName(this.jurisdiction)), 
+            catchError((_) => this.caseFlagRefdataService.getHmctsServiceDetailsByServiceName(this.jurisdiction)), 
             // Use switchMap to return an inner Observable of the flag types data, having received the service details
             // including service_code. This avoids having nested `subscribe`s, which is an anti-pattern!
-            switchMap(serviceDetails => this.caseFlagRefdataService.getCaseFlagsRefdata(serviceDetails[0].service_code, flagType, true, this.isDisplayContextParameterExternal)))
+            switchMap((serviceDetails) => this.caseFlagRefdataService.getCaseFlagsRefdata(serviceDetails[0].service_code, flagType, true, this.isDisplayContextParameterExternal)))
                 .subscribe({
-                next: flagTypes => this.processFlagTypes(flagTypes),
-                error: error => this.onRefdataError(error)
+                next: (flagTypes) => this.processFlagTypes(flagTypes),
+                error: (error) => this.onRefdataError(error)
             });
         }
     }
@@ -24404,9 +24778,39 @@ class SelectFlagTypeComponent {
             // when displaying the next set of child flags
             this.cachedFlagType = this.selectedFlagType;
             this.flagTypes = this.selectedFlagType.childFlags;
-            this.cachedPath?.shift();
-            this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.setValue(this.cachedPath?.length ? this.cachedPath[0] : null, { emitEvent: false });
+            if (this.cachedPath.length !== 0 && this.cachedPath[this.subJourneyIndex] === this.selectedFlagType) {
+                this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.setValue(this.cachedPath[this.subJourneyIndex + 1], { emitEvent: false });
+            }
+            else {
+                this.cachedPath?.shift();
+                const value = this.cachedPath?.length ? this.cachedPath[0] : null;
+                this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.setValue(value, { emitEvent: false });
+            }
+            this.subJourneyIndex++;
+        }
+    }
+    // Simplified version of the onPrevious method with optimized code
+    onPrevious() {
+        if (this.cachedFlagType) {
+            if (this.cachedFlagType.Path.length === 1) {
+                this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.setValue(this.cachedFlagType, { emitEvent: false });
+                this.flagTypes = this.cachedRDFlagTypes[0].childFlags;
+            }
+            else {
+                let currentPath = this.cachedRDFlagTypes[0];
+                const pathToSearch = this.cachedFlagType.Path.slice(1);
+                for (const pathElement of pathToSearch) {
+                    const foundFlag = currentPath.childFlags.find((flag) => flag.name === pathElement);
+                    if (foundFlag) {
+                        currentPath = foundFlag;
+                    }
+                }
+                this.formGroup.get(CaseFlagFormFields.FLAG_TYPE)?.setValue(this.cachedFlagType, { emitEvent: false });
+                this.flagTypes = currentPath.childFlags;
+                this.cachedFlagType = currentPath;
+            }
         }
+        this.subJourneyIndex = Math.max(0, this.subJourneyIndex - 1);
     }
     // Identity function for trackBy use by *ngFor for flagTypes in HTML template
     identifyFlagType(_, flagType) {
@@ -24445,18 +24849,33 @@ class SelectFlagTypeComponent {
         }
     }
     processFlagTypes(flagTypes) {
-        // First (and only) object in the returned array should be the top-level "Party" flag type
-        // The "Other" flag type should be removed from the top level if the user is external
-        this.flagTypes = flagTypes[0].childFlags.filter((flag) => this.isDisplayContextParameterExternal ? flag.flagCode !== this.otherFlagTypeCode : true);
+        const prevJourneyPage = this.multipageComponentStateService.getJourneyCollection()[0];
+        const { journeyPreviousPageNumber, journeyPageNumber } = prevJourneyPage;
+        this.cachedRDFlagTypes = flagTypes;
+        if (this.selectedFlagType && (journeyPreviousPageNumber > journeyPageNumber)) {
+            const selectedFlagType = this.selectedFlagType;
+            const pathToSearch = selectedFlagType.Path.slice(1);
+            let currentPath = flagTypes[0];
+            for (const pathElement of pathToSearch) {
+                const foundFlag = currentPath.childFlags.find((flag) => flag.name === pathElement);
+                if (foundFlag) {
+                    currentPath = foundFlag;
+                }
+            }
+            this.flagTypes = currentPath.childFlags;
+            this.cachedFlagType = currentPath;
+        }
+        else {
+            this.flagTypes = flagTypes[0].childFlags.filter((flag) => this.isDisplayContextParameterExternal ? flag.flagCode !== this.otherFlagTypeCode : true);
+        }
         const formControl = this.formGroup.get(CaseFlagFormFields.FLAG_TYPE);
         if (formControl?.value) {
-            // Cache Path based on existing flagCode -- needed for nested choices
-            const [foundFlagType, path] = FlagType.searchPathByFlagTypeObject(formControl.value, this.flagTypes);
-            this.cachedPath = [
-                ...path,
-                foundFlagType
-            ];
-            formControl.setValue(this.cachedPath[0], { emitEvent: false });
+            const [foundFlagType, path] = FlagType.searchPathByFlagTypeObject(formControl.value, this.cachedRDFlagTypes[0].childFlags);
+            this.cachedPath = [...path, foundFlagType];
+            formControl.setValue((this.selectedFlagType && (journeyPreviousPageNumber > journeyPageNumber)) ? this.cachedPath[this.cachedPath.length - 1] : this.cachedPath[0], { emitEvent: false });
+            if (this.cachedPath.length !== 0) {
+                this.subJourneyIndex = this.cachedPath.length - 1;
+            }
         }
     }
     onRefdataError(error) {
@@ -24467,19 +24886,29 @@ class SelectFlagTypeComponent {
         // Return case flag field state and error messages to the parent
         this.caseFlagStateEmitter.emit({ currentCaseFlagFieldState: CaseFlagFieldState.FLAG_TYPE, errorMessages: this.errorMessages });
     }
-    static ɵfac = function SelectFlagTypeComponent_Factory(t) { return new (t || SelectFlagTypeComponent)(i0.ɵɵdirectiveInject(CaseFlagRefdataService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectFlagTypeComponent, selectors: [["ccd-select-flag-type"]], inputs: { formGroup: "formGroup", jurisdiction: "jurisdiction", caseTypeId: "caseTypeId", hmctsServiceId: "hmctsServiceId", isDisplayContextParameterExternal: "isDisplayContextParameterExternal", isDisplayContextParameter2Point1Enabled: "isDisplayContextParameter2Point1Enabled", selectedFlagsLocation: "selectedFlagsLocation" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter", flagCommentsOptionalEmitter: "flagCommentsOptionalEmitter" }, decls: 2, vars: 2, consts: [["priorFlagTypeSelected", ""], [3, "formGroup", 4, "ngIf"], ["class", "govuk-button-group", 4, "ngIf"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "flag-type-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "flag-type-heading", 1, "govuk-fieldset__heading", "govuk-!-margin-bottom-1"], [4, "ngIf", "ngIfElse"], ["id", "flag-type-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "govuk-radios__conditional", "id", "conditional-flagType", 4, "ngIf"], ["id", "flag-type-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "conditional-flagType", 1, "govuk-radios__conditional"], ["for", "other-flag-type-description", 1, "govuk-label"], ["id", "flag-type-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "other-flag-type-description", "type", "text", 1, "govuk-input", "govuk-!-width-one-half", 3, "ngClass", "name", "formControlName"], ["class", "govuk-checkboxes__item govuk-!-margin-top-4", 4, "ngIf"], ["id", "flag-type-error-message", 1, "govuk-error-message"], [1, "govuk-checkboxes__item", "govuk-!-margin-top-4"], ["id", "is-visible-externally", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "name", "formControlName"], ["for", "is-visible-externally", 1, "govuk-label", "govuk-checkboxes__label"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"]], template: function SelectFlagTypeComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, SelectFlagTypeComponent_ng_container_0_Template, 12, 10, "ng-container", 1)(1, SelectFlagTypeComponent_div_1_Template, 4, 3, "div", 2);
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    previous() {
+        this.onPrevious();
+        if (this.subJourneyIndex <= 0) {
+            super.previous();
+        }
+    }
+    static ɵfac = function SelectFlagTypeComponent_Factory(t) { return new (t || SelectFlagTypeComponent)(i0.ɵɵdirectiveInject(CaseFlagRefdataService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectFlagTypeComponent, selectors: [["ccd-select-flag-type"]], inputs: { formGroup: "formGroup", jurisdiction: "jurisdiction", caseTypeId: "caseTypeId", hmctsServiceId: "hmctsServiceId", isDisplayContextParameterExternal: "isDisplayContextParameterExternal", isDisplayContextParameter2Point1Enabled: "isDisplayContextParameter2Point1Enabled", selectedFlagsLocation: "selectedFlagsLocation" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter", flagCommentsOptionalEmitter: "flagCommentsOptionalEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["priorFlagTypeSelected", ""], [3, "formGroup", 4, "ngIf"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "flag-type-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "flag-type-heading", 1, "govuk-fieldset__heading", "govuk-!-margin-bottom-1"], [4, "ngIf", "ngIfElse"], ["id", "flag-type-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "govuk-radios__conditional", "id", "conditional-flagType", 4, "ngIf"], ["id", "flag-type-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "conditional-flagType", 1, "govuk-radios__conditional"], ["for", "other-flag-type-description", 1, "govuk-label"], ["id", "flag-type-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "other-flag-type-description", "type", "text", 1, "govuk-input", "govuk-!-width-one-half", 3, "ngClass", "name", "formControlName"], ["class", "govuk-checkboxes__item govuk-!-margin-top-4", 4, "ngIf"], ["id", "flag-type-error-message", 1, "govuk-error-message"], [1, "govuk-checkboxes__item", "govuk-!-margin-top-4"], ["id", "is-visible-externally", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "name", "formControlName"], ["for", "is-visible-externally", 1, "govuk-label", "govuk-checkboxes__label"]], template: function SelectFlagTypeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, SelectFlagTypeComponent_ng_container_0_Template, 12, 10, "ng-container", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.flagTypes == null ? null : ctx.flagTypes.length);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.refdataError);
         } }, styles: [".hidden[_ngcontent-%COMP%]{display:none}.validation-error[_ngcontent-%COMP%]{cursor:pointer;text-decoration:underline;color:#d4351c}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectFlagTypeComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-select-flag-type', template: "<ng-container *ngIf=\"flagTypes?.length\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': flagTypeNotSelectedErrorMessage.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"flag-type-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"flag-type-heading\" class=\"govuk-fieldset__heading govuk-!-margin-bottom-1\">\n          <ng-container *ngIf=\"!cachedFlagType; else priorFlagTypeSelected\">\n            {{\n              isDisplayContextParameterExternal\n                ? (caseFlagWizardStepTitle.SELECT_CASE_FLAG_EXTERNAL | rpxTranslate)\n                : (caseFlagWizardStepTitle.SELECT_CASE_FLAG | rpxTranslate)\n            }}\n          </ng-container>\n          <ng-template #priorFlagTypeSelected>\n            {{cachedFlagType | flagFieldDisplay:'name'}}\n          </ng-template>\n        </h1>\n      </legend>\n      <div id=\"flag-type-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"flagTypeNotSelectedErrorMessage.length > 0\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagTypeNotSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagType of flagTypes; index as i; trackBy: identifyFlagType\">\n          <input class=\"govuk-radios__input\" id=\"flag-type-{{i}}\" [name]=\"caseFlagFormField.FLAG_TYPE\"\n            type=\"radio\" [value]=\"flagType\"\n            [formControlName]=\"caseFlagFormField.FLAG_TYPE\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-type-{{i}}\">\n            {{flagType | flagFieldDisplay:'name'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__conditional\" *ngIf=\"otherFlagTypeSelected\" id=\"conditional-flagType\">\n          <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': flagTypeErrorMessage.length > 0}\">\n            <label class=\"govuk-label\" for=\"other-flag-type-description\">\n              {{\n                isDisplayContextParameterExternal\n                  ? (caseFlagWizardStepTitle.OTHER_FLAG_TYPE_DESCRIPTION_EXTERNAL | rpxTranslate)\n                  : (caseFlagWizardStepTitle.OTHER_FLAG_TYPE_DESCRIPTION | rpxTranslate)\n              }}\n            </label>\n            <div id=\"flag-type-error-message\" class=\"govuk-error-message\" *ngIf=\"flagTypeErrorMessage.length > 0\">\n              <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagTypeErrorMessage | rpxTranslate}}\n            </div>\n            <input class=\"govuk-input govuk-!-width-one-half\"\n              [ngClass]=\"{'govuk-input--error': flagTypeErrorMessage.length > 0}\"\n              id=\"other-flag-type-description\" [name]=\"caseFlagFormField.OTHER_FLAG_DESCRIPTION\" type=\"text\"\n              [formControlName]=\"caseFlagFormField.OTHER_FLAG_DESCRIPTION\"/>\n            <div class=\"govuk-checkboxes__item govuk-!-margin-top-4\"\n              *ngIf=\"!isDisplayContextParameterExternal && !isCaseLevelFlag && isDisplayContextParameter2Point1Enabled\">\n              <input class=\"govuk-checkboxes__input\" id=\"is-visible-externally\" type=\"checkbox\"\n                [name]=\"caseFlagFormField.IS_VISIBLE_INTERNALLY_ONLY\" [formControlName]=\"caseFlagFormField.IS_VISIBLE_INTERNALLY_ONLY\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"is-visible-externally\">\n                {{'This flag should only be visible to HMCTS Staff' | rpxTranslate}}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\" *ngIf=\"!refdataError\">\n  <button class=\"button button-primary\" type=\"button\" (click)=\"onNext()\">{{'Next' | rpxTranslate}}</button>\n</div>\n", styles: [".hidden{display:none}.validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
-    }], () => [{ type: CaseFlagRefdataService }], { formGroup: [{
+        args: [{ selector: 'ccd-select-flag-type', template: "<ng-container *ngIf=\"flagTypes?.length\" [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': flagTypeNotSelectedErrorMessage.length > 0}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"flag-type-heading\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n        <h1 id=\"flag-type-heading\" class=\"govuk-fieldset__heading govuk-!-margin-bottom-1\">\n          <ng-container *ngIf=\"!cachedFlagType || subJourneyIndex == 0; else priorFlagTypeSelected\">\n            {{\n            isDisplayContextParameterExternal\n            ? (caseFlagWizardStepTitle.SELECT_CASE_FLAG_EXTERNAL | rpxTranslate)\n            : (caseFlagWizardStepTitle.SELECT_CASE_FLAG | rpxTranslate)\n            }}\n          </ng-container>\n          <ng-template #priorFlagTypeSelected>\n            {{cachedFlagType | flagFieldDisplay:'name'}}\n          </ng-template>\n        </h1>\n      </legend>\n      <div id=\"flag-type-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"flagTypeNotSelectedErrorMessage.length > 0\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagTypeNotSelectedErrorMessage |\n        rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n        <div class=\"govuk-radios__item\" *ngFor=\"let flagType of flagTypes; index as i; trackBy: identifyFlagType\">\n          <input class=\"govuk-radios__input\" id=\"flag-type-{{i}}\" [name]=\"caseFlagFormField.FLAG_TYPE\" type=\"radio\"\n            [value]=\"flagType\" [formControlName]=\"caseFlagFormField.FLAG_TYPE\" />\n          <label class=\"govuk-label govuk-radios__label\" for=\"flag-type-{{i}}\">\n            {{flagType | flagFieldDisplay:'name'}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__conditional\" *ngIf=\"otherFlagTypeSelected\" id=\"conditional-flagType\">\n          <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': flagTypeErrorMessage.length > 0}\">\n            <label class=\"govuk-label\" for=\"other-flag-type-description\">\n              {{\n              isDisplayContextParameterExternal\n              ? (caseFlagWizardStepTitle.OTHER_FLAG_TYPE_DESCRIPTION_EXTERNAL | rpxTranslate)\n              : (caseFlagWizardStepTitle.OTHER_FLAG_TYPE_DESCRIPTION | rpxTranslate)\n              }}\n            </label>\n            <div id=\"flag-type-error-message\" class=\"govuk-error-message\" *ngIf=\"flagTypeErrorMessage.length > 0\">\n              <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagTypeErrorMessage |\n              rpxTranslate}}\n            </div>\n            <input class=\"govuk-input govuk-!-width-one-half\"\n              [ngClass]=\"{'govuk-input--error': flagTypeErrorMessage.length > 0}\" id=\"other-flag-type-description\"\n              [name]=\"caseFlagFormField.OTHER_FLAG_DESCRIPTION\" type=\"text\"\n              [formControlName]=\"caseFlagFormField.OTHER_FLAG_DESCRIPTION\" />\n            <div class=\"govuk-checkboxes__item govuk-!-margin-top-4\"\n              *ngIf=\"!isDisplayContextParameterExternal && !isCaseLevelFlag && isDisplayContextParameter2Point1Enabled\">\n              <input class=\"govuk-checkboxes__input\" id=\"is-visible-externally\" type=\"checkbox\"\n                [name]=\"caseFlagFormField.IS_VISIBLE_INTERNALLY_ONLY\"\n                [formControlName]=\"caseFlagFormField.IS_VISIBLE_INTERNALLY_ONLY\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"is-visible-externally\">\n                {{'This flag should only be visible to HMCTS Staff' | rpxTranslate}}\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>", styles: [".hidden{display:none}.validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
+    }], () => [{ type: CaseFlagRefdataService }, { type: MultipageComponentStateService }], { formGroup: [{
             type: Input
         }], jurisdiction: [{
             type: Input
@@ -24498,35 +24927,35 @@ class SelectFlagTypeComponent {
         }], flagCommentsOptionalEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectFlagTypeComponent, { className: "SelectFlagTypeComponent", filePath: "lib/shared/components/palette/case-flag/components/select-flag-type/select-flag-type.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectFlagTypeComponent, { className: "SelectFlagTypeComponent", filePath: "lib/shared/components/palette/case-flag/components/select-flag-type/select-flag-type.component.ts", lineNumber: 19 }); })();
 
 const _c0$n = a0 => ({ "form-group-error": a0 });
 const _c1$7 = a0 => ({ "govuk-tag--grey": a0 });
 function UpdateFlagComponent_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelementStart(0, "div", 15);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "updateFlagTitleDisplay");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r1.selectedFlag == null ? null : ctx_r1.selectedFlag.flagDetailDisplay == null ? null : ctx_r1.selectedFlag.flagDetailDisplay.flagDetail), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.selectedFlag == null ? null : ctx_r0.selectedFlag.flagDetailDisplay == null ? null : ctx_r0.selectedFlag.flagDetailDisplay.flagDetail), " ");
 } }
 function UpdateFlagComponent_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelementStart(0, "div", 16);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r1.updateFlagStepEnum.COMMENT_HINT_TEXT_EXTERNAL), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.updateFlagStepEnum.COMMENT_HINT_TEXT_EXTERNAL), " ");
 } }
 function UpdateFlagComponent_ng_container_15_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "span", 26);
+    i0.ɵɵelementStart(0, "div", 23)(1, "span", 24);
     i0.ɵɵtext(2, "!");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "strong", 27)(4, "span", 28);
+    i0.ɵɵelementStart(3, "strong", 25)(4, "span", 26);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24534,14 +24963,14 @@ function UpdateFlagComponent_ng_container_15_div_5_Template(rf, ctx) { if (rf &
     i0.ɵɵpipe(8, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 2, "Warning"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 4, ctx_r1.updateFlagStepEnum.WARNING_TEXT), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 4, ctx_r0.updateFlagStepEnum.WARNING_TEXT), " ");
 } }
 function UpdateFlagComponent_ng_container_15_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "span", 30);
+    i0.ɵɵelementStart(0, "div", 27)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24549,14 +24978,14 @@ function UpdateFlagComponent_ng_container_15_div_6_Template(rf, ctx) { if (rf &
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.commentsNotEnteredErrorMessage), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.commentsNotEnteredErrorMessage), " ");
 } }
 function UpdateFlagComponent_ng_container_15_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31)(1, "span", 30);
+    i0.ɵɵelementStart(0, "div", 29)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24564,64 +24993,64 @@ function UpdateFlagComponent_ng_container_15_div_7_Template(rf, ctx) { if (rf &
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.commentsCharLimitErrorMessage), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.commentsCharLimitErrorMessage), " ");
 } }
 function UpdateFlagComponent_ng_container_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 19);
+    i0.ɵɵelementStart(1, "div", 17);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, UpdateFlagComponent_ng_container_15_div_5_Template, 9, 6, "div", 20)(6, UpdateFlagComponent_ng_container_15_div_6_Template, 6, 6, "div", 21)(7, UpdateFlagComponent_ng_container_15_div_7_Template, 6, 6, "div", 22);
-    i0.ɵɵelementStart(8, "textarea", 23);
+    i0.ɵɵtemplate(5, UpdateFlagComponent_ng_container_15_div_5_Template, 9, 6, "div", 18)(6, UpdateFlagComponent_ng_container_15_div_6_Template, 6, 6, "div", 19)(7, UpdateFlagComponent_ng_container_15_div_7_Template, 6, 6, "div", 20);
+    i0.ɵɵelementStart(8, "textarea", 21);
     i0.ɵɵtext(9, "          ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 24);
+    i0.ɵɵelementStart(10, "div", 22);
     i0.ɵɵtext(11);
     i0.ɵɵpipe(12, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.internalUserUpdate ? i0.ɵɵpipeBind1(3, 8, ctx_r1.updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL) : i0.ɵɵpipeBind1(4, 10, ctx_r1.updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL_2_POINT_1), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.internalUserUpdate ? i0.ɵɵpipeBind1(3, 8, ctx_r0.updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL) : i0.ɵɵpipeBind1(4, 10, ctx_r0.updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL_2_POINT_1), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.internalUser2Point1EnabledUpdate && ctx_r1.externallyVisibleFlag);
+    i0.ɵɵproperty("ngIf", ctx_r0.internalUser2Point1EnabledUpdate && ctx_r0.externallyVisibleFlag);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.commentsNotEnteredErrorMessage);
+    i0.ɵɵproperty("ngIf", ctx_r0.commentsNotEnteredErrorMessage);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.commentsCharLimitErrorMessage);
+    i0.ɵɵproperty("ngIf", ctx_r0.commentsCharLimitErrorMessage);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r1.caseFlagFormFields.COMMENTS)("name", ctx_r1.caseFlagFormFields.COMMENTS)("formControlName", ctx_r1.caseFlagFormFields.COMMENTS);
+    i0.ɵɵproperty("id", ctx_r0.caseFlagFormFields.COMMENTS)("name", ctx_r0.caseFlagFormFields.COMMENTS)("formControlName", ctx_r0.caseFlagFormFields.COMMENTS);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 12, ctx_r1.updateFlagStepEnum.CHARACTER_LIMIT_INFO), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 12, ctx_r0.updateFlagStepEnum.CHARACTER_LIMIT_INFO), " ");
 } }
 function UpdateFlagComponent_ng_template_16_ng_container_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function UpdateFlagComponent_ng_template_16_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, UpdateFlagComponent_ng_template_16_ng_container_0_ng_container_1_Template, 1, 0, "ng-container", 33);
+    i0.ɵɵtemplate(1, UpdateFlagComponent_ng_template_16_ng_container_0_ng_container_1_Template, 1, 0, "ng-container", 31);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     i0.ɵɵnextContext(2);
-    const updateFlagStatusReason_r3 = i0.ɵɵreference(19);
+    const updateFlagStatusReason_r2 = i0.ɵɵreference(19);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", updateFlagStatusReason_r3);
+    i0.ɵɵproperty("ngTemplateOutlet", updateFlagStatusReason_r2);
 } }
 function UpdateFlagComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, UpdateFlagComponent_ng_template_16_ng_container_0_Template, 2, 1, "ng-container", 32);
+    i0.ɵɵtemplate(0, UpdateFlagComponent_ng_template_16_ng_container_0_Template, 2, 1, "ng-container", 30);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", ctx_r1.externalUserUpdate);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngIf", ctx_r0.externalUserUpdate);
 } }
 function UpdateFlagComponent_ng_template_18_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38)(1, "span", 30);
+    i0.ɵɵelementStart(0, "div", 36)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24629,14 +25058,14 @@ function UpdateFlagComponent_ng_template_18_div_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.statusReasonNotEnteredErrorMessage), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.statusReasonNotEnteredErrorMessage), " ");
 } }
 function UpdateFlagComponent_ng_template_18_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39)(1, "span", 30);
+    i0.ɵɵelementStart(0, "div", 37)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24644,100 +25073,100 @@ function UpdateFlagComponent_ng_template_18_div_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.statusReasonCharLimitErrorMessage), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.statusReasonCharLimitErrorMessage), " ");
 } }
 function UpdateFlagComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, UpdateFlagComponent_ng_template_18_div_0_Template, 6, 6, "div", 34)(1, UpdateFlagComponent_ng_template_18_div_1_Template, 6, 6, "div", 35);
-    i0.ɵɵelementStart(2, "textarea", 36);
+    i0.ɵɵtemplate(0, UpdateFlagComponent_ng_template_18_div_0_Template, 6, 6, "div", 32)(1, UpdateFlagComponent_ng_template_18_div_1_Template, 6, 6, "div", 33);
+    i0.ɵɵelementStart(2, "textarea", 34);
     i0.ɵɵtext(3, "        ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 37);
+    i0.ɵɵelementStart(4, "div", 35);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", ctx_r1.statusReasonNotEnteredErrorMessage);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngIf", ctx_r0.statusReasonNotEnteredErrorMessage);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.statusReasonCharLimitErrorMessage);
+    i0.ɵɵproperty("ngIf", ctx_r0.statusReasonCharLimitErrorMessage);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r1.caseFlagFormFields.STATUS_CHANGE_REASON)("name", ctx_r1.caseFlagFormFields.STATUS_CHANGE_REASON)("formControlName", ctx_r1.caseFlagFormFields.STATUS_CHANGE_REASON);
+    i0.ɵɵproperty("id", ctx_r0.caseFlagFormFields.STATUS_CHANGE_REASON)("name", ctx_r0.caseFlagFormFields.STATUS_CHANGE_REASON)("formControlName", ctx_r0.caseFlagFormFields.STATUS_CHANGE_REASON);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 6, ctx_r1.updateFlagStepEnum.CHARACTER_LIMIT_INFO), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 6, ctx_r0.updateFlagStepEnum.CHARACTER_LIMIT_INFO), " ");
 } }
 function UpdateFlagComponent_div_20_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵelement(1, "input", 48);
-    i0.ɵɵelementStart(2, "label", 49);
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelement(1, "input", 46);
+    i0.ɵɵelementStart(2, "label", 47);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const status_r4 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const status_r3 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r1.caseFlagFormFields.STATUS + "_" + status_r4)("name", ctx_r1.caseFlagFormFields.STATUS)("formControlName", ctx_r1.caseFlagFormFields.STATUS)("value", status_r4);
+    i0.ɵɵproperty("id", ctx_r0.caseFlagFormFields.STATUS + "_" + status_r3)("name", ctx_r0.caseFlagFormFields.STATUS)("formControlName", ctx_r0.caseFlagFormFields.STATUS)("value", status_r3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r1.caseFlagFormFields.STATUS + "_" + status_r4);
+    i0.ɵɵproperty("for", ctx_r0.caseFlagFormFields.STATUS + "_" + status_r3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 6, ctx_r1.caseFlagStatusEnum[status_r4]), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 6, ctx_r0.caseFlagStatusEnum[status_r3]), " ");
 } }
 function UpdateFlagComponent_div_20_ng_container_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function UpdateFlagComponent_div_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "fieldset", 41)(2, "legend", 42)(3, "h1", 43);
+    i0.ɵɵelementStart(0, "div", 38)(1, "fieldset", 39)(2, "legend", 40)(3, "h1", 41);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 44);
-    i0.ɵɵtemplate(8, UpdateFlagComponent_div_20_div_8_Template, 5, 8, "div", 45);
+    i0.ɵɵelementStart(7, "div", 42);
+    i0.ɵɵtemplate(8, UpdateFlagComponent_div_20_div_8_Template, 5, 8, "div", 43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 46);
+    i0.ɵɵelementStart(9, "div", 44);
     i0.ɵɵtext(10);
     i0.ɵɵpipe(11, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, UpdateFlagComponent_div_20_ng_container_12_Template, 1, 0, "ng-container", 33);
+    i0.ɵɵtemplate(12, UpdateFlagComponent_div_20_ng_container_12_Template, 1, 0, "ng-container", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    const updateFlagStatusReason_r3 = i0.ɵɵreference(19);
+    const ctx_r0 = i0.ɵɵnextContext();
+    const updateFlagStatusReason_r2 = i0.ɵɵreference(19);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind1(5, 6, ctx_r1.updateFlagTitle), " ", i0.ɵɵpipeBind1(6, 8, "status"), " ");
+    i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind1(5, 6, ctx_r0.updateFlagTitle), " ", i0.ɵɵpipeBind1(6, 8, "status"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("id", ctx_r1.caseFlagFormFields.STATUS);
+    i0.ɵɵproperty("id", ctx_r0.caseFlagFormFields.STATUS);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.validStatusProgressions);
+    i0.ɵɵproperty("ngForOf", ctx_r0.validStatusProgressions);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 10, ctx_r1.updateFlagStepEnum.STATUS_HINT_TEXT), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 10, ctx_r0.updateFlagStepEnum.STATUS_HINT_TEXT), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", updateFlagStatusReason_r3);
+    i0.ɵɵproperty("ngTemplateOutlet", updateFlagStatusReason_r2);
 } }
 function UpdateFlagComponent_div_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50)(1, "div", 51)(2, "div", 52);
-    i0.ɵɵelement(3, "input", 53);
-    i0.ɵɵelementStart(4, "label", 54);
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49)(2, "div", 50);
+    i0.ɵɵelement(3, "input", 51);
+    i0.ɵɵelementStart(4, "label", 52);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("formControlName", ctx_r1.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED)("id", ctx_r1.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED)("name", ctx_r1.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED);
+    i0.ɵɵproperty("formControlName", ctx_r0.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED)("id", ctx_r0.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED)("name", ctx_r0.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r1.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED);
+    i0.ɵɵproperty("for", ctx_r0.caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 5, "I need to add a translation"), " ");
 } }
 function UpdateFlagComponent_div_22_button_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
-    i0.ɵɵlistener("click", function UpdateFlagComponent_div_22_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMakeInactive()); });
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("click", function UpdateFlagComponent_div_22_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onMakeInactive()); });
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -24746,28 +25175,28 @@ function UpdateFlagComponent_div_22_button_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "Make inactive"), " ");
 } }
 function UpdateFlagComponent_div_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56)(2, "p");
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 54)(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
-    i0.ɵɵelementStart(5, "span")(6, "strong", 57);
+    i0.ɵɵelementStart(5, "span")(6, "strong", 55);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "rpxTranslate");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(9, "div", 56);
-    i0.ɵɵtemplate(10, UpdateFlagComponent_div_22_button_10_Template, 3, 3, "button", 58);
+    i0.ɵɵelementStart(9, "div", 54);
+    i0.ɵɵtemplate(10, UpdateFlagComponent_div_22_button_10_Template, 3, 3, "button", 56);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(4, 4, "Flag status:"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$7, ctx_r1.selectedFlag.flagDetailDisplay.flagDetail.status === "Inactive"));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c1$7, ctx_r0.selectedFlag.flagDetailDisplay.flagDetail.status === "Inactive"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 6, ctx_r1.selectedFlag == null ? null : ctx_r1.selectedFlag.flagDetailDisplay == null ? null : ctx_r1.selectedFlag.flagDetailDisplay.flagDetail == null ? null : ctx_r1.selectedFlag.flagDetailDisplay.flagDetail.status), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 6, ctx_r0.selectedFlag == null ? null : ctx_r0.selectedFlag.flagDetailDisplay == null ? null : ctx_r0.selectedFlag.flagDetailDisplay.flagDetail == null ? null : ctx_r0.selectedFlag.flagDetailDisplay.flagDetail.status), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.selectedFlag.flagDetailDisplay.flagDetail.status === "Active");
+    i0.ɵɵproperty("ngIf", ctx_r0.selectedFlag.flagDetailDisplay.flagDetail.status === "Active");
 } }
-class UpdateFlagComponent {
+class UpdateFlagComponent extends AbstractJourneyComponent {
     rpxTranslationService;
     formGroup;
     displayContextParameter;
@@ -24793,7 +25222,8 @@ class UpdateFlagComponent {
     get externallyVisibleFlag() {
         return this.selectedFlag.flagDetailDisplay.visibility?.toLowerCase() === 'external';
     }
-    constructor(rpxTranslationService) {
+    constructor(rpxTranslationService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
@@ -24940,9 +25370,14 @@ class UpdateFlagComponent {
             });
         }
     }
-    static ɵfac = function UpdateFlagComponent_Factory(t) { return new (t || UpdateFlagComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateFlagComponent, selectors: [["ccd-update-flag"]], inputs: { formGroup: "formGroup", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 27, vars: 25, consts: [["externalUser", ""], ["updateFlagStatusReason", ""], [3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper", "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--m"], ["id", "update-flag-hint-external", "class", "govuk-hint", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--s", 3, "for"], ["id", "update-flag-comments-hint-external", "class", "govuk-hint", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["id", "flag-status-container-v2_1", "class", "govuk-!-margin-bottom-4", 4, "ngIf"], ["id", "translation-checkbox-container", "class", "govuk-!-margin-bottom-6", 4, "ngIf"], ["id", "flag-status-container-v1", "class", "govuk-grid-row", 4, "ngIf"], [1, "govuk-button-group"], ["id", "updateFlagNextButton", "type", "button", 1, "govuk-button", 3, "click"], ["id", "update-flag-hint-external", 1, "govuk-hint"], ["id", "update-flag-comments-hint-external", 1, "govuk-hint"], ["id", "update-flag-comments-hint", 1, "govuk-hint"], ["class", "govuk-warning-text", 4, "ngIf"], ["id", "update-flag-comments-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "update-flag-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "update-flag-comments-hint update-flag-comments-char-limit-info update-flag-comments-char-limit-error", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "update-flag-comments-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], ["id", "update-flag-comments-not-entered-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "update-flag-comments-char-limit-error", 1, "govuk-error-message"], [4, "ngIf"], [4, "ngTemplateOutlet"], ["id", "update-flag-status-reason-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "update-flag-status-reason-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "update-flag-comments-hint-external update-flag-status-hint update-flag-status-reason-char-limit-info\n                  update-flag-status-reason-char-limit-error", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "update-flag-status-reason-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "update-flag-status-reason-not-entered-error-message", 1, "govuk-error-message"], ["id", "update-flag-status-reason-char-limit-error", 1, "govuk-error-message"], ["id", "flag-status-container-v2_1", 1, "govuk-!-margin-bottom-4"], ["aria-describedby", "update-flag-status-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--s"], ["id", "update-flag-status-heading", 1, "govuk-fieldset__heading"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--conditional", "govuk-!-margin-bottom-4", 3, "id"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "update-flag-status-hint", 1, "govuk-hint"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "formControlName", "value"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "translation-checkbox-container", 1, "govuk-!-margin-bottom-6"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes"], [1, "govuk-checkboxes__item"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "formControlName", "id", "name"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["id", "flag-status-container-v1", 1, "govuk-grid-row"], [1, "govuk-grid-column-one-half"], [1, "govuk-tag", 3, "ngClass"], ["class", "button button-secondary", "type", "button", 3, "click", 4, "ngIf"], ["type", "button", 1, "button", "button-secondary", 3, "click"]], template: function UpdateFlagComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = function UpdateFlagComponent_Factory(t) { return new (t || UpdateFlagComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService), i0.ɵɵdirectiveInject(MultipageComponentStateService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateFlagComponent, selectors: [["ccd-update-flag"]], inputs: { formGroup: "formGroup", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 23, vars: 22, consts: [["externalUser", ""], ["updateFlagStatusReason", ""], [3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper", "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--m"], ["id", "update-flag-hint-external", "class", "govuk-hint", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--s", 3, "for"], ["id", "update-flag-comments-hint-external", "class", "govuk-hint", 4, "ngIf"], [4, "ngIf", "ngIfElse"], ["id", "flag-status-container-v2_1", "class", "govuk-!-margin-bottom-4", 4, "ngIf"], ["id", "translation-checkbox-container", "class", "govuk-!-margin-bottom-6", 4, "ngIf"], ["id", "flag-status-container-v1", "class", "govuk-grid-row", 4, "ngIf"], ["id", "update-flag-hint-external", 1, "govuk-hint"], ["id", "update-flag-comments-hint-external", 1, "govuk-hint"], ["id", "update-flag-comments-hint", 1, "govuk-hint"], ["class", "govuk-warning-text", 4, "ngIf"], ["id", "update-flag-comments-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "update-flag-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "update-flag-comments-hint update-flag-comments-char-limit-info update-flag-comments-char-limit-error", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "update-flag-comments-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-warning-text"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], ["id", "update-flag-comments-not-entered-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "update-flag-comments-char-limit-error", 1, "govuk-error-message"], [4, "ngIf"], [4, "ngTemplateOutlet"], ["id", "update-flag-status-reason-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "update-flag-status-reason-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "update-flag-comments-hint-external update-flag-status-hint update-flag-status-reason-char-limit-info\n                  update-flag-status-reason-char-limit-error", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "update-flag-status-reason-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "update-flag-status-reason-not-entered-error-message", 1, "govuk-error-message"], ["id", "update-flag-status-reason-char-limit-error", 1, "govuk-error-message"], ["id", "flag-status-container-v2_1", 1, "govuk-!-margin-bottom-4"], ["aria-describedby", "update-flag-status-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--s"], ["id", "update-flag-status-heading", 1, "govuk-fieldset__heading"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--conditional", "govuk-!-margin-bottom-4", 3, "id"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "update-flag-status-hint", 1, "govuk-hint"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "formControlName", "value"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "translation-checkbox-container", 1, "govuk-!-margin-bottom-6"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes"], [1, "govuk-checkboxes__item"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "formControlName", "id", "name"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["id", "flag-status-container-v1", 1, "govuk-grid-row"], [1, "govuk-grid-column-one-half"], [1, "govuk-tag", 3, "ngClass"], ["class", "button button-secondary", "type", "button", 3, "click", 4, "ngIf"], ["type", "button", 1, "button", "button-secondary", 3, "click"]], template: function UpdateFlagComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 2);
             i0.ɵɵelementStart(1, "div", 3)(2, "div", 4)(3, "h1", 5)(4, "label", 6);
             i0.ɵɵtext(5);
@@ -24960,53 +25395,46 @@ class UpdateFlagComponent {
             i0.ɵɵtemplate(18, UpdateFlagComponent_ng_template_18_Template, 7, 8, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(20, UpdateFlagComponent_div_20_Template, 13, 12, "div", 12)(21, UpdateFlagComponent_div_21_Template, 7, 7, "div", 13)(22, UpdateFlagComponent_div_22_Template, 11, 10, "div", 14);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵelementStart(23, "div", 15)(24, "button", 16);
-            i0.ɵɵlistener("click", function UpdateFlagComponent_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onNext()); });
-            i0.ɵɵtext(25);
-            i0.ɵɵpipe(26, "rpxTranslate");
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            const externalUser_r6 = i0.ɵɵreference(17);
+            const externalUser_r5 = i0.ɵɵreference(17);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0$n, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c0$n, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 13, ctx.updateFlagTitle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 12, ctx.updateFlagTitle), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.externalUserUpdate);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("for", ctx.caseFlagFormFields.COMMENTS);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.externalUserUpdate ? i0.ɵɵpipeBind1(11, 15, ctx.updateFlagStepEnum.COMMENT_FIELD_LABEL_EXTERNAL) : i0.ɵɵpipeBind1(12, 17, ctx.updateFlagTitle) + i0.ɵɵpipeBind1(13, 19, " comments"), " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.externalUserUpdate ? i0.ɵɵpipeBind1(11, 14, ctx.updateFlagStepEnum.COMMENT_FIELD_LABEL_EXTERNAL) : i0.ɵɵpipeBind1(12, 16, ctx.updateFlagTitle) + i0.ɵɵpipeBind1(13, 18, " comments"), " ");
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngIf", ctx.externalUserUpdate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.internalUserUpdate || ctx.internalUser2Point1EnabledUpdate || ctx.displayContextParameter === "")("ngIfElse", externalUser_r6);
+            i0.ɵɵproperty("ngIf", ctx.internalUserUpdate || ctx.internalUser2Point1EnabledUpdate || ctx.displayContextParameter === "")("ngIfElse", externalUser_r5);
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", ctx.internalUser2Point1EnabledUpdate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.internalUser2Point1EnabledUpdate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.internalUserUpdate);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 21, "Next"), " ");
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UpdateFlagComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-update-flag', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <h1 class=\"govuk-label-wrapper govuk-!-margin-bottom-4\">\n        <label class=\"govuk-label govuk-label--m\">\n          {{updateFlagTitle | rpxTranslate}}\n        </label>\n      </h1>\n      <div id=\"update-flag-hint-external\" class=\"govuk-hint\" *ngIf=\"externalUserUpdate\">\n        {{selectedFlag?.flagDetailDisplay?.flagDetail | updateFlagTitleDisplay}}\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label class=\"govuk-label govuk-label--s\" [for]=\"caseFlagFormFields.COMMENTS\">\n          {{\n            externalUserUpdate\n              ? (updateFlagStepEnum.COMMENT_FIELD_LABEL_EXTERNAL | rpxTranslate)\n              : (updateFlagTitle | rpxTranslate) + (' comments' | rpxTranslate)\n          }}\n        </label>\n        <div id=\"update-flag-comments-hint-external\" class=\"govuk-hint\" *ngIf=\"externalUserUpdate\">\n          {{updateFlagStepEnum.COMMENT_HINT_TEXT_EXTERNAL | rpxTranslate}}\n        </div>\n        <ng-container *ngIf=\"internalUserUpdate || internalUser2Point1EnabledUpdate || displayContextParameter === '';\n          else externalUser\">\n          <div id=\"update-flag-comments-hint\" class=\"govuk-hint\">\n            {{\n              internalUserUpdate\n                ? (updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL | rpxTranslate)\n                : (updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL_2_POINT_1 | rpxTranslate)\n            }}\n          </div>\n          <div class=\"govuk-warning-text\" *ngIf=\"internalUser2Point1EnabledUpdate && externallyVisibleFlag\">\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              {{updateFlagStepEnum.WARNING_TEXT | rpxTranslate}}\n            </strong>\n          </div>\n          <div id=\"update-flag-comments-not-entered-error-message\" class=\"govuk-error-message\" *ngIf=\"commentsNotEnteredErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{commentsNotEnteredErrorMessage | rpxTranslate}}\n          </div>\n          <div id=\"update-flag-comments-char-limit-error\" class=\"govuk-error-message\" *ngIf=\"commentsCharLimitErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{commentsCharLimitErrorMessage | rpxTranslate}}\n          </div>\n          <textarea class=\"govuk-textarea\"\n                    [id]=\"caseFlagFormFields.COMMENTS\"\n                    [name]=\"caseFlagFormFields.COMMENTS\"\n                    [formControlName]=\"caseFlagFormFields.COMMENTS\"\n                    rows=\"5\"\n                    aria-describedby=\"update-flag-comments-hint update-flag-comments-char-limit-info update-flag-comments-char-limit-error\">\n          </textarea>\n          <div id=\"update-flag-comments-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n            {{updateFlagStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n          </div>\n        </ng-container>\n        <ng-template #externalUser>\n          <ng-container *ngIf=\"externalUserUpdate\">\n            <ng-container *ngTemplateOutlet=\"updateFlagStatusReason\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </div>\n\n      <ng-template #updateFlagStatusReason>\n        <div id=\"update-flag-status-reason-not-entered-error-message\" class=\"govuk-error-message\" *ngIf=\"statusReasonNotEnteredErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonNotEnteredErrorMessage | rpxTranslate}}\n        </div>\n        <div id=\"update-flag-status-reason-char-limit-error\" class=\"govuk-error-message\" *ngIf=\"statusReasonCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea class=\"govuk-textarea\"\n                  [id]=\"caseFlagFormFields.STATUS_CHANGE_REASON\"\n                  [name]=\"caseFlagFormFields.STATUS_CHANGE_REASON\"\n                  [formControlName]=\"caseFlagFormFields.STATUS_CHANGE_REASON\"\n                  rows=\"5\"\n                  aria-describedby=\"update-flag-comments-hint-external update-flag-status-hint update-flag-status-reason-char-limit-info\n                  update-flag-status-reason-char-limit-error\">\n        </textarea>\n        <div id=\"update-flag-status-reason-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </ng-template>\n\n      <div id=\"flag-status-container-v2_1\" class=\"govuk-!-margin-bottom-4\" *ngIf=\"internalUser2Point1EnabledUpdate\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"update-flag-status-heading\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n            <h1 id=\"update-flag-status-heading\" class=\"govuk-fieldset__heading\">\n              {{updateFlagTitle | rpxTranslate}} {{'status' | rpxTranslate}}\n            </h1>\n          </legend>\n          <div class=\"govuk-radios govuk-radios--conditional govuk-!-margin-bottom-4\" data-module=\"govuk-radios\" [id]=\"caseFlagFormFields.STATUS\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let status of validStatusProgressions\">\n              <input class=\"govuk-radios__input\" type=\"radio\"\n                      [id]=\"caseFlagFormFields.STATUS + '_' + status\"\n                      [name]=\"caseFlagFormFields.STATUS\"\n                      [formControlName]=\"caseFlagFormFields.STATUS\"\n                      [value]=\"status\">\n              <label class=\"govuk-label govuk-radios__label\" [for]=\"caseFlagFormFields.STATUS + '_' + status\">\n                {{caseFlagStatusEnum[status] | rpxTranslate}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <div id=\"update-flag-status-hint\" class=\"govuk-hint\">\n          {{updateFlagStepEnum.STATUS_HINT_TEXT | rpxTranslate}}\n        </div>\n        <ng-container *ngTemplateOutlet=\"updateFlagStatusReason\"></ng-container>\n      </div>\n\n      <div id=\"translation-checkbox-container\" class=\"govuk-!-margin-bottom-6\" *ngIf=\"internalUser2Point1EnabledUpdate\">\n        <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" type=\"checkbox\"\n                   [formControlName]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\"\n                   [id]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\"\n                   [name]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\">\n            <label class=\"govuk-label govuk-checkboxes__label\"\n                   [for]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\">\n              {{'I need to add a translation' | rpxTranslate}}\n            </label>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"flag-status-container-v1\" class=\"govuk-grid-row\" *ngIf=\"internalUserUpdate\">\n        <div class=\"govuk-grid-column-one-half\">\n          <p>{{'Flag status:' | rpxTranslate}}\n            <span>\n              <strong class=\"govuk-tag\" [ngClass]=\"{'govuk-tag--grey': selectedFlag.flagDetailDisplay.flagDetail.status === 'Inactive'}\">\n                {{selectedFlag?.flagDetailDisplay?.flagDetail?.status | rpxTranslate}}\n              </strong>\n            </span>\n          </p>\n        </div>\n        <div class=\"govuk-grid-column-one-half\">\n          <button class=\"button button-secondary\" type=\"button\" (click)=\"onMakeInactive()\" *ngIf=\"selectedFlag.flagDetailDisplay.flagDetail.status === 'Active'\">\n            {{'Make inactive' | rpxTranslate}}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\">\n  <button id=\"updateFlagNextButton\" class=\"govuk-button\" type=\"button\" (click)=\"onNext()\">\n    {{'Next' | rpxTranslate}}\n  </button>\n</div>\n" }]
-    }], () => [{ type: i1.RpxTranslationService }], { formGroup: [{
+        args: [{ selector: 'ccd-update-flag', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <h1 class=\"govuk-label-wrapper govuk-!-margin-bottom-4\">\n        <label class=\"govuk-label govuk-label--m\">\n          {{updateFlagTitle | rpxTranslate}}\n        </label>\n      </h1>\n      <div id=\"update-flag-hint-external\" class=\"govuk-hint\" *ngIf=\"externalUserUpdate\">\n        {{selectedFlag?.flagDetailDisplay?.flagDetail | updateFlagTitleDisplay}}\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label class=\"govuk-label govuk-label--s\" [for]=\"caseFlagFormFields.COMMENTS\">\n          {{\n            externalUserUpdate\n              ? (updateFlagStepEnum.COMMENT_FIELD_LABEL_EXTERNAL | rpxTranslate)\n              : (updateFlagTitle | rpxTranslate) + (' comments' | rpxTranslate)\n          }}\n        </label>\n        <div id=\"update-flag-comments-hint-external\" class=\"govuk-hint\" *ngIf=\"externalUserUpdate\">\n          {{updateFlagStepEnum.COMMENT_HINT_TEXT_EXTERNAL | rpxTranslate}}\n        </div>\n        <ng-container *ngIf=\"internalUserUpdate || internalUser2Point1EnabledUpdate || displayContextParameter === '';\n          else externalUser\">\n          <div id=\"update-flag-comments-hint\" class=\"govuk-hint\">\n            {{\n              internalUserUpdate\n                ? (updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL | rpxTranslate)\n                : (updateFlagStepEnum.COMMENT_HINT_TEXT_INTERNAL_2_POINT_1 | rpxTranslate)\n            }}\n          </div>\n          <div class=\"govuk-warning-text\" *ngIf=\"internalUser2Point1EnabledUpdate && externallyVisibleFlag\">\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              {{updateFlagStepEnum.WARNING_TEXT | rpxTranslate}}\n            </strong>\n          </div>\n          <div id=\"update-flag-comments-not-entered-error-message\" class=\"govuk-error-message\" *ngIf=\"commentsNotEnteredErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{commentsNotEnteredErrorMessage | rpxTranslate}}\n          </div>\n          <div id=\"update-flag-comments-char-limit-error\" class=\"govuk-error-message\" *ngIf=\"commentsCharLimitErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{commentsCharLimitErrorMessage | rpxTranslate}}\n          </div>\n          <textarea class=\"govuk-textarea\"\n                    [id]=\"caseFlagFormFields.COMMENTS\"\n                    [name]=\"caseFlagFormFields.COMMENTS\"\n                    [formControlName]=\"caseFlagFormFields.COMMENTS\"\n                    rows=\"5\"\n                    aria-describedby=\"update-flag-comments-hint update-flag-comments-char-limit-info update-flag-comments-char-limit-error\">\n          </textarea>\n          <div id=\"update-flag-comments-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n            {{updateFlagStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n          </div>\n        </ng-container>\n        <ng-template #externalUser>\n          <ng-container *ngIf=\"externalUserUpdate\">\n            <ng-container *ngTemplateOutlet=\"updateFlagStatusReason\"></ng-container>\n          </ng-container>\n        </ng-template>\n      </div>\n\n      <ng-template #updateFlagStatusReason>\n        <div id=\"update-flag-status-reason-not-entered-error-message\" class=\"govuk-error-message\" *ngIf=\"statusReasonNotEnteredErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonNotEnteredErrorMessage | rpxTranslate}}\n        </div>\n        <div id=\"update-flag-status-reason-char-limit-error\" class=\"govuk-error-message\" *ngIf=\"statusReasonCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea class=\"govuk-textarea\"\n                  [id]=\"caseFlagFormFields.STATUS_CHANGE_REASON\"\n                  [name]=\"caseFlagFormFields.STATUS_CHANGE_REASON\"\n                  [formControlName]=\"caseFlagFormFields.STATUS_CHANGE_REASON\"\n                  rows=\"5\"\n                  aria-describedby=\"update-flag-comments-hint-external update-flag-status-hint update-flag-status-reason-char-limit-info\n                  update-flag-status-reason-char-limit-error\">\n        </textarea>\n        <div id=\"update-flag-status-reason-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </ng-template>\n\n      <div id=\"flag-status-container-v2_1\" class=\"govuk-!-margin-bottom-4\" *ngIf=\"internalUser2Point1EnabledUpdate\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"update-flag-status-heading\">\n          <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n            <h1 id=\"update-flag-status-heading\" class=\"govuk-fieldset__heading\">\n              {{updateFlagTitle | rpxTranslate}} {{'status' | rpxTranslate}}\n            </h1>\n          </legend>\n          <div class=\"govuk-radios govuk-radios--conditional govuk-!-margin-bottom-4\" data-module=\"govuk-radios\" [id]=\"caseFlagFormFields.STATUS\">\n            <div class=\"govuk-radios__item\" *ngFor=\"let status of validStatusProgressions\">\n              <input class=\"govuk-radios__input\" type=\"radio\"\n                      [id]=\"caseFlagFormFields.STATUS + '_' + status\"\n                      [name]=\"caseFlagFormFields.STATUS\"\n                      [formControlName]=\"caseFlagFormFields.STATUS\"\n                      [value]=\"status\">\n              <label class=\"govuk-label govuk-radios__label\" [for]=\"caseFlagFormFields.STATUS + '_' + status\">\n                {{caseFlagStatusEnum[status] | rpxTranslate}}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <div id=\"update-flag-status-hint\" class=\"govuk-hint\">\n          {{updateFlagStepEnum.STATUS_HINT_TEXT | rpxTranslate}}\n        </div>\n        <ng-container *ngTemplateOutlet=\"updateFlagStatusReason\"></ng-container>\n      </div>\n\n      <div id=\"translation-checkbox-container\" class=\"govuk-!-margin-bottom-6\" *ngIf=\"internalUser2Point1EnabledUpdate\">\n        <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" type=\"checkbox\"\n                   [formControlName]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\"\n                   [id]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\"\n                   [name]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\">\n            <label class=\"govuk-label govuk-checkboxes__label\"\n                   [for]=\"caseFlagFormFields.IS_WELSH_TRANSLATION_NEEDED\">\n              {{'I need to add a translation' | rpxTranslate}}\n            </label>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"flag-status-container-v1\" class=\"govuk-grid-row\" *ngIf=\"internalUserUpdate\">\n        <div class=\"govuk-grid-column-one-half\">\n          <p>{{'Flag status:' | rpxTranslate}}\n            <span>\n              <strong class=\"govuk-tag\" [ngClass]=\"{'govuk-tag--grey': selectedFlag.flagDetailDisplay.flagDetail.status === 'Inactive'}\">\n                {{selectedFlag?.flagDetailDisplay?.flagDetail?.status | rpxTranslate}}\n              </strong>\n            </span>\n          </p>\n        </div>\n        <div class=\"govuk-grid-column-one-half\">\n          <button class=\"button button-secondary\" type=\"button\" (click)=\"onMakeInactive()\" *ngIf=\"selectedFlag.flagDetailDisplay.flagDetail.status === 'Active'\">\n            {{'Make inactive' | rpxTranslate}}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>" }]
+    }], () => [{ type: i1.RpxTranslationService }, { type: MultipageComponentStateService }], { formGroup: [{
             type: Input
         }], displayContextParameter: [{
             type: Input
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UpdateFlagComponent, { className: "UpdateFlagComponent", filePath: "lib/shared/components/palette/case-flag/components/update-flag/update-flag.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UpdateFlagComponent, { className: "UpdateFlagComponent", filePath: "lib/shared/components/palette/case-flag/components/update-flag/update-flag.component.ts", lineNumber: 22 }); })();
 
 const _c0$m = a0 => ({ "form-group-error": a0 });
 function UpdateFlagAddTranslationFormComponent_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "span", 20);
+    i0.ɵɵelementStart(0, "div", 17)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25021,7 +25449,7 @@ function UpdateFlagAddTranslationFormComponent_div_14_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.otherFlagDescriptionCharLimitErrorMessage), " ");
 } }
 function UpdateFlagAddTranslationFormComponent_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "span", 20);
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25036,7 +25464,7 @@ function UpdateFlagAddTranslationFormComponent_div_24_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.otherFlagDescriptionWelshCharLimitErrorMessage), " ");
 } }
 function UpdateFlagAddTranslationFormComponent_div_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "span", 20);
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25051,7 +25479,7 @@ function UpdateFlagAddTranslationFormComponent_div_34_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagCommentsCharLimitErrorMessage), " ");
 } }
 function UpdateFlagAddTranslationFormComponent_div_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "span", 20);
+    i0.ɵɵelementStart(0, "div", 21)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25065,7 +25493,7 @@ function UpdateFlagAddTranslationFormComponent_div_44_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagCommentsWelshCharLimitErrorMessage), " ");
 } }
-class UpdateFlagAddTranslationFormComponent {
+class UpdateFlagAddTranslationFormComponent extends AbstractJourneyComponent {
     formGroup;
     caseFlagStateEmitter = new EventEmitter();
     selectedFlag;
@@ -25139,8 +25567,14 @@ class UpdateFlagAddTranslationFormComponent {
             });
         }
     }
-    static ɵfac = function UpdateFlagAddTranslationFormComponent_Factory(t) { return new (t || UpdateFlagAddTranslationFormComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateFlagAddTranslationFormComponent, selectors: [["ccd-update-flag-add-translation-form"]], inputs: { formGroup: "formGroup" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 54, vars: 57, consts: [[3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper", "govuk-!-margin-bottom-6"], [1, "govuk-label", "govuk-label--m"], ["id", "add-translation-form-hint", 1, "govuk-hint"], [1, "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--s", 3, "for"], ["id", "add-translation-other-flag-description-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "add-translation-other-flag-description-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-other-flag-description-welsh-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-translation-other-flag-description-welsh-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-flag-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-translation-flag-comments-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-flag-comments-welsh-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-translation-flag-comments-welsh-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-button-group"], ["id", "updateFlagNextButton", "type", "button", 1, "govuk-button", 3, "click"], ["id", "add-translation-other-flag-description-char-limit-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "add-translation-other-flag-description-welsh-char-limit-error", 1, "govuk-error-message"], ["id", "add-translation-flag-comments-char-limit-error", 1, "govuk-error-message"], ["id", "add-translation-flag-comments-welsh-char-limit-error", 1, "govuk-error-message"]], template: function UpdateFlagAddTranslationFormComponent_Template(rf, ctx) { if (rf & 1) {
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵUpdateFlagAddTranslationFormComponent_BaseFactory; return function UpdateFlagAddTranslationFormComponent_Factory(t) { return (ɵUpdateFlagAddTranslationFormComponent_BaseFactory || (ɵUpdateFlagAddTranslationFormComponent_BaseFactory = i0.ɵɵgetInheritedFactory(UpdateFlagAddTranslationFormComponent)))(t || UpdateFlagAddTranslationFormComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateFlagAddTranslationFormComponent, selectors: [["ccd-update-flag-add-translation-form"]], inputs: { formGroup: "formGroup" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 50, vars: 54, consts: [[3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper", "govuk-!-margin-bottom-6"], [1, "govuk-label", "govuk-label--m"], ["id", "add-translation-form-hint", 1, "govuk-hint"], [1, "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--s", 3, "for"], ["id", "add-translation-other-flag-description-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "add-translation-other-flag-description-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-other-flag-description-welsh-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-translation-other-flag-description-welsh-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-flag-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-translation-flag-comments-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-flag-comments-welsh-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "add-translation-flag-comments-welsh-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], ["id", "add-translation-other-flag-description-char-limit-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "add-translation-other-flag-description-welsh-char-limit-error", 1, "govuk-error-message"], ["id", "add-translation-flag-comments-char-limit-error", 1, "govuk-error-message"], ["id", "add-translation-flag-comments-welsh-char-limit-error", 1, "govuk-error-message"]], template: function UpdateFlagAddTranslationFormComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "h1", 3)(4, "label", 4);
             i0.ɵɵtext(5);
@@ -25199,78 +25633,71 @@ class UpdateFlagAddTranslationFormComponent {
             i0.ɵɵpipe(49, "rpxTranslate");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵelementStart(50, "div", 17)(51, "button", 18);
-            i0.ɵɵlistener("click", function UpdateFlagAddTranslationFormComponent_Template_button_click_51_listener() { return ctx.onNext(); });
-            i0.ɵɵtext(52);
-            i0.ɵɵpipe(53, "rpxTranslate");
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(55, _c0$m, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(52, _c0$m, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 33, ctx.updateFlagAddTranslationTitle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 32, ctx.updateFlagAddTranslationTitle), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 35, ctx.updateFlagAddTranslationStepEnum.HINT_TEXT), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 34, ctx.updateFlagAddTranslationStepEnum.HINT_TEXT), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 37, "Other description"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 36, "Other description"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.otherFlagDescriptionCharLimitErrorMessage);
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION)("name", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION)("formControlName", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 39, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 38, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 41, "Other description (Welsh)"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 40, "Other description (Welsh)"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.otherFlagDescriptionWelshCharLimitErrorMessage);
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH)("name", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH)("formControlName", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(29, 43, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(29, 42, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.caseFlagFormFields.COMMENTS);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(33, 45, "Flag comments"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(33, 44, "Flag comments"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.flagCommentsCharLimitErrorMessage);
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.caseFlagFormFields.COMMENTS)("name", ctx.caseFlagFormFields.COMMENTS)("formControlName", ctx.caseFlagFormFields.COMMENTS);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(39, 47, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(39, 46, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.caseFlagFormFields.COMMENTS_WELSH);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(43, 49, "Flag comments (Welsh)"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(43, 48, "Flag comments (Welsh)"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.flagCommentsWelshCharLimitErrorMessage);
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.caseFlagFormFields.COMMENTS_WELSH)("name", ctx.caseFlagFormFields.COMMENTS_WELSH)("formControlName", ctx.caseFlagFormFields.COMMENTS_WELSH);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(49, 51, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(53, 53, "Next"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(49, 50, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
         } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UpdateFlagAddTranslationFormComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-update-flag-add-translation-form', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <h1 class=\"govuk-label-wrapper govuk-!-margin-bottom-6\">\n        <label class=\"govuk-label govuk-label--m\">\n          {{ updateFlagAddTranslationTitle | rpxTranslate}}\n        </label>\n      </h1>\n      <div id=\"add-translation-form-hint\" class=\"govuk-hint\">\n        {{ updateFlagAddTranslationStepEnum.HINT_TEXT | rpxTranslate}}\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\" class=\"govuk-label govuk-label--s\">{{'Other description' | rpxTranslate}}</label>\n        <div id=\"add-translation-other-flag-description-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"otherFlagDescriptionCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{otherFlagDescriptionCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\"\n          [name]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\"\n          [formControlName]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\">\n        </textarea>\n        <div id=\"add-translation-other-flag-description-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\" class=\"govuk-label govuk-label--s\">{{'Other description (Welsh)' | rpxTranslate}}</label>\n        <div id=\"add-translation-other-flag-description-welsh-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"otherFlagDescriptionWelshCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{otherFlagDescriptionWelshCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\"\n          [name]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\"\n          [formControlName]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\">\n        </textarea>\n        <div id=\"add-translation-other-flag-description-welsh-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.COMMENTS\" class=\"govuk-label govuk-label--s\">{{'Flag comments' | rpxTranslate}}</label>\n        <div id=\"add-translation-flag-comments-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"flagCommentsCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.COMMENTS\"\n          [name]=\"caseFlagFormFields.COMMENTS\"\n          [formControlName]=\"caseFlagFormFields.COMMENTS\">\n        </textarea>\n        <div id=\"add-translation-flag-comments-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.COMMENTS_WELSH\" class=\"govuk-label govuk-label--s\">{{'Flag comments (Welsh)' | rpxTranslate}}</label>\n        <div id=\"add-translation-flag-comments-welsh-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"flagCommentsWelshCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsWelshCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.COMMENTS_WELSH\"\n          [name]=\"caseFlagFormFields.COMMENTS_WELSH\"\n          [formControlName]=\"caseFlagFormFields.COMMENTS_WELSH\">\n        </textarea>\n        <div id=\"add-translation-flag-comments-welsh-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\">\n  <button id=\"updateFlagNextButton\" class=\"govuk-button\" type=\"button\" (click)=\"onNext()\">\n    {{'Next' | rpxTranslate}}\n  </button>\n</div>\n" }]
+        args: [{ selector: 'ccd-update-flag-add-translation-form', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <h1 class=\"govuk-label-wrapper govuk-!-margin-bottom-6\">\n        <label class=\"govuk-label govuk-label--m\">\n          {{ updateFlagAddTranslationTitle | rpxTranslate}}\n        </label>\n      </h1>\n      <div id=\"add-translation-form-hint\" class=\"govuk-hint\">\n        {{ updateFlagAddTranslationStepEnum.HINT_TEXT | rpxTranslate}}\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\" class=\"govuk-label govuk-label--s\">{{'Other description' | rpxTranslate}}</label>\n        <div id=\"add-translation-other-flag-description-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"otherFlagDescriptionCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{otherFlagDescriptionCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\"\n          [name]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\"\n          [formControlName]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION\">\n        </textarea>\n        <div id=\"add-translation-other-flag-description-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\" class=\"govuk-label govuk-label--s\">{{'Other description (Welsh)' | rpxTranslate}}</label>\n        <div id=\"add-translation-other-flag-description-welsh-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"otherFlagDescriptionWelshCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{otherFlagDescriptionWelshCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\"\n          [name]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\"\n          [formControlName]=\"caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH\">\n        </textarea>\n        <div id=\"add-translation-other-flag-description-welsh-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.COMMENTS\" class=\"govuk-label govuk-label--s\">{{'Flag comments' | rpxTranslate}}</label>\n        <div id=\"add-translation-flag-comments-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"flagCommentsCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.COMMENTS\"\n          [name]=\"caseFlagFormFields.COMMENTS\"\n          [formControlName]=\"caseFlagFormFields.COMMENTS\">\n        </textarea>\n        <div id=\"add-translation-flag-comments-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n\n      <div class=\"govuk-!-margin-bottom-4\">\n        <label [for]=\"caseFlagFormFields.COMMENTS_WELSH\" class=\"govuk-label govuk-label--s\">{{'Flag comments (Welsh)' | rpxTranslate}}</label>\n        <div id=\"add-translation-flag-comments-welsh-char-limit-error\" class=\"govuk-error-message\"\n              *ngIf=\"flagCommentsWelshCharLimitErrorMessage\">\n          <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{flagCommentsWelshCharLimitErrorMessage | rpxTranslate}}\n        </div>\n        <textarea\n          class=\"govuk-textarea\" rows=\"5\"\n          [id]=\"caseFlagFormFields.COMMENTS_WELSH\"\n          [name]=\"caseFlagFormFields.COMMENTS_WELSH\"\n          [formControlName]=\"caseFlagFormFields.COMMENTS_WELSH\">\n        </textarea>\n        <div id=\"add-translation-flag-comments-welsh-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n          {{updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO | rpxTranslate}}\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>" }]
     }], null, { formGroup: [{
             type: Input
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UpdateFlagAddTranslationFormComponent, { className: "UpdateFlagAddTranslationFormComponent", filePath: "lib/shared/components/palette/case-flag/components/update-flag/update-flag-add-translation-form/update-flag-add-translation-form.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UpdateFlagAddTranslationFormComponent, { className: "UpdateFlagAddTranslationFormComponent", filePath: "lib/shared/components/palette/case-flag/components/update-flag/update-flag-add-translation-form/update-flag-add-translation-form.component.ts", lineNumber: 18 }); })();
 
 const _c0$l = a0 => ({ "form-group-error": a0 });
 function ConfirmFlagStatusComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "input", 16);
-    i0.ɵɵelementStart(2, "label", 17);
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "input", 14);
+    i0.ɵɵelementStart(2, "label", 15);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd()();
@@ -25287,7 +25714,7 @@ function ConfirmFlagStatusComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 8, ctx_r2.caseFlagStatusEnum[status_r1]), " ");
 } }
 function ConfirmFlagStatusComponent_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
+    i0.ɵɵelementStart(0, "div", 16)(1, "span", 17);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25302,7 +25729,7 @@ function ConfirmFlagStatusComponent_div_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r2.statusReasonNotEnteredErrorMessage), " ");
 } }
 function ConfirmFlagStatusComponent_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "span", 19);
+    i0.ɵɵelementStart(0, "div", 18)(1, "span", 17);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -25316,7 +25743,7 @@ function ConfirmFlagStatusComponent_div_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r2.statusReasonCharLimitErrorMessage), " ");
 } }
-class ConfirmFlagStatusComponent {
+class ConfirmFlagStatusComponent extends AbstractJourneyComponent {
     formGroup;
     defaultStatus;
     caseFlagStateEmitter = new EventEmitter();
@@ -25345,6 +25772,12 @@ class ConfirmFlagStatusComponent {
         // Return case flag field state and error messages to the parent
         this.caseFlagStateEmitter.emit({ currentCaseFlagFieldState: CaseFlagFieldState.FLAG_STATUS, errorMessages: this.errorMessages });
     }
+    next() {
+        this.onNext();
+        if (this.errorMessages.length === 0) {
+            super.next();
+        }
+    }
     validateTextEntry() {
         this.statusReasonNotEnteredErrorMessage = null;
         this.statusReasonCharLimitErrorMessage = null;
@@ -25368,8 +25801,8 @@ class ConfirmFlagStatusComponent {
             });
         }
     }
-    static ɵfac = function ConfirmFlagStatusComponent_Factory(t) { return new (t || ConfirmFlagStatusComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmFlagStatusComponent, selectors: [["ccd-confirm-flag-status"]], inputs: { formGroup: "formGroup", defaultStatus: "defaultStatus" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, decls: 23, vars: 22, consts: [[3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "confirm-flag-status-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "confirm-flag-status-heading", 1, "govuk-fieldset__heading"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional", "govuk-!-margin-bottom-4"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "status-reason-hint", 1, "govuk-hint"], ["id", "status-reason-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "status-reason-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "status-reason-hint status-reason-char-limit-info", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "status-reason-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-button-group"], ["type", "button", 1, "button", "button-primary", 3, "click"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "status-reason-not-entered-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "status-reason-char-limit-error", 1, "govuk-error-message"]], template: function ConfirmFlagStatusComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = /*@__PURE__*/ (() => { let ɵConfirmFlagStatusComponent_BaseFactory; return function ConfirmFlagStatusComponent_Factory(t) { return (ɵConfirmFlagStatusComponent_BaseFactory || (ɵConfirmFlagStatusComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ConfirmFlagStatusComponent)))(t || ConfirmFlagStatusComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConfirmFlagStatusComponent, selectors: [["ccd-confirm-flag-status"]], inputs: { formGroup: "formGroup", defaultStatus: "defaultStatus" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 19, consts: [[3, "formGroup"], ["data-module", "govuk-character-count", "data-maxlength", "200", 1, "govuk-character-count"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "confirm-flag-status-heading", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--m"], ["id", "confirm-flag-status-heading", 1, "govuk-fieldset__heading"], ["data-module", "govuk-radios", "id", "conditional-radios-list", 1, "govuk-radios", "govuk-radios--conditional", "govuk-!-margin-bottom-4"], ["class", "govuk-radios__item", 4, "ngFor", "ngForOf"], ["id", "status-reason-hint", 1, "govuk-hint"], ["id", "status-reason-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "status-reason-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", "aria-describedby", "status-reason-hint status-reason-char-limit-info", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["id", "status-reason-char-limit-info", "aria-live", "polite", 1, "govuk-hint", "govuk-character-count__message"], [1, "govuk-radios__item"], ["type", "radio", 1, "govuk-radios__input", 3, "id", "name", "value", "formControlName"], [1, "govuk-label", "govuk-radios__label", 3, "for"], ["id", "status-reason-not-entered-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "status-reason-char-limit-error", 1, "govuk-error-message"]], template: function ConfirmFlagStatusComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementContainerStart(0, 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "fieldset", 3)(4, "legend", 4)(5, "h1", 5);
             i0.ɵɵtext(6);
@@ -25389,21 +25822,16 @@ class ConfirmFlagStatusComponent {
             i0.ɵɵpipe(18, "rpxTranslate");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵelementStart(19, "div", 13)(20, "button", 14);
-            i0.ɵɵlistener("click", function ConfirmFlagStatusComponent_Template_button_click_20_listener() { return ctx.onNext(); });
-            i0.ɵɵtext(21);
-            i0.ɵɵpipe(22, "rpxTranslate");
-            i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c0$l, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c0$l, ctx.errorMessages.length > 0));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 12, ctx.confirmFlagStatusTitle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 11, ctx.confirmFlagStatusTitle), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngForOf", ctx.flagCreationStatuses);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 14, ctx.statusReasonHint), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 13, ctx.statusReasonHint), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.statusReasonNotEnteredErrorMessage);
             i0.ɵɵadvance();
@@ -25411,14 +25839,12 @@ class ConfirmFlagStatusComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("id", ctx.statusReasonControlName)("name", ctx.statusReasonControlName)("formControlName", ctx.statusReasonControlName);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 16, ctx.statusReasonCharLimitInfo), " ");
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 18, "Next"));
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 15, ctx.statusReasonCharLimitInfo), " ");
         } }, dependencies: [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmFlagStatusComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-confirm-flag-status', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"confirm-flag-status-heading\">\n        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n          <h1 id=\"confirm-flag-status-heading\" class=\"govuk-fieldset__heading\">\n            {{confirmFlagStatusTitle | rpxTranslate}}\n          </h1>\n        </legend>\n        <div class=\"govuk-radios govuk-radios--conditional govuk-!-margin-bottom-4\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n          <div class=\"govuk-radios__item\" *ngFor=\"let status of flagCreationStatuses; index as i\">\n            <input class=\"govuk-radios__input\" id=\"flag-status-{{i}}\" [name]=\"selectedStatusControlName\"\n              type=\"radio\" [value]=\"status\" [formControlName]=\"selectedStatusControlName\"/>\n            <label class=\"govuk-label govuk-radios__label\" for=\"flag-status-{{i}}\">\n              {{caseFlagStatusEnum[status] | rpxTranslate}}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n      <div id=\"status-reason-hint\" class=\"govuk-hint\">\n        {{statusReasonHint | rpxTranslate}}\n      </div>\n      <div id=\"status-reason-not-entered-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"statusReasonNotEnteredErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonNotEnteredErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"status-reason-char-limit-error\" class=\"govuk-error-message\"\n        *ngIf=\"statusReasonCharLimitErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonCharLimitErrorMessage | rpxTranslate}}\n      </div>\n      <textarea class=\"govuk-textarea\" [id]=\"statusReasonControlName\"\n        [name]=\"statusReasonControlName\" [formControlName]=\"statusReasonControlName\" rows=\"5\"\n        aria-describedby=\"status-reason-hint status-reason-char-limit-info\"></textarea>\n      <div id=\"status-reason-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n        {{statusReasonCharLimitInfo | rpxTranslate}}\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<div class=\"govuk-button-group\">\n  <button class=\"button button-primary\" type=\"button\" (click)=\"onNext()\">{{'Next' | rpxTranslate}}</button>\n</div>\n" }]
+        args: [{ selector: 'ccd-confirm-flag-status', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"200\">\n    <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': errorMessages.length > 0}\">\n      <fieldset class=\"govuk-fieldset\" aria-describedby=\"confirm-flag-status-heading\">\n        <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n          <h1 id=\"confirm-flag-status-heading\" class=\"govuk-fieldset__heading\">\n            {{confirmFlagStatusTitle | rpxTranslate}}\n          </h1>\n        </legend>\n        <div class=\"govuk-radios govuk-radios--conditional govuk-!-margin-bottom-4\" data-module=\"govuk-radios\" id=\"conditional-radios-list\">\n          <div class=\"govuk-radios__item\" *ngFor=\"let status of flagCreationStatuses; index as i\">\n            <input class=\"govuk-radios__input\" id=\"flag-status-{{i}}\" [name]=\"selectedStatusControlName\"\n              type=\"radio\" [value]=\"status\" [formControlName]=\"selectedStatusControlName\"/>\n            <label class=\"govuk-label govuk-radios__label\" for=\"flag-status-{{i}}\">\n              {{caseFlagStatusEnum[status] | rpxTranslate}}\n            </label>\n          </div>\n        </div>\n      </fieldset>\n      <div id=\"status-reason-hint\" class=\"govuk-hint\">\n        {{statusReasonHint | rpxTranslate}}\n      </div>\n      <div id=\"status-reason-not-entered-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"statusReasonNotEnteredErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonNotEnteredErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"status-reason-char-limit-error\" class=\"govuk-error-message\"\n        *ngIf=\"statusReasonCharLimitErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{statusReasonCharLimitErrorMessage | rpxTranslate}}\n      </div>\n      <textarea class=\"govuk-textarea\" [id]=\"statusReasonControlName\"\n        [name]=\"statusReasonControlName\" [formControlName]=\"statusReasonControlName\" rows=\"5\"\n        aria-describedby=\"status-reason-hint status-reason-char-limit-info\"></textarea>\n      <div id=\"status-reason-char-limit-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n        {{statusReasonCharLimitInfo | rpxTranslate}}\n      </div>\n    </div>\n  </div>\n</ng-container>" }]
     }], null, { formGroup: [{
             type: Input
         }], defaultStatus: [{
@@ -25426,7 +25852,7 @@ class ConfirmFlagStatusComponent {
         }], caseFlagStateEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmFlagStatusComponent, { className: "ConfirmFlagStatusComponent", filePath: "lib/shared/components/palette/case-flag/components/confirm-flag-status/confirm-flag-status.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConfirmFlagStatusComponent, { className: "ConfirmFlagStatusComponent", filePath: "lib/shared/components/palette/case-flag/components/confirm-flag-status/confirm-flag-status.component.ts", lineNumber: 18 }); })();
 
 class FlagFieldDisplayPipe extends AsyncPipe {
     translationService;
@@ -28795,6 +29221,7 @@ class CaseEditSubmitComponent {
     route;
     orderService;
     profileNotifier;
+    multipageComponentStateService;
     formValidatorsService;
     eventTrigger;
     editForm;
@@ -28831,13 +29258,14 @@ class CaseEditSubmitComponent {
         // not been disabled.
         return this.caseEdit.isSubmitting || this.hasErrors;
     }
-    constructor(caseEdit, fieldsUtils, caseFieldService, route, orderService, profileNotifier, formValidatorsService) {
+    constructor(caseEdit, fieldsUtils, caseFieldService, route, orderService, profileNotifier, multipageComponentStateService, formValidatorsService) {
         this.caseEdit = caseEdit;
         this.fieldsUtils = fieldsUtils;
         this.caseFieldService = caseFieldService;
         this.route = route;
         this.orderService = orderService;
         this.profileNotifier = profileNotifier;
+        this.multipageComponentStateService = multipageComponentStateService;
         this.formValidatorsService = formValidatorsService;
     }
     ngOnInit() {
@@ -28859,6 +29287,7 @@ class CaseEditSubmitComponent {
         this.caseEdit.isLinkedCasesSubmission =
             this.eventTrigger.case_fields.some(caseField => FieldsUtils.isCaseFieldOfType(caseField, ['ComponentLauncher']));
         this.pageTitle = this.getPageTitle();
+        console.log(this.multipageComponentStateService.getInstigator());
         this.summary = this.formValidatorsService.addMarkDownValidators(this.editForm, 'event.summary');
         this.description = this.formValidatorsService.addMarkDownValidators(this.editForm, 'event.description');
     }
@@ -29023,7 +29452,7 @@ class CaseEditSubmitComponent {
         }
         return 'Cancel';
     }
-    static ɵfac = function CaseEditSubmitComponent_Factory(t) { return new (t || CaseEditSubmitComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(ProfileNotifier), i0.ɵɵdirectiveInject(FormValidatorsService)); };
+    static ɵfac = function CaseEditSubmitComponent_Factory(t) { return new (t || CaseEditSubmitComponent)(i0.ɵɵdirectiveInject(CaseEditComponent), i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(CaseFieldService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(ProfileNotifier), i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(FormValidatorsService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditSubmitComponent, selectors: [["ccd-case-edit-submit"]], decls: 23, vars: 21, consts: [["titleBlock", ""], ["idBlock", ""], [1, "govuk-heading-l"], [4, "ngIf", "ngIfThen", "ngIfElse"], [3, "error"], [3, "callbackErrorsContext", "callbackErrorsSubject"], [1, "check-your-answers", 3, "submit", "formGroup"], [4, "ngIf"], [3, "eventCompletionParams", "eventCanBeCompleted", 4, "ngIf"], [1, "form-group", "form-group-related"], ["class", "button button-secondary", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["type", "submit", 1, "button", 3, "disabled"], [1, "cancel"], ["href", "javascript:void(0)", 3, "click"], [3, "content"], ["class", "heading-h2", 4, "ngIf"], [1, "heading-h2"], ["class", "text-16", 4, "ngIf"], ["aria-describedby", "check your answers table", 1, "form-table"], [4, "ngFor", "ngForOf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "hidden", "formGroup", "contextFields"], ["class", "valign-top case-field-label", 4, "ngIf"], [1, "form-cell", "case-field-content"], [3, "formGroup", "topLevelFormGroup", "caseField", "context", "caseFields"], [1, "valign-top", "case-field-label"], [1, "valign-top", "check-your-answers__change", "case-field-change"], ["href", "javascript:void(0)", 3, "click", 4, "ngIf"], ["aria-describedby", "summary fields table", 1, "summary-fields"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields", 4, "ngSwitchCase"], ["class", "compound-field", "ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields"], ["id", "summary-field-label"], [1, "form-cell"], [3, "formGroup", "caseField"], ["ccdLabelSubstitutor", "", 1, "compound-field", 3, "caseField", "formGroup", "contextFields"], ["colspan", "2"], [3, "formGroup", "caseField", "caseFields"], ["id", "fieldset-event", "formGroupName", "event"], [2, "display", "none"], [1, "form-group", 3, "ngClass"], ["for", "field-trigger-summary", 1, "form-label"], [1, "form-hint"], ["class", "error-message", 4, "ngIf"], ["type", "text", "id", "field-trigger-summary", "formControlName", "summary", "maxlength", "1024", 1, "form-control", "bottom-30", "width-50", 3, "ngClass"], ["for", "field-trigger-description", 1, "form-label"], ["id", "field-trigger-description", "formControlName", "description", "maxlength", "65536", 1, "form-control", "bottom-30", "width-50", 3, "ngClass"], [1, "error-message"], [3, "eventCanBeCompleted", "eventCompletionParams"], ["type", "button", 1, "button", "button-secondary", 3, "click", "disabled"]], template: function CaseEditSubmitComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div")(1, "h1", 2);
@@ -29081,8 +29510,8 @@ class CaseEditSubmitComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEditSubmitComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-edit-submit', template: "<div>\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n\n  <!--Case ID or Title -->\n  <div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n  <ng-template #titleBlock>\n    <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n  </ng-template>\n  <ng-template #idBlock>\n    <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n  </ng-template>\n\n  <ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n  <ccd-callback-errors [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n                      (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n  <form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <div *ngIf=\"!caseEdit.isEventCompletionChecksRequired\">\n      <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n        <h2 class=\"heading-h2\">{{pageTitle | rpxTranslate }}</h2>\n        <span class=\"text-16\" *ngIf=\"!caseEdit.isCaseFlagSubmission\">{{'Check the information below carefully.' | rpxTranslate}}</span>\n\n        <table class=\"form-table\" aria-describedby=\"check your answers table\">\n          <tbody>\n          <ng-container *ngFor=\"let page of wizard.pages\">\n            <ng-container *ngIf=\"isShown(page)\">\n              <ng-container *ngFor=\"let field of page\n              | ccdPageFields: editForm\n              | ccdReadFieldsFilter: false :undefined :true :allFieldsValues\n              | ccdCYAPageLabelFilter\">\n                <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n                  <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                      [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                    <th *ngIf=\"!isLabel(field) && !caseEdit.isCaseFlagSubmission\" class=\"valign-top case-field-label\">\n                      <span class=\"text-16\">{{field.label | rpxTranslate}}</span>\n                    </th>\n                    <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                      <ccd-field-read\n                        [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                        [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                    </td>\n                    <ng-container *ngIf=\"!caseEdit.isCaseFlagSubmission\">\n                      <td class=\"valign-top check-your-answers__change case-field-change\">\n                        <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                          href=\"javascript:void(0)\">\n                          <span class=\"text-16\" attr.aria-label=\"{{'Change' | rpxTranslate}} {{ field.label | rpxTranslate }}\">\n                            {{'Change' | rpxTranslate}}\n                          </span>\n                        </a>\n                      </td>\n                    </ng-container>\n                  </tr>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n          </tbody>\n        </table>\n      </ng-container>\n      <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n        <table class=\"summary-fields\" aria-describedby=\"summary fields table\">\n          <tbody>\n            <ng-container *ngFor=\"let field of showSummaryFields\">\n                <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                  <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                    <th id=\"summary-field-label\">{{field.label}}</th>\n                    <td class=\"form-cell\">\n                      <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                    </td>\n                  </tr>\n                  <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                    <td colspan=\"2\">\n                      <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                    </td>\n                  </tr>\n                </ng-container>\n              </ng-container>\n          </tbody>\n        </table>\n      </ng-container>\n      <ng-container *ngIf=\"showEventNotes()\">\n        <fieldset id=\"fieldset-event\" formGroupName=\"event\">\n          <legend style=\"display: none;\"></legend>\n          <div class=\"form-group\" [ngClass]=\"{'form-group-error': !!summary && !summary.valid && (summary.dirty || summary.touched)}\">\n            <label for=\"field-trigger-summary\" class=\"form-label\">\n              Event summary (optional)\n              <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n            </label>\n            <span class=\"error-message\" *ngIf=\"summary?.errors && (summary.dirty || summary.touched)\">\n              {{summary.errors | ccdFirstError: eventSummaryLabel | rpxTranslate}}\n            </span>\n            <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\"\n              [ngClass]=\"{'govuk-input--error': summary?.errors && (summary.dirty || summary.touched)}\" formControlName=\"summary\" maxlength=\"1024\">\n          </div>\n          <div class=\"form-group\" [ngClass]=\"{'form-group-error': !!description && !description.valid && (description.dirty || description.touched)}\">\n            <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n            <span class=\"error-message\" *ngIf=\"description?.errors && (description.dirty || description.touched)\">\n              {{description.errors | ccdFirstError: eventDescriptionLabel | rpxTranslate}}\n            </span>\n            <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n              [ngClass]=\"{'govuk-input--error': description?.errors && (description.dirty || description.touched)}\" maxlength=\"65536\"></textarea>\n          </div>\n        </fieldset>\n      </ng-container>\n    </div>\n    <ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n      [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n      (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n    </ccd-case-event-completion>\n    <div class=\"form-group form-group-related\">\n      <button *ngIf=\"!caseEdit.isCaseFlagSubmission\" class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || caseEdit.isSubmitting\" (click)=\"previous()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">\n        {{triggerText | rpxTranslate}}\n      </button>\n    </div>\n    <p class=\"cancel\">\n      <a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"caseEdit.isSubmitting\">{{getCancelText() | rpxTranslate}}</a>\n    </p>\n  </form>\n</div>\n\n", styles: ["#fieldset-case-data{margin-bottom:30px}#fieldset-case-data th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}#confirmation-header{width:630px;background-color:#17958b;border:solid 1px #979797;color:#fff;text-align:center}#confirmation-body{width:630px;background-color:#fff}.valign-top{vertical-align:top}.summary-fields{margin-bottom:30px}.summary-fields tbody tr th,.summary-fields tbody tr td{border-bottom:0px}a.disabled{pointer-events:none;cursor:default}.case-field-label{width:45%}.case-field-content{width:50%}.no-bottom-border{border-bottom:none}.case-field-change{width:5%}\n"] }]
-    }], () => [{ type: CaseEditComponent }, { type: FieldsUtils }, { type: CaseFieldService }, { type: i1$1.ActivatedRoute }, { type: OrderService }, { type: ProfileNotifier }, { type: FormValidatorsService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditSubmitComponent, { className: "CaseEditSubmitComponent", filePath: "lib/shared/components/case-editor/case-edit-submit/case-edit-submit.component.ts", lineNumber: 27 }); })();
+    }], () => [{ type: CaseEditComponent }, { type: FieldsUtils }, { type: CaseFieldService }, { type: i1$1.ActivatedRoute }, { type: OrderService }, { type: ProfileNotifier }, { type: MultipageComponentStateService }, { type: FormValidatorsService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditSubmitComponent, { className: "CaseEditSubmitComponent", filePath: "lib/shared/components/case-editor/case-edit-submit/case-edit-submit.component.ts", lineNumber: 28 }); })();
 
 function CaseProgressComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -29330,7 +29759,8 @@ class CaseEditorModule {
             SessionStorageService,
             EventCompletionStateMachineService,
             CaseFlagStateService,
-            ValidPageListCaseFieldsService
+            ValidPageListCaseFieldsService,
+            MultipageComponentStateService
         ], imports: [CommonModule,
             RouterModule,
             FormsModule,
@@ -29412,7 +29842,8 @@ class CaseEditorModule {
                     SessionStorageService,
                     EventCompletionStateMachineService,
                     CaseFlagStateService,
-                    ValidPageListCaseFieldsService
+                    ValidPageListCaseFieldsService,
+                    MultipageComponentStateService
                 ]
             }]
     }], null, null); })();
@@ -29444,7 +29875,7 @@ class CaseEditorModule {
         CallbackErrorsComponent] }); })();
 i0.ɵɵsetComponentScope(CaseEditConfirmComponent, function () { return [i5.NgIf, i4.ɵNgNoValidate, i4.NgControlStatusGroup, i4.FormGroupDirective, MarkdownComponent]; }, function () { return [CaseReferencePipe, CcdCaseTitlePipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseEditPageComponent, function () { return [i5.NgForOf, i5.NgIf, i4.ɵNgNoValidate, i4.NgControlStatusGroup, i4.FormGroupDirective, CallbackErrorsComponent, MarkdownComponent, CaseEventCompletionComponent, CaseEditFormComponent,
-    CaseEditGenericErrorsComponent]; }, function () { return [i5.AsyncPipe, CaseReferencePipe, CcdCaseTitlePipe, i1.RpxTranslatePipe]; });
+    CaseEditGenericErrorsComponent]; }, function () { return [CaseReferencePipe, CcdCaseTitlePipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseEditFormComponent, function () { return [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i4.NgControlStatusGroup, i4.FormGroupDirective, LabelSubstitutorDirective, ConditionalShowFormDirective, FieldReadComponent, FieldWriteComponent]; }, function () { return [IsCompoundPipe, IsReadOnlyAndNotCollectionPipe]; });
 i0.ɵɵsetComponentScope(CaseEditSubmitComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i4.ɵNgNoValidate, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.MaxLengthValidator, i4.FormGroupDirective, i4.FormControlName, i4.FormGroupName, LabelSubstitutorDirective, CallbackErrorsComponent, MarkdownComponent, FieldReadComponent, CaseEventCompletionComponent, CaseEditGenericErrorsComponent]; }, function () { return [FirstErrorPipe, IsCompoundPipe, CaseReferencePipe, CcdCaseTitlePipe, CcdCYAPageLabelFilterPipe, ReadFieldsFilterPipe, CcdPageFieldsPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(CaseCreateComponent, function () { return [i5.NgIf, CaseEditComponent]; }, []);
@@ -31582,6 +32013,7 @@ class CaseEventTriggerComponent {
     activitySubscription;
     caseSubscription;
     parentUrl;
+    routerCurrentNavigation;
     constructor(ngZone, casesService, caseNotifier, router, alertService, route, caseReferencePipe, activityPollingService, sessionStorageService) {
         this.ngZone = ngZone;
         this.casesService = casesService;
@@ -31592,6 +32024,7 @@ class CaseEventTriggerComponent {
         this.caseReferencePipe = caseReferencePipe;
         this.activityPollingService = activityPollingService;
         this.sessionStorageService = sessionStorageService;
+        this.routerCurrentNavigation = this.router.getCurrentNavigation();
     }
     ngOnInit() {
         if (this.route.snapshot.data.case) {
@@ -31670,8 +32103,16 @@ class CaseEventTriggerComponent {
         });
     }
     cancel() {
-        if (this.router.url && this.router.url.includes('linkCases')) {
-            this.router.navigate(['cases', 'case-details', this.caseDetails.case_id], { fragment: 'Linked cases' });
+        const previousUrl = this.routerCurrentNavigation?.previousNavigation?.finalUrl?.toString();
+        if (previousUrl) {
+            if (previousUrl.indexOf('#') > -1) {
+                const url = previousUrl.split('#')[0];
+                const fragment = previousUrl.split('#')[1].replace('%20', ' ');
+                return this.router.navigate([url], { fragment: fragment });
+            }
+            else {
+                return this.router.navigate([previousUrl]);
+            }
         }
         else {
             return this.router.navigate([this.parentUrl]);
@@ -32246,7 +32687,7 @@ function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_2_ng_
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", "case-viewer-field-read--" + field_r7.id);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("topLevelFormGroup", ctx_r1.formGroup == null ? null : ctx_r1.formGroup.controls["data"])("caseField", field_r7)("caseReference", ctx_r1.caseDetails.case_id)("markdownUseHrefAsRouterLink", ctx_r1.markdownUseHrefAsRouterLink);
+    i0.ɵɵproperty("topLevelFormGroup", ctx_r1.formGroup.controls["data"])("caseField", field_r7)("caseReference", ctx_r1.caseDetails.case_id)("markdownUseHrefAsRouterLink", ctx_r1.markdownUseHrefAsRouterLink);
 } }
 function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_2_ng_container_3_tr_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr", 38)(1, "th", 33)(2, "span", 34);
@@ -32295,7 +32736,7 @@ function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_ng_template_2_Tem
     i0.ɵɵclassMap(tab_r8.id);
     i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 4, "case viewer table"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBindV(5, 8, i0.ɵɵpureFunction2(14, _c1$3, i0.ɵɵpipeBind1(4, 6, tab_r8), ctx_r1.formGroup == null ? null : ctx_r1.formGroup.controls["data"])));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBindV(5, 8, i0.ɵɵpureFunction2(14, _c1$3, i0.ɵɵpipeBind1(4, 6, tab_r8), ctx_r1.formGroup.controls["data"])));
 } }
 function CaseFullAccessViewComponent_ng_container_12_mat_tab_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-tab", 26);
@@ -32781,7 +33222,7 @@ class CaseFullAccessViewComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFullAccessViewComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\"\n                       [eventId]=\"eventId\"\n                       (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-label]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup?.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup?.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}.hide-table-capion{position:absolute;visibility:hidden}\n"] }]
+        args: [{ selector: 'ccd-case-full-access-view', template: "<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"group\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'Something went wrong' | rpxTranslate}}\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>{{\"We're working to fix the problem. Try again shortly.\" | rpxTranslate}}</p>\n    <p>\n      <a href=\"get-help\" target=\"_blank\">\n        {{\"Contact us\" | rpxTranslate}}</a> {{\"if you're still having problems.\" | rpxTranslate}}\n    </p>\n  </div>\n</div>\n<!-- Callback error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"group\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h2 class=\"heading-h2 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    {{'The callback data failed validation' | rpxTranslate}}\n  </h2>\n  <p>{{error.message | rpxTranslate}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\">\n      {{fieldError.message | rpxTranslate}}\n    </li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n<div class=\"grid-row\">\n  <div class=\"column-one-half\">\n    <ccd-case-header [caseDetails]=\"caseDetails\"></ccd-case-header>\n    <div class=\"case-viewer-controls\" *ngIf=\"hasPrint && !isDraft() && isPrintEnabled()\">\n      <a id=\"case-viewer-control-print\" routerLink=\"print\" class=\"button button-secondary\">{{'Print' | rpxTranslate}}</a>\n    </div>\n  </div>\n  <div *ngIf=\"hasEventSelector\" class=\"column-one-half\">\n    <ccd-event-trigger [isDisabled]=\"isTriggerButtonDisabled()\" [triggers]=\"caseDetails.triggers\"\n                       [triggerText]=\"triggerText\"\n                       [eventId]=\"eventId\"\n                       (onTriggerChange)=\"clearErrorsAndWarnings()\"\n                       (onTriggerSubmit)=\"applyTrigger($event)\"></ccd-event-trigger>\n  </div>\n</div>\n<div class=\"grid-row\" *ngIf=\"activeCaseFlags && !caseFlagsExternalUser\">\n  <div class=\"column-full\">\n    <ccd-notification-banner [notificationBannerConfig]=\"notificationBannerConfig\" (linkClicked)=\"onLinkClicked($event)\">\n    </ccd-notification-banner>\n  </div>\n</div>\n<div class=\"grid-row\">\n  <div class=\"column-full\">\n    <ng-container *ngIf=\"hasTabsPresent()\">\n      <mat-tab-group #tabGroup animationDuration=\"0ms\" (selectedIndexChange)=\"tabChanged($event)\" [disableRipple]=\"true\"\n        [selectedIndex]=\"selectedTabIndex\">\n        <mat-tab *ngFor=\"let tab of prependedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of sortedTabs; let curIdx=index\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n          <ng-template matTabContent>\n            <table [class]=\"tab.id\" [attr.aria-label]=\"'case viewer table' | rpxTranslate\">\n              <tbody>\n              <ng-container *ngFor=\"let field of tab | ccdTabFields | ccdReadFieldsFilter:false :undefined :true : formGroup.controls['data']\">\n                <div ccdLabelSubstitutor [caseField]=\"field\" [contextFields]=\"caseFields\" [hidden]=\"field.hidden\">\n                  <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                    <tr *ngSwitchCase=\"true\">\n                      <th id=\"case-viewer-field-label\" *ngIf=\"!isFieldToHaveNoLabel(field)\">\n                        <div class=\"case-viewer-label text-16\">\n                          {{field.label | rpxTranslate}}</div>\n                      </th>\n                      <td [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </td>\n                    </tr>\n                    <tr *ngSwitchCase=\"false\" class=\"compound-field\">\n                      <th [id]=\"'case-viewer-field-read--' + field.id\" scope=\"col\">\n                        <span class=\"text-16\">\n                          <ccd-field-read [topLevelFormGroup]=\"formGroup.controls['data']\"\n                                          [caseField]=\"field\" [caseReference]=\"caseDetails.case_id\"\n                                          [markdownUseHrefAsRouterLink]=\"markdownUseHrefAsRouterLink\">\n                          </ccd-field-read>\n                        </span>\n                      </th>\n                    </tr>\n                  </ng-container>\n                </div>\n              </ng-container>\n              </tbody>\n            </table>\n          </ng-template>\n        </mat-tab>\n        <mat-tab *ngFor=\"let tab of appendedTabs\" [id]=\"tab.id\" [label]=\"tab.label | rpxTranslate\">\n        </mat-tab>\n      </mat-tab-group>\n      <router-outlet *ngIf=\"(prependedTabs && prependedTabs.length) || (appendedTabs && appendedTabs.length)\"></router-outlet>\n    </ng-container>\n  </div>\n</div>\n", styles: ["th{width:1%;white-space:nowrap;vertical-align:top}.compound-field th{padding:0}.case-viewer-controls{margin-top:47px;margin-bottom:20px}ccd-case-header{float:left;margin-right:10px}ccd-event-trigger{float:right}.case-viewer-label{min-width:300px;white-space:normal}.markdown h3{margin-bottom:0}.hide-table-capion{position:absolute;visibility:hidden}\n"] }]
     }], () => [{ type: i0.NgZone }, { type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1$3.MatLegacyDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i5.Location }, { type: i0.ChangeDetectorRef }, { type: SessionStorageService }, { type: i1.RpxTranslatePipe }], { hasPrint: [{
             type: Input
         }], hasEventSelector: [{
@@ -37199,5 +37640,5 @@ class TestRouteSnapshotBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAppConfig, AbstractFieldReadComponent, AbstractFieldWriteComponent, 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, 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, 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, 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, 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, QualifyingQuestionsErrorMessage, QueryAttachmentsReadComponent, QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryCreateContext, QueryDetailsComponent, QueryEventCompletionComponent, QueryItemResponseStatus, QueryListComponent, QueryListData, QueryListItem, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, RaiseQueryErrorMessage, ReadCaseFlagFieldComponent, ReadCaseLinkFieldComponent, ReadCollectionFieldComponent, ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, 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, SessionStorageService, ShowCondition, SortOrder$1 as SortOrder, SortParameters, SortSearchResultPipe, TabComponent, TableColumnConfig, TableConfig, TabsComponent, TabsModule, TaskAssignedComponent, TaskCancelledComponent, TaskConflictComponent, TaskUnassignedComponent, Terms, TestRouteSnapshotBuilder, 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 };
+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, 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, 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, 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, QualifyingQuestionsErrorMessage, QueryAttachmentsReadComponent, QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryCreateContext, QueryDetailsComponent, QueryEventCompletionComponent, QueryItemResponseStatus, QueryListComponent, QueryListData, QueryListItem, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, RaiseQueryErrorMessage, ReadCaseFlagFieldComponent, ReadCaseLinkFieldComponent, ReadCollectionFieldComponent, ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, 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, SessionStorageService, ShowCondition, SortOrder$1 as SortOrder, SortParameters, SortSearchResultPipe, TabComponent, TableColumnConfig, TableConfig, TabsComponent, TabsModule, TaskAssignedComponent, TaskCancelledComponent, TaskConflictComponent, TaskUnassignedComponent, Terms, TestRouteSnapshotBuilder, 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