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

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();
                     }
                 }
@@ -11965,6 +11969,16 @@ class CaseEditPageComponent {
     getRpxTranslatePipeArgs(fieldLabel) {
         return fieldLabel ? ({ FIELDLABEL: fieldLabel }) : null;
     }
+    getInterpolatedFieldLabel(caseField) {
+        const label = caseField.label || 'Field';
+        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({
             eventTrigger: this.eventTrigger,
@@ -12015,7 +12029,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 +29458,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 +29488,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,7 +29500,7 @@ 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
         }] }); })();
@@ -32355,7 +32371,7 @@ 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(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, 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]; });