@hmcts/ccd-case-ui-toolkit 7.0.47 → 7.0.48-ungrey-back-button-2

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);
@@ -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
@@ -10613,6 +10746,7 @@ class CaseEditPageComponent {
             this.caseEdit.cancelled.emit();
         }
         this.caseEditDataService.clearFormValidationErrors();
+        this.multipageComponentStateService.reset();
     }
     submitting() {
         return this.caseEdit.isSubmitting;
@@ -10765,7 +10899,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);
@@ -10774,7 +10908,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) {
@@ -10797,9 +10931,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;
@@ -10948,7 +11082,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;
@@ -11011,7 +11145,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 });
@@ -11025,7 +11159,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);
@@ -11078,7 +11212,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"), " ");
 } }
@@ -11550,7 +11684,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) {
@@ -11792,7 +11926,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;
@@ -11855,6 +11989,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";
@@ -12314,7 +12614,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");
@@ -12325,11 +12625,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();
@@ -12341,7 +12641,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();
@@ -12353,7 +12653,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();
@@ -12365,7 +12665,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();
@@ -12377,7 +12677,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();
@@ -12389,7 +12689,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();
@@ -12399,8 +12699,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();
@@ -12421,7 +12721,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();
@@ -12433,7 +12733,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();
@@ -12445,7 +12745,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();
@@ -12455,8 +12755,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();
@@ -12470,11 +12770,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 = [];
@@ -12508,24 +12809,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
@@ -12587,6 +12890,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 ||
@@ -12642,6 +12984,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
@@ -12651,6 +12994,7 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
             else {
                 this.fieldState++;
             }
+            this.nextPage();
         }
     }
     setFlagsCaseFieldValue() {
@@ -12669,6 +13013,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
@@ -12967,6 +13321,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();
@@ -12978,9 +13333,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();
@@ -12991,9 +13346,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) {
@@ -15891,7 +16246,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);
@@ -15899,20 +16254,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);
@@ -15920,14 +16271,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;
@@ -15944,13 +16296,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();
@@ -15961,11 +16322,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();
@@ -16087,14 +16448,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() {
@@ -16111,8 +16473,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();
@@ -16148,10 +16518,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) {
@@ -16181,7 +16551,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);
@@ -16192,7 +16562,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);
@@ -16204,10 +16574,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) {
@@ -16223,7 +16593,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);
@@ -16234,14 +16604,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) {
@@ -16251,7 +16621,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);
@@ -16263,26 +16633,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()();
@@ -16305,7 +16675,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);
@@ -16328,27 +16698,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()()();
@@ -16377,11 +16747,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;
@@ -16400,7 +16770,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;
@@ -16645,8 +17016,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");
@@ -16680,11 +17057,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), "");
@@ -16702,11 +17075,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();
@@ -17242,11 +17615,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;
     }
@@ -17256,8 +17630,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);
@@ -17280,70 +17654,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;
@@ -17358,7 +17728,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;
@@ -17451,6 +17822,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({
@@ -17463,22 +17840,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 {
@@ -17732,7 +18109,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();
@@ -17740,7 +18117,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();
@@ -17748,7 +18125,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();
@@ -17756,7 +18133,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();
@@ -17764,12 +18141,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;
@@ -17782,8 +18159,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;
@@ -17808,6 +18185,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) {
@@ -17865,6 +18249,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
@@ -17876,6 +18262,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) {
@@ -17920,10 +18307,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);
@@ -17943,9 +18342,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);
@@ -22390,7 +22789,7 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", node_r2.name, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, node_r2.upload_timestamp, "dd MMM YYYY"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, node_r2.upload_timestamp, "dd MMM YYYY HH:mm"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("allowMoving", ctx_r2.allowMoving);
 } }
@@ -22684,7 +23083,7 @@ class CaseFileViewFolderComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY HH:mm\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
     }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: AbstractAppConfig }], { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
@@ -22707,10 +23106,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();
@@ -22725,7 +23124,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();
@@ -22740,7 +23139,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();
@@ -22754,7 +23153,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;
@@ -22813,8 +23212,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);
@@ -22832,23 +23237,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();
@@ -22858,14 +23258,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: [{
@@ -22877,7 +23275,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();
@@ -23379,7 +23777,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();
@@ -23394,8 +23792,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) {
@@ -23409,18 +23807,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;
@@ -23554,8 +23941,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);
@@ -23566,24 +23959,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: [{
@@ -23595,7 +23985,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
 /**
@@ -23660,7 +24050,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();
@@ -23675,7 +24065,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();
@@ -23690,7 +24080,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();
@@ -23701,7 +24091,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();
@@ -23710,7 +24100,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();
@@ -23725,7 +24115,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();
@@ -23740,12 +24130,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();
@@ -23760,7 +24150,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;
@@ -23782,7 +24172,8 @@ class SearchLanguageInterpreterComponent {
     noResults = false;
     languageMaxCharLimit = 80;
     signLanguageFlagCode = 'RA0042';
-    constructor(rpxTranslationService) {
+    constructor(rpxTranslationService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
@@ -23882,8 +24273,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);
@@ -23912,22 +24309,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();
@@ -23937,32 +24329,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();
@@ -23989,7 +24379,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;
@@ -24009,10 +24399,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;
@@ -24028,18 +24418,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;
@@ -24114,8 +24493,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);
@@ -24126,24 +24511,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: [{
@@ -24153,7 +24535,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 });
@@ -24176,7 +24558,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();
@@ -24191,9 +24573,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()();
@@ -24210,7 +24592,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();
@@ -24225,9 +24607,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()();
@@ -24239,14 +24621,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);
@@ -24262,13 +24644,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) {
@@ -24278,7 +24660,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);
@@ -24286,18 +24668,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;
@@ -24319,6 +24690,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';
@@ -24326,15 +24699,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 = [];
@@ -24345,7 +24719,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
@@ -24359,8 +24733,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 {
@@ -24368,13 +24742,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)
             });
         }
     }
@@ -24402,9 +24776,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) {
@@ -24443,18 +24847,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) {
@@ -24465,19 +24884,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
@@ -24496,35 +24925,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();
@@ -24532,14 +24961,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();
@@ -24547,14 +24976,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();
@@ -24562,64 +24991,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();
@@ -24627,14 +25056,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();
@@ -24642,100 +25071,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();
@@ -24744,28 +25173,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;
@@ -24791,7 +25220,8 @@ class UpdateFlagComponent {
     get externallyVisibleFlag() {
         return this.selectedFlag.flagDetailDisplay.visibility?.toLowerCase() === 'external';
     }
-    constructor(rpxTranslationService) {
+    constructor(rpxTranslationService, multipageComponentStateService) {
+        super(multipageComponentStateService);
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
@@ -24938,9 +25368,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);
@@ -24958,53 +25393,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();
@@ -25019,7 +25447,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();
@@ -25034,7 +25462,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();
@@ -25049,7 +25477,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();
@@ -25063,7 +25491,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;
@@ -25137,8 +25565,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);
@@ -25197,78 +25631,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()();
@@ -25285,7 +25712,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();
@@ -25300,7 +25727,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();
@@ -25314,7 +25741,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();
@@ -25343,6 +25770,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;
@@ -25366,8 +25799,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);
@@ -25387,21 +25820,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();
@@ -25409,14 +25837,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: [{
@@ -25424,7 +25850,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;
@@ -28793,6 +29219,7 @@ class CaseEditSubmitComponent {
     route;
     orderService;
     profileNotifier;
+    multipageComponentStateService;
     formValidatorsService;
     eventTrigger;
     editForm;
@@ -28829,13 +29256,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() {
@@ -28857,6 +29285,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');
     }
@@ -29021,7 +29450,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);
@@ -29079,8 +29508,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();
@@ -29328,7 +29757,8 @@ class CaseEditorModule {
             SessionStorageService,
             EventCompletionStateMachineService,
             CaseFlagStateService,
-            ValidPageListCaseFieldsService
+            ValidPageListCaseFieldsService,
+            MultipageComponentStateService
         ], imports: [CommonModule,
             RouterModule,
             FormsModule,
@@ -29410,7 +29840,8 @@ class CaseEditorModule {
                     SessionStorageService,
                     EventCompletionStateMachineService,
                     CaseFlagStateService,
-                    ValidPageListCaseFieldsService
+                    ValidPageListCaseFieldsService,
+                    MultipageComponentStateService
                 ]
             }]
     }], null, null); })();
@@ -29442,7 +29873,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]; }, []);
@@ -31580,6 +32011,7 @@ class CaseEventTriggerComponent {
     activitySubscription;
     caseSubscription;
     parentUrl;
+    routerCurrentNavigation;
     constructor(ngZone, casesService, caseNotifier, router, alertService, route, caseReferencePipe, activityPollingService, sessionStorageService) {
         this.ngZone = ngZone;
         this.casesService = casesService;
@@ -31590,6 +32022,7 @@ class CaseEventTriggerComponent {
         this.caseReferencePipe = caseReferencePipe;
         this.activityPollingService = activityPollingService;
         this.sessionStorageService = sessionStorageService;
+        this.routerCurrentNavigation = this.router.getCurrentNavigation();
     }
     ngOnInit() {
         if (this.route.snapshot.data.case) {
@@ -31668,8 +32101,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]);
@@ -37200,5 +37641,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