@hmcts/ccd-case-ui-toolkit 7.0.2-case-flags-v2-1-release-2 → 7.0.2-welsh-optional-text-fix

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

@@ -2645,25 +2645,30 @@ DatePipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "ccdDate", type: DateP
 })();
 
 class FieldLabelPipe {
+    constructor(rpxTranslationPipe) {
+        this.rpxTranslationPipe = rpxTranslationPipe;
+    }
     transform(field) {
         if (!field || !field.label) {
             return '';
         }
         else if (!field.display_context) {
-            return field.label;
+            return this.rpxTranslationPipe.transform(field.label);
         }
-        return field.label + (field.display_context.toUpperCase() === 'OPTIONAL' ? ' (Optional)' : '');
+        return this.rpxTranslationPipe.transform(field.label) + (field.display_context.toUpperCase() === 'OPTIONAL' ?
+            ' (' + this.rpxTranslationPipe.transform('Optional') + ')' : '');
     }
 }
-FieldLabelPipe.ɵfac = function FieldLabelPipe_Factory(t) { return new (t || FieldLabelPipe)(); };
-FieldLabelPipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "ccdFieldLabel", type: FieldLabelPipe, pure: true });
+FieldLabelPipe.ɵfac = function FieldLabelPipe_Factory(t) { return new (t || FieldLabelPipe)(i0.ɵɵdirectiveInject(i1.RpxTranslatePipe, 16)); };
+FieldLabelPipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "ccdFieldLabel", type: FieldLabelPipe, pure: false });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FieldLabelPipe, [{
             type: Pipe,
             args: [{
-                    name: 'ccdFieldLabel'
+                    name: 'ccdFieldLabel',
+                    pure: false
                 }]
-        }], null, null);
+        }], function () { return [{ type: i1.RpxTranslatePipe }]; }, null);
 })();
 
 class FirstErrorPipe {
@@ -11012,7 +11017,7 @@ class AddressOption {
 }
 
 const _c0$U = ["writeComplexFieldComponent"];
-function WriteAddressFieldComponent_div_1_div_5_span_5_Template(rf, ctx) {
+function WriteAddressFieldComponent_div_1_div_4_span_5_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 14);
         i0.ɵɵtext(1);
@@ -11026,17 +11031,17 @@ function WriteAddressFieldComponent_div_1_div_5_span_5_Template(rf, ctx) {
 }
 const _c1$n = function (a0) { return { "form-group-error": a0 }; };
 const _c2$2 = function (a0) { return { "govuk-input--error": a0 }; };
-function WriteAddressFieldComponent_div_1_div_5_Template(rf, ctx) {
+function WriteAddressFieldComponent_div_1_div_4_Template(rf, ctx) {
     if (rf & 1) {
         const _r7 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 8)(1, "label", 9)(2, "span", 10);
         i0.ɵɵtext(3);
         i0.ɵɵpipe(4, "rpxTranslate");
         i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(5, WriteAddressFieldComponent_div_1_div_5_span_5_Template, 3, 3, "span", 11);
+        i0.ɵɵtemplate(5, WriteAddressFieldComponent_div_1_div_4_span_5_Template, 3, 3, "span", 11);
         i0.ɵɵelement(6, "input", 12);
         i0.ɵɵelementStart(7, "button", 13);
-        i0.ɵɵlistener("click", function WriteAddressFieldComponent_div_1_div_5_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.findAddress()); });
+        i0.ɵɵlistener("click", function WriteAddressFieldComponent_div_1_div_4_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.findAddress()); });
         i0.ɵɵtext(8);
         i0.ɵɵpipe(9, "rpxTranslate");
         i0.ɵɵelementEnd()();
@@ -11056,7 +11061,7 @@ function WriteAddressFieldComponent_div_1_div_5_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(9, 11, "Find address"));
     }
 }
-function WriteAddressFieldComponent_div_1_div_6_option_6_Template(rf, ctx) {
+function WriteAddressFieldComponent_div_1_div_5_option_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "option", 18);
         i0.ɵɵtext(1);
@@ -11070,7 +11075,7 @@ function WriteAddressFieldComponent_div_1_div_6_option_6_Template(rf, ctx) {
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, addressOption_r9.description), " ");
     }
 }
-function WriteAddressFieldComponent_div_1_div_6_Template(rf, ctx) {
+function WriteAddressFieldComponent_div_1_div_5_Template(rf, ctx) {
     if (rf & 1) {
         const _r11 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 15)(1, "label", 9)(2, "span", 10);
@@ -11078,8 +11083,8 @@ function WriteAddressFieldComponent_div_1_div_6_Template(rf, ctx) {
         i0.ɵɵpipe(4, "rpxTranslate");
         i0.ɵɵelementEnd()();
         i0.ɵɵelementStart(5, "select", 16);
-        i0.ɵɵlistener("change", function WriteAddressFieldComponent_div_1_div_6_Template_select_change_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.addressSelected()); });
-        i0.ɵɵtemplate(6, WriteAddressFieldComponent_div_1_div_6_option_6_Template, 3, 4, "option", 17);
+        i0.ɵɵlistener("change", function WriteAddressFieldComponent_div_1_div_5_Template_select_change_5_listener() { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.addressSelected()); });
+        i0.ɵɵtemplate(6, WriteAddressFieldComponent_div_1_div_5_option_6_Template, 3, 4, "option", 17);
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
@@ -11094,11 +11099,11 @@ function WriteAddressFieldComponent_div_1_div_6_Template(rf, ctx) {
         i0.ɵɵproperty("ngForOf", ctx_r3.addressOptions);
     }
 }
-function WriteAddressFieldComponent_div_1_a_7_Template(rf, ctx) {
+function WriteAddressFieldComponent_div_1_a_6_Template(rf, ctx) {
     if (rf & 1) {
         const _r13 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "a", 19);
-        i0.ɵɵlistener("click", function WriteAddressFieldComponent_div_1_a_7_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.blankAddress()); });
+        i0.ɵɵlistener("click", function WriteAddressFieldComponent_div_1_a_6_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r12.blankAddress()); });
         i0.ɵɵtext(1);
         i0.ɵɵpipe(2, "rpxTranslate");
         i0.ɵɵelementEnd();
@@ -11112,19 +11117,18 @@ function WriteAddressFieldComponent_div_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div")(1, "h2", 4);
         i0.ɵɵtext(2);
-        i0.ɵɵpipe(3, "rpxTranslate");
-        i0.ɵɵpipe(4, "ccdFieldLabel");
+        i0.ɵɵpipe(3, "ccdFieldLabel");
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(5, WriteAddressFieldComponent_div_1_div_5_Template, 10, 17, "div", 5);
-        i0.ɵɵtemplate(6, WriteAddressFieldComponent_div_1_div_6_Template, 7, 7, "div", 6);
-        i0.ɵɵtemplate(7, WriteAddressFieldComponent_div_1_a_7_Template, 3, 3, "a", 7);
+        i0.ɵɵtemplate(4, WriteAddressFieldComponent_div_1_div_4_Template, 10, 17, "div", 5);
+        i0.ɵɵtemplate(5, WriteAddressFieldComponent_div_1_div_5_Template, 7, 7, "div", 6);
+        i0.ɵɵtemplate(6, WriteAddressFieldComponent_div_1_a_6_Template, 3, 3, "a", 7);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, i0.ɵɵpipeBind1(4, 6, ctx_r0.caseField)));
-        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 4, ctx_r0.caseField));
+        i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", !ctx_r0.isExpanded);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx_r0.addressOptions);
@@ -11244,7 +11248,7 @@ WriteAddressFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     }, inputs: { formGroup: "formGroup" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 4, vars: 9, consts: [[1, "form-group", 3, "id"], [4, "ngIf"], [3, "hidden", "caseField", "renderLabel", "parent", "formGroup", "ignoreMandatory", "idPrefix"], ["writeComplexFieldComponent", ""], [1, "heading-h2"], ["class", "form-group bottom-30 postcodeLookup", 3, "id", "ngClass", 4, "ngIf"], ["class", "form-group", "id", "selectAddress", 4, "ngIf"], ["class", "manual-link bottom-30", "href", "javascript:void(0)", 3, "click", 4, "ngIf"], [1, "form-group", "bottom-30", "postcodeLookup", 3, "id", "ngClass"], [3, "for"], [1, "form-label"], ["class", "error-message", 4, "ngIf"], ["type", "text", "name", "postcode", 1, "form-control", "postcodeinput", "inline-block", 3, "ngClass", "id", "formControl"], ["type", "button", 1, "button", "button-30", 3, "click"], [1, "error-message"], ["id", "selectAddress", 1, "form-group"], ["name", "address", "focusElement", "", 1, "form-control", "ccd-dropdown", "addressList", 3, "id", "formControl", "change"], [3, "ngValue", 4, "ngFor", "ngForOf"], [3, "ngValue"], ["href", "javascript:void(0)", 1, "manual-link", "bottom-30", 3, "click"]], template: function WriteAddressFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, WriteAddressFieldComponent_div_1_Template, 8, 8, "div", 1);
+            i0.ɵɵtemplate(1, WriteAddressFieldComponent_div_1_Template, 7, 6, "div", 1);
             i0.ɵɵelement(2, "ccd-write-complex-type-field", 2, 3);
             i0.ɵɵelementEnd();
         }
@@ -11259,7 +11263,7 @@ WriteAddressFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteAddressFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-address-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <div *ngIf=\"!isComplexWithHiddenFields()\">\n    <h2 class=\"heading-h2\">{{caseField | ccdFieldLabel | rpxTranslate}}</h2>\n\n    <div class=\"form-group bottom-30 postcodeLookup\" [id]=\"createElementId('postcodeLookup')\" [ngClass]=\"{'form-group-error': missingPostcode}\" *ngIf=\"!isExpanded\">\n      <label [for]=\"createElementId('postcodeInput')\">\n        <span class=\"form-label\">{{'Enter a UK postcode' | rpxTranslate}}</span>\n      </label>\n      <span class=\"error-message\" *ngIf=\"missingPostcode\">{{'Enter the Postcode' | rpxTranslate}}</span>\n      <input type=\"text\" [ngClass]=\"{'govuk-input--error': missingPostcode}\"\n      [id]=\"createElementId('postcodeInput')\" name=\"postcode\" class=\"form-control postcodeinput inline-block\" [formControl]=\"postcode\">\n      <button type=\"button\" class=\"button button-30\" (click)=\"findAddress()\">{{'Find address' | rpxTranslate}}</button>\n    </div>\n\n    <div class=\"form-group\" *ngIf=\"addressOptions\" id=\"selectAddress\">\n      <label [for]=\"createElementId('addressList')\">\n        <span class=\"form-label\">{{'Select an address' | rpxTranslate}}</span>\n      </label>\n\n      <select class=\"form-control ccd-dropdown addressList\" [id]=\"createElementId('addressList')\" name=\"address\" [formControl]=\"addressList\" (change)=\"addressSelected()\" focusElement>\n        <option *ngFor=\"let addressOption of addressOptions\" [ngValue]=\"addressOption.value\">\n          {{addressOption.description | rpxTranslate}}\n        </option>\n      </select>\n    </div>\n\n    <a class=\"manual-link bottom-30\" *ngIf=\"!shouldShowDetailFields()\" (click)=\"blankAddress()\" href=\"javascript:void(0)\">\n      {{\"I can't enter a UK postcode\" | rpxTranslate}}\n    </a>\n  </div>\n\n  <ccd-write-complex-type-field\n    [hidden]=\"!shouldShowDetailFields()\"\n    [caseField]=\"caseField\"\n    [renderLabel]=\"false\"\n    [parent]=\"parent\"\n    [formGroup]=\"formGroup\"\n    [ignoreMandatory]=\"true\"\n    [idPrefix]=\"buildIdPrefix('detail')\"\n    #writeComplexFieldComponent>\n  </ccd-write-complex-type-field>\n</div>\n", styles: [".manual-link{cursor:pointer;display:block;text-decoration:underline}\n"] }]
+            args: [{ selector: 'ccd-write-address-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <div *ngIf=\"!isComplexWithHiddenFields()\">\n    <h2 class=\"heading-h2\">{{caseField | ccdFieldLabel}}</h2>\n\n    <div class=\"form-group bottom-30 postcodeLookup\" [id]=\"createElementId('postcodeLookup')\" [ngClass]=\"{'form-group-error': missingPostcode}\" *ngIf=\"!isExpanded\">\n      <label [for]=\"createElementId('postcodeInput')\">\n        <span class=\"form-label\">{{'Enter a UK postcode' | rpxTranslate}}</span>\n      </label>\n      <span class=\"error-message\" *ngIf=\"missingPostcode\">{{'Enter the Postcode' | rpxTranslate}}</span>\n      <input type=\"text\" [ngClass]=\"{'govuk-input--error': missingPostcode}\"\n      [id]=\"createElementId('postcodeInput')\" name=\"postcode\" class=\"form-control postcodeinput inline-block\" [formControl]=\"postcode\">\n      <button type=\"button\" class=\"button button-30\" (click)=\"findAddress()\">{{'Find address' | rpxTranslate}}</button>\n    </div>\n\n    <div class=\"form-group\" *ngIf=\"addressOptions\" id=\"selectAddress\">\n      <label [for]=\"createElementId('addressList')\">\n        <span class=\"form-label\">{{'Select an address' | rpxTranslate}}</span>\n      </label>\n\n      <select class=\"form-control ccd-dropdown addressList\" [id]=\"createElementId('addressList')\" name=\"address\" [formControl]=\"addressList\" (change)=\"addressSelected()\" focusElement>\n        <option *ngFor=\"let addressOption of addressOptions\" [ngValue]=\"addressOption.value\">\n          {{addressOption.description | rpxTranslate}}\n        </option>\n      </select>\n    </div>\n\n    <a class=\"manual-link bottom-30\" *ngIf=\"!shouldShowDetailFields()\" (click)=\"blankAddress()\" href=\"javascript:void(0)\">\n      {{\"I can't enter a UK postcode\" | rpxTranslate}}\n    </a>\n  </div>\n\n  <ccd-write-complex-type-field\n    [hidden]=\"!shouldShowDetailFields()\"\n    [caseField]=\"caseField\"\n    [renderLabel]=\"false\"\n    [parent]=\"parent\"\n    [formGroup]=\"formGroup\"\n    [ignoreMandatory]=\"true\"\n    [idPrefix]=\"buildIdPrefix('detail')\"\n    #writeComplexFieldComponent>\n  </ccd-write-complex-type-field>\n</div>\n", styles: [".manual-link{cursor:pointer;display:block;text-decoration:underline}\n"] }]
         }], function () { return [{ type: AddressesService }, { type: IsCompoundPipe }]; }, { writeComplexFieldComponent: [{
                 type: ViewChild,
                 args: ['writeComplexFieldComponent', { static: false }]
@@ -12591,14 +12595,13 @@ function WriteCaseLinkFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteCaseLinkFieldComponent_span_3_Template(rf, ctx) {
@@ -12685,7 +12688,7 @@ WriteCaseLinkFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 9, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["type", "text", 1, "form-control", "bottom-30", 3, "id", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteCaseLinkFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteCaseLinkFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteCaseLinkFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteCaseLinkFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteCaseLinkFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -12709,7 +12712,7 @@ WriteCaseLinkFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCaseLinkFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-case-link-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !caseReferenceControl.valid && (caseReferenceControl.dirty || caseReferenceControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"caseReferenceControl.errors && (caseReferenceControl.dirty || caseReferenceControl.touched)\">\n    {{caseReferenceControl.errors | ccdFirstError:caseField.label}}\n  </span>\n  <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"text\" [formControl]=\"caseReferenceControl\">\n</div>\n" }]
+            args: [{ selector: 'ccd-write-case-link-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !caseReferenceControl.valid && (caseReferenceControl.dirty || caseReferenceControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"caseReferenceControl.errors && (caseReferenceControl.dirty || caseReferenceControl.touched)\">\n    {{caseReferenceControl.errors | ccdFirstError:caseField.label}}\n  </span>\n  <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"text\" [formControl]=\"caseReferenceControl\">\n</div>\n" }]
         }], null, { writeComplexFieldComponent: [{
                 type: ViewChild,
                 args: ['writeComplexFieldComponent']
@@ -12869,7 +12872,7 @@ RemoveDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Remov
 })();
 
 const _c0$R = ["collectionItem"];
-function WriteCollectionFieldComponent_h2_9_span_1_Template(rf, ctx) {
+function WriteCollectionFieldComponent_h2_8_span_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 9);
         i0.ɵɵtext(1);
@@ -12882,7 +12885,7 @@ function WriteCollectionFieldComponent_h2_9_span_1_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r3.caseField.hint_text));
     }
 }
-function WriteCollectionFieldComponent_h2_9_span_2_Template(rf, ctx) {
+function WriteCollectionFieldComponent_h2_8_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 10);
         i0.ɵɵtext(1);
@@ -12895,11 +12898,11 @@ function WriteCollectionFieldComponent_h2_9_span_2_Template(rf, ctx) {
         i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(2, 1, ctx_r4.formArray.errors, ctx_r4.caseField.label), " ");
     }
 }
-function WriteCollectionFieldComponent_h2_9_Template(rf, ctx) {
+function WriteCollectionFieldComponent_h2_8_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "h2", 2);
-        i0.ɵɵtemplate(1, WriteCollectionFieldComponent_h2_9_span_1_Template, 3, 3, "span", 7);
-        i0.ɵɵtemplate(2, WriteCollectionFieldComponent_h2_9_span_2_Template, 3, 4, "span", 8);
+        i0.ɵɵtemplate(1, WriteCollectionFieldComponent_h2_8_span_1_Template, 3, 3, "span", 7);
+        i0.ɵɵtemplate(2, WriteCollectionFieldComponent_h2_8_span_2_Template, 3, 4, "span", 8);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -12910,7 +12913,7 @@ function WriteCollectionFieldComponent_h2_9_Template(rf, ctx) {
         i0.ɵɵproperty("ngIf", ctx_r0.formArray.errors);
     }
 }
-function WriteCollectionFieldComponent_div_10_div_1_Template(rf, ctx) {
+function WriteCollectionFieldComponent_div_9_div_1_Template(rf, ctx) {
     if (rf & 1) {
         const _r10 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "div", 0, 13)(2, "div", 14)(3, "div", 15)(4, "label", 16)(5, "h3", 17);
@@ -12918,7 +12921,7 @@ function WriteCollectionFieldComponent_div_10_div_1_Template(rf, ctx) {
         i0.ɵɵpipe(7, "rpxTranslate");
         i0.ɵɵelementEnd()()();
         i0.ɵɵelementStart(8, "div", 18)(9, "button", 19);
-        i0.ɵɵlistener("click", function WriteCollectionFieldComponent_div_10_div_1_Template_button_click_9_listener() { const restoredCtx = i0.ɵɵrestoreView(_r10); const i_r7 = restoredCtx.index; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.openModal(i_r7)); });
+        i0.ɵɵlistener("click", function WriteCollectionFieldComponent_div_9_div_1_Template_button_click_9_listener() { const restoredCtx = i0.ɵɵrestoreView(_r10); const i_r7 = restoredCtx.index; const ctx_r9 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r9.openModal(i_r7)); });
         i0.ɵɵtext(10);
         i0.ɵɵpipe(11, "rpxTranslate");
         i0.ɵɵelementEnd()()();
@@ -12943,10 +12946,10 @@ function WriteCollectionFieldComponent_div_10_div_1_Template(rf, ctx) {
         i0.ɵɵproperty("caseField", item_r6.caseField)("caseFields", ctx_r5.caseFields)("formGroup", ctx_r5.formGroup)("parent", item_r6.container)("idPrefix", item_r6.prefix)("hidden", item_r6.caseField.hidden)("isExpanded", ctx_r5.isExpanded)("isInSearchBlock", ctx_r5.isInSearchBlock);
     }
 }
-function WriteCollectionFieldComponent_div_10_Template(rf, ctx) {
+function WriteCollectionFieldComponent_div_9_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 11);
-        i0.ɵɵtemplate(1, WriteCollectionFieldComponent_div_10_div_1_Template, 13, 18, "div", 12);
+        i0.ɵɵtemplate(1, WriteCollectionFieldComponent_div_9_div_1_Template, 13, 18, "div", 12);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -12956,11 +12959,11 @@ function WriteCollectionFieldComponent_div_10_Template(rf, ctx) {
         i0.ɵɵproperty("ngForOf", ctx_r1.collItems);
     }
 }
-function WriteCollectionFieldComponent_button_11_Template(rf, ctx) {
+function WriteCollectionFieldComponent_button_10_Template(rf, ctx) {
     if (rf & 1) {
         const _r12 = i0.ɵɵgetCurrentView();
         i0.ɵɵelementStart(0, "button", 21);
-        i0.ɵɵlistener("click", function WriteCollectionFieldComponent_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.addItem(false)); });
+        i0.ɵɵlistener("click", function WriteCollectionFieldComponent_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.addItem(false)); });
         i0.ɵɵtext(1);
         i0.ɵɵpipe(2, "rpxTranslate");
         i0.ɵɵelementEnd();
@@ -13276,31 +13279,30 @@ WriteCollectionFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
         }
-    }, inputs: { caseFields: "caseFields", formGroup: "formGroup" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 13, consts: [[1, "form-group", 3, "id"], [1, "panel", "collection-indicator"], [1, "heading-h2", "error-spacing"], ["type", "button", 1, "button", "write-collection-add-item__top", 3, "disabled", "click"], ["class", "heading-h2 error-spacing", 4, "ngIf"], ["class", "form-group", 3, "hidden", 4, "ngIf"], ["class", "button write-collection-add-item__bottom", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-hint"], [1, "error-message"], [1, "form-group", 3, "hidden"], ["class", "form-group", 3, "id", 4, "ngFor", "ngForOf"], ["collectionItem", ""], [1, "collection-title"], [1, "float-left"], [3, "for"], [1, "heading-h3"], [1, "float-right"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], [3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"], ["type", "button", 1, "button", "write-collection-add-item__bottom", 3, "disabled", "click"]], template: function WriteCollectionFieldComponent_Template(rf, ctx) {
+    }, inputs: { caseFields: "caseFields", formGroup: "formGroup" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 11, consts: [[1, "form-group", 3, "id"], [1, "panel", "collection-indicator"], [1, "heading-h2", "error-spacing"], ["type", "button", 1, "button", "write-collection-add-item__top", 3, "disabled", "click"], ["class", "heading-h2 error-spacing", 4, "ngIf"], ["class", "form-group", 3, "hidden", 4, "ngIf"], ["class", "button write-collection-add-item__bottom", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-hint"], [1, "error-message"], [1, "form-group", 3, "hidden"], ["class", "form-group", 3, "id", 4, "ngFor", "ngForOf"], ["collectionItem", ""], [1, "collection-title"], [1, "float-left"], [3, "for"], [1, "heading-h3"], [1, "float-right"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], [3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"], ["type", "button", 1, "button", "write-collection-add-item__bottom", 3, "disabled", "click"]], template: function WriteCollectionFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h2", 2);
             i0.ɵɵtext(3);
-            i0.ɵɵpipe(4, "rpxTranslate");
-            i0.ɵɵpipe(5, "ccdFieldLabel");
+            i0.ɵɵpipe(4, "ccdFieldLabel");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "button", 3);
-            i0.ɵɵlistener("click", function WriteCollectionFieldComponent_Template_button_click_6_listener() { return ctx.addItem(true); });
-            i0.ɵɵtext(7);
-            i0.ɵɵpipe(8, "rpxTranslate");
+            i0.ɵɵelementStart(5, "button", 3);
+            i0.ɵɵlistener("click", function WriteCollectionFieldComponent_Template_button_click_5_listener() { return ctx.addItem(true); });
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(9, WriteCollectionFieldComponent_h2_9_Template, 3, 2, "h2", 4);
-            i0.ɵɵtemplate(10, WriteCollectionFieldComponent_div_10_Template, 2, 2, "div", 5);
-            i0.ɵɵtemplate(11, WriteCollectionFieldComponent_button_11_Template, 3, 4, "button", 6);
+            i0.ɵɵtemplate(8, WriteCollectionFieldComponent_h2_8_Template, 3, 2, "h2", 4);
+            i0.ɵɵtemplate(9, WriteCollectionFieldComponent_div_9_Template, 2, 2, "div", 5);
+            i0.ɵɵtemplate(10, WriteCollectionFieldComponent_button_10_Template, 3, 4, "button", 6);
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
             i0.ɵɵproperty("id", ctx.id());
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 7, i0.ɵɵpipeBind1(5, 9, ctx.caseField)), " ");
-            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 7, ctx.caseField), " ");
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("disabled", ctx.isNotAuthorisedToCreate() || ctx.isSearchFilter());
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 11, "Add new"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 9, "Add new"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text || ctx.formArray.errors);
             i0.ɵɵadvance(1);
@@ -13312,7 +13314,7 @@ WriteCollectionFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCollectionFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel) | rpxTranslate }}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
+            args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
         }], function () { return [{ type: i1$3.MatLegacyDialog }, { type: i2.ScrollToService }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }]; }, { caseFields: [{
                 type: Input
             }], formGroup: [{
@@ -13513,14 +13515,13 @@ function WriteComplexFieldComponent_h2_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "h2", 3);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteComplexFieldComponent_ng_container_4_ccd_field_read_2_Template(rf, ctx) {
@@ -13654,10 +13655,10 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
     }
 }
 WriteComplexFieldComponent.ɵfac = function WriteComplexFieldComponent_Factory(t) { return new (t || WriteComplexFieldComponent)(i0.ɵɵdirectiveInject(IsCompoundPipe), i0.ɵɵdirectiveInject(FormValidatorsService)); };
-WriteComplexFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteComplexFieldComponent, selectors: [["ccd-write-complex-type-field"]], inputs: { caseFields: "caseFields", formGroup: "formGroup", renderLabel: "renderLabel", ignoreMandatory: "ignoreMandatory" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "form-group", 3, "id"], ["class", "heading-h2", 4, "ngIf"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "heading-h2"], [3, "ngSwitch"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "withLabel"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"]], template: function WriteComplexFieldComponent_Template(rf, ctx) {
+WriteComplexFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteComplexFieldComponent, selectors: [["ccd-write-complex-type-field"]], inputs: { caseFields: "caseFields", formGroup: "formGroup", renderLabel: "renderLabel", ignoreMandatory: "ignoreMandatory" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [[1, "form-group", 3, "id"], ["class", "heading-h2", 4, "ngIf"], [3, "ngSwitch", 4, "ngFor", "ngForOf"], [1, "heading-h2"], [3, "ngSwitch"], ["ccdLabelSubstitutorp", "", 3, "caseField", "caseFields", "formGroup", "withLabel", 4, "ngSwitchCase"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock", 4, "ngSwitchCase"], ["ccdLabelSubstitutorp", "", 3, "caseField", "caseFields", "formGroup", "withLabel"], ["ccdLabelSubstitutor", "", 3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"]], template: function WriteComplexFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
-            i0.ɵɵtemplate(3, WriteComplexFieldComponent_h2_3_Template, 4, 5, "h2", 1);
+            i0.ɵɵtemplate(3, WriteComplexFieldComponent_h2_3_Template, 3, 3, "h2", 1);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, WriteComplexFieldComponent_ng_container_4_Template, 4, 5, "ng-container", 2);
             i0.ɵɵelementEnd()();
@@ -13673,7 +13674,7 @@ WriteComplexFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteComplexFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-complex-type-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <fieldset>\n    <legend><h2 *ngIf=\"renderLabel\" class=\"heading-h2\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</h2></legend>\n    <ng-container [ngSwitch]=\"field | ccdIsReadOnly\" *ngFor=\"let field of complexFields\">\n      <ccd-field-read *ngSwitchCase=\"true\"\n                      ccdLabelSubstitutor\n                      [caseField]=\"buildField(field)\"\n                      [caseFields]=\"caseFields\"\n                      [formGroup]=\"formGroup\"\n                      [withLabel]=\"true\">\n      </ccd-field-read>\n      <ccd-field-write *ngSwitchCase=\"false\"\n                       ccdLabelSubstitutor\n                       [caseField]=\"field\"\n                       [caseFields]=\"caseFields\"\n                       [formGroup]=\"formGroup\"\n                       [parent]=\"complexGroup\"\n                       [idPrefix]=\"buildIdPrefix(field)\"\n                       [hidden]=\"field.hidden\"\n                       [isExpanded]=\"isExpanded\"\n                       [isInSearchBlock]=\"isInSearchBlock\">\n      </ccd-field-write>\n    </ng-container>\n  </fieldset>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}\n"] }]
+            args: [{ selector: 'ccd-write-complex-type-field', template: "<div class=\"form-group\" [id]=\"id()\">\n  <fieldset>\n    <legend><h2 *ngIf=\"renderLabel\" class=\"heading-h2\">{{(caseField | ccdFieldLabel)}}</h2></legend>\n    <ng-container [ngSwitch]=\"field | ccdIsReadOnly\" *ngFor=\"let field of complexFields\">\n      <ccd-field-read *ngSwitchCase=\"true\"\n                      ccdLabelSubstitutorp\n                      [caseField]=\"buildField(field)\"\n                      [caseFields]=\"caseFields\"\n                      [formGroup]=\"formGroup\"\n                      [withLabel]=\"true\">\n      </ccd-field-read>\n      <ccd-field-write *ngSwitchCase=\"false\"\n                       ccdLabelSubstitutor\n                       [caseField]=\"field\"\n                       [caseFields]=\"caseFields\"\n                       [formGroup]=\"formGroup\"\n                       [parent]=\"complexGroup\"\n                       [idPrefix]=\"buildIdPrefix(field)\"\n                       [hidden]=\"field.hidden\"\n                       [isExpanded]=\"isExpanded\"\n                       [isInSearchBlock]=\"isInSearchBlock\">\n      </ccd-field-write>\n    </ng-container>\n  </fieldset>\n</div>\n", styles: [".complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}\n"] }]
         }], function () { return [{ type: IsCompoundPipe }, { type: FormValidatorsService }]; }, { caseFields: [{
                 type: Input
             }], formGroup: [{
@@ -13904,7 +13905,7 @@ FileUploadStateService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: F
 })();
 
 const _c0$Q = ["fileInput"];
-function WriteDocumentFieldComponent_span_7_Template(rf, ctx) {
+function WriteDocumentFieldComponent_span_6_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 12);
         i0.ɵɵtext(1);
@@ -13917,7 +13918,7 @@ function WriteDocumentFieldComponent_span_7_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField.hint_text));
     }
 }
-function WriteDocumentFieldComponent_span_8_Template(rf, ctx) {
+function WriteDocumentFieldComponent_span_7_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 13);
         i0.ɵɵtext(1);
@@ -13930,7 +13931,7 @@ function WriteDocumentFieldComponent_span_8_Template(rf, ctx) {
         i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r1.fileUploadMessages));
     }
 }
-function WriteDocumentFieldComponent_ccd_read_document_field_10_Template(rf, ctx) {
+function WriteDocumentFieldComponent_ccd_read_document_field_9_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelement(0, "ccd-read-document-field", 14);
     }
@@ -14208,40 +14209,39 @@ WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
         }
-    }, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 22, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], [1, "form-label"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "caseField", 4, "ngIf"], [2, "position", "relative"], [3, "id", "click"], ["type", "file", 1, "form-control", "bottom-30", 3, "id", "accept", "keydown.Tab", "change"], ["fileInput", ""], [1, "form-group", "bottom-30"], ["type", "button", "aria-label", "Cancel upload", 1, "button", "button-secondary", 3, "disabled", "click"], [1, "form-hint"], [1, "error-message"], [3, "caseField"]], template: function WriteDocumentFieldComponent_Template(rf, ctx) {
+    }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 20, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], [1, "form-label"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "caseField", 4, "ngIf"], [2, "position", "relative"], [3, "id", "click"], ["type", "file", 1, "form-control", "bottom-30", 3, "id", "accept", "keydown.Tab", "change"], ["fileInput", ""], [1, "form-group", "bottom-30"], ["type", "button", "aria-label", "Cancel upload", 1, "button", "button-secondary", 3, "disabled", "click"], [1, "form-hint"], [1, "error-message"], [3, "caseField"]], template: function WriteDocumentFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1)(2, "span", 2);
             i0.ɵɵpipe(3, "ccdFieldLabel");
             i0.ɵɵtext(4);
-            i0.ɵɵpipe(5, "rpxTranslate");
-            i0.ɵɵpipe(6, "ccdFieldLabel");
+            i0.ɵɵpipe(5, "ccdFieldLabel");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(7, WriteDocumentFieldComponent_span_7_Template, 3, 3, "span", 3);
-            i0.ɵɵtemplate(8, WriteDocumentFieldComponent_span_8_Template, 3, 3, "span", 4);
-            i0.ɵɵelementStart(9, "div");
-            i0.ɵɵtemplate(10, WriteDocumentFieldComponent_ccd_read_document_field_10_Template, 1, 1, "ccd-read-document-field", 5);
+            i0.ɵɵtemplate(6, WriteDocumentFieldComponent_span_6_Template, 3, 3, "span", 3);
+            i0.ɵɵtemplate(7, WriteDocumentFieldComponent_span_7_Template, 3, 3, "span", 4);
+            i0.ɵɵelementStart(8, "div");
+            i0.ɵɵtemplate(9, WriteDocumentFieldComponent_ccd_read_document_field_9_Template, 1, 1, "ccd-read-document-field", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "div", 6)(12, "div", 7);
-            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_div_click_12_listener() { return ctx.fileSelectEvent(); });
+            i0.ɵɵelementStart(10, "div", 6)(11, "div", 7);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_div_click_11_listener() { return ctx.fileSelectEvent(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "input", 8, 9);
-            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_13_listener() { return ctx.fileValidationsOnTab(); })("change", function WriteDocumentFieldComponent_Template_input_change_13_listener($event) { return ctx.fileChangeEvent($event); });
+            i0.ɵɵelementStart(12, "input", 8, 9);
+            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_12_listener() { return ctx.fileValidationsOnTab(); })("change", function WriteDocumentFieldComponent_Template_input_change_12_listener($event) { return ctx.fileChangeEvent($event); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(15, "div", 10)(16, "button", 11);
-            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_16_listener() { return ctx.cancelUpload(); });
-            i0.ɵɵtext(17);
-            i0.ɵɵpipe(18, "rpxTranslate");
+            i0.ɵɵelementStart(14, "div", 10)(15, "button", 11);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_15_listener() { return ctx.cancelUpload(); });
+            i0.ɵɵtext(16);
+            i0.ɵɵpipe(17, "rpxTranslate");
             i0.ɵɵelementEnd()();
         }
         if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(20, _c1$k, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$k, !ctx.valid));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance(1);
             i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 12, ctx.caseField));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 14, i0.ɵɵpipeBind1(6, 16, ctx.caseField)));
-            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 14, ctx.caseField));
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.fileUploadMessages && !ctx.valid);
@@ -14255,13 +14255,13 @@ WriteDocumentFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", !ctx.isUploadInProgress());
             i0.ɵɵadvance(1);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 18, "Cancel upload"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 16, "Cancel upload"));
         }
     }, encapsulation: 2 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDocumentFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-document-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fileUploadMessages && !valid\">{{fileUploadMessages | rpxTranslate}}</span>\n\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field *ngIf=\"caseField\" [caseField]=\"caseField\"></ccd-read-document-field>\n  </div>\n\n  <div style='position:relative'>\n\n    <div [id]=\"createElementId('fileInputWrapper')\" (click)=\"fileSelectEvent()\"></div>\n    <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"file\" (keydown.Tab)=\"fileValidationsOnTab()\" (change)=\"fileChangeEvent($event)\"\n           accept=\"{{caseField.field_type.regular_expression}}\" #fileInput/>\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button class=\"button button-secondary\" type=\"button\" aria-label=\"Cancel upload\" (click)=\"cancelUpload()\" [disabled]=\"!isUploadInProgress()\">{{'Cancel upload' | rpxTranslate}}</button>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-document-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fileUploadMessages && !valid\">{{fileUploadMessages | rpxTranslate}}</span>\n\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field *ngIf=\"caseField\" [caseField]=\"caseField\"></ccd-read-document-field>\n  </div>\n\n  <div style='position:relative'>\n\n    <div [id]=\"createElementId('fileInputWrapper')\" (click)=\"fileSelectEvent()\"></div>\n    <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"file\" (keydown.Tab)=\"fileValidationsOnTab()\" (change)=\"fileChangeEvent($event)\"\n           accept=\"{{caseField.field_type.regular_expression}}\" #fileInput/>\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button class=\"button button-secondary\" type=\"button\" aria-label=\"Cancel upload\" (click)=\"cancelUpload()\" [disabled]=\"!isUploadInProgress()\">{{'Cancel upload' | rpxTranslate}}</button>\n</div>\n" }]
         }], function () { return [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: FileUploadStateService }, { type: JurisdictionService }]; }, { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput', { static: false }]
@@ -14326,14 +14326,13 @@ function WriteDynamicListFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 8);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteDynamicListFieldComponent_span_3_Template(rf, ctx) {
@@ -14417,7 +14416,7 @@ WriteDynamicListFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteDy
 WriteDynamicListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDynamicListFieldComponent, selectors: [["ccd-write-dynamic-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 15, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-control", "ccd-dropdown", "bottom-30", 3, "id", "formControl"], [3, "ngValue"], ["role", "option", 3, "ngValue", 4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], ["role", "option", 3, "ngValue"]], template: function WriteDynamicListFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteDynamicListFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteDynamicListFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteDynamicListFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteDynamicListFieldComponent_span_4_Template, 3, 3, "span", 2);
@@ -14454,7 +14453,7 @@ WriteDynamicListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDynamicListFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-dynamic-list-field', template: "<div class=\"form-group\"\n  [ngClass]=\"{'form-group-error': !dynamicListFormControl.valid && (dynamicListFormControl.dirty || dynamicListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">{{'Select an option from the dropdown' | rpxTranslate}}</span>\n  <span class=\"error-message\"\n    *ngIf=\"dynamicListFormControl.errors && dynamicListFormControl.dirty\">{{(dynamicListFormControl.errors |\n    ccdFirstError:caseField.label)}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\"\n    [formControl]=\"dynamicListFormControl\">\n    <option [ngValue]=null>{{'--Select a value--' | rpxTranslate}}</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of caseField.list_items\" role=\"option\">{{type.label | rpxTranslate}}</option>\n  </select>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-dynamic-list-field', template: "<div class=\"form-group\"\n  [ngClass]=\"{'form-group-error': !dynamicListFormControl.valid && (dynamicListFormControl.dirty || dynamicListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">{{'Select an option from the dropdown' | rpxTranslate}}</span>\n  <span class=\"error-message\"\n    *ngIf=\"dynamicListFormControl.errors && dynamicListFormControl.dirty\">{{(dynamicListFormControl.errors |\n    ccdFirstError:caseField.label)}}</span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\"\n    [formControl]=\"dynamicListFormControl\">\n    <option [ngValue]=null>{{'--Select a value--' | rpxTranslate}}</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of caseField.list_items\" role=\"option\">{{type.label | rpxTranslate}}</option>\n  </select>\n</div>\n" }]
         }], null, null);
 })();
 
@@ -14795,14 +14794,13 @@ function WriteDynamicRadioListFieldComponent_span_4_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 7);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteDynamicRadioListFieldComponent_span_5_Template(rf, ctx) {
@@ -14894,7 +14892,7 @@ WriteDynamicRadioListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset");
             i0.ɵɵelement(2, "legend", 1);
             i0.ɵɵelementStart(3, "label", 2);
-            i0.ɵɵtemplate(4, WriteDynamicRadioListFieldComponent_span_4_Template, 4, 5, "span", 3);
+            i0.ɵɵtemplate(4, WriteDynamicRadioListFieldComponent_span_4_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(5, WriteDynamicRadioListFieldComponent_span_5_Template, 3, 3, "span", 4);
             i0.ɵɵtemplate(6, WriteDynamicRadioListFieldComponent_span_6_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(7, WriteDynamicRadioListFieldComponent_span_7_Template, 3, 3, "span", 5);
@@ -14923,7 +14921,7 @@ WriteDynamicRadioListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDynamicRadioListFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-dynamic-radio-list-field', template: "<div class=\"form-group bottom-30\"\n    [ngClass]=\"{'form-group-error': !dynamicRadioListControl.valid && dynamicRadioListControl.dirty}\" [id]=\"id()\">\n  <fieldset>\n    <legend style=\"display: none;\"></legend>\n    <label [for]=\"id()\">\n        <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</span>\n        <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n        <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">{{'Select an option below' | rpxTranslate}}</span>\n        <span class=\"error-message\"\n            *ngIf=\"dynamicRadioListControl.errors && dynamicRadioListControl.dirty\">{{(dynamicRadioListControl.errors |\n            ccdFirstError)}}</span>\n    </label>\n\n    <ng-container>\n      <div class=\"multiple-choice\" *ngFor=\"let radioButton of caseField.list_items\" [ngClass]=\"{selected: dynamicRadioListControl.value === radioButton.code}\">\n        <input class=\"form-control\" [id]=\"createElementId(radioButton.code)\" [name]=\"id()\" type=\"radio\" [formControl]=\"dynamicRadioListControl\" [value]=\"radioButton.code\">\n        <label class=\"form-label\" [for]=\"createElementId(radioButton.code)\">{{radioButton.label | rpxTranslate}}</label>\n      </div>\n    </ng-container>\n  </fieldset>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-dynamic-radio-list-field', template: "<div class=\"form-group bottom-30\"\n    [ngClass]=\"{'form-group-error': !dynamicRadioListControl.valid && dynamicRadioListControl.dirty}\" [id]=\"id()\">\n  <fieldset>\n    <legend style=\"display: none;\"></legend>\n    <label [for]=\"id()\">\n        <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n        <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n        <span class=\"form-label\" *ngIf=\"!caseField.label && !caseField.hint_text\">{{'Select an option below' | rpxTranslate}}</span>\n        <span class=\"error-message\"\n            *ngIf=\"dynamicRadioListControl.errors && dynamicRadioListControl.dirty\">{{(dynamicRadioListControl.errors |\n            ccdFirstError)}}</span>\n    </label>\n\n    <ng-container>\n      <div class=\"multiple-choice\" *ngFor=\"let radioButton of caseField.list_items\" [ngClass]=\"{selected: dynamicRadioListControl.value === radioButton.code}\">\n        <input class=\"form-control\" [id]=\"createElementId(radioButton.code)\" [name]=\"id()\" type=\"radio\" [formControl]=\"dynamicRadioListControl\" [value]=\"radioButton.code\">\n        <label class=\"form-label\" [for]=\"createElementId(radioButton.code)\">{{radioButton.label | rpxTranslate}}</label>\n      </div>\n    </ng-container>\n  </fieldset>\n</div>\n" }]
         }], null, null);
 })();
 
@@ -14970,14 +14968,13 @@ function WriteEmailFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteEmailFieldComponent_span_3_Template(rf, ctx) {
@@ -15017,7 +15014,7 @@ WriteEmailFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteEmailFie
 WriteEmailFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteEmailFieldComponent, selectors: [["ccd-write-email-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 12, consts: [[1, "form-group", "bottom-30", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["type", "email", 1, "form-control", 3, "ngClass", "id", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteEmailFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteEmailFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteEmailFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteEmailFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteEmailFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -15041,7 +15038,7 @@ WriteEmailFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wr
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteEmailFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-email-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !emailControl.valid && (emailControl.dirty || emailControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"emailControl.errors && (emailControl.dirty || emailControl.touched)\">{{(emailControl.errors | ccdFirstError:caseField.label)}}</span>\n\n  <input class=\"form-control\" [ngClass]=\"{'govuk-input--error': emailControl.errors && (emailControl.dirty || emailControl.touched)}\"\n    [id]=\"id()\" type=\"email\" [formControl]=\"emailControl\">\n\n</div>\n" }]
+            args: [{ selector: 'ccd-write-email-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !emailControl.valid && (emailControl.dirty || emailControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"emailControl.errors && (emailControl.dirty || emailControl.touched)\">{{(emailControl.errors | ccdFirstError:caseField.label)}}</span>\n\n  <input class=\"form-control\" [ngClass]=\"{'govuk-input--error': emailControl.errors && (emailControl.dirty || emailControl.touched)}\"\n    [id]=\"id()\" type=\"email\" [formControl]=\"emailControl\">\n\n</div>\n" }]
         }], null, null);
 })();
 
@@ -15075,14 +15072,13 @@ function WriteFixedListFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 8);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteFixedListFieldComponent_span_3_Template(rf, ctx) {
@@ -15151,7 +15147,7 @@ WriteFixedListFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteFixe
 WriteFixedListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteFixedListFieldComponent, selectors: [["ccd-write-fixed-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 11, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-control", "ccd-dropdown", "bottom-30", 3, "id", "formControl"], [3, "ngValue"], [3, "ngValue", 4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteFixedListFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteFixedListFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteFixedListFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteFixedListFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteFixedListFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -15182,7 +15178,7 @@ WriteFixedListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteFixedListFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-fixed-list-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !fixedListFormControl.valid && (fixedListFormControl.dirty || fixedListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fixedListFormControl.errors && (fixedListFormControl.dirty || fixedListFormControl.touched)\">\n    {{(fixedListFormControl.errors | ccdFirstError:caseField.label)}}\n  </span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\" [formControl]=\"fixedListFormControl\">\n    <option [ngValue]=null>--Select a value--</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of listItems\">{{type.label | rpxTranslate}}</option>\n  </select>\n\n</div>\n" }]
+            args: [{ selector: 'ccd-write-fixed-list-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !fixedListFormControl.valid && (fixedListFormControl.dirty || fixedListFormControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fixedListFormControl.errors && (fixedListFormControl.dirty || fixedListFormControl.touched)\">\n    {{(fixedListFormControl.errors | ccdFirstError:caseField.label)}}\n  </span>\n\n  <select class=\"form-control ccd-dropdown bottom-30\" [id]=\"id()\" [formControl]=\"fixedListFormControl\">\n    <option [ngValue]=null>--Select a value--</option>\n    <option [ngValue]=\"type.code\" *ngFor=\"let type of listItems\">{{type.label | rpxTranslate}}</option>\n  </select>\n\n</div>\n" }]
         }], null, null);
 })();
 
@@ -15234,14 +15230,13 @@ function WriteFixedRadioListFieldComponent_span_4_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteFixedRadioListFieldComponent_span_5_Template(rf, ctx) {
@@ -15303,7 +15298,7 @@ WriteFixedRadioListFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWrit
 WriteFixedRadioListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteFixedRadioListFieldComponent, selectors: [["ccd-write-fixed-radio-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 9, consts: [[1, "form-group", "bottom-30", 3, "ngClass", "id"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["class", "multiple-choice", 3, "ngClass", 4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], [1, "multiple-choice", 3, "ngClass"], ["type", "radio", 1, "form-control", 3, "id", "name", "formControl", "value"], [1, "form-label", 3, "for"]], template: function WriteFixedRadioListFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend")(3, "label", 1);
-            i0.ɵɵtemplate(4, WriteFixedRadioListFieldComponent_span_4_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(4, WriteFixedRadioListFieldComponent_span_4_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(5, WriteFixedRadioListFieldComponent_span_5_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(6, WriteFixedRadioListFieldComponent_span_6_Template, 3, 4, "span", 4);
@@ -15330,7 +15325,7 @@ WriteFixedRadioListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteFixedRadioListFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-fixed-radio-list-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !fixedRadioListControl.valid && (fixedRadioListControl.dirty || fixedRadioListControl.touched)}\" [id]=\"id()\">\n  <fieldset>\n    <legend>\n      <label [for]=\"id()\">\n        <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate}}</span>\n      </label>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span class=\"error-message\" *ngIf=\"fixedRadioListControl.errors && (fixedRadioListControl.dirty || fixedRadioListControl.touched)\">{{(fixedRadioListControl.errors | ccdFirstError:caseField.label)}}</span>\n    </legend>\n    <ng-container>\n      <div class=\"multiple-choice\" *ngFor=\"let radioButton of caseField.field_type.fixed_list_items\" [ngClass]=\"{selected: fixedRadioListControl.value === radioButton.code}\">\n        <input class=\"form-control\" [id]=\"id()+'-'+radioButton.code\" [name]=\"id()\" type=\"radio\" [formControl]=\"fixedRadioListControl\" [value]=\"radioButton.code\">\n        <label class=\"form-label\" [for]=\"id()+'-'+radioButton.code\">{{radioButton.label | rpxTranslate}}</label>\n      </div>\n    </ng-container>\n  </fieldset>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-fixed-radio-list-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !fixedRadioListControl.valid && (fixedRadioListControl.dirty || fixedRadioListControl.touched)}\" [id]=\"id()\">\n  <fieldset>\n    <legend>\n      <label [for]=\"id()\">\n        <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n      </label>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate }}</span>\n      <span class=\"error-message\" *ngIf=\"fixedRadioListControl.errors && (fixedRadioListControl.dirty || fixedRadioListControl.touched)\">{{(fixedRadioListControl.errors | ccdFirstError:caseField.label)}}</span>\n    </legend>\n    <ng-container>\n      <div class=\"multiple-choice\" *ngFor=\"let radioButton of caseField.field_type.fixed_list_items\" [ngClass]=\"{selected: fixedRadioListControl.value === radioButton.code}\">\n        <input class=\"form-control\" [id]=\"id()+'-'+radioButton.code\" [name]=\"id()\" type=\"radio\" [formControl]=\"fixedRadioListControl\" [value]=\"radioButton.code\">\n        <label class=\"form-label\" [for]=\"id()+'-'+radioButton.code\">{{radioButton.label | rpxTranslate}}</label>\n      </div>\n    </ng-container>\n  </fieldset>\n</div>\n" }]
         }], null, null);
 })();
 
@@ -18182,14 +18177,13 @@ function WriteMoneyGbpFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 8);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteMoneyGbpFieldComponent_span_3_Template(rf, ctx) {
@@ -18228,7 +18222,7 @@ WriteMoneyGbpFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteMoney
 WriteMoneyGbpFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteMoneyGbpFieldComponent, selectors: [["ccd-write-money-gbp-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 13, consts: [[1, "form-group", "bottom-30", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-money"], [1, "form-currency"], [3, "id", "name", "mandatory", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteMoneyGbpFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteMoneyGbpFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteMoneyGbpFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteMoneyGbpFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteMoneyGbpFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -18256,7 +18250,7 @@ WriteMoneyGbpFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteMoneyGbpFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-money-gbp-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !moneyGbpControl.valid && (moneyGbpControl.dirty || moneyGbpControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"moneyGbpControl.errors && (moneyGbpControl.dirty || moneyGbpControl.touched)\">{{moneyGbpControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <div class=\"form-money\">\n    <span class=\"form-currency\">&#163;</span>\n    <ccd-money-gbp-input [id]=\"id()\"\n                         [name]=\"id()\"\n                         [mandatory]=\"caseField | ccdIsMandatory\"\n                         [formControl]=\"moneyGbpControl\"></ccd-money-gbp-input>\n  </div>\n\n</div>\n" }]
+            args: [{ selector: 'ccd-write-money-gbp-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !moneyGbpControl.valid && (moneyGbpControl.dirty || moneyGbpControl.touched)}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"moneyGbpControl.errors && (moneyGbpControl.dirty || moneyGbpControl.touched)\">{{moneyGbpControl.errors | ccdFirstError:caseField.label}}</span>\n\n  <div class=\"form-money\">\n    <span class=\"form-currency\">&#163;</span>\n    <ccd-money-gbp-input [id]=\"id()\"\n                         [name]=\"id()\"\n                         [mandatory]=\"caseField | ccdIsMandatory\"\n                         [formControl]=\"moneyGbpControl\"></ccd-money-gbp-input>\n  </div>\n\n</div>\n" }]
         }], null, null);
 })();
 
@@ -18314,14 +18308,13 @@ function WriteMultiSelectListFieldComponent_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 5);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteMultiSelectListFieldComponent_span_4_Template(rf, ctx) {
@@ -18420,7 +18413,7 @@ WriteMultiSelectListFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWri
 WriteMultiSelectListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteMultiSelectListFieldComponent, selectors: [["ccd-write-multi-select-list-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 7, vars: 8, consts: [[1, "form-group", "bottom-30", 3, "ngClass", "id"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], [1, "multiple-choice"], ["type", "checkbox", 1, "form-control", 3, "id", "name", "value", "checked", "change"], [1, "form-label", 3, "for"]], template: function WriteMultiSelectListFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
-            i0.ɵɵtemplate(3, WriteMultiSelectListFieldComponent_span_3_Template, 4, 5, "span", 1);
+            i0.ɵɵtemplate(3, WriteMultiSelectListFieldComponent_span_3_Template, 3, 3, "span", 1);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, WriteMultiSelectListFieldComponent_span_4_Template, 3, 3, "span", 2);
             i0.ɵɵtemplate(5, WriteMultiSelectListFieldComponent_span_5_Template, 3, 4, "span", 3);
@@ -18442,7 +18435,7 @@ WriteMultiSelectListFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent(
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteMultiSelectListFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-multi-select-list-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'error': !checkboxes.valid && (checkboxes.dirty || checkboxes.touched)}\" [id]=\"id()\">\n\n  <fieldset>\n\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n    </legend>\n    <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span *ngIf=\"checkboxes.errors && (checkboxes.dirty || checkboxes.touched)\" class=\"error-message\">{{checkboxes.errors | ccdFirstError:caseField.label}}</span>\n\n    <ng-container *ngFor=\"let checkbox of caseField.field_type.fixed_list_items\">\n\n      <div class=\"multiple-choice\">\n        <input class=\"form-control\" [id]=\"id()+'-'+checkbox.code\" [name]=\"id()\" type=\"checkbox\" [value]=\"checkbox.code\" [checked]=\"isSelected(checkbox.code)\" (change)=\"onCheckChange($event)\">\n        <label class=\"form-label\" [for]=\"id()+'-'+checkbox.code\">{{checkbox.label | rpxTranslate}}</label>\n      </div>\n\n    </ng-container>\n\n  </fieldset>\n\n</div>\n" }]
+            args: [{ selector: 'ccd-write-multi-select-list-field', template: "<div class=\"form-group bottom-30\" [ngClass]=\"{'error': !checkboxes.valid && (checkboxes.dirty || checkboxes.touched)}\" [id]=\"id()\">\n\n  <fieldset>\n\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span *ngIf=\"checkboxes.errors && (checkboxes.dirty || checkboxes.touched)\" class=\"error-message\">{{checkboxes.errors | ccdFirstError:caseField.label}}</span>\n\n    <ng-container *ngFor=\"let checkbox of caseField.field_type.fixed_list_items\">\n\n      <div class=\"multiple-choice\">\n        <input class=\"form-control\" [id]=\"id()+'-'+checkbox.code\" [name]=\"id()\" type=\"checkbox\" [value]=\"checkbox.code\" [checked]=\"isSelected(checkbox.code)\" (change)=\"onCheckChange($event)\">\n        <label class=\"form-label\" [for]=\"id()+'-'+checkbox.code\">{{checkbox.label | rpxTranslate}}</label>\n      </div>\n\n    </ng-container>\n\n  </fieldset>\n\n</div>\n" }]
         }], null, null);
 })();
 
@@ -18475,14 +18468,13 @@ function WriteNumberFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteNumberFieldComponent_span_3_Template(rf, ctx) {
@@ -18522,7 +18514,7 @@ WriteNumberFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteNumberF
 WriteNumberFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteNumberFieldComponent, selectors: [["ccd-write-number-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 12, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["type", "number", 1, "form-control", "bottom-30", 3, "ngClass", "id", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteNumberFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteNumberFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteNumberFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteNumberFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteNumberFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -18546,7 +18538,7 @@ WriteNumberFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: W
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteNumberFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-number-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !numberControl.valid && numberControl.dirty}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"numberControl.errors && numberControl.dirty\">\n    {{numberControl.errors | ccdFirstError:caseField.label}}\n  </span>\n\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': numberControl.errors && numberControl.dirty}\"\n   [id]=\"id()\" type=\"number\" [formControl]=\"numberControl\">\n</div>\n" }]
+            args: [{ selector: 'ccd-write-number-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !numberControl.valid && numberControl.dirty}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"numberControl.errors && numberControl.dirty\">\n    {{numberControl.errors | ccdFirstError:caseField.label}}\n  </span>\n\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': numberControl.errors && numberControl.dirty}\"\n   [id]=\"id()\" type=\"number\" [formControl]=\"numberControl\">\n</div>\n" }]
         }], null, null);
 })();
 
@@ -19220,14 +19212,13 @@ function WritePhoneUKFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WritePhoneUKFieldComponent_span_3_Template(rf, ctx) {
@@ -19267,7 +19258,7 @@ WritePhoneUKFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWritePhoneU
 WritePhoneUKFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WritePhoneUKFieldComponent, selectors: [["ccd-write-phone-uk-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 12, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["type", "tel", 1, "form-control", "bottom-30", 3, "ngClass", "id", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WritePhoneUKFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WritePhoneUKFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WritePhoneUKFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WritePhoneUKFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WritePhoneUKFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -19291,7 +19282,7 @@ WritePhoneUKFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WritePhoneUKFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-phone-uk-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !phoneUkControl.valid && (phoneUkControl.dirty || phoneUkControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"phoneUkControl.errors && (phoneUkControl.dirty || phoneUkControl.touched)\">\n    {{phoneUkControl.errors | ccdFirstError:caseField.label}}\n  </span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': phoneUkControl.errors && phoneUkControl.dirty}\"\n   [id]=\"id()\" type=\"tel\" [formControl]=\"phoneUkControl\">\n</div>\n" }]
+            args: [{ selector: 'ccd-write-phone-uk-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !phoneUkControl.valid && (phoneUkControl.dirty || phoneUkControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"phoneUkControl.errors && (phoneUkControl.dirty || phoneUkControl.touched)\">\n    {{phoneUkControl.errors | ccdFirstError:caseField.label}}\n  </span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': phoneUkControl.errors && phoneUkControl.dirty}\"\n   [id]=\"id()\" type=\"tel\" [formControl]=\"phoneUkControl\">\n</div>\n" }]
         }], null, null);
 })();
 
@@ -21491,14 +21482,13 @@ function WriteTextAreaFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteTextAreaFieldComponent_span_3_Template(rf, ctx) {
@@ -21549,7 +21539,7 @@ WriteTextAreaFieldComponent.ɵfac = function WriteTextAreaFieldComponent_Factory
 WriteTextAreaFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteTextAreaFieldComponent, selectors: [["ccd-write-text-area-field"]], features: [i0.ɵɵProvidersFeature([BrowserService]), i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 12, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["rows", "3", 1, "form-control", "bottom-30", 3, "ngClass", "id", "formControl", "input"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteTextAreaFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteTextAreaFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteTextAreaFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteTextAreaFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteTextAreaFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -21574,7 +21564,7 @@ WriteTextAreaFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteTextAreaFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-text-area-field', providers: [BrowserService], template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !textareaControl.valid && textareaControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"textareaControl.errors && (textareaControl.dirty || textareaControl.touched)\">\n    {{textareaControl.errors | ccdFirstError:caseField.label}}\n  </span>\n\n  <textarea (input)=\"autoGrow($event)\" class=\"form-control bottom-30\" [ngClass]=\"{'govuk-textarea--error': textareaControl.errors && (textareaControl.dirty || textareaControl.touched)}\"\n   [id]=\"id()\" rows=\"3\" [formControl]=\"textareaControl\"></textarea>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-text-area-field', providers: [BrowserService], template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !textareaControl.valid && textareaControl.dirty}\">\n\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"textareaControl.errors && (textareaControl.dirty || textareaControl.touched)\">\n    {{textareaControl.errors | ccdFirstError:caseField.label}}\n  </span>\n\n  <textarea (input)=\"autoGrow($event)\" class=\"form-control bottom-30\" [ngClass]=\"{'govuk-textarea--error': textareaControl.errors && (textareaControl.dirty || textareaControl.touched)}\"\n   [id]=\"id()\" rows=\"3\" [formControl]=\"textareaControl\"></textarea>\n</div>\n" }]
         }], function () { return [{ type: BrowserService }]; }, null);
 })();
 
@@ -21607,14 +21597,13 @@ function WriteTextFieldComponent_span_2_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 6);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteTextFieldComponent_span_3_Template(rf, ctx) {
@@ -21657,7 +21646,7 @@ WriteTextFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteTextField
 WriteTextFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteTextFieldComponent, selectors: [["ccd-write-text-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 12, consts: [[1, "form-group", 3, "ngClass"], [3, "for"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], ["type", "text", 1, "form-control", "bottom-30", 3, "ngClass", "id", "formControl", "blur"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteTextFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "label", 1);
-            i0.ɵɵtemplate(2, WriteTextFieldComponent_span_2_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(2, WriteTextFieldComponent_span_2_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(3, WriteTextFieldComponent_span_3_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(4, WriteTextFieldComponent_span_4_Template, 3, 4, "span", 4);
@@ -21682,7 +21671,7 @@ WriteTextFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wri
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteTextFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-text-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !!textControl && !textControl.valid && (textControl.dirty || textControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"textControl?.errors && (textControl.dirty || textControl.touched)\">\n    {{textControl.errors | ccdFirstError:caseField.label}}\n  </span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': textControl?.errors && (textControl.dirty || textControl.touched)}\"\n  [id]=\"id()\" type=\"text\" [formControl]=\"textControl\" (blur)=\"onBlur($event)\">\n</div>\n" }]
+            args: [{ selector: 'ccd-write-text-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error': !!textControl && !textControl.valid && (textControl.dirty || textControl.touched)}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"textControl?.errors && (textControl.dirty || textControl.touched)\">\n    {{textControl.errors | ccdFirstError:caseField.label}}\n  </span>\n  <input class=\"form-control bottom-30\" [ngClass]=\"{'govuk-input--error': textControl?.errors && (textControl.dirty || textControl.touched)}\"\n  [id]=\"id()\" type=\"text\" [formControl]=\"textControl\" (blur)=\"onBlur($event)\">\n</div>\n" }]
         }], null, null);
 })();
 
@@ -21828,14 +21817,13 @@ function WriteYesNoFieldComponent_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 7);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteYesNoFieldComponent_span_4_Template(rf, ctx) {
@@ -21902,7 +21890,7 @@ WriteYesNoFieldComponent.ɵfac = function WriteYesNoFieldComponent_Factory(t) {
 WriteYesNoFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteYesNoFieldComponent, selectors: [["ccd-write-yes-no-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 9, consts: [[1, "form-group", "bottom-30", 3, "id", "ngClass"], [1, "inline"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "id"], ["class", "multiple-choice", 3, "ngClass", 4, "ngFor", "ngForOf"], [1, "form-label"], [1, "form-hint"], [1, "error-message"], [1, "multiple-choice", 3, "ngClass"], ["type", "radio", 1, "form-control", 3, "id", "name", "formControl", "value"], [1, "form-label", 3, "for"]], template: function WriteYesNoFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset", 1)(2, "legend");
-            i0.ɵɵtemplate(3, WriteYesNoFieldComponent_span_3_Template, 4, 5, "span", 2);
+            i0.ɵɵtemplate(3, WriteYesNoFieldComponent_span_3_Template, 3, 3, "span", 2);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, WriteYesNoFieldComponent_span_4_Template, 3, 3, "span", 3);
             i0.ɵɵtemplate(5, WriteYesNoFieldComponent_span_5_Template, 3, 4, "span", 4);
@@ -21927,7 +21915,7 @@ WriteYesNoFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wr
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteYesNoFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-yes-no-field', template: "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\t<fieldset class=\"inline\">\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel | rpxTranslate}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">\n      {{yesNoControl.errors | ccdFirstError:caseField.label}}\n    </span>\n\n    <div [id]=\"createElementId('radio')\">\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n  \t    <label class=\"form-label\" [for]=\"createElementId(value)\">{{caseField.label | rpxTranslate : null : value}}</label>\n  \t  </div>\n    </div>\n\t</fieldset>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-yes-no-field', template: "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\t<fieldset class=\"inline\">\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">\n      {{yesNoControl.errors | ccdFirstError:caseField.label}}\n    </span>\n\n    <div [id]=\"createElementId('radio')\">\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n  \t    <label class=\"form-label\" [for]=\"createElementId(value)\">{{caseField.label | rpxTranslate : null : value}}</label>\n  \t  </div>\n    </div>\n\t</fieldset>\n</div>\n" }]
         }], function () { return [{ type: YesNoService }]; }, null);
 })();
 
@@ -26900,14 +26888,13 @@ function WriteDateFieldComponent_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 5);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function WriteDateFieldComponent_span_4_Template(rf, ctx) {
@@ -26949,7 +26936,7 @@ WriteDateFieldComponent.ɵfac = /*@__PURE__*/ function () { let ɵWriteDateField
 WriteDateFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDateFieldComponent, selectors: [["ccd-write-date-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 14, consts: [[1, "form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "id", "isDateTime", "mandatory", "isInvalid", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteDateFieldComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
-            i0.ɵɵtemplate(3, WriteDateFieldComponent_span_3_Template, 4, 5, "span", 1);
+            i0.ɵɵtemplate(3, WriteDateFieldComponent_span_3_Template, 3, 3, "span", 1);
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, WriteDateFieldComponent_span_4_Template, 3, 3, "span", 2);
             i0.ɵɵtemplate(5, WriteDateFieldComponent_span_5_Template, 3, 4, "span", 3);
@@ -26972,7 +26959,7 @@ WriteDateFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Wri
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDateFieldComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-write-date-field', template: "<div class=\"form-group bottom-30\" [id]=\"id()\" [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && (dateControl.dirty || dateControl.touched)}\">\n\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate }}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"dateControl && dateControl.errors && (dateControl.dirty || dateControl.touched)\">\n      {{(dateControl.errors | ccdFirstError:caseField.label)}}\n    </span>\n    <cut-date-input [id]=\"id()\"\n                    [isDateTime]=\"isDateTime()\"\n                    [mandatory]=\"caseField | ccdIsMandatory\"\n                    [isInvalid]=\"dateControl.errors && (dateControl.dirty || dateControl.touched)\"\n                    [formControl]=\"dateControl\"></cut-date-input>\n\n  </fieldset>\n</div>\n" }]
+            args: [{ selector: 'ccd-write-date-field', template: "<div class=\"form-group bottom-30\" [id]=\"id()\" [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && (dateControl.dirty || dateControl.touched)}\">\n\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"dateControl && dateControl.errors && (dateControl.dirty || dateControl.touched)\">\n      {{(dateControl.errors | ccdFirstError:caseField.label)}}\n    </span>\n    <cut-date-input [id]=\"id()\"\n                    [isDateTime]=\"isDateTime()\"\n                    [mandatory]=\"caseField | ccdIsMandatory\"\n                    [isInvalid]=\"dateControl.errors && (dateControl.dirty || dateControl.touched)\"\n                    [formControl]=\"dateControl\"></cut-date-input>\n\n  </fieldset>\n</div>\n" }]
         }], null, null);
 })();
 
@@ -26994,14 +26981,13 @@ function DatetimePickerComponent_span_3_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementStart(0, "span", 11);
         i0.ɵɵtext(1);
-        i0.ɵɵpipe(2, "rpxTranslate");
-        i0.ɵɵpipe(3, "ccdFieldLabel");
+        i0.ɵɵpipe(2, "ccdFieldLabel");
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const ctx_r0 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, i0.ɵɵpipeBind1(3, 3, ctx_r0.caseField)));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.caseField));
     }
 }
 function DatetimePickerComponent_span_4_Template(rf, ctx) {
@@ -27238,7 +27224,7 @@ DatetimePickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dat
         ]), i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 26, consts: [[1, "govuk-form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "datepicker-container"], ["ng-model-options", "{timezone:'utc'}", 1, "govuk-input", 3, "min", "max", "formControl", "ngxMatDatetimePicker", "focusin", "focusout", "dateChange"], ["input", ""], ["matSuffix", "", "id", "pickerOpener", 3, "for"], [3, "color", "touchUi", "hideTime", "startView", "stepHour", "stepSecond", "stepMinute", "showSeconds", "showSpinners", "disableMinute", "enableMeridian", "yearSelected", "monthSelected", "opened"], ["picker", ""], ["mat-raised-button", "", "color", "primary", "ngxMatDatepickerApply", ""], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function DatetimePickerComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
-            i0.ɵɵtemplate(3, DatetimePickerComponent_span_3_Template, 4, 5, "span", 1);
+            i0.ɵɵtemplate(3, DatetimePickerComponent_span_3_Template, 3, 3, "span", 1);
             i0.ɵɵtemplate(4, DatetimePickerComponent_span_4_Template, 3, 3, "span", 2);
             i0.ɵɵtemplate(5, DatetimePickerComponent_span_5_Template, 3, 4, "span", 3);
             i0.ɵɵtemplate(6, DatetimePickerComponent_span_6_Template, 3, 3, "span", 3);
@@ -27287,7 +27273,7 @@ DatetimePickerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dat
                             deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
                         },
                         { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
-                    ], template: "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel) | rpxTranslate }}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)\">{{(dateControl.errors | ccdFirstError:caseField.label)}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && minError\">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && maxError\">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             attr.aria-label=\"Please enter a date and time in the format | rpxTranslate {{dateTimeEntryFormat}}\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"dateControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (focusout)=\"focusOut()\"\n             (dateChange)=\"valueChanged()\"\n             ng-model-options=\"{timezone:'utc'}\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n        <ngx-mat-datepicker-actions>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>Confirm</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n", styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;-moz-column-width:20px;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(1):after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(1) [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1) [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1).ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \\25b2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\\25bc\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid black;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:120px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}\n"] }]
+                    ], template: "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)\">{{(dateControl.errors | ccdFirstError:caseField.label)}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && minError\">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && maxError\">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             attr.aria-label=\"Please enter a date and time in the format | rpxTranslate {{dateTimeEntryFormat}}\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"dateControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (focusout)=\"focusOut()\"\n             (dateChange)=\"valueChanged()\"\n             ng-model-options=\"{timezone:'utc'}\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n        <ngx-mat-datepicker-actions>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>Confirm</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n", styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;-moz-column-width:20px;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(1):after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(1) [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1) [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1).ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \\25b2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\\25bc\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid black;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:120px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}\n"] }]
         }], function () {
         return [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -29266,7 +29252,7 @@ i0.ɵɵsetComponentScope(WriteAddressFieldComponent, function () { return [i4.Ng
 i0.ɵɵsetComponentScope(WriteComplexFieldComponent, function () {
     return [i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i3.NgControlStatusGroup, i3.FormGroupDirective, LabelSubstitutorDirective, FieldReadComponent,
         FieldWriteComponent];
-}, function () { return [FieldLabelPipe, IsReadOnlyPipe, i1.RpxTranslatePipe]; });
+}, function () { return [FieldLabelPipe, IsReadOnlyPipe]; });
 i0.ɵɵsetComponentScope(WriteDocumentFieldComponent, function () { return [i4.NgClass, i4.NgIf, ReadDocumentFieldComponent]; }, function () { return [FieldLabelPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(WriteDateContainerFieldComponent, function () {
     return [i4.NgIf, i3.NgControlStatusGroup, i3.FormGroupDirective, DatetimePickerComponent,
@@ -29404,12 +29390,13 @@ function CaseEditSubmitComponent_div_0_ng_container_12_ng_container_7_ng_contain
     if (rf & 1) {
         i0.ɵɵelementStart(0, "th", 25)(1, "span", 20);
         i0.ɵɵtext(2);
+        i0.ɵɵpipe(3, "rpxTranslate");
         i0.ɵɵelementEnd()();
     }
     if (rf & 2) {
         const field_r17 = i0.ɵɵnextContext(2).$implicit;
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate(field_r17.label);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, field_r17.label));
     }
 }
 function CaseEditSubmitComponent_div_0_ng_container_12_ng_container_7_ng_container_1_ng_container_1_ng_container_1_ng_container_5_a_2_Template(rf, ctx) {
@@ -29451,7 +29438,7 @@ function CaseEditSubmitComponent_div_0_ng_container_12_ng_container_7_ng_contain
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
         i0.ɵɵelementStart(1, "tr", 21);
-        i0.ɵɵtemplate(2, CaseEditSubmitComponent_div_0_ng_container_12_ng_container_7_ng_container_1_ng_container_1_ng_container_1_th_2_Template, 3, 1, "th", 22);
+        i0.ɵɵtemplate(2, CaseEditSubmitComponent_div_0_ng_container_12_ng_container_7_ng_container_1_ng_container_1_ng_container_1_th_2_Template, 4, 3, "th", 22);
         i0.ɵɵelementStart(3, "td", 23);
         i0.ɵɵelement(4, "ccd-field-read", 24);
         i0.ɵɵelementEnd();
@@ -29944,7 +29931,7 @@ CaseEditSubmitComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cas
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEditSubmitComponent, [{
             type: Component,
-            args: [{ selector: 'ccd-case-edit-submit', template: "<div *ngIf=\"!caseEdit.isEventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n\n  <!--Case ID or Title -->\n  <div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n  <ng-template #titleBlock>\n    <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n  </ng-template>\n  <ng-template #idBlock>\n    <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n  </ng-template>\n\n  <ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n  <ccd-callback-errors [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n                      (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n  <form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n      <h2 class=\"heading-h2\">{{pageTitle | rpxTranslate }}</h2>\n      <span class=\"text-16\" *ngIf=\"!caseEdit.isCaseFlagSubmission\">{{'Check the information below carefully.' | rpxTranslate}}</span>\n\n      <table class=\"form-table\" aria-describedby=\"check your answers table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm\n            | ccdReadFieldsFilter: false :undefined :true :allFieldsValues\n            | ccdCYAPageLabelFilter\">\n              <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n                <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                    [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th *ngIf=\"!isLabel(field) && !caseEdit.isCaseFlagSubmission\" class=\"valign-top case-field-label\"><span class=\"text-16\">{{field.label}}</span></th>\n                  <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                    <ccd-field-read\n                      [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                      [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                  <ng-container *ngIf=\"!caseEdit.isCaseFlagSubmission\">\n                    <td class=\"valign-top check-your-answers__change case-field-change\">\n                      <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                        href=\"javascript:void(0)\">\n                        <span class=\"text-16\" attr.aria-label=\"{{'Change' | rpxTranslate}} {{ field.label | rpxTranslate }}\">\n                          {{'Change' | rpxTranslate}}\n                        </span>\n                      </a>\n                    </td>\n                  </ng-container>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n      <table class=\"summary-fields\" aria-describedby=\"summary fields table\">\n        <tbody>\n          <ng-container *ngFor=\"let field of showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th id=\"summary-field-label\">{{field.label}}</th>\n                  <td class=\"form-cell\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                  </td>\n                </tr>\n                <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <td colspan=\"2\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"showEventNotes()\">\n      <fieldset id=\"fieldset-event\" formGroupName=\"event\">\n        <legend style=\"display: none;\"></legend>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-summary\" class=\"form-label\">\n            Event summary (optional)\n            <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n          </label>\n          <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n          <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                    maxlength=\"65536\"></textarea>\n        </div>\n      </fieldset>\n    </ng-container>\n    <div class=\"form-group form-group-related\">\n      <button *ngIf=\"!caseEdit.isCaseFlagSubmission\" class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || caseEdit.isSubmitting\" (click)=\"previous()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">\n        {{triggerText | rpxTranslate}}\n      </button>\n    </div>\n    <p class=\"cancel\">\n      <a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"caseEdit.isSubmitting\">{{getCancelText() | rpxTranslate}}</a>\n    </p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: ["#fieldset-case-data{margin-bottom:30px}#fieldset-case-data th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}#confirmation-header{width:630px;background-color:#17958b;border:solid 1px #979797;color:#fff;text-align:center}#confirmation-body{width:630px;background-color:#fff}.valign-top{vertical-align:top}.summary-fields{margin-bottom:30px}.summary-fields tbody tr th,.summary-fields tbody tr td{border-bottom:0px}a.disabled{pointer-events:none;cursor:default}.case-field-label{width:45%}.case-field-content{width:50%}.no-bottom-border{border-bottom:none}.case-field-change{width:5%}\n"] }]
+            args: [{ selector: 'ccd-case-edit-submit', template: "<div *ngIf=\"!caseEdit.isEventCompletionChecksRequired\">\n  <!-- Event trigger name -->\n  <h1 class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n\n  <!--Case ID or Title -->\n  <div *ngIf=\"getCaseTitle(); then titleBlock; else idBlock\"></div>\n  <ng-template #titleBlock>\n    <ccd-markdown [content]=\"getCaseTitle() | ccdCaseTitle: contextFields : editForm.controls['data']\"></ccd-markdown>\n  </ng-template>\n  <ng-template #idBlock>\n    <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n  </ng-template>\n\n  <ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n  <ccd-callback-errors [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n                      (callbackErrorsContext)=\"callbackErrorsNotify($event)\"></ccd-callback-errors>\n\n  <form class=\"check-your-answers\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <ng-container *ngIf=\"checkYourAnswerFieldsToDisplayExists()\">\n\n      <h2 class=\"heading-h2\">{{pageTitle | rpxTranslate }}</h2>\n      <span class=\"text-16\" *ngIf=\"!caseEdit.isCaseFlagSubmission\">{{'Check the information below carefully.' | rpxTranslate}}</span>\n\n      <table class=\"form-table\" aria-describedby=\"check your answers table\">\n        <tbody>\n        <ng-container *ngFor=\"let page of wizard.pages\">\n          <ng-container *ngIf=\"isShown(page)\">\n            <ng-container *ngFor=\"let field of page\n            | ccdPageFields: editForm\n            | ccdReadFieldsFilter: false :undefined :true :allFieldsValues\n            | ccdCYAPageLabelFilter\">\n              <ng-container *ngIf=\"canShowFieldInCYA(field)\">\n                <tr ccdLabelSubstitutor [caseField]=\"field\" [hidden]=\"field.hidden\"\n                    [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th *ngIf=\"!isLabel(field) && !caseEdit.isCaseFlagSubmission\" class=\"valign-top case-field-label\">\n                    <span class=\"text-16\">{{field.label | rpxTranslate}}</span>\n                  </th>\n                  <td class=\"form-cell case-field-content\" [attr.colspan]=\"isLabel(field) ? '2' : '1'\">\n                    <ccd-field-read\n                      [formGroup]=\"editForm.controls['data']\" [topLevelFormGroup]=\"editForm.controls['data']\"\n                      [caseField]=\"summaryCaseField(field)\" [context]=\"paletteContext\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                  <ng-container *ngIf=\"!caseEdit.isCaseFlagSubmission\">\n                    <td class=\"valign-top check-your-answers__change case-field-change\">\n                      <a *ngIf=\"isChangeAllowed(field)\" (click)=\"navigateToPage(page.id)\"\n                        href=\"javascript:void(0)\">\n                        <span class=\"text-16\" attr.aria-label=\"{{'Change' | rpxTranslate}} {{ field.label | rpxTranslate }}\">\n                          {{'Change' | rpxTranslate}}\n                        </span>\n                      </a>\n                    </td>\n                  </ng-container>\n                </tr>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"readOnlySummaryFieldsToDisplayExists()\">\n\n      <table class=\"summary-fields\" aria-describedby=\"summary fields table\">\n        <tbody>\n          <ng-container *ngFor=\"let field of showSummaryFields\">\n              <ng-container [ngSwitch]=\"!(field | ccdIsCompound)\">\n                <tr *ngSwitchCase=\"true\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <th id=\"summary-field-label\">{{field.label}}</th>\n                  <td class=\"form-cell\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\"></ccd-field-read>\n                  </td>\n                </tr>\n                <tr *ngSwitchCase=\"false\" class=\"compound-field\" ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"editForm.controls['data']\" [contextFields]=\"contextFields\">\n                  <td colspan=\"2\">\n                    <ccd-field-read [formGroup]=\"editForm.controls['data']\" [caseField]=\"summaryCaseField(field)\" [caseFields]=\"contextFields\"></ccd-field-read>\n                  </td>\n                </tr>\n              </ng-container>\n            </ng-container>\n        </tbody>\n      </table>\n    </ng-container>\n    <ng-container *ngIf=\"showEventNotes()\">\n      <fieldset id=\"fieldset-event\" formGroupName=\"event\">\n        <legend style=\"display: none;\"></legend>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-summary\" class=\"form-label\">\n            Event summary (optional)\n            <span class=\"form-hint\">A few words describing the purpose of the event.</span>\n          </label>\n          <input type=\"text\" id=\"field-trigger-summary\" class=\"form-control bottom-30 width-50\" formControlName=\"summary\" maxlength=\"1024\">\n        </div>\n        <div class=\"form-group\">\n          <label for=\"field-trigger-description\" class=\"form-label\">Event description (optional)</label>\n          <textarea id=\"field-trigger-description\" class=\"form-control bottom-30 width-50\" formControlName=\"description\"\n                    maxlength=\"65536\"></textarea>\n        </div>\n      </fieldset>\n    </ng-container>\n    <div class=\"form-group form-group-related\">\n      <button *ngIf=\"!caseEdit.isCaseFlagSubmission\" class=\"button button-secondary\" type=\"button\" [disabled]=\"!hasPrevious() || caseEdit.isSubmitting\" (click)=\"previous()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button type=\"submit\" [disabled]=\"isDisabled\" class=\"button\">\n        {{triggerText | rpxTranslate}}\n      </button>\n    </div>\n    <p class=\"cancel\">\n      <a (click)=\"cancel()\" href=\"javascript:void(0)\" [class.disabled]=\"caseEdit.isSubmitting\">{{getCancelText() | rpxTranslate}}</a>\n    </p>\n  </form>\n</div>\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: ["#fieldset-case-data{margin-bottom:30px}#fieldset-case-data th{width:1%;white-space:nowrap;vertical-align:top}.compound-field td{padding:0}#confirmation-header{width:630px;background-color:#17958b;border:solid 1px #979797;color:#fff;text-align:center}#confirmation-body{width:630px;background-color:#fff}.valign-top{vertical-align:top}.summary-fields{margin-bottom:30px}.summary-fields tbody tr th,.summary-fields tbody tr td{border-bottom:0px}a.disabled{pointer-events:none;cursor:default}.case-field-label{width:45%}.case-field-content{width:50%}.no-bottom-border{border-bottom:none}.case-field-change{width:5%}\n"] }]
         }], function () { return [{ type: CaseEditComponent }, { type: FieldsUtils }, { type: CaseFieldService }, { type: i1$1.ActivatedRoute }, { type: OrderService }, { type: ProfileNotifier }]; }, null);
 })();