@hmcts/ccd-case-ui-toolkit 7.0.64-ungrey-back-button → 7.0.64-ungrey-back-button-3

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

@@ -41,6 +41,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import * as i7 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
 import moment$1 from 'moment/moment';
+import { cloneDeep } from 'lodash';
 import * as i4$1 from '@angular-material-components/datetime-picker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDateAdapter, NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentAdapter, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular-material-components/moment-adapter';
@@ -10286,6 +10287,7 @@ class LinkedCasesService {
                         }),
                     };
                 });
+                this.initialCaseLinks = this.linkedCases;
                 this.serverLinkedApiError = null;
             }, err => {
                 this.serverLinkedApiError = {
@@ -13150,7 +13152,7 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteJourneyComponent {
         if (this.navigatedTo) {
             const pageNo = this.fieldState === CaseFlagFieldState.FLAG_STATUS ? this.fieldState - 1 : this.fieldState;
             this.journeyPageNumber = pageNo;
-            this.journeyPreviousPageNumber = pageNo;
+            this.journeyPreviousPageNumber = pageNo + 1;
         }
         // Provided we have some stored state, i.e. when going backwards, we want 
         // to get the last visited page, etc. 
@@ -16902,7 +16904,6 @@ class LinkCasesComponent extends AbstractJourneyComponent {
         this.initForm();
         if (!this.linkedCasesService.hasNavigatedInJourney) {
             this.linkedCasesService.linkedCases = [];
-            this.linkedCasesService.caseFieldValue = [];
         }
         if (this.linkedCasesService.editMode || this.linkedCasesService.linkedCases.length) {
             // this may have includes the currently added one but yet to be submitted.
@@ -17054,7 +17055,6 @@ class LinkCasesComponent extends AbstractJourneyComponent {
                 CreatedDateTime: moment(new Date()).format(this.ISO_FORMAT),
                 ReasonForLink: this.getSelectedCCDTypeCaseReason()
             };
-            this.linkedCasesService.caseFieldValue = [];
             this.linkedCasesService.caseFieldValue.push({ id: caseView.case_id.toString(), value: ccdApiCaseLinkData });
             this.selectedCases.push(caseLink);
             this.linkCaseReasons.forEach(reason => reason.selected = false);
@@ -23549,7 +23549,7 @@ function CaseFlagSummaryListComponent_dl_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(21, "dd", 5)(22, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_Template_a_click_22_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : ctx_r1.caseFlagFieldState.FLAG_TYPE)); });
+    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_Template_a_click_22_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.changeButtonEmitter.emit(ctx_r1.summaryListDisplayMode === ctx_r1.displayMode.MANAGE ? ctx_r1.caseFlagFieldState.FLAG_UPDATE : ctx_r1.caseFlagFieldState.FLAG_TYPE)); });
     i0.ɵɵtext(23);
     i0.ɵɵpipe(24, "rpxTranslate");
     i0.ɵɵelementStart(25, "span", 7);
@@ -23708,7 +23708,7 @@ class CaseFlagSummaryListComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFlagSummaryListComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-flag-summary-list', template: "<dl class=\"govuk-summary-list\" *ngIf=\"flagForSummaryDisplay\">\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{addUpdateFlagHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagForSummaryDisplay.partyName || caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_LOCATION)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'party name' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{flagTypeHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescription}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'flag type' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagDescriptionWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Other description (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescriptionWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'other description (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagComments?.length > 0\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{externalUserUpdate ? flagUpdateComments : flagComments}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagCommentsWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagCommentsWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Status' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagStatus | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a *ngIf=\"is2Point1Enabled\" class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_STATUS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'status' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n</dl>\n" }]
+        args: [{ selector: 'ccd-case-flag-summary-list', template: "<dl class=\"govuk-summary-list\" *ngIf=\"flagForSummaryDisplay\">\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{addUpdateFlagHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagForSummaryDisplay.partyName || caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_LOCATION)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'party name' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{flagTypeHeaderText | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescription}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'flag type' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagDescriptionWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Other description (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagDescriptionWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_TYPE)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'other description (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagComments?.length > 0\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{externalUserUpdate ? flagUpdateComments : flagComments}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"flagCommentsWelsh?.length > 0 && !externalUserUpdate\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Comments (Welsh)' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagCommentsWelsh}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_COMMENTS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'comments (Welsh)' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\">\n    <dt class=\"govuk-summary-list__key\">\n      {{'Status' | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagStatus | rpxTranslate}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a *ngIf=\"is2Point1Enabled\" class=\"govuk-link\" href=\"javascript:void(0)\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_STATUS)\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'status' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n</dl>\n" }]
     }], () => [{ type: i1.RpxTranslationService }], { flagForSummaryDisplay: [{
             type: Input
         }], displayContextParameter: [{
@@ -23938,20 +23938,23 @@ 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", 10);
-    i0.ɵɵelement(1, "input", 11)(2, "label", 12);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "input", 11);
+    i0.ɵɵlistener("change", function ManageCaseFlagsComponent_div_9_Template_input_change_1_listener() { const flagDisplay_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onFlagSelectionChange(flagDisplay_r3)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "label", 12);
     i0.ɵɵpipe(3, "manageCaseFlagsLabelDisplay");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const flagDisplay_r2 = ctx.$implicit;
-    const i_r3 = ctx.index;
+    const flagDisplay_r3 = ctx.$implicit;
+    const i_r4 = ctx.index;
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate1("id", "flag-selection-", i_r3, "");
-    i0.ɵɵproperty("name", ctx_r0.selectedControlName)("value", flagDisplay_r2)("formControlName", ctx_r0.selectedControlName);
+    i0.ɵɵpropertyInterpolate1("id", "flag-selection-", i_r4, "");
+    i0.ɵɵproperty("checked", ctx_r0.isSelected(flagDisplay_r3));
     i0.ɵɵadvance();
-    i0.ɵɵpropertyInterpolate1("for", "flag-selection-", i_r3, "");
-    i0.ɵɵproperty("innerHtml", i0.ɵɵpipeBind1(3, 8, flagDisplay_r2), i0.ɵɵsanitizeHtml);
+    i0.ɵɵpropertyInterpolate1("for", "flag-selection-", i_r4, "");
+    i0.ɵɵproperty("innerHtml", i0.ɵɵpipeBind1(3, 6, flagDisplay_r3), i0.ɵɵsanitizeHtml);
 } }
 class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     formGroup;
@@ -23967,13 +23970,22 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     noFlagsError = false;
     selectedControlName = 'selectedManageCaseLocation';
     excludedFlagStatuses = [CaseFlagStatus.INACTIVE, CaseFlagStatus.NOT_APPROVED];
+    cachedControls;
     ngOnInit() {
         this.manageCaseFlagTitle = this.setManageCaseFlagTitle(this.displayContextParameter);
         let originalStatus;
+        let originalPathToFlag;
         // if the user has progressed to CYA and then navigated away, the flag they selected will be set as inactive, we need to reset this
-        if (this.formGroup.get('selectedManageCaseLocation')) {
-            const locationControl = this.formGroup.get('selectedManageCaseLocation');
-            originalStatus = locationControl.value?.originalStatus;
+        const locationControl = this.formGroup.get(this.selectedControlName);
+        if (locationControl) {
+            originalStatus = locationControl?.value?.originalStatus;
+            originalPathToFlag = locationControl?.value?.pathToFlagsFormGroup;
+            this.cachedControls = cloneDeep(this.formGroup.controls);
+            Object.keys(this.formGroup.controls).forEach((controlName) => {
+                if (controlName !== this.selectedControlName) {
+                    this.formGroup.removeControl(controlName);
+                }
+            });
         }
         // Map flags instances to objects for display, filtering out any where the original status is either "Inactive" or
         // "Not approved"
@@ -23984,7 +23996,7 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
                 if (flagsInstance.flags.details && flagsInstance.flags.details.length > 0) {
                     displayData = [
                         ...displayData,
-                        ...flagsInstance.flags.details.map((detail) => this.mapFlagDetailForDisplay(detail, flagsInstance, originalStatus))
+                        ...flagsInstance.flags.details.map((detail) => this.mapFlagDetailForDisplay(detail, flagsInstance, originalStatus, originalPathToFlag))
                     ];
                 }
                 return displayData;
@@ -24000,7 +24012,17 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
             this.onNoFlagsError();
         }
     }
-    mapFlagDetailForDisplay(flagDetail, flagsInstance, originalStatusFromFG) {
+    onFlagSelectionChange(selectedFlag) {
+        this.formGroup.get(this.selectedControlName).setValue(selectedFlag);
+    }
+    isSelected(flagDisplay) {
+        const selectedFlag = this.formGroup.get(this.selectedControlName)?.value;
+        return selectedFlag && this.getFlagID(selectedFlag) === this.getFlagID(flagDisplay);
+    }
+    getFlagID(flag) {
+        return flag?.flagDetailDisplay?.flagDetail?.id || '';
+    }
+    mapFlagDetailForDisplay(flagDetail, flagsInstance, originalStatusFromFG, originalPathToFlag) {
         // Reset the flag status with the original persisted status. This is needed because ngOnInit() needs to filter
         // out any "Inactive" or "Not approved" flags based on their status *before* modification. If the user changes a
         // flag's status then decides to return to the start of the flag update journey, the flag's status would no
@@ -24023,7 +24045,13 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
         }
         if (formattedValue && FieldsUtils.isNonEmptyObject(formattedValue)) {
             const originalFlagDetail = formattedValue.details?.find((detail) => detail.id === flagDetail.id);
-            const statusToUse = originalStatusFromFG ? (originalStatusFromFG === originalFlagDetail.value?.status ? originalFlagDetail.value?.status : originalStatusFromFG) : originalFlagDetail.value?.status;
+            let statusToUse;
+            if (flagsInstance.pathToFlagsFormGroup === originalPathToFlag) {
+                statusToUse = originalStatusFromFG ? (originalStatusFromFG === originalFlagDetail.value?.status ? originalFlagDetail.value?.status : originalStatusFromFG) : originalFlagDetail.value?.status;
+            }
+            else {
+                statusToUse = originalFlagDetail.value?.status;
+            }
             if (originalFlagDetail) {
                 originalStatus = statusToUse;
                 flagDetail.flagComment = originalFlagDetail.value?.flagComment;
@@ -24096,12 +24124,25 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     }
     next() {
         this.onNext();
+        const cachedControl = this.cachedControls?.[this.selectedControlName];
+        if (cachedControl && this.getFlagID(cachedControl.value) === this.getFlagID(this.formGroup.value[this.selectedControlName])) {
+            this.reapplyCachedControls();
+        }
         if (this.errorMessages.length === 0) {
             super.next();
         }
     }
+    reapplyCachedControls() {
+        if (this.cachedControls) {
+            Object.keys(this.cachedControls).forEach((controlName) => {
+                if (!this.formGroup.contains(controlName)) {
+                    this.formGroup.addControl(controlName, this.cachedControls[controlName]);
+                }
+            });
+        }
+    }
     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) {
+    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, "change", "id", "checked"], [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);
@@ -24109,7 +24150,7 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵtemplate(7, ManageCaseFlagsComponent_div_7_Template, 6, 6, "div", 5);
             i0.ɵɵelementStart(8, "div", 6);
-            i0.ɵɵtemplate(9, ManageCaseFlagsComponent_div_9_Template, 4, 10, "div", 7);
+            i0.ɵɵtemplate(9, ManageCaseFlagsComponent_div_9_Template, 4, 8, "div", 7);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementContainerEnd();
         } if (rf & 2) {
@@ -24126,7 +24167,7 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
 }
 (() => { (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>", 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}}\"\n            type=\"radio\"\n            [checked]=\"isSelected(flagDisplay)\"\n            (change)=\"onFlagSelectionChange(flagDisplay)\"/>\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: [{
@@ -24138,7 +24179,7 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
         }], 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: 15 }); })();
+(() => { (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: 16 }); })();
 
 // tslint:disable:variable-name
 /**
@@ -24584,7 +24625,11 @@ class SelectFlagLocationComponent extends AbstractJourneyComponent {
     selectedLocationControlName = 'selectedLocation';
     caseLevelFlagLabel = 'Case level';
     caseLevelCaseFlagsFieldId = 'caseFlags';
+    cachedLocation;
     ngOnInit() {
+        if (this.formGroup.get(this.selectedLocationControlName)) {
+            this.cachedLocation = this.formGroup.get(this.selectedLocationControlName).value?.pathToFlagsFormGroup;
+        }
         this.flagLocationTitle = this.isDisplayContextParameterExternal ?
             CaseFlagWizardStepTitle.SELECT_FLAG_LOCATION_EXTERNAL : CaseFlagWizardStepTitle.SELECT_FLAG_LOCATION;
         // Filter out any flags instances that don't have a party name, unless the instance is for case-level flags (this
@@ -24619,6 +24664,14 @@ class SelectFlagLocationComponent extends AbstractJourneyComponent {
     onNext() {
         // Validate flag location selection
         this.validateSelection();
+        //check if the user has changed their location selection
+        if (this.cachedLocation !== this.formGroup.get(this.selectedLocationControlName).value?.pathToFlagsFormGroup) {
+            Object.keys(this.formGroup.controls).forEach((controlName) => {
+                if (controlName !== this.selectedLocationControlName) {
+                    this.formGroup.removeControl(controlName);
+                }
+            });
+        }
         // Return case flag field state, error messages, and selected FlagsWithFormGroupPath instance (i.e. flag location) to
         // the parent
         this.caseFlagStateEmitter.emit({
@@ -29051,7 +29104,7 @@ CaseFlagTableComponent, function () { return [i5.NgForOf, i5.NgIf]; }, function
 i0.ɵɵsetComponentScope(SelectFlagTypeComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, FlagFieldDisplayPipe]; });
 i0.ɵɵsetComponentScope(SearchLanguageInterpreterComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i15.MatLegacyInput, i5$1.MatLegacyAutocomplete, i5$1.MatLegacyAutocompleteTrigger, i6.MatLegacyOption]; }, function () { return [i5.AsyncPipe, i1.RpxTranslatePipe, FlagFieldDisplayPipe,
     LanguageInterpreterDisplayPipe]; });
-i0.ɵɵsetComponentScope(ManageCaseFlagsComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, ManageCaseFlagsLabelDisplayPipe]; });
+i0.ɵɵsetComponentScope(ManageCaseFlagsComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective]; }, function () { return [i1.RpxTranslatePipe, ManageCaseFlagsLabelDisplayPipe]; });
 i0.ɵɵsetComponentScope(UpdateFlagComponent, function () { return [i5.NgClass, i5.NgForOf, i5.NgIf, i5.NgTemplateOutlet, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName]; }, function () { return [i1.RpxTranslatePipe, UpdateFlagTitleDisplayPipe]; });
 i0.ɵɵsetComponentScope(
 // Components for linked cases