@hmcts/ccd-case-ui-toolkit 7.3.48-xui-3740 → 7.3.49-3582-rc-1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, DOCUMENT, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Input, EventEmitter, Output, NgModule, ViewEncapsulation, forwardRef, Pipe, ContentChildren, ViewChildren, DOCUMENT, Injectable, Inject, ChangeDetectorRef, Directive, InjectionToken, ViewChild, ChangeDetectionStrategy, Injector, ViewContainerRef, SecurityContext, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/common';
 import { CommonModule, AsyncPipe, CurrencyPipe, formatDate } from '@angular/common';
 import * as i1 from 'rpx-xui-translation';
@@ -39,6 +39,7 @@ import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i6$1 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
+import * as i2$2 from '@angular/platform-browser';
 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';
@@ -52,7 +53,7 @@ import { MatLegacyInputModule } from '@angular/material/legacy-input';
 import * as i14 from '@hmcts/media-viewer';
 import { MediaViewerModule } from '@hmcts/media-viewer';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i2$2 from 'ngx-pagination';
+import * as i2$3 from 'ngx-pagination';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 import * as i10 from '@angular/material/legacy-tabs';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
@@ -3933,7 +3934,6 @@ class FieldsUtils {
     static SERVER_RESPONSE_FIELD_TYPE_COLLECTION = 'Collection';
     static SERVER_RESPONSE_FIELD_TYPE_COMPLEX = 'Complex';
     static SERVER_RESPONSE_FIELD_TYPE_DYNAMIC_LIST_TYPE = ['DynamicList', 'DynamicRadioList'];
-    static SERVER_RESPONSE_FIELD_TYPE_DYNAMIC_MULTISELECT_LIST_TYPE = 'DynamicMultiSelectList';
     static defaultTabList = {
         "PRLAPPS": "Summary"
     };
@@ -4184,53 +4184,31 @@ class FieldsUtils {
     static textForInvalidField(type, invalidValue) {
         return `{ Invalid ${type}: ${invalidValue} }`;
     }
-    static setDynamicListDefinition(caseField, caseFieldType, rootCaseField, isWithinCollection = false) {
+    static setDynamicListDefinition(caseField, caseFieldType, rootCaseField) {
         if (caseFieldType.type === FieldsUtils.SERVER_RESPONSE_FIELD_TYPE_COMPLEX) {
             caseFieldType.complex_fields.forEach(field => {
                 try {
                     const isDynamicField = FieldsUtils.SERVER_RESPONSE_FIELD_TYPE_DYNAMIC_LIST_TYPE.indexOf(field.field_type.type) !== -1;
-                    const isDynamicMultiSelectField = field.field_type.type === FieldsUtils.SERVER_RESPONSE_FIELD_TYPE_DYNAMIC_MULTISELECT_LIST_TYPE;
-                    if (isDynamicField || isDynamicMultiSelectField) {
+                    if (isDynamicField) {
                         const dynamicListValue = this.getDynamicListValue(rootCaseField.value, field.id);
                         if (dynamicListValue) {
-                            const list_items = dynamicListValue.find(data => data?.list_items !== undefined)?.list_items;
-                            if (list_items !== undefined) {
-                                field.list_items = list_items;
-                                field.formatted_value = {
-                                    ...field.formatted_value,
-                                    list_items
-                                };
-                            }
-                            if (isDynamicMultiSelectField) {
-                                if (!isWithinCollection) {
-                                    const value = dynamicListValue[0]?.value;
-                                    if (value !== undefined) {
-                                        field.value = value;
-                                        field.formatted_value = {
-                                            ...field.formatted_value,
-                                            value
-                                        };
-                                    }
-                                }
-                            }
-                            else {
-                                const complexValue = dynamicListValue.map(data => data.value);
-                                const value = {
-                                    list_items,
-                                    value: complexValue.length > 0 ? complexValue : undefined
-                                };
-                                field.value = {
-                                    ...value
-                                };
-                                field.formatted_value = {
-                                    ...field.formatted_value,
-                                    ...value
-                                };
-                            }
+                            const list_items = dynamicListValue[0].list_items;
+                            const complexValue = dynamicListValue.map(data => data.value);
+                            const value = {
+                                list_items,
+                                value: complexValue.length > 0 ? complexValue : undefined
+                            };
+                            field.value = {
+                                ...value
+                            };
+                            field.formatted_value = {
+                                ...field.formatted_value,
+                                ...value
+                            };
                         }
                     }
                     else {
-                        this.setDynamicListDefinition(field, field.field_type, rootCaseField, isWithinCollection);
+                        this.setDynamicListDefinition(field, field.field_type, rootCaseField);
                     }
                 }
                 catch (error) {
@@ -4240,7 +4218,7 @@ class FieldsUtils {
         }
         else if (caseFieldType.type === FieldsUtils.SERVER_RESPONSE_FIELD_TYPE_COLLECTION) {
             if (caseFieldType.collection_field_type) {
-                this.setDynamicListDefinition(caseField, caseFieldType.collection_field_type, rootCaseField, true);
+                this.setDynamicListDefinition(caseField, caseFieldType.collection_field_type, rootCaseField);
             }
         }
     }
@@ -5903,55 +5881,37 @@ class FieldTypeSanitiser {
     }
     ensureDynamicMultiSelectListPopulated(caseFields) {
         return caseFields.map((field) => {
-            const fieldData = field._value || field.value;
-            if (field.field_type.type === FieldTypeSanitiser.FIELD_TYPE_COMPLEX) {
-                this.checkNestedDynamicList(field, fieldData);
-            }
-            else if (field.field_type.type === FieldTypeSanitiser.FIELD_TYPE_COLLECTION &&
-                field.field_type.collection_field_type?.type === FieldTypeSanitiser.FIELD_TYPE_COMPLEX) {
-                this.checkNestedDynamicList(field, fieldData, true);
-            }
-            else {
+            if (field.field_type.type !== 'Complex') {
                 return field;
             }
+            const caseFieldData = field._value;
+            // Process each complex field
+            field.field_type.complex_fields.forEach((complexField) => {
+                if (complexField.field_type.type === FieldTypeSanitiser.FIELD_TYPE_COMPLEX) {
+                    this.checkNestedDynamicList(complexField, caseFieldData?.[complexField.id]);
+                }
+                else if (this.isDynamicList(complexField.field_type.type) &&
+                    complexField.display_context !== 'HIDDEN' &&
+                    field._value?.[complexField.id]) {
+                    complexField.list_items = field._value[complexField.id]?.list_items;
+                }
+            });
             // Final transformation: construct updated field object
             return { ...field, field_type: { ...field?.field_type } };
         });
     }
-    checkNestedDynamicList(caseField, fieldData = null, isCollection = false) {
-        const complexFields = isCollection
-            ? caseField.field_type.collection_field_type?.complex_fields || []
-            : caseField.field_type.complex_fields;
-        complexFields.forEach((complexField) => {
-            const childData = isCollection
-                ? this.getFirstCollectionFieldData(fieldData, complexField.id)
-                : fieldData?.[complexField.id];
+    checkNestedDynamicList(caseField, fieldData = null) {
+        caseField.field_type.complex_fields.forEach((complexField) => {
             if (complexField.field_type.type === FieldTypeSanitiser.FIELD_TYPE_COMPLEX) {
-                this.checkNestedDynamicList(complexField, childData);
-            }
-            else if (complexField.field_type.type === FieldTypeSanitiser.FIELD_TYPE_COLLECTION &&
-                complexField.field_type.collection_field_type?.type === FieldTypeSanitiser.FIELD_TYPE_COMPLEX) {
-                this.checkNestedDynamicList(complexField, childData, true);
+                this.checkNestedDynamicList(complexField, fieldData?.[complexField.id]);
             }
             else if (this.isDynamicList(complexField.field_type.type) &&
                 complexField.display_context !== 'HIDDEN' &&
-                childData) {
-                complexField.list_items = childData.list_items;
+                fieldData?.[complexField.id]) {
+                complexField.list_items = fieldData?.[complexField.id]?.list_items;
             }
         });
     }
-    getFirstCollectionFieldData(collectionData, fieldId) {
-        if (!Array.isArray(collectionData)) {
-            return null;
-        }
-        for (const item of collectionData) {
-            const value = item?.value || item;
-            if (value?.[fieldId] !== undefined) {
-                return value[fieldId];
-            }
-        }
-        return null;
-    }
     isDynamicList(fieldType) {
         return FieldTypeSanitiser.DYNAMIC_LIST_TYPE.indexOf(fieldType) !== -1;
     }
@@ -6275,7 +6235,7 @@ class FormValueService {
      * @param clearEmpty Whether or not we should clear out empty, optional, complex objects.
      * @param clearNonCase Whether or not we should clear out non-case fields at the top level.
      */
-    removeUnnecessaryFields(data, caseFields, clearEmpty = false, clearNonCase = false, fromPreviousPage = false, currentPageCaseFields = [], isNested = false) {
+    removeUnnecessaryFields(data, caseFields, clearEmpty = false, clearNonCase = false, fromPreviousPage = false, currentPageCaseFields = []) {
         if (data && caseFields && caseFields.length > 0) {
             // check if there is any data at the top level of the form that's not in the caseFields
             if (clearNonCase) {
@@ -6286,9 +6246,9 @@ class FormValueService {
                     // Retain anything that is readonly and not a label.
                     continue;
                 }
-                if (this.shouldRemoveHiddenField(field, isNested)) {
+                if (field.hidden === true && field.display_context !== 'HIDDEN' && field.display_context !== 'HIDDEN_TEMP' && field.id !== 'caseLinks' && !field.retain_hidden_value) {
                     // Delete anything that is hidden (that is NOT readonly), and that
-                    // is not explicitly retained. Nested hidden fields should be dropped by default.
+                    // hasn't had its display_context overridden to make it hidden.
                     delete data[field.id];
                 }
                 else if (field.field_type) {
@@ -6303,7 +6263,7 @@ class FormValueService {
                             }
                             break;
                         case 'Complex':
-                            this.removeUnnecessaryFields(data[field.id], field.field_type.complex_fields, clearEmpty, false, false, [], true);
+                            this.removeUnnecessaryFields(data[field.id], field.field_type.complex_fields, clearEmpty);
                             // Also remove any optional complex objects that are completely empty.
                             // EUI-4244: Ritesh's fix, passing true instead of clearEmpty.
                             if (FormValueService.clearOptionalEmpty(true, data[field.id], field)) {
@@ -6326,8 +6286,8 @@ class FormValueService {
                                 if (field.field_type.collection_field_type.type === 'Complex') {
                                     // Iterate through the elements and remove any unnecessary fields within.
                                     for (const item of collection) {
-                                        this.removeUnnecessaryFields(item, field.field_type.collection_field_type.complex_fields, clearEmpty, false, false, [], true);
-                                        this.removeUnnecessaryFields(item.value, field.field_type.collection_field_type.complex_fields, false, false, false, [], true);
+                                        this.removeUnnecessaryFields(item, field.field_type.collection_field_type.complex_fields, clearEmpty);
+                                        this.removeUnnecessaryFields(item.value, field.field_type.collection_field_type.complex_fields, false);
                                     }
                                 }
                             }
@@ -6341,12 +6301,6 @@ class FormValueService {
         // Clear out any MultiSelect labels.
         FormValueService.removeMultiSelectLabels(data);
     }
-    shouldRemoveHiddenField(field, isNested) {
-        return field.hidden === true
-            && field.id !== 'caseLinks'
-            && !field.retain_hidden_value
-            && (isNested || (field.display_context !== 'HIDDEN' && field.display_context !== 'HIDDEN_TEMP'));
-    }
     removeInvalidCollectionData(data, field) {
         if (data[field.id] && data[field.id].length > 0) {
             for (const objCollection of data[field.id]) {
@@ -6356,6 +6310,60 @@ class FormValueService {
             }
         }
     }
+    // exui-3582 When a form field becomes hidden based on user’s input in the event journey, 
+    // its stored value must be cleared and it must not be submitted or persisted.
+    removeHiddenField(data, caseFields, clearNonCase, formControls) {
+        if (clearNonCase && data && caseFields && caseFields.length > 0) {
+            for (const field of caseFields) {
+                if (!FormValueService.isLabel(field) && FormValueService.isReadOnly(field)) {
+                    // Retain anything that is readonly and not a label.
+                    continue;
+                }
+                // Check if formControls[field.id] exists before accessing its properties
+                const caseField = formControls[field.id] ? formControls[field.id]['caseField'] : undefined;
+                if (caseField === undefined || field.hidden === true) {
+                    continue;
+                }
+                const hasValue = data.hasOwnProperty(field.id) && data[field.id] != null &&
+                    (typeof data[field.id] !== 'object' || Object.keys(data[field.id]).length > 0);
+                if (caseField?.hidden === true &&
+                    field.display_context !== 'HIDDEN' &&
+                    field.display_context !== 'HIDDEN_TEMP' &&
+                    !field.retain_hidden_value &&
+                    field.id !== 'caseLinks' &&
+                    hasValue) {
+                    data[field.id] = null;
+                    continue; // If field is now hidden, skip checking its children
+                }
+                if (field.field_type) {
+                    switch (field.field_type.type) {
+                        case 'Complex':
+                            const complexData = data[field.id] ?? data['value'];
+                            if (complexData && formControls[field.id] && formControls[field.id]['controls']) {
+                                this.removeHiddenField(complexData, field.field_type.complex_fields, clearNonCase, formControls[field.id]['controls']);
+                            }
+                            break;
+                        case 'Collection':
+                            const collection = data[field.id];
+                            if (collection && Array.isArray(collection) && field.field_type.collection_field_type.type === 'Complex') {
+                                collection.forEach((item, index) => {
+                                    if (formControls[field.id] && formControls[field.id]['controls'] && formControls[field.id]['controls'][index]) {
+                                        const itemControls = formControls[field.id]?.['controls']?.[index]?.['controls']?.['value'];
+                                        const collectionData = item['value'] ?? item;
+                                        if (collectionData && itemControls?.['controls']) {
+                                            this.removeHiddenField(collectionData, field.field_type.collection_field_type.complex_fields, clearNonCase, itemControls['controls']);
+                                        }
+                                    }
+                                });
+                            }
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            }
+        }
+    }
     /**
      * Remove any empty collection fields where a value of greater than zero is specified in the field's {@link FieldType}
      * `min` attribute.
@@ -9755,10 +9763,8 @@ class CaseEditComponent {
         return form.value.event.id;
     }
     generateCaseEventData({ eventTrigger, form }) {
-        const formData = this.replaceHiddenFormValuesWithOriginalCaseData(form.get('data'), eventTrigger.case_fields);
-        this.formValueService.sanitiseDynamicLists(eventTrigger.case_fields, { data: formData });
         const caseEventData = {
-            data: this.replaceEmptyComplexFieldValues(this.formValueService.sanitise(formData, this.isCaseFlagSubmission)),
+            data: this.replaceEmptyComplexFieldValues(this.formValueService.sanitise(this.replaceHiddenFormValuesWithOriginalCaseData(form.get('data'), eventTrigger.case_fields), this.isCaseFlagSubmission)),
             event: form.value.event
         };
         this.formValueService.clearNonCaseFields(caseEventData.data, eventTrigger.case_fields);
@@ -9781,6 +9787,11 @@ class CaseEditComponent {
         if (!this.isCaseFlagSubmission) {
             this.formValueService.removeUnnecessaryFields(caseEventData.data, pageListCaseFields, true, true);
         }
+        // removeHiddenFields while are hidden in the UI
+        // Only remove hidden fields if editForm and its controls are available
+        if (form?.controls?.['data']?.['controls']) {
+            this.formValueService.removeHiddenField(caseEventData.data, pageListCaseFields, true, form.controls['data']['controls']);
+        }
         caseEventData.event_token = eventTrigger.event_token;
         caseEventData.ignore_warning = this.ignoreWarning;
         if (this.confirmation) {
@@ -11925,6 +11936,11 @@ class CaseEditPageComponent {
         this.validPageListCaseFieldsService.deleteNonValidatedFields(this.caseEdit.validPageList, caseEventData.data, this.eventTrigger.case_fields, fromPreviousPage, this.editForm.controls['data'].value);
         // Tidy it up before we return it.
         this.formValueService.removeUnnecessaryFields(caseEventData.data, caseFields, clearEmpty, clearNonCase, fromPreviousPage, this.currentPage.case_fields);
+        // removeHiddenFields while are hidden in the UI
+        // Only remove hidden fields if editForm and its controls are available
+        if (this.editForm?.controls?.['data']?.['controls']) {
+            this.formValueService.removeHiddenField(caseEventData.data, caseFields, clearNonCase, this.editForm.controls['data']['controls']);
+        }
         return caseEventData;
     }
     syncCaseEditDataService() {
@@ -26833,9 +26849,10 @@ function ManageCaseFlagsComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", i0.ɵɵinterpolate1("flag-selection-", i_r4))("checked", ctx_r0.isSelected(flagDisplay_r3));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", i0.ɵɵinterpolate1("flag-selection-", i_r4))("innerHtml", i0.ɵɵpipeBind1(3, 6, flagDisplay_r3), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("for", i0.ɵɵinterpolate1("flag-selection-", i_r4))("innerHTML", ctx_r0.sanitizeHtml(i0.ɵɵpipeBind1(3, 6, flagDisplay_r3)), i0.ɵɵsanitizeHtml);
 } }
 class ManageCaseFlagsComponent extends AbstractJourneyComponent {
+    sanitizer;
     formGroup;
     flagsData;
     caseTitle;
@@ -26850,6 +26867,10 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
     selectedControlName = 'selectedManageCaseLocation';
     excludedFlagStatuses = [CaseFlagStatus.INACTIVE, CaseFlagStatus.NOT_APPROVED];
     cachedControls;
+    constructor(multipageComponentStateService, sanitizer) {
+        super(multipageComponentStateService);
+        this.sanitizer = sanitizer;
+    }
     ngOnInit() {
         this.manageCaseFlagTitle = this.setManageCaseFlagTitle(this.displayContextParameter);
         let originalStatus;
@@ -27096,8 +27117,12 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
             });
         }
     }
-    static ɵfac = /*@__PURE__*/ (() => { let ɵManageCaseFlagsComponent_BaseFactory; return function ManageCaseFlagsComponent_Factory(__ngFactoryType__) { return (ɵManageCaseFlagsComponent_BaseFactory || (ɵManageCaseFlagsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ManageCaseFlagsComponent)))(__ngFactoryType__ || 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" }, standalone: false, 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) {
+    // Ensure there is no dangerous HTML in the flag name or description that could lead to XSS vulnerabilities
+    sanitizeHtml(content) {
+        return this.sanitizer.sanitize(SecurityContext.HTML, content ?? '') ?? '';
+    }
+    static ɵfac = function ManageCaseFlagsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManageCaseFlagsComponent)(i0.ɵɵdirectiveInject(MultipageComponentStateService), i0.ɵɵdirectiveInject(i2$2.DomSanitizer)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ManageCaseFlagsComponent, selectors: [["ccd-manage-case-flags"]], inputs: { formGroup: "formGroup", flagsData: "flagsData", caseTitle: "caseTitle", displayContextParameter: "displayContextParameter" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, standalone: false, 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);
@@ -27122,8 +27147,8 @@ class ManageCaseFlagsComponent extends AbstractJourneyComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManageCaseFlagsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-manage-case-flags', encapsulation: ViewEncapsulation.None, standalone: false, 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: [{
+        args: [{ selector: 'ccd-manage-case-flags', encapsulation: ViewEncapsulation.None, standalone: false, 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]=\"sanitizeHtml(flagDisplay | manageCaseFlagsLabelDisplay)\"></label>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>", styles: [".flag-name-and-description{font-weight:700}\n"] }]
+    }], () => [{ type: MultipageComponentStateService }, { type: i2$2.DomSanitizer }], { formGroup: [{
             type: Input
         }], flagsData: [{
             type: Input
@@ -27134,7 +27159,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: 17 }); })();
+(() => { (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: 19 }); })();
 
 // tslint:disable:variable-name
 /**
@@ -33628,7 +33653,7 @@ class PaginationComponent {
             i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 4, "Pagination"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", !(ctx.autoHide && p_r3.pages.length <= 1));
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$2.PaginationControlsDirective, i5.DecimalPipe, i1.RpxTranslatePipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]:after{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900;text-decoration:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i2$3.PaginationControlsDirective, i5.DecimalPipe, i1.RpxTranslatePipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]:after{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900;text-decoration:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
         type: Component,
@@ -33972,7 +33997,7 @@ class CaseListComponent {
             i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(10, 9, ctx.cases, i0.ɵɵpureFunction3(12, _c0$d, ctx.pageSize, ctx.currentPageNo, ctx.totalResultsCount)));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.totalResultsCount > ctx.pageSize);
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.NgSwitchDefault, i1$1.RouterLink, PaginationComponent, i5.CurrencyPipe, i2$2.PaginatePipe, i1.RpxTranslatePipe], encapsulation: 2 });
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.NgSwitchDefault, i1$1.RouterLink, PaginationComponent, i5.CurrencyPipe, i2$3.PaginatePipe, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseListComponent, [{
         type: Component,
@@ -41227,7 +41252,7 @@ class SearchResultModule {
         PipesModule,
         ActivityModule,
         PaginationModule, i1.RpxTranslationModule, PaletteModule], exports: [SearchResultComponent] }); })();
-i0.ɵɵsetComponentScope(SearchResultComponent, function () { return [i5.NgForOf, i5.NgIf, i1$1.RouterLink, LabelSubstitutorDirective, ActivityComponent, PaginationComponent, FieldReadComponent]; }, function () { return [i5.DecimalPipe, i2$2.PaginatePipe, CaseReferencePipe, SortSearchResultPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(SearchResultComponent, function () { return [i5.NgForOf, i5.NgIf, i1$1.RouterLink, LabelSubstitutorDirective, ActivityComponent, PaginationComponent, FieldReadComponent]; }, function () { return [i5.DecimalPipe, i2$3.PaginatePipe, CaseReferencePipe, SortSearchResultPipe, i1.RpxTranslatePipe]; });
 
 // tslint:disable:variable-name
 class ComplexFieldOverride {