@hmcts/ccd-case-ui-toolkit 7.3.54 → 7.3.55-message-interpolation-01

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

@@ -6883,6 +6883,7 @@ class LabelSubstitutorModule {
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             FieldsUtils,
             CurrencyPipe,
+            PlaceholderService
         ] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelSubstitutorModule, [{
@@ -6897,6 +6898,7 @@ class LabelSubstitutorModule {
                 providers: [
                     FieldsUtils,
                     CurrencyPipe,
+                    PlaceholderService
                 ]
             }]
     }], null, null); })();
@@ -11336,6 +11338,8 @@ class CaseEditPageComponent {
     dialogRefAfterClosedSub;
     saveDraftSub;
     caseFormValidationErrorsSub;
+    fieldsUtils = new FieldsUtils();
+    placeholderService = new PlaceholderService();
     static scrollToTop() {
         window.scrollTo(0, 0);
     }
@@ -11502,7 +11506,7 @@ class CaseEditPageComponent {
                 ? group.get(`${casefield.id}_judicialUserControl`)
                 : group.get(casefield.id);
             if (fieldElement) {
-                const label = casefield.label || 'Field';
+                const label = this.getInterpolatedFieldLabel(casefield);
                 let id = casefield.id;
                 if (fieldElement['component'] && fieldElement['component'].parent) {
                     if (fieldElement['component'].idPrefix.indexOf(`_${id}_`) === -1) {
@@ -11562,7 +11566,7 @@ class CaseEditPageComponent {
                         });
                     }
                     else {
-                        this.validationErrors.push({ id, message: `Select or fill the required ${casefield.label} field` });
+                        this.validationErrors.push({ id, message: `Select or fill the required ${label} field` });
                         fieldElement.markAsDirty();
                     }
                 }
@@ -11963,7 +11967,20 @@ class CaseEditPageComponent {
         });
     }
     getRpxTranslatePipeArgs(fieldLabel) {
-        return fieldLabel ? ({ FIELDLABEL: fieldLabel }) : null;
+        return fieldLabel ? ({ FIELDLABEL: this.resolveLabelPlaceholders(fieldLabel) }) : null;
+    }
+    getInterpolatedFieldLabel(caseField) {
+        const label = caseField.label || 'Field';
+        return this.resolveLabelPlaceholders(label);
+    }
+    resolveLabelPlaceholders(label) {
+        const dataControl = this.editForm?.controls?.['data'];
+        const formFields = dataControl && typeof dataControl.getRawValue === 'function'
+            ? dataControl.getRawValue()
+            : {};
+        const contextFields = this.caseFields?.length ? this.caseFields : this.eventTrigger?.case_fields || [];
+        const fields = this.fieldsUtils.mergeLabelCaseFieldsAndFormFields(contextFields, formFields);
+        return this.placeholderService.resolvePlaceholders(fields, label);
     }
     onEventCanBeCompleted(eventCanBeCompleted) {
         this.caseEdit.onEventCanBeCompleted({
@@ -12015,7 +12032,7 @@ class CaseEditPageComponent {
         type: Component,
         args: [{ selector: 'ccd-case-edit-page', standalone: false, template: "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name | rpxTranslate}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name | rpxTranslate}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label | rpxTranslate}}</h1>\n  </ng-container>\n</ng-container>\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: caseFields : editForm.controls['data'] | rpxTranslate\"></ccd-markdown>\n</ng-template>\n<ng-template #idBlock>\n  <h2 *ngIf=\"getCaseId()\" class=\"heading-h2\">#{{ getCaseId() | ccdCaseReference }}</h2>\n</ng-template>\n\n<!-- Error message summary -->\n<div *ngIf=\"validationErrors.length > 0\" class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    {{'There is a problem' | rpxTranslate}}\n  </h2>\n  <div *ngFor=\"let validationError of validationErrors\" class=\"govuk-error-summary__body\">\n    <ul class=\"govuk-list govuk-error-summary__list\">\n      <li>\n        <a (click)=\"navigateToErrorElement(validationError.id)\" (keyup.enter)=\"navigateToErrorElement(validationError.id)\" tabindex=\"0\" class=\"validation-error\">\n          {{ validationError.message | rpxTranslate: getRpxTranslatePipeArgs(validationError.label | rpxTranslate): null }}\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<ccd-case-edit-generic-errors [error]=\"caseEdit.error\"></ccd-case-edit-generic-errors>\n\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"caseEdit.callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"nextStep()\">\n    <fieldset id=\"fieldset-case-data\">\n      <legend style=\"display: none;\"></legend>\n      <!-- single column -->\n      <ccd-case-edit-form id='caseEditForm' *ngIf=\"!currentPage.isMultiColumn()\" [fields]=\"currentPage.getCol1Fields()\"\n                          [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"\n                          [pageChangeSubject]=\"pageChangeSubject\"\n                          (valuesChanged)=\"applyValuesChanged($event)\"></ccd-case-edit-form>\n      <!-- two columns -->\n      <div *ngIf=\"currentPage.isMultiColumn()\" class=\"grid-row\">\n        <div class=\"column-two-thirds rightBorderSeparator\">\n          <ccd-case-edit-form id='caseEditForm1' [fields]=\"currentPage.getCol1Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n        <div class=\"column-one-third\">\n          <ccd-case-edit-form id='caseEditForm2' [fields]=\"currentPage.getCol2Fields()\"\n                              [formGroup]=\"editForm.controls['data']\" [caseFields]=\"caseFields\"></ccd-case-edit-form>\n        </div>\n      </div>\n    </fieldset>\n\n    <div class=\"form-group form-group-related\">\n      <button class=\"button button-secondary\" type=\"button\" (click)=\"toPreviousPage()\" *ngIf=\"!isAtStart()\" [disabled]=\"isDisabled()\">\n        {{'Previous' | rpxTranslate}}\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText | rpxTranslate}}</button>\n    </div>\n\n    <p class=\"cancel\"><button type=\"button\" (click)=\"cancel()\" class=\"govuk-js-link\">{{getCancelText() | rpxTranslate}}</button></p>\n  </form>\n</div>\n\n<ccd-case-event-completion *ngIf=\"caseEdit.isEventCompletionChecksRequired\"\n  [eventCompletionParams]=\"caseEdit.eventCompletionParams\"\n  (eventCanBeCompleted)=\"onEventCanBeCompleted($event)\">\n</ccd-case-event-completion>\n", styles: [".rightBorderSeparator{border-right-width:4px;border-right-color:#ffcc02;border-right-style:solid}.validation-error{cursor:pointer;text-decoration:underline;color:#d4351c}\n"] }]
     }], () => [{ type: CaseEditComponent }, { type: i1$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0.ChangeDetectorRef }, { type: PageValidationService }, { type: i1$3.MatLegacyDialog }, { type: CaseFieldService }, { type: CaseEditDataService }, { type: LoadingService }, { type: ValidPageListCaseFieldsService }, { type: MultipageComponentStateService }, { type: AddressesService }, { type: LinkedCasesService }, { type: CaseFlagStateService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditPageComponent, { className: "CaseEditPageComponent", filePath: "lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditPageComponent, { className: "CaseEditPageComponent", filePath: "lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts", lineNumber: 36 }); })();
 
 class CallbackErrorsContext {
     triggerText;
@@ -29444,22 +29461,24 @@ class UpdateFlagTitleDisplayPipe extends AsyncPipe {
 
 const _c0$l = (a0, a1, a2) => [a0, false, undefined, true, a1, a2];
 function ReadComplexFieldRawComponent_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "dt", 2)(2, "span", 3);
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "rpxTranslate");
+    i0.ɵɵelementContainerStart(0)(1, 2);
+    i0.ɵɵelementStart(2, "dt", 3)(3, "span", 4);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "dd", 2);
-    i0.ɵɵelement(6, "ccd-field-read", 4);
+    i0.ɵɵelementStart(6, "dd", 3);
+    i0.ɵɵelement(7, "ccd-field-read", 5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
+    i0.ɵɵelementContainerEnd()();
 } if (rf & 2) {
     const field_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
+    i0.ɵɵproperty("caseField", field_r1)("formGroup", ctx_r1.topLevelFormGroup)("contextFields", ctx_r1.caseFields);
+    i0.ɵɵadvance();
     i0.ɵɵproperty("hidden", field_r1.hidden || field_r1.field_type.type === "Label");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.isTranslatable(field_r1) ? i0.ɵɵpipeBind1(4, 8, field_r1.label) : field_r1.label);
+    i0.ɵɵtextInterpolate(ctx_r1.isTranslatable(field_r1) ? i0.ɵɵpipeBind1(5, 11, field_r1.label) : field_r1.label);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("hidden", field_r1.hidden);
     i0.ɵɵadvance();
@@ -29472,9 +29491,9 @@ function ReadComplexFieldRawComponent_ng_container_1_Template(rf, ctx) { if (rf
 class ReadComplexFieldRawComponent extends AbstractFieldReadComponent {
     caseFields = [];
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadComplexFieldRawComponent_BaseFactory; return function ReadComplexFieldRawComponent_Factory(__ngFactoryType__) { return (ɵReadComplexFieldRawComponent_BaseFactory || (ɵReadComplexFieldRawComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldRawComponent)))(__ngFactoryType__ || ReadComplexFieldRawComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldRawComponent, selectors: [["ccd-read-complex-field-raw"]], inputs: { caseFields: "caseFields" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 12, consts: [[1, "complex-raw"], [4, "ngFor", "ngForOf"], [3, "hidden"], [1, "text-16"], [3, "caseField", "context", "caseFields", "topLevelFormGroup", "idPrefix"]], template: function ReadComplexFieldRawComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldRawComponent, selectors: [["ccd-read-complex-field-raw"]], inputs: { caseFields: "caseFields" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 12, consts: [[1, "complex-raw"], [4, "ngFor", "ngForOf"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields"], [3, "hidden"], [1, "text-16"], [3, "caseField", "context", "caseFields", "topLevelFormGroup", "idPrefix"]], template: function ReadComplexFieldRawComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "dl", 0);
-            i0.ɵɵtemplate(1, ReadComplexFieldRawComponent_ng_container_1_Template, 7, 10, "ng-container", 1);
+            i0.ɵɵtemplate(1, ReadComplexFieldRawComponent_ng_container_1_Template, 8, 13, "ng-container", 1);
             i0.ɵɵpipe(2, "ccdReadFieldsFilter");
             i0.ɵɵelementEnd();
         } if (rf & 2) {
@@ -29484,17 +29503,17 @@ class ReadComplexFieldRawComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadComplexFieldRawComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-complex-field-raw', standalone: false, template: "<dl class=\"complex-raw\">\n  <ng-container *ngFor=\"let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :id()\">\n    <dt [hidden]=\"field.hidden || field.field_type.type === 'Label'\"><span class=\"text-16\">{{isTranslatable(field) ? (field.label | rpxTranslate) : field.label}}</span></dt>\n    <dd [hidden]=\"field.hidden\">\n      <ccd-field-read [caseField]=\"field\" [context]=\"context\" [caseFields]=\"caseFields\" [topLevelFormGroup]=\"topLevelFormGroup\" [idPrefix]=\"idPrefix\"></ccd-field-read>\n    </dd>\n  </ng-container>\n</dl>\n", styles: ["dl.complex-raw{list-style-type:none;margin:5px 0 10px}dl.complex-raw dl.complex-raw{padding-left:2ch}dl.complex-raw dt{font-weight:700}\n"] }]
+        args: [{ selector: 'ccd-read-complex-field-raw', standalone: false, template: "<dl class=\"complex-raw\">\n  <ng-container *ngFor=\"let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :id()\">\n    <ng-container ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"topLevelFormGroup\" [contextFields]=\"caseFields\">\n      <dt [hidden]=\"field.hidden || field.field_type.type === 'Label'\"><span class=\"text-16\">{{isTranslatable(field) ? (field.label | rpxTranslate) : field.label}}</span></dt>\n      <dd [hidden]=\"field.hidden\">\n        <ccd-field-read [caseField]=\"field\" [context]=\"context\" [caseFields]=\"caseFields\" [topLevelFormGroup]=\"topLevelFormGroup\" [idPrefix]=\"idPrefix\"></ccd-field-read>\n      </dd>\n    </ng-container>\n  </ng-container>\n</dl>\n", styles: ["dl.complex-raw{list-style-type:none;margin:5px 0 10px}dl.complex-raw dl.complex-raw{padding-left:2ch}dl.complex-raw dt{font-weight:700}\n"] }]
     }], null, { caseFields: [{
             type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadComplexFieldRawComponent, { className: "ReadComplexFieldRawComponent", filePath: "lib/shared/components/palette/complex/read-complex-field-raw.component.ts", lineNumber: 17 }); })();
 
 const _c0$k = (a0, a1, a2, a3) => [a0, false, undefined, true, a1, a2, a3];
-function ReadComplexFieldTableComponent_ng_container_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ReadComplexFieldTableComponent_ng_container_9_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "tr", 7)(2, "td", 8)(3, "span", 3);
-    i0.ɵɵelement(4, "ccd-field-read", 9);
+    i0.ɵɵelementStart(1, "tr", 8)(2, "td", 9)(3, "span", 3);
+    i0.ɵɵelement(4, "ccd-field-read", 10);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -29505,13 +29524,13 @@ function ReadComplexFieldTableComponent_ng_container_9_ng_container_1_Template(r
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("topLevelFormGroup", ctx_r1.topLevelFormGroup)("caseFields", ctx_r1.caseFields)("caseField", field_r1)("context", ctx_r1.context);
 } }
-function ReadComplexFieldTableComponent_ng_container_9_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 10)(1, "th", 11)(2, "span", 3);
+function ReadComplexFieldTableComponent_ng_container_9_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 11)(1, "th", 12)(2, "span", 3);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "td")(6, "span", 3);
-    i0.ɵɵelement(7, "ccd-field-read", 9);
+    i0.ɵɵelement(7, "ccd-field-read", 10);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const field_r1 = i0.ɵɵnextContext().$implicit;
@@ -29523,16 +29542,19 @@ function ReadComplexFieldTableComponent_ng_container_9_ng_template_3_Template(rf
     i0.ɵɵproperty("topLevelFormGroup", ctx_r1.topLevelFormGroup)("caseFields", ctx_r1.caseFields)("caseField", field_r1)("context", ctx_r1.context);
 } }
 function ReadComplexFieldTableComponent_ng_container_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ReadComplexFieldTableComponent_ng_container_9_ng_container_1_Template, 5, 5, "ng-container", 6);
-    i0.ɵɵpipe(2, "ccdIsCompound");
-    i0.ɵɵtemplate(3, ReadComplexFieldTableComponent_ng_container_9_ng_template_3_Template, 8, 8, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementContainerEnd();
+    i0.ɵɵelementContainerStart(0)(1, 6);
+    i0.ɵɵtemplate(2, ReadComplexFieldTableComponent_ng_container_9_ng_container_2_Template, 5, 5, "ng-container", 7);
+    i0.ɵɵpipe(3, "ccdIsCompound");
+    i0.ɵɵtemplate(4, ReadComplexFieldTableComponent_ng_container_9_ng_template_4_Template, 8, 8, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerEnd()();
 } if (rf & 2) {
     const field_r1 = ctx.$implicit;
-    const SimpleRow_r3 = i0.ɵɵreference(4);
+    const SimpleRow_r3 = i0.ɵɵreference(5);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("caseField", field_r1)("formGroup", ctx_r1.topLevelFormGroup)("contextFields", ctx_r1.caseFields);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 2, field_r1))("ngIfElse", SimpleRow_r3);
+    i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(3, 5, field_r1))("ngIfElse", SimpleRow_r3);
 } }
 class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
     // parent_ can be replaced with any ***_ - underscore is only important character
@@ -29553,7 +29575,7 @@ class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
         this.path = ReadComplexFieldTableComponent.DUMMY_STRING_PRE + this.idPrefix + ReadComplexFieldTableComponent.DUMMY_STRING_POST;
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadComplexFieldTableComponent_BaseFactory; return function ReadComplexFieldTableComponent_Factory(__ngFactoryType__) { return (ɵReadComplexFieldTableComponent_BaseFactory || (ɵReadComplexFieldTableComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldTableComponent)))(__ngFactoryType__ || ReadComplexFieldTableComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldTableComponent, selectors: [["ccd-read-complex-field-table"]], inputs: { caseFields: "caseFields" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 17, consts: [["SimpleRow", ""], [1, "complex-panel"], [1, "complex-panel-title"], [1, "text-16"], ["aria-describedby", "complex field table", 1, "complex-panel-table"], [4, "ngFor", "ngForOf"], [4, "ngIf", "ngIfElse"], [1, "complex-panel-compound-field", 3, "hidden"], ["colspan", "2"], [3, "topLevelFormGroup", "caseFields", "caseField", "context"], [1, "complex-panel-simple-field", 3, "hidden"], ["id", "complex-panel-simple-field-label"]], template: function ReadComplexFieldTableComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldTableComponent, selectors: [["ccd-read-complex-field-table"]], inputs: { caseFields: "caseFields" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 17, consts: [["SimpleRow", ""], [1, "complex-panel"], [1, "complex-panel-title"], [1, "text-16"], ["aria-describedby", "complex field table", 1, "complex-panel-table"], [4, "ngFor", "ngForOf"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields"], [4, "ngIf", "ngIfElse"], [1, "complex-panel-compound-field", 3, "hidden"], ["colspan", "2"], [3, "topLevelFormGroup", "caseFields", "caseField", "context"], [1, "complex-panel-simple-field", 3, "hidden"], ["id", "complex-panel-simple-field-label"]], template: function ReadComplexFieldTableComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "dl", 2)(2, "dt")(3, "span", 3);
             i0.ɵɵtext(4);
             i0.ɵɵpipe(5, "rpxTranslate");
@@ -29561,7 +29583,7 @@ class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
             i0.ɵɵelement(6, "dd");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(7, "table", 4)(8, "tbody");
-            i0.ɵɵtemplate(9, ReadComplexFieldTableComponent_ng_container_9_Template, 5, 4, "ng-container", 5);
+            i0.ɵɵtemplate(9, ReadComplexFieldTableComponent_ng_container_9_Template, 6, 7, "ng-container", 5);
             i0.ɵɵpipe(10, "ccdReadFieldsFilter");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
@@ -29573,7 +29595,7 @@ class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadComplexFieldTableComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-complex-field-table', standalone: false, template: "<div class=\"complex-panel\">\n  <dl class=\"complex-panel-title\"><dt><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></dt><dd></dd></dl>\n  <table class=\"complex-panel-table\" aria-describedby=\"complex field table\">\n    <tbody>\n      <ng-container *ngFor=\"let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :path :idPrefix\">\n        <ng-container *ngIf=\"(field | ccdIsCompound); else SimpleRow\">\n          <tr class=\"complex-panel-compound-field\" [hidden]=\"field.hidden\">\n            <td colspan=\"2\">\n              <span class=\"text-16\">\n                <ccd-field-read [topLevelFormGroup]=\"topLevelFormGroup\" [caseFields]=\"caseFields\"\n                  [caseField]=\"field\" [context]=\"context\"></ccd-field-read>\n              </span>\n            </td>\n          </tr>\n        </ng-container>\n        <ng-template #SimpleRow>\n          <tr class=\"complex-panel-simple-field\" [hidden]=\"field.hidden\">\n            <th id=\"complex-panel-simple-field-label\"><span class=\"text-16\">{{field.label | rpxTranslate}}</span></th>\n            <td>\n                <span class=\"text-16\">\n                  <ccd-field-read [topLevelFormGroup]=\"topLevelFormGroup\" [caseFields]=\"caseFields\"\n                    [caseField]=\"field\" [context]=\"context\"></ccd-field-read>\n                </span>\n            </td>\n          </tr>\n        </ng-template>\n      </ng-container>\n    </tbody>\n  </table>\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-read-complex-field-table', standalone: false, template: "<div class=\"complex-panel\">\n  <dl class=\"complex-panel-title\"><dt><span class=\"text-16\">{{caseField.label | rpxTranslate}}</span></dt><dd></dd></dl>\n  <table class=\"complex-panel-table\" aria-describedby=\"complex field table\">\n    <tbody>\n      <ng-container *ngFor=\"let field of caseField | ccdReadFieldsFilter:false :undefined :true :topLevelFormGroup :path :idPrefix\">\n        <ng-container ccdLabelSubstitutor [caseField]=\"field\" [formGroup]=\"topLevelFormGroup\" [contextFields]=\"caseFields\">\n          <ng-container *ngIf=\"(field | ccdIsCompound); else SimpleRow\">\n            <tr class=\"complex-panel-compound-field\" [hidden]=\"field.hidden\">\n              <td colspan=\"2\">\n                <span class=\"text-16\">\n                  <ccd-field-read [topLevelFormGroup]=\"topLevelFormGroup\" [caseFields]=\"caseFields\"\n                    [caseField]=\"field\" [context]=\"context\"></ccd-field-read>\n                </span>\n              </td>\n            </tr>\n          </ng-container>\n          <ng-template #SimpleRow>\n            <tr class=\"complex-panel-simple-field\" [hidden]=\"field.hidden\">\n              <th id=\"complex-panel-simple-field-label\"><span class=\"text-16\">{{field.label | rpxTranslate}}</span></th>\n              <td>\n                  <span class=\"text-16\">\n                    <ccd-field-read [topLevelFormGroup]=\"topLevelFormGroup\" [caseFields]=\"caseFields\"\n                      [caseField]=\"field\" [context]=\"context\"></ccd-field-read>\n                  </span>\n              </td>\n            </tr>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </tbody>\n  </table>\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"] }]
     }], null, { caseFields: [{
             type: Input
         }] }); })();
@@ -32355,8 +32377,8 @@ i0.ɵɵsetComponentScope(ReadOrderSummaryRowComponent, function () { return [Rea
 i0.ɵɵsetComponentScope(ReadComplexFieldComponent, function () { return [i5.NgSwitch, i5.NgSwitchCase, i5.NgSwitchDefault, ReadComplexFieldRawComponent,
     ReadComplexFieldTableComponent,
     ReadComplexFieldCollectionTableComponent]; }, []);
-i0.ɵɵsetComponentScope(ReadComplexFieldRawComponent, function () { return [i5.NgForOf, FieldReadComponent]; }, function () { return [ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
-i0.ɵɵsetComponentScope(ReadComplexFieldTableComponent, function () { return [i5.NgForOf, i5.NgIf, FieldReadComponent]; }, function () { return [IsCompoundPipe, ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(ReadComplexFieldRawComponent, function () { return [i5.NgForOf, i4.NgControlStatusGroup, i4.FormGroupDirective, LabelSubstitutorDirective, FieldReadComponent]; }, function () { return [ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(ReadComplexFieldTableComponent, function () { return [i5.NgForOf, i5.NgIf, i4.NgControlStatusGroup, i4.FormGroupDirective, LabelSubstitutorDirective, FieldReadComponent]; }, function () { return [IsCompoundPipe, ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(ReadComplexFieldCollectionTableComponent, function () { return [i5.NgForOf, i5.NgIf, FieldReadComponent,
     ReadCaseLinkFieldComponent]; }, function () { return [i5.KeyValuePipe, IsCompoundPipe, CcdCollectionTableCaseFieldsFilterPipe, ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(ReadCaseFlagFieldComponent, function () { return [i5.NgForOf, i5.NgIf, i5.NgSwitch, i5.NgSwitchCase, i5.NgSwitchDefault,