@hmcts/ccd-case-ui-toolkit 7.4.1-exui-5202 → 7.4.1-exui-5233-rc1

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

@@ -2777,7 +2777,6 @@ var UpdateFlagStep;
     UpdateFlagStep["COMMENT_FIELD_LABEL_EXTERNAL"] = "Please provide your comments below";
     UpdateFlagStep["CHARACTER_LIMIT_INFO"] = "You can enter up to 200 characters";
     UpdateFlagStep["STATUS_HINT_TEXT"] = "Describe reason for status change.";
-    UpdateFlagStep["STATUS_REASON_LABEL"] = "Reason for change";
     UpdateFlagStep["WARNING_TEXT"] = "The details entered here MAY be visible to the party in the future.";
 })(UpdateFlagStep || (UpdateFlagStep = {}));
 
@@ -27405,8 +27404,12 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.removeUnsupportedMarkup(documentElement);
         this.normaliseDateRangeSpacing(documentElement);
         this.removeUnsupportedAttributes(documentElement);
+        const hasMeaningfulContent = this.hasMeaningfulRichTextContent(documentElement);
+        if (hasMeaningfulContent) {
+            this.preserveDocmosisBlankParagraphs(documentElement);
+        }
         const sanitisedValue = sanitiseRichTextDocument(documentElement);
-        return this.hasMeaningfulRichTextContent(documentElement)
+        return hasMeaningfulContent
             ? this.normalisePlainTextValue(sanitisedValue)
             : '';
     }
@@ -27426,11 +27429,24 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
         this.removeUnsupportedMarkup(documentElement);
         this.normaliseDateRangeSpacing(documentElement);
         this.removeUnsupportedAttributes(documentElement);
+        const hasMeaningfulContent = this.hasMeaningfulRichTextContent(documentElement);
+        if (hasMeaningfulContent) {
+            this.preserveDocmosisBlankParagraphs(documentElement);
+        }
         const sanitisedValue = sanitiseRichTextDocument(documentElement);
-        return this.hasMeaningfulRichTextContent(documentElement)
+        return hasMeaningfulContent
             ? this.normalisePlainTextValue(sanitisedValue)
             : '';
     }
+    preserveDocmosisBlankParagraphs(documentElement) {
+        const paragraphs = Array.prototype.slice.call(documentElement.body.querySelectorAll('p'));
+        paragraphs.forEach((paragraph) => {
+            const visibleText = (paragraph.textContent || '').replace(/[\s\u00a0\u200b-\u200d\ufeff]/g, '');
+            if (!visibleText && !paragraph.querySelector('hr')) {
+                paragraph.textContent = '\u00a0';
+            }
+        });
+    }
     hasMeaningfulRichTextContent(documentElement) {
         const visibleText = (documentElement.body.textContent || '')
             .replace(/[\s\u00a0\u200b-\u200d\ufeff]/g, '');
@@ -27551,7 +27567,8 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
                 emitEvent: false,
                 emitModelToViewChange: false
             });
-            if (normalisedValue || this.editorHasMeaningfulRichTextContent()) {
+            if ((normalisedValue || this.editorHasMeaningfulRichTextContent())
+                && !this.differsOnlyByDocmosisBlankParagraphs(value, normalisedValue)) {
                 this.editor.setContent(normalisedValue || '');
             }
         }
@@ -27559,6 +27576,25 @@ class WriteRichTextAreaFieldComponent extends AbstractFieldWriteComponent {
             this.isNormalisingValue = false;
         }
     }
+    differsOnlyByDocmosisBlankParagraphs(value, normalisedValue) {
+        if (!value || !normalisedValue) {
+            return false;
+        }
+        const originalDocument = new DOMParser().parseFromString(value, 'text/html');
+        const normalisedDocument = new DOMParser().parseFromString(normalisedValue, 'text/html');
+        this.clearBlankParagraphs(originalDocument);
+        this.clearBlankParagraphs(normalisedDocument);
+        return originalDocument.body.innerHTML === normalisedDocument.body.innerHTML;
+    }
+    clearBlankParagraphs(documentElement) {
+        const paragraphs = Array.prototype.slice.call(documentElement.body.querySelectorAll('p'));
+        paragraphs.forEach((paragraph) => {
+            const visibleText = (paragraph.textContent || '').replace(/[\s\u00a0\u200b-\u200d\ufeff]/g, '');
+            if (!visibleText) {
+                paragraph.textContent = '';
+            }
+        });
+    }
     editorHasMeaningfulRichTextContent() {
         const documentNode = this.editor.view.state.doc;
         const visibleText = documentNode.textContent.replace(/[\s\u00a0\u200b-\u200d\ufeff]/g, '');
@@ -31101,34 +31137,6 @@ function CaseFlagSummaryListComponent_dl_0_a_38_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, "status"));
 } }
-function CaseFlagSummaryListComponent_dl_0_div_39_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "dt", 3);
-    i0.ɵɵtext(2);
-    i0.ɵɵpipe(3, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "dd", 4);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "dd", 5)(7, "a", 6);
-    i0.ɵɵlistener("click", function CaseFlagSummaryListComponent_dl_0_div_39_Template_a_click_7_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.changeButtonEmitter.emit(ctx_r1.caseFlagFieldState.FLAG_UPDATE); return i0.ɵɵresetView($event.preventDefault()); });
-    i0.ɵɵtext(8);
-    i0.ɵɵpipe(9, "rpxTranslate");
-    i0.ɵɵelementStart(10, "span", 7);
-    i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "rpxTranslate");
-    i0.ɵɵelementEnd()()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 4, ctx_r1.updateFlagStep.STATUS_REASON_LABEL), " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.flagUpdateComments, " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 6, "Change"));
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 8, ctx_r1.updateFlagStep.STATUS_REASON_LABEL));
-} }
 function CaseFlagSummaryListComponent_dl_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "dl", 1)(1, "div", 2)(2, "dt", 3);
@@ -31172,27 +31180,25 @@ function CaseFlagSummaryListComponent_dl_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(37, "dd", 5);
     i0.ɵɵtemplate(38, CaseFlagSummaryListComponent_dl_0_a_38_Template, 6, 6, "a", 9);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(39, CaseFlagSummaryListComponent_dl_0_div_39_Template, 13, 10, "div", 8);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 15, ctx_r1.addUpdateFlagHeaderText), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 14, ctx_r1.addUpdateFlagHeaderText), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.flagForSummaryDisplay.partyName || ctx_r1.caseFlagCheckYourAnswersPageStep.CASE_LEVEL_LOCATION, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 17, "Change"));
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 16, "Change"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 19, "party name"));
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 18, "party name"));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 21, ctx_r1.flagTypeHeaderText), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 20, ctx_r1.flagTypeHeaderText), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.flagDescription, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 23, "Change"));
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 22, "Change"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 25, "flag type"));
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 24, "flag type"));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", (ctx_r1.flagDescriptionWelsh == null ? null : ctx_r1.flagDescriptionWelsh.length) > 0 && !ctx_r1.externalUserUpdate);
     i0.ɵɵadvance();
@@ -31200,13 +31206,11 @@ function CaseFlagSummaryListComponent_dl_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", (ctx_r1.flagCommentsWelsh == null ? null : ctx_r1.flagCommentsWelsh.length) > 0 && !ctx_r1.externalUserUpdate);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 27, "Status"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 26, "Status"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(36, 29, ctx_r1.flagStatus), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(36, 28, ctx_r1.flagStatus), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.is2Point1Enabled);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.is2Point1Update && (ctx_r1.flagUpdateComments == null ? null : ctx_r1.flagUpdateComments.length) > 0);
 } }
 class CaseFlagSummaryListComponent {
     rpxTranslationService;
@@ -31227,9 +31231,7 @@ class CaseFlagSummaryListComponent {
     displayMode = CaseFlagSummaryListDisplayMode;
     flagTypeHeaderText;
     caseFlagCheckYourAnswersPageStep = CaseFlagCheckYourAnswersPageStep;
-    updateFlagStep = UpdateFlagStep;
     is2Point1Enabled = false;
-    is2Point1Update = false;
     externalUserUpdate = false;
     constructor(rpxTranslationService) {
         this.rpxTranslationService = rpxTranslationService;
@@ -31249,7 +31251,6 @@ class CaseFlagSummaryListComponent {
             this.flagTypeHeaderText = this.getFlagTypeHeaderText();
             this.summaryListDisplayMode = this.getSummaryListDisplayMode();
             this.is2Point1Enabled = this.getDisplayContextParameter2Point1Enabled();
-            this.is2Point1Update = this.displayContextParameter === CaseFlagDisplayContextParameter.UPDATE_2_POINT_1;
             this.externalUserUpdate = this.displayContextParameter === CaseFlagDisplayContextParameter.UPDATE_EXTERNAL;
         }
     }
@@ -31313,14 +31314,14 @@ class CaseFlagSummaryListComponent {
     }
     static ɵfac = function CaseFlagSummaryListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFlagSummaryListComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFlagSummaryListComponent, selectors: [["ccd-case-flag-summary-list"]], inputs: { flagForSummaryDisplay: "flagForSummaryDisplay", displayContextParameter: "displayContextParameter" }, outputs: { changeButtonEmitter: "changeButtonEmitter" }, standalone: false, decls: 1, vars: 1, consts: [["class", "govuk-summary-list", 4, "ngIf"], [1, "govuk-summary-list"], [1, "govuk-summary-list__row"], [1, "govuk-summary-list__key"], [1, "govuk-summary-list__value"], [1, "govuk-summary-list__actions"], ["href", "#", 1, "govuk-link", 3, "click"], [1, "govuk-visually-hidden"], ["class", "govuk-summary-list__row", 4, "ngIf"], ["class", "govuk-link", "href", "#", 3, "click", 4, "ngIf"]], template: function CaseFlagSummaryListComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseFlagSummaryListComponent_dl_0_Template, 40, 31, "dl", 0);
+            i0.ɵɵtemplate(0, CaseFlagSummaryListComponent_dl_0_Template, 39, 30, "dl", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.flagForSummaryDisplay);
         } }, dependencies: [i5.NgIf, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFlagSummaryListComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-flag-summary-list', standalone: false, 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 }}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_LOCATION); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_TYPE); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_TYPE); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_COMMENTS); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_COMMENTS); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_STATUS); $event.preventDefault()\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{'status' | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n  <div class=\"govuk-summary-list__row\" *ngIf=\"is2Point1Update && flagUpdateComments?.length > 0\">\n    <dt class=\"govuk-summary-list__key\">\n      {{updateFlagStep.STATUS_REASON_LABEL | rpxTranslate}}\n    </dt>\n    <dd class=\"govuk-summary-list__value\">\n      {{flagUpdateComments}}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"#\"\n        (click)=\"changeButtonEmitter.emit(caseFlagFieldState.FLAG_UPDATE); $event.preventDefault()\">\n        {{'Change' | rpxTranslate}}<span class=\"govuk-visually-hidden\"> {{updateFlagStep.STATUS_REASON_LABEL | rpxTranslate}}</span>\n      </a>\n    </dd>\n  </div>\n</dl>\n" }]
+        args: [{ selector: 'ccd-case-flag-summary-list', standalone: false, 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 }}\n    </dd>\n    <dd class=\"govuk-summary-list__actions\">\n      <a class=\"govuk-link\" href=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_MANAGE_CASE_FLAGS : caseFlagFieldState.FLAG_LOCATION); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_TYPE); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_TYPE); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_COMMENTS); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE_WELSH_TRANSLATION : caseFlagFieldState.FLAG_COMMENTS); $event.preventDefault()\">\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=\"#\"\n        (click)=\"changeButtonEmitter.emit(this.summaryListDisplayMode === displayMode.MANAGE ? caseFlagFieldState.FLAG_UPDATE : caseFlagFieldState.FLAG_STATUS); $event.preventDefault()\">\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: [{
@@ -31328,7 +31329,7 @@ class CaseFlagSummaryListComponent {
         }], changeButtonEmitter: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFlagSummaryListComponent, { className: "CaseFlagSummaryListComponent", filePath: "lib/shared/components/palette/case-flag/components/case-flag-summary-list/case-flag-summary-list.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseFlagSummaryListComponent, { className: "CaseFlagSummaryListComponent", filePath: "lib/shared/components/palette/case-flag/components/case-flag-summary-list/case-flag-summary-list.component.ts", lineNumber: 16 }); })();
 
 const _c0$t = a0 => ({ "govuk-!-font-weight-bold": a0 });
 function CaseFlagTableComponent_table_0_caption_1_Template(rf, ctx) { if (rf & 1) {