@hmcts/ccd-case-ui-toolkit 7.3.60 → 7.3.61-message-interpolation-01

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

@@ -8,11 +8,10 @@ import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationStart, NavigationEnd } from '@angular/router';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { BehaviorSubject, throwError, Subject, EMPTY, Observable, skip, of, timer, forkJoin, fromEvent, Subscription, combineLatest } from 'rxjs';
+import { BehaviorSubject, throwError, Subject, EMPTY, concat, defer, timer, Observable, skip, of, forkJoin, fromEvent, Subscription, combineLatest } from 'rxjs';
+import { distinctUntilChanged, catchError, map, switchMap, repeat, retry, publish, refCount, debounceTime, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, take, first, takeUntil, filter } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
-import { distinctUntilChanged, catchError, map, publish, refCount, switchMap, debounceTime, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, take, first, takeUntil, filter } from 'rxjs/operators';
-import { polling } from 'rx-polling-hmcts';
 import { Type, Exclude, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
 import moment from 'moment';
 import { __decorate, __metadata } from 'tslib';
@@ -1829,8 +1828,7 @@ class ActivityPollingService {
         this.config = config;
         this.pollConfig = {
             interval: config.getActivityNexPollRequestMs(),
-            attempts: config.getActivityRetry(),
-            backgroundPolling: true
+            attempts: config.getActivityRetry()
         };
         this.batchCollectionDelayMs = config.getActivityBatchCollectionDelayMs();
         this.maxRequestsPerBatch = config.getActivityMaxRequestPerBatch();
@@ -1847,17 +1845,18 @@ class ActivityPollingService {
             subject.subscribe(done);
         }
         else {
+            // Only the first pending request should start the batch collection timer.
+            const wasEmpty = this.pendingRequests.size === 0;
             subject = new Subject();
             subject.subscribe(done);
-            this.pendingRequests.set(caseId, subject);
-        }
-        if (this.pendingRequests.size === 1) {
-            this.ngZone.runOutsideAngular(() => {
-                this.currentTimeoutHandle = setTimeout(() => this.ngZone.run(() => {
-                    // console.log('timeout: flushing requests')
-                    this.flushRequests();
-                }), this.batchCollectionDelayMs);
-            });
+            this.addPendingRequest(caseId, subject);
+            if (wasEmpty) {
+                this.ngZone.runOutsideAngular(() => {
+                    this.currentTimeoutHandle = setTimeout(() => this.ngZone.run(() => {
+                        this.flushRequests();
+                    }), this.batchCollectionDelayMs);
+                });
+            }
         }
         if (this.pendingRequests.size >= this.maxRequestsPerBatch) {
             // console.log('max pending hit: flushing requests');
@@ -1875,6 +1874,9 @@ class ActivityPollingService {
             clearTimeout(this.currentTimeoutHandle);
             this.currentTimeoutHandle = undefined;
         }
+        if (!this.pendingRequests.size) {
+            return;
+        }
         const requests = new Map(this.pendingRequests);
         this.pendingRequests.clear();
         this.performBatchRequest(requests);
@@ -1883,7 +1885,7 @@ class ActivityPollingService {
         if (!this.isEnabled) {
             return EMPTY;
         }
-        return polling(this.activityService.getActivities(...caseIds), this.pollConfig);
+        return this.polling(this.activityService.getActivities(...caseIds), this.pollConfig);
     }
     postViewActivity(caseId) {
         return this.postActivity(caseId, ActivityService.ACTIVITY_VIEW);
@@ -1896,17 +1898,19 @@ class ActivityPollingService {
         // console.log('issuing batch request for cases: ' + caseIds);
         this.ngZone.runOutsideAngular(() => {
             // run polling outside angular zone so it does not trigger change detection
-            this.pollActivitiesSubscription = this.pollActivities(caseIds).subscribe(
-            // process activity inside zone so it triggers change detection for activity.component.ts
-            (activities) => this.ngZone.run(() => {
-                activities.forEach((activity) => {
-                    // console.log('pushing activity: ' + activity.caseId);
-                    requests.get(activity.caseId).next(activity);
-                });
-            }, (err) => {
-                console.log(`error: ${err}`);
-                Array.from(requests.values()).forEach((subject) => subject.error(err));
-            }));
+            this.pollActivitiesSubscription = this.pollActivities(caseIds).subscribe({
+                // process activity inside zone so it triggers change detection for activity.component.ts
+                next: (activities) => this.ngZone.run(() => {
+                    activities.forEach((activity) => {
+                        // Ignore activities returned for cases outside this local batch.
+                        requests.get(activity.caseId)?.next(activity);
+                    });
+                }),
+                error: (err) => this.ngZone.run(() => {
+                    console.log(`error: ${err}`);
+                    Array.from(requests.values()).forEach((subject) => subject.error(err));
+                })
+            });
         });
     }
     postActivity(caseId, activityType) {
@@ -1917,7 +1921,42 @@ class ActivityPollingService {
             ...this.pollConfig,
             interval: 5000 // inline with CCD Backend
         };
-        return polling(this.activityService.postActivity(caseId, activityType), pollingConfig);
+        return this.polling(this.activityService.postActivity(caseId, activityType), pollingConfig);
+    }
+    addPendingRequest(caseId, subject) {
+        this.pendingRequests.set(caseId, subject);
+        // Components complete their returned Subject on destroy; remove it so a later same-case subscription gets a fresh Subject.
+        subject.subscribe({
+            complete: () => this.removePendingRequest(caseId, subject),
+            error: () => this.removePendingRequest(caseId, subject)
+        });
+    }
+    removePendingRequest(caseId, subject) {
+        if (this.pendingRequests.get(caseId) !== subject) {
+            return;
+        }
+        this.pendingRequests.delete(caseId);
+        if (!this.pendingRequests.size && this.currentTimeoutHandle) {
+            clearTimeout(this.currentTimeoutHandle);
+            this.currentTimeoutHandle = undefined;
+        }
+    }
+    polling(request$, options) {
+        const pollingOptions = {
+            interval: options.interval,
+            attempts: options.attempts ?? 9,
+            exponentialUnit: options.exponentialUnit ?? 1000
+        };
+        return concat(request$, defer(() => timer(pollingOptions.interval).pipe(switchMap(() => request$))).pipe(repeat())).pipe(
+        // Preserve consecutive-failure retry behaviour using the current RxJS retry config.
+        retry({
+            count: pollingOptions.attempts,
+            delay: (_error, retryCount) => timer(this.getExponentialRetryDelay(retryCount, pollingOptions.exponentialUnit)),
+            resetOnSuccess: true
+        }));
+    }
+    getExponentialRetryDelay(consecutiveErrorsCount, exponentialUnit) {
+        return Math.pow(2, consecutiveErrorsCount - 1) * exponentialUnit;
     }
     static ɵfac = function ActivityPollingService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActivityPollingService)(i0.ɵɵinject(ActivityService), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(AbstractAppConfig)); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ActivityPollingService, factory: ActivityPollingService.ɵfac });
@@ -6883,6 +6922,7 @@ class LabelSubstitutorModule {
     static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
             FieldsUtils,
             CurrencyPipe,
+            PlaceholderService
         ] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LabelSubstitutorModule, [{
@@ -6897,6 +6937,7 @@ class LabelSubstitutorModule {
                 providers: [
                     FieldsUtils,
                     CurrencyPipe,
+                    PlaceholderService
                 ]
             }]
     }], null, null); })();
@@ -11336,6 +11377,8 @@ class CaseEditPageComponent {
     dialogRefAfterClosedSub;
     saveDraftSub;
     caseFormValidationErrorsSub;
+    fieldsUtils = new FieldsUtils();
+    placeholderService = new PlaceholderService();
     static scrollToTop() {
         window.scrollTo(0, 0);
     }
@@ -11504,7 +11547,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) {
@@ -11564,7 +11607,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();
                     }
                 }
@@ -11970,7 +12013,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({
@@ -12022,7 +12078,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;
@@ -29451,22 +29507,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();
@@ -29479,9 +29537,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) {
@@ -29491,17 +29549,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) {
@@ -29512,13 +29570,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;
@@ -29530,16 +29588,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
@@ -29560,7 +29621,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");
@@ -29568,7 +29629,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) {
@@ -29580,7 +29641,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
         }] }); })();
@@ -32362,8 +32423,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,