@hmcts/ccd-case-ui-toolkit 7.4.15-EXUI-5378 → 7.4.15-exui-5388

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

@@ -3689,6 +3689,7 @@ class CaseField {
     _value;
     _list_items = [];
     isTranslatedFlag = false;
+    _translationHandledLocally;
     get value() {
         if (this.field_type && (this.field_type.type === 'DynamicList' || this.field_type.type === 'DynamicRadioList')) {
             return this._value && this._value.value ? this._value.value.code : this._value;
@@ -3810,11 +3811,17 @@ class CaseField {
             return this.id;
         }
     }
+    get isTranslated() {
+        return this.isTranslatedFlag;
+    }
     set isTranslated(val) {
         this.isTranslatedFlag = val;
     }
-    get isTranslated() {
-        return this.isTranslatedFlag;
+    get translationHandledLocally() {
+        return !!this._translationHandledLocally;
+    }
+    set translationHandledLocally(value) {
+        this._translationHandledLocally = value;
     }
 }
 __decorate([
@@ -7880,8 +7887,8 @@ ___
 class LabelSubstitutorDirective {
     fieldsUtils;
     placeholderService;
-    rpxTranslationPipe;
     rpxTranslationService;
+    cdr;
     caseField;
     contextFields = [];
     formGroup;
@@ -7889,11 +7896,12 @@ class LabelSubstitutorDirective {
     initialLabel;
     initialHintText;
     languageSubscription;
-    constructor(fieldsUtils, placeholderService, rpxTranslationPipe, rpxTranslationService) {
+    templateTranslationSubscription;
+    constructor(fieldsUtils, placeholderService, rpxTranslationService, cdr) {
         this.fieldsUtils = fieldsUtils;
         this.placeholderService = placeholderService;
-        this.rpxTranslationPipe = rpxTranslationPipe;
         this.rpxTranslationService = rpxTranslationService;
+        this.cdr = cdr;
     }
     ngOnInit() {
         this.initialLabel = this.caseField.label;
@@ -7922,10 +7930,12 @@ class LabelSubstitutorDirective {
             }
         }
     }
-    applySubstitutions(isLanguageChange = false) {
+    applySubstitutions() {
+        this.templateTranslationSubscription?.unsubscribe();
         const fields = this.getReadOnlyAndFormFields();
+        this.caseField.translationHandledLocally = false;
         if (this.shouldSubstitute('label')) {
-            this.applyLabelSubstitution(fields, isLanguageChange);
+            this.applyLabelSubstitution(fields);
         }
         if (this.shouldSubstitute('hint_text')) {
             this.caseField.hint_text = this.resolvePlaceholders(fields, this.caseField.hint_text);
@@ -7934,7 +7944,7 @@ class LabelSubstitutorDirective {
             this.caseField.value = this.resolvePlaceholders(fields, this.caseField.value);
         }
     }
-    applyLabelSubstitution(fields, isLanguageChange) {
+    applyLabelSubstitution(fields) {
         const currentLabel = this.caseField.label;
         // `originalLabel` stores the label exactly as it came from the server, before any
         // placeholder values were inserted. That gives us a clean starting point when the user
@@ -7955,46 +7965,41 @@ class LabelSubstitutorDirective {
         }
         // Preserve the original template the first time we successfully interpolate it.
         this.caseField.originalLabel = this.caseField.originalLabel || originalLabel;
-        this.applyTranslatedLabelState(fields, originalLabel, substitutedLabel, isLanguageChange);
-    }
-    applyTranslatedLabelState(fields, originalLabel, substitutedLabel, isLanguageChange) {
-        // Some labels only translate correctly if we translate the template first and then
-        // substitute the helper values into the translated sentence.
-        const translatedTemplateLabel = this.resolvePlaceholders(fields, isLanguageChange ? this.translateLabelOnLanguageChange(originalLabel) : this.translateLabel(originalLabel));
-        // Other labels only translate correctly if we first resolve the English phrase and let
-        // the render layer translate that final resolved string.
-        const translatedResolvedLabel = isLanguageChange
-            ? this.translateLabelOnLanguageChange(substitutedLabel)
-            : this.translateLabel(substitutedLabel);
-        const languageIsWelsh = this.rpxTranslationService.language === 'cy';
-        const hasResolvedWelshTranslation = languageIsWelsh
-            && translatedResolvedLabel
-            && translatedResolvedLabel !== substitutedLabel;
-        const hasTemplateWelshTranslation = languageIsWelsh
-            && translatedTemplateLabel
-            && translatedTemplateLabel !== substitutedLabel;
-        if (hasResolvedWelshTranslation) {
-            // Keep the resolved English label and mark it as not yet translated so the field
-            // template can run `rpxTranslate` on the full phrase at render time.
-            this.setLabelState(substitutedLabel);
-            return;
-        }
-        if (hasTemplateWelshTranslation) {
-            // Use the template-translated result when translating the fully resolved label does
-            // not improve the Welsh output.
-            this.setLabelState(translatedTemplateLabel, true);
+        this.applyTranslatedLabelState(fields, originalLabel, substitutedLabel);
+    }
+    applyTranslatedLabelState(fields, originalLabel, substitutedLabel) {
+        // Interpolated content must be rendered without another translation request.
+        this.caseField.translationHandledLocally = true;
+        this.setLabelState(substitutedLabel, false);
+        if (this.rpxTranslationService.language !== 'cy') {
             return;
         }
-        // English, untranslated Welsh, or labels whose translation is handled elsewhere.
-        this.setLabelState(substitutedLabel);
-    }
-    translateLabel(label) {
-        return this.rpxTranslationPipe.transform(label);
-    }
-    translateLabelOnLanguageChange(label) {
-        return this.rpxTranslationService.language === 'en'
-            ? label
-            : this.translateLabel(label);
+        this.templateTranslationSubscription = this.rpxTranslationService
+            .getTranslation$(originalLabel)
+            .subscribe((translatedTemplate) => {
+            if (this.rpxTranslationService.language !== 'cy' ||
+                !translatedTemplate ||
+                translatedTemplate.includes('[Translation in progress]')) {
+                return;
+            }
+            // Initial English emissions and English fallbacks are not Welsh results.
+            if (translatedTemplate.trim() === originalLabel.trim()) {
+                this.setLabelState(substitutedLabel, false);
+                this.cdr.markForCheck();
+                return;
+            }
+            // Re-read values at emission time so delayed translations use the latest form/context values.
+            const latestFields = this.getReadOnlyAndFormFields();
+            const resolvedLabel = this.resolvePlaceholders(latestFields, translatedTemplate);
+            // Keep usable existing content if the template cannot be resolved.
+            if (resolvedLabel && resolvedLabel.trim()) {
+                this.setLabelState(resolvedLabel, resolvedLabel !== substitutedLabel);
+            }
+            else {
+                this.setLabelState(substitutedLabel, false);
+            }
+            this.cdr.markForCheck();
+        });
     }
     setLabelState(label, isTranslated = false) {
         this.caseField.label = label;
@@ -8002,7 +8007,7 @@ class LabelSubstitutorDirective {
     }
     onLanguageChange() {
         this.resetToInitialValues(true);
-        this.applySubstitutions(true);
+        this.applySubstitutions();
     }
     resetToInitialValues(isLanguageChange = false) {
         if (isLanguageChange && this.caseField?.originalLabel) {
@@ -8017,6 +8022,7 @@ class LabelSubstitutorDirective {
         // Check if isTranslated is a property on caseField before setting it
         if (this.caseField) {
             this.caseField.isTranslated = false;
+            this.caseField.translationHandledLocally = false;
         }
     }
     ngOnDestroy() {
@@ -8024,6 +8030,9 @@ class LabelSubstitutorDirective {
         if (this.languageSubscription) {
             this.languageSubscription.unsubscribe();
         }
+        if (this.templateTranslationSubscription) {
+            this.templateTranslationSubscription.unsubscribe();
+        }
     }
     shouldSubstitute(element) {
         return this.elementsToSubstitute.find(e => e === element) !== undefined;
@@ -8050,7 +8059,7 @@ class LabelSubstitutorDirective {
     resolvePlaceholders(fields, stringToResolve) {
         return this.placeholderService.resolvePlaceholders(fields, stringToResolve);
     }
-    static ɵfac = function LabelSubstitutorDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LabelSubstitutorDirective)(i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(PlaceholderService), i0.ɵɵdirectiveInject(i1.RpxTranslatePipe), i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
+    static ɵfac = function LabelSubstitutorDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LabelSubstitutorDirective)(i0.ɵɵdirectiveInject(FieldsUtils), i0.ɵɵdirectiveInject(PlaceholderService), i0.ɵɵdirectiveInject(i1.RpxTranslationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LabelSubstitutorDirective, selectors: [["", "ccdLabelSubstitutor", ""]], inputs: { caseField: "caseField", contextFields: "contextFields", formGroup: "formGroup", elementsToSubstitute: "elementsToSubstitute" }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelSubstitutorDirective, [{
@@ -8059,7 +8068,7 @@ class LabelSubstitutorDirective {
                 selector: '[ccdLabelSubstitutor]',
                 standalone: false
             }]
-    }], () => [{ type: FieldsUtils }, { type: PlaceholderService }, { type: i1.RpxTranslatePipe }, { type: i1.RpxTranslationService }], { caseField: [{
+    }], () => [{ type: FieldsUtils }, { type: PlaceholderService }, { type: i1.RpxTranslationService }, { type: i0.ChangeDetectorRef }], { caseField: [{
             type: Input
         }], contextFields: [{
             type: Input
@@ -19252,16 +19261,16 @@ class LabelFieldComponent {
         } if (rf & 2) {
             i0.ɵɵproperty("hidden", ctx.caseField.hidden)("caseField", ctx.caseField)("contextFields", ctx.caseFields)("id", ctx.caseField.id);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated && !ctx.caseField.isTranslated);
+            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated && !ctx.caseField.isTranslated && !ctx.caseField.translationHandledLocally);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated && ctx.caseField.isTranslated);
+            i0.ɵɵproperty("ngIf", ctx.labelCanBeTranslated && (ctx.caseField.isTranslated || ctx.caseField.translationHandledLocally));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.labelCanBeTranslated);
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-label-field', standalone: false, template: "<dl [hidden]=\"caseField.hidden\" class=\"case-field\" ccdLabelSubstitutor [caseField]=\"caseField\" [contextFields]=\"caseFields\" [id]=\"caseField.id\">\n  <dt>\n    <ccd-markdown *ngIf=\"labelCanBeTranslated && !caseField.isTranslated\" [content]=\"caseField.label | rpxTranslate\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"labelCanBeTranslated && caseField.isTranslated\" [content]=\"caseField.label\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"!labelCanBeTranslated\" [content]=\"caseField.value || caseField.label\">\n    </ccd-markdown>\n  </dt>\n  <dd></dd>\n</dl>\n" }]
+        args: [{ selector: 'ccd-label-field', standalone: false, template: "<dl [hidden]=\"caseField.hidden\" class=\"case-field\" ccdLabelSubstitutor [caseField]=\"caseField\" [contextFields]=\"caseFields\" [id]=\"caseField.id\">\n  <dt>\n    <ccd-markdown *ngIf=\"labelCanBeTranslated && !caseField.isTranslated && !caseField.translationHandledLocally\"\n      [content]=\"caseField.label | rpxTranslate\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"labelCanBeTranslated && (caseField.isTranslated || caseField.translationHandledLocally)\"\n      [content]=\"caseField.label\">\n    </ccd-markdown>\n\n    <ccd-markdown *ngIf=\"!labelCanBeTranslated\" [content]=\"caseField.value || caseField.label\">\n    </ccd-markdown>\n  </dt>\n  <dd></dd>\n</dl>\n" }]
     }], null, { caseField: [{
             type: Input
         }], caseFields: [{
@@ -33566,8 +33575,8 @@ class UpdateFlagComponent extends AbstractJourneyComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UpdateFlagComponent, { className: "UpdateFlagComponent", filePath: "lib/shared/components/palette/case-flag/components/update-flag/update-flag.component.ts", lineNumber: 23 }); })();
 
 const _c0$n = a0 => ({ "form-group-error": a0 });
-function UpdateFlagAddTranslationFormComponent_div_10_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
+function UpdateFlagAddTranslationFormComponent_div_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -33575,14 +33584,14 @@ function UpdateFlagAddTranslationFormComponent_div_10_div_5_Template(rf, ctx) {
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.otherFlagDescriptionCharLimitErrorMessage), " ");
 } }
-function UpdateFlagAddTranslationFormComponent_div_10_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "span", 19);
+function UpdateFlagAddTranslationFormComponent_div_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -33590,62 +33599,14 @@ function UpdateFlagAddTranslationFormComponent_div_10_div_15_Template(rf, ctx) {
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.otherFlagDescriptionWelshCharLimitErrorMessage), " ");
 } }
-function UpdateFlagAddTranslationFormComponent_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "div", 7)(2, "label", 8);
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, UpdateFlagAddTranslationFormComponent_div_10_div_5_Template, 6, 6, "div", 14);
-    i0.ɵɵelementStart(6, "textarea", 10);
-    i0.ɵɵtext(7, "          ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 15);
-    i0.ɵɵtext(9);
-    i0.ɵɵpipe(10, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 7)(12, "label", 8);
-    i0.ɵɵtext(13);
-    i0.ɵɵpipe(14, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(15, UpdateFlagAddTranslationFormComponent_div_10_div_15_Template, 6, 6, "div", 16);
-    i0.ɵɵelementStart(16, "textarea", 10);
-    i0.ɵɵtext(17, "          ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 17);
-    i0.ɵɵtext(19);
-    i0.ɵɵpipe(20, "rpxTranslate");
-    i0.ɵɵelementEnd()()();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("for", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 14, "Other description"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.otherFlagDescriptionCharLimitErrorMessage);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION)("name", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION)("formControlName", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 16, ctx_r0.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("for", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 18, "Other description (Welsh)"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r0.otherFlagDescriptionWelshCharLimitErrorMessage);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH)("name", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH)("formControlName", ctx_r0.caseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 20, ctx_r0.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
-} }
-function UpdateFlagAddTranslationFormComponent_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "span", 19);
+function UpdateFlagAddTranslationFormComponent_div_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -33659,8 +33620,8 @@ function UpdateFlagAddTranslationFormComponent_div_15_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r0.flagCommentsCharLimitErrorMessage), " ");
 } }
-function UpdateFlagAddTranslationFormComponent_div_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "span", 19);
+function UpdateFlagAddTranslationFormComponent_div_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "span", 18);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -33680,7 +33641,6 @@ class UpdateFlagAddTranslationFormComponent extends AbstractJourneyComponent {
     selectedFlag;
     updateFlagAddTranslationTitle;
     errorMessages = [];
-    otherFlagType = false;
     otherFlagDescriptionCharLimitErrorMessage = null;
     otherFlagDescriptionWelshCharLimitErrorMessage = null;
     flagCommentsCharLimitErrorMessage = null;
@@ -33688,12 +33648,10 @@ class UpdateFlagAddTranslationFormComponent extends AbstractJourneyComponent {
     updateFlagAddTranslationStepEnum = UpdateFlagAddTranslationStep;
     caseFlagFormFields = CaseFlagFormFields;
     textMaxCharLimit = 200;
-    otherFlagTypeCode = 'OT0001';
     selectedManageCaseLocation = 'selectedManageCaseLocation';
     ngOnInit() {
         this.updateFlagAddTranslationTitle = CaseFlagWizardStepTitle.UPDATE_FLAG_ADD_TRANSLATION;
         this.selectedFlag = this.formGroup.get(this.selectedManageCaseLocation).value;
-        this.otherFlagType = this.selectedFlag?.flagDetailDisplay?.flagDetail?.flagCode === this.otherFlagTypeCode;
         this.multipageComponentStateService.getJourneyCollectionMainObject().journeyEndPageNumber++;
         const flagDetail = this.selectedFlag?.flagDetailDisplay?.flagDetail;
         this.formGroup.addControl(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION, new FormControl(flagDetail?.otherDescription));
@@ -33722,23 +33680,21 @@ class UpdateFlagAddTranslationFormComponent extends AbstractJourneyComponent {
         this.flagCommentsCharLimitErrorMessage = null;
         this.flagCommentsWelshCharLimitErrorMessage = null;
         this.errorMessages = [];
-        if (this.otherFlagType) {
-            if (this.formGroup.get(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION)?.value?.length > this.textMaxCharLimit) {
-                this.otherFlagDescriptionCharLimitErrorMessage = UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED;
-                this.errorMessages.push({
-                    title: '',
-                    description: UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED,
-                    fieldId: CaseFlagFormFields.OTHER_FLAG_DESCRIPTION
-                });
-            }
-            if (this.formGroup.get(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH)?.value?.length > this.textMaxCharLimit) {
-                this.otherFlagDescriptionWelshCharLimitErrorMessage = UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED;
-                this.errorMessages.push({
-                    title: '',
-                    description: UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED,
-                    fieldId: CaseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH
-                });
-            }
+        if (this.formGroup.get(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION)?.value?.length > this.textMaxCharLimit) {
+            this.otherFlagDescriptionCharLimitErrorMessage = UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED;
+            this.errorMessages.push({
+                title: '',
+                description: UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED,
+                fieldId: CaseFlagFormFields.OTHER_FLAG_DESCRIPTION
+            });
+        }
+        if (this.formGroup.get(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH)?.value?.length > this.textMaxCharLimit) {
+            this.otherFlagDescriptionWelshCharLimitErrorMessage = UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED;
+            this.errorMessages.push({
+                title: '',
+                description: UpdateFlagAddTranslationErrorMessage.DESCRIPTION_CHAR_LIMIT_EXCEEDED,
+                fieldId: CaseFlagFormFields.OTHER_FLAG_DESCRIPTION_WELSH
+            });
         }
         if (this.formGroup.get(CaseFlagFormFields.COMMENTS)?.value?.length > this.textMaxCharLimit) {
             this.flagCommentsCharLimitErrorMessage = UpdateFlagAddTranslationErrorMessage.COMMENTS_CHAR_LIMIT_EXCEEDED;
@@ -33764,7 +33720,7 @@ class UpdateFlagAddTranslationFormComponent extends AbstractJourneyComponent {
         }
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵUpdateFlagAddTranslationFormComponent_BaseFactory; return function UpdateFlagAddTranslationFormComponent_Factory(__ngFactoryType__) { return (ɵUpdateFlagAddTranslationFormComponent_BaseFactory || (ɵUpdateFlagAddTranslationFormComponent_BaseFactory = i0.ɵɵgetInheritedFactory(UpdateFlagAddTranslationFormComponent)))(__ngFactoryType__ || UpdateFlagAddTranslationFormComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateFlagAddTranslationFormComponent, selectors: [["ccd-update-flag-add-translation-form"]], inputs: { formGroup: "formGroup" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 31, vars: 33, 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"], [4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [1, "govuk-label", "govuk-label--s", 3, "for"], ["id", "add-translation-flag-comments-char-limit-error", "class", "govuk-error-message", 4, "ngIf"], ["rows", "5", 1, "govuk-textarea", 3, "id", "name", "formControlName"], ["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", "class", "govuk-error-message", 4, "ngIf"], ["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-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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UpdateFlagAddTranslationFormComponent, selectors: [["ccd-update-flag-add-translation-form"]], inputs: { formGroup: "formGroup" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, standalone: false, 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);
@@ -33774,67 +33730,108 @@ class UpdateFlagAddTranslationFormComponent extends AbstractJourneyComponent {
             i0.ɵɵtext(8);
             i0.ɵɵpipe(9, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(10, UpdateFlagAddTranslationFormComponent_div_10_Template, 21, 22, "div", 6);
-            i0.ɵɵelementStart(11, "div", 7)(12, "label", 8);
-            i0.ɵɵtext(13);
-            i0.ɵɵpipe(14, "rpxTranslate");
+            i0.ɵɵelementStart(10, "div", 6)(11, "label", 7);
+            i0.ɵɵtext(12);
+            i0.ɵɵpipe(13, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(15, UpdateFlagAddTranslationFormComponent_div_15_Template, 6, 6, "div", 9);
-            i0.ɵɵelementStart(16, "textarea", 10);
-            i0.ɵɵtext(17, "        ");
+            i0.ɵɵtemplate(14, UpdateFlagAddTranslationFormComponent_div_14_Template, 6, 6, "div", 8);
+            i0.ɵɵelementStart(15, "textarea", 9);
+            i0.ɵɵtext(16, "        ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 11);
-            i0.ɵɵtext(19);
-            i0.ɵɵpipe(20, "rpxTranslate");
+            i0.ɵɵelementStart(17, "div", 10);
+            i0.ɵɵtext(18);
+            i0.ɵɵpipe(19, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 7)(22, "label", 8);
-            i0.ɵɵtext(23);
-            i0.ɵɵpipe(24, "rpxTranslate");
+            i0.ɵɵelementStart(20, "div", 6)(21, "label", 7);
+            i0.ɵɵtext(22);
+            i0.ɵɵpipe(23, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(25, UpdateFlagAddTranslationFormComponent_div_25_Template, 6, 6, "div", 12);
-            i0.ɵɵelementStart(26, "textarea", 10);
-            i0.ɵɵtext(27, "        ");
+            i0.ɵɵtemplate(24, UpdateFlagAddTranslationFormComponent_div_24_Template, 6, 6, "div", 11);
+            i0.ɵɵelementStart(25, "textarea", 9);
+            i0.ɵɵtext(26, "        ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "div", 13);
-            i0.ɵɵtext(29);
-            i0.ɵɵpipe(30, "rpxTranslate");
+            i0.ɵɵelementStart(27, "div", 12);
+            i0.ɵɵtext(28);
+            i0.ɵɵpipe(29, "rpxTranslate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(30, "div", 6)(31, "label", 7);
+            i0.ɵɵtext(32);
+            i0.ɵɵpipe(33, "rpxTranslate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(34, UpdateFlagAddTranslationFormComponent_div_34_Template, 6, 6, "div", 13);
+            i0.ɵɵelementStart(35, "textarea", 9);
+            i0.ɵɵtext(36, "        ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(37, "div", 14);
+            i0.ɵɵtext(38);
+            i0.ɵɵpipe(39, "rpxTranslate");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(40, "div", 6)(41, "label", 7);
+            i0.ɵɵtext(42);
+            i0.ɵɵpipe(43, "rpxTranslate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(44, UpdateFlagAddTranslationFormComponent_div_44_Template, 6, 6, "div", 15);
+            i0.ɵɵelementStart(45, "textarea", 9);
+            i0.ɵɵtext(46, "        ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(47, "div", 16);
+            i0.ɵɵtext(48);
+            i0.ɵɵpipe(49, "rpxTranslate");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementContainerEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(31, _c0$n, ctx.errorMessages.length > 0));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(52, _c0$n, ctx.errorMessages.length > 0));
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 32, ctx.updateFlagAddTranslationTitle), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 19, ctx.updateFlagAddTranslationTitle), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 34, ctx.updateFlagAddTranslationStepEnum.HINT_TEXT), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 21, ctx.updateFlagAddTranslationStepEnum.HINT_TEXT), " ");
+            i0.ɵɵproperty("for", ctx.caseFlagFormFields.OTHER_FLAG_DESCRIPTION);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 36, "Other description"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.otherFlagType);
+            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, 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, 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, 42, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
+            i0.ɵɵadvance(3);
             i0.ɵɵproperty("for", ctx.caseFlagFormFields.COMMENTS);
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 23, "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(20, 25, 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(24, 27, "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(30, 29, ctx.updateFlagAddTranslationStepEnum.CHARACTER_LIMIT_INFO), " ");
+            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', standalone: false, 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 *ngIf=\"otherFlagType\">\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      </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" }]
+        args: [{ selector: 'ccd-update-flag-add-translation-form', standalone: false, 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: [{