@hmcts/ccd-case-ui-toolkit 7.3.76 → 7.3.77-field-interpolation

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

@@ -7059,6 +7059,7 @@ class LabelSubstitutorModule {
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             FieldsUtils,
             CurrencyPipe,
+            PlaceholderService
         ] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelSubstitutorModule, [{
@@ -7073,6 +7074,7 @@ class LabelSubstitutorModule {
                 providers: [
                     FieldsUtils,
                     CurrencyPipe,
+                    PlaceholderService
                 ]
             }]
     }], null, null); })();
@@ -11558,6 +11560,8 @@ class CaseEditPageComponent {
     saveDraftSub;
     caseFormValidationErrorsSub;
     logger = new StructuredLoggerService();
+    fieldsUtils = new FieldsUtils();
+    placeholderService = new PlaceholderService();
     caseEditFormComponents;
     static scrollToTop() {
         window.scrollTo(0, 0);
@@ -11722,7 +11726,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 || sourceFromComplexField)) {
                     if (fieldElement['component'].idPrefix.indexOf(`_${id}_`) === -1) {
@@ -11787,7 +11791,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();
                     }
                 }
@@ -12195,7 +12199,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({
@@ -12255,7 +12272,7 @@ class CaseEditPageComponent {
             type: ViewChildren,
             args: [CaseEditFormComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditPageComponent, { className: "CaseEditPageComponent", filePath: "lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts", lineNumber: 37 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEditPageComponent, { className: "CaseEditPageComponent", filePath: "lib/shared/components/case-editor/case-edit-page/case-edit-page.component.ts", lineNumber: 38 }); })();
 
 class CallbackErrorsContext {
     triggerText;
@@ -25350,7 +25367,7 @@ class FieldReadComponent extends AbstractFieldReadComponent {
             type: ViewChild,
             args: ['fieldContainer', { static: false, read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FieldReadComponent, { className: "FieldReadComponent", filePath: "lib/shared/components/palette/base-field/field-read.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FieldReadComponent, { className: "FieldReadComponent", filePath: "lib/shared/components/palette/base-field/field-read.component.ts", lineNumber: 15 }); })();
 
 const _c0$y = ["fieldContainer"];
 const FIX_CASEFIELD_FOR = ['FixedList', 'DynamicList', 'DynamicMultiSelectList'];
@@ -29712,22 +29729,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();
@@ -29740,9 +29759,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) {
@@ -29752,17 +29771,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) {
@@ -29773,13 +29792,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;
@@ -29791,16 +29810,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
@@ -29821,7 +29843,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");
@@ -29829,7 +29851,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) {
@@ -29841,7 +29863,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
         }] }); })();
@@ -32621,8 +32643,8 @@ i0.ɵɵsetComponentScope(ReadOrderSummaryRowComponent, function () { return [Rea
 i0.ɵɵsetComponentScope(ReadComplexFieldComponent, function () { return [i4.NgSwitch, i4.NgSwitchCase, i4.NgSwitchDefault, ReadComplexFieldRawComponent,
     ReadComplexFieldTableComponent,
     ReadComplexFieldCollectionTableComponent]; }, []);
-i0.ɵɵsetComponentScope(ReadComplexFieldRawComponent, function () { return [i4.NgForOf, FieldReadComponent]; }, function () { return [ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
-i0.ɵɵsetComponentScope(ReadComplexFieldTableComponent, function () { return [i4.NgForOf, i4.NgIf, FieldReadComponent]; }, function () { return [IsCompoundPipe, ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(ReadComplexFieldRawComponent, function () { return [i4.NgForOf, i3.NgControlStatusGroup, i3.FormGroupDirective, LabelSubstitutorDirective, FieldReadComponent]; }, function () { return [ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
+i0.ɵɵsetComponentScope(ReadComplexFieldTableComponent, function () { return [i4.NgForOf, i4.NgIf, i3.NgControlStatusGroup, i3.FormGroupDirective, LabelSubstitutorDirective, FieldReadComponent]; }, function () { return [IsCompoundPipe, ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(ReadComplexFieldCollectionTableComponent, function () { return [i4.NgForOf, i4.NgIf, FieldReadComponent,
     ReadCaseLinkFieldComponent]; }, function () { return [i4.KeyValuePipe, IsCompoundPipe, CcdCollectionTableCaseFieldsFilterPipe, ReadFieldsFilterPipe, i1.RpxTranslatePipe]; });
 i0.ɵɵsetComponentScope(ReadCaseFlagFieldComponent, function () { return [i4.NgForOf, i4.NgIf, i4.NgSwitch, i4.NgSwitchCase, i4.NgSwitchDefault,