@hmcts/ccd-case-ui-toolkit 7.0.72 → 7.0.74-special-characters

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

@@ -4675,7 +4675,9 @@ class ConditionParser {
             }
         }
         else {
-            console.error('Path in formArray should start with ', head, ', full path: ', path);
+            // EXUI-2460 - if path present then show error, otherwise log message to stop unnecessary console errors
+            path ? console.error('Path in formArray should start with ', head, ', full path: ', path) :
+                console.log('Path not present in formArray');
         }
     }
     static removeStarChar(str) {
@@ -7980,6 +7982,41 @@ class WizardPageFieldToCaseFieldMapper {
             }]
     }], null, null); })();
 
+function convertNonASCIICharacter(character) {
+    if (character === '£') {
+        // pound sign will be frequently used and works for btoa despite being non-ASCII
+        // note: this could be done for other characters provided they work for btoa()
+        return character;
+    }
+    // Note: Will convert to HTML entity
+    return CaseEditUtils.PREFIX + character.charCodeAt(0) + CaseEditUtils.SUFFIX;
+}
+class CaseEditUtils {
+    static PREFIX = '&#';
+    static SUFFIX = ';';
+    convertNonASCIICharacters(rawString) {
+        return rawString ? rawString.replace(/[^\x20-\x7E]/g, function (c) {
+            return convertNonASCIICharacter(c);
+        }) : '';
+    }
+    convertHTMLEntities(editedString) {
+        const revertedCharacterList = editedString.split(CaseEditUtils.PREFIX);
+        let rawString = revertedCharacterList[0];
+        for (let index = 1; index < revertedCharacterList.length; index++) {
+            const currentSection = revertedCharacterList[index];
+            if (!currentSection.includes(CaseEditUtils.SUFFIX)) {
+                return rawString.concat(currentSection);
+            }
+            else {
+                const suffixSplitList = currentSection.split(CaseEditUtils.SUFFIX);
+                const characterCode = Number(suffixSplitList[0]);
+                rawString = rawString.concat(String.fromCharCode(characterCode), suffixSplitList[1]);
+            }
+        }
+        return rawString;
+    }
+}
+
 class CasesService {
     http;
     appConfig;
@@ -8268,8 +8305,12 @@ class CasesService {
     addClientContextHeader(headers) {
         const clientContextDetails = this.sessionStorageService.getItem('clientContext');
         if (clientContextDetails) {
-            // may require URI encoding in certain circumstances
-            const clientContext = window.btoa(clientContextDetails);
+            let clientContextEdit = JSON.parse(clientContextDetails);
+            clientContextEdit.client_context.user_task.task_data.name = 'Review ㅪ the ㋚ appeal \`';
+            const caseEditUtils = new CaseEditUtils();
+            // below changes non-ASCII characters 
+            const editedClientContext = caseEditUtils.convertNonASCIICharacters(clientContextDetails);
+            const clientContext = window.btoa(editedClientContext);
             if (clientContext) {
                 headers = headers.set('Client-Context', clientContext);
             }
@@ -8277,11 +8318,12 @@ class CasesService {
         return headers;
     }
     updateClientContextStorage(headers) {
-        // for mocking - TODO: Kasi Remove/Uncomment for testing
-        // headers = this.setMockClientContextHeader(headers);
         if (headers && headers.get('Client-Context')) {
+            const caseEditUtils = new CaseEditUtils();
             const clientContextString = window.atob(headers.get('Client-Context'));
-            this.sessionStorageService.setItem('clientContext', clientContextString);
+            // below reverts non-ASCII characters 
+            const editedClientContextString = caseEditUtils.convertHTMLEntities(clientContextString);
+            this.sessionStorageService.setItem('clientContext', editedClientContextString);
         }
     }
     static ɵfac = function CasesService_Factory(t) { return new (t || CasesService)(i0.ɵɵinject(HttpService), i0.ɵɵinject(AbstractAppConfig), i0.ɵɵinject(OrderService), i0.ɵɵinject(HttpErrorService), i0.ɵɵinject(WizardPageFieldToCaseFieldMapper), i0.ɵɵinject(LoadingService), i0.ɵɵinject(SessionStorageService), i0.ɵɵinject(RetryUtil)); };
@@ -21600,19 +21642,18 @@ function WriteYesNoFieldComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(2, "label", 12);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
-    i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const value_r2 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$b, ctx_r0.yesNoControl.value === value_r2));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$b, ctx_r0.yesNoControl.value === value_r2));
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", ctx_r0.createElementId(value_r2))("name", ctx_r0.id())("formControl", ctx_r0.yesNoControl)("value", value_r2);
     i0.ɵɵattribute("name", ctx_r0.id());
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", ctx_r0.createElementId(value_r2));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.caseField.label ? i0.ɵɵpipeBind1(5, 12, i0.ɵɵpipeBind3(4, 8, ctx_r0.caseField.label, null, value_r2)) : value_r2);
+    i0.ɵɵtextInterpolate(ctx_r0.caseField.label ? i0.ɵɵpipeBind3(4, 8, ctx_r0.caseField.label, null, value_r2) : value_r2);
 } }
 class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
     yesNoService;
@@ -21632,7 +21673,7 @@ class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, WriteYesNoFieldComponent_span_4_Template, 3, 3, "span", 3)(5, WriteYesNoFieldComponent_span_5_Template, 3, 4, "span", 4);
             i0.ɵɵelementStart(6, "div", 5);
-            i0.ɵɵtemplate(7, WriteYesNoFieldComponent_div_7_Template, 6, 16, "div", 6);
+            i0.ɵɵtemplate(7, WriteYesNoFieldComponent_div_7_Template, 5, 14, "div", 6);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("id", ctx.id())("ngClass", i0.ɵɵpureFunction1(7, _c0$y, !ctx.yesNoControl.valid && (ctx.yesNoControl.dirty || ctx.yesNoControl.touched)));
@@ -21650,7 +21691,7 @@ class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteYesNoFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-yes-no-field', template: "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\t<fieldset class=\"inline\">\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">\n      {{yesNoControl.errors | ccdFirstError:caseField.label}}\n    </span>\n\n    <div [id]=\"createElementId('radio')\">\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n        <label class=\"form-label\" [for]=\"createElementId(value)\">{{caseField.label ? (caseField.label | rpxTranslate:null:value | rpxTranslate) : value}}</label>\n  \t  </div>\n    </div>\n\t</fieldset>\n</div>\n" }]
+        args: [{ selector: 'ccd-write-yes-no-field', template: "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\t<fieldset class=\"inline\">\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">\n      {{yesNoControl.errors | ccdFirstError:caseField.label}}\n    </span>\n\n    <div [id]=\"createElementId('radio')\">\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n        <label class=\"form-label\" [for]=\"createElementId(value)\">{{caseField.label ? (caseField.label | rpxTranslate:null:value) : value}}</label>\n  \t  </div>\n    </div>\n\t</fieldset>\n</div>\n" }]
     }], () => [{ type: YesNoService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteYesNoFieldComponent, { className: "WriteYesNoFieldComponent", filePath: "lib/shared/components/palette/yes-no/write-yes-no-field.component.ts", lineNumber: 10 }); })();
 
@@ -25842,7 +25883,7 @@ class ReadComplexFieldRawComponent extends AbstractFieldReadComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadComplexFieldRawComponent, { className: "ReadComplexFieldRawComponent", filePath: "lib/shared/components/palette/complex/read-complex-field-raw.component.ts", lineNumber: 16 }); })();
 
-const _c0$j = (a0, a1, a2) => [a0, false, undefined, true, a1, undefined, a2];
+const _c0$j = (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) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "tr", 7)(2, "td", 8)(3, "span", 3);
@@ -25887,9 +25928,25 @@ function ReadComplexFieldTableComponent_ng_container_9_Template(rf, ctx) { if (r
     i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(2, 2, field_r1))("ngIfElse", SimpleRow_r3);
 } }
 class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
+    // parent_ can be replaced with any ***_ - underscore is only important character
+    // value can also be replaced with anything
+    static DUMMY_STRING_PRE = 'parent_';
+    static DUMMY_STRING_POST = 'value';
     caseFields = [];
+    path;
+    ngOnInit() {
+        this.setDummyPathForChildArrays();
+    }
+    /* In order to get child arrays (within casefield) to display their logic
+      we need to add a path. This path needs to include the idPrefix as that
+      is the part of the path that is used to display the elements.
+      The joining strings will allow us to use the existing show condition to
+      match against this path. */
+    setDummyPathForChildArrays() {
+        this.path = ReadComplexFieldTableComponent.DUMMY_STRING_PRE + this.idPrefix + ReadComplexFieldTableComponent.DUMMY_STRING_POST;
+    }
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadComplexFieldTableComponent_BaseFactory; return function ReadComplexFieldTableComponent_Factory(t) { return (ɵReadComplexFieldTableComponent_BaseFactory || (ɵReadComplexFieldTableComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadComplexFieldTableComponent)))(t || ReadComplexFieldTableComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadComplexFieldTableComponent, selectors: [["ccd-read-complex-field-table"]], inputs: { caseFields: "caseFields" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 16, 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", "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" }, 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", "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");
@@ -25904,12 +25961,12 @@ class ReadComplexFieldTableComponent extends AbstractFieldReadComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 2, ctx.caseField.label));
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBindV(10, 4, i0.ɵɵpureFunction3(12, _c0$j, ctx.caseField, ctx.topLevelFormGroup, ctx.idPrefix)));
+            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBindV(10, 4, i0.ɵɵpureFunction4(12, _c0$j, ctx.caseField, ctx.topLevelFormGroup, ctx.path, ctx.idPrefix)));
         } }, styles: [".complex-panel[_ngcontent-%COMP%]{margin:13px 0;border:1px solid #bfc1c3}.complex-panel[_ngcontent-%COMP%]   .complex-panel-title[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .complex-panel-title[_ngcontent-%COMP%]{font-size:19px;line-height:1.3157894737}}.complex-panel[_ngcontent-%COMP%]   .complex-panel-table[_ngcontent-%COMP%] > tbody[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%] > th[_ngcontent-%COMP%]{vertical-align:top}.complex-panel[_ngcontent-%COMP%]   .complex-panel-table[_ngcontent-%COMP%] > tbody[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%]:last-child > th[_ngcontent-%COMP%], .complex-panel[_ngcontent-%COMP%]   .complex-panel-table[_ngcontent-%COMP%] > tbody[_ngcontent-%COMP%] > tr[_ngcontent-%COMP%]:last-child > td[_ngcontent-%COMP%]{border-bottom:none}.complex-panel[_ngcontent-%COMP%]   .complex-panel-simple-field[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{padding-left:5px;width:295px}.complex-panel[_ngcontent-%COMP%]   .complex-panel-compound-field[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{padding:5px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadComplexFieldTableComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-complex-field-table', 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: undefined :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\"\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\"\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', 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\"\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\"\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"] }]
     }], null, { caseFields: [{
             type: Input
         }] }); })();
@@ -27257,7 +27314,14 @@ class ReadFieldsFilterPipe {
             else {
                 cond = ShowCondition.getInstance(field.show_condition);
             }
-            field.hidden = !cond.match(formValue, path);
+            if (path) {
+                // EXUI-2460 - evaluate with and without path to ensure validity
+                field.hidden = !cond.match(formValue, path) ? !cond.match(formValue) : false;
+            }
+            else {
+                // if no path there is no need to evaluate twice
+                field.hidden = !cond.match(formValue);
+            }
         }
         else {
             field.hidden = false;
@@ -35045,6 +35109,7 @@ class CaseSpecificAccessRequestComponent {
     $roleAssignmentResponseSubscription;
     genericError = 'There is a problem';
     specificReasonControlName = 'specificReason';
+    getSpecificAccessError = false;
     constructor(fb, router, casesService, route, caseNotifier) {
         this.fb = fb;
         this.router = router;
@@ -35099,9 +35164,15 @@ class CaseSpecificAccessRequestComponent {
                 .subscribe(() => {
                 // Would have been nice to pass the caseId within state.data, but this isn't part of NavigationExtras until
                 // Angular 7.2
+                this.getSpecificAccessError = false;
                 this.router.navigate(['success'], { relativeTo: this.route });
             }, () => {
-                // Navigate to error page
+                // Show the generic error message
+                this.getSpecificAccessError = true;
+                this.errorMessage = {
+                    title: this.genericError,
+                    description: 'Sorry, there is a problem with the service; Try again later.'
+                };
             });
         }
     }
@@ -35118,7 +35189,7 @@ class CaseSpecificAccessRequestComponent {
         return input.value === null || input.value.trim().length === 0;
     }
     static ɵfac = function CaseSpecificAccessRequestComponent_Factory(t) { return new (t || CaseSpecificAccessRequestComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseNotifier)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseSpecificAccessRequestComponent, selectors: [["ccd-case-specific-access-request"]], decls: 50, vars: 42, consts: [[3, "error", 4, "ngIf"], ["type", "information"], [3, "submit", "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "reason-hint", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], [1, "govuk-fieldset__heading"], ["data-module", "govuk-details", "role", "group", 1, "govuk-details"], ["role", "button", "aria-expanded", "false", 1, "govuk-details__summary"], [1, "govuk-details__summary-text"], ["aria-hidden", "true", 1, "govuk-details__text"], [1, "govuk-body"], [1, "govuk-list", "govuk-list--bullet"], ["id", "reason-hint", 1, "govuk-hint"], ["id", "conditional-reason-3"], [1, "govuk-form-group"], ["id", "specific-reason-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "specific-reason", "name", "specific-reason", "rows", "8", "formControlName", "specificReason", 1, "govuk-textarea", 3, "ngClass"], [1, "govuk-button-group"], ["type", "submit", 1, "govuk-button", "govuk-!-margin-right-3"], [1, "govuk-grid-column-full", "govuk-!-padding-left-0"], ["href", "javascript:void(0)", 1, "govuk-body", 3, "click"], [3, "error"], ["id", "specific-reason-error-message", 1, "govuk-error-message"]], template: function CaseSpecificAccessRequestComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseSpecificAccessRequestComponent, selectors: [["ccd-case-specific-access-request"]], decls: 50, vars: 42, consts: [[3, "error", 4, "ngIf"], ["type", "information"], [3, "submit", "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "reason-hint", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], [1, "govuk-fieldset__heading"], ["data-module", "govuk-details", "role", "group", 1, "govuk-details"], ["aria-expanded", "false", 1, "govuk-details__summary"], [1, "govuk-details__summary-text"], ["aria-hidden", "true", 1, "govuk-details__text"], [1, "govuk-body"], [1, "govuk-list", "govuk-list--bullet"], ["id", "reason-hint", 1, "govuk-hint"], ["id", "conditional-reason-3"], [1, "govuk-form-group"], ["id", "specific-reason-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "specific-reason", "name", "specific-reason", "rows", "8", "formControlName", "specificReason", 1, "govuk-textarea", 3, "ngClass"], [1, "govuk-button-group"], ["type", "submit", 1, "govuk-button", "govuk-!-margin-right-3"], [1, "govuk-grid-column-full", "govuk-!-padding-left-0"], ["href", "javascript:void(0)", 1, "govuk-body", 3, "click"], [3, "error"], ["id", "specific-reason-error-message", 1, "govuk-error-message"]], template: function CaseSpecificAccessRequestComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseSpecificAccessRequestComponent_exui_error_message_0_Template, 1, 1, "exui-error-message", 0);
             i0.ɵɵelementStart(1, "cut-alert", 1);
             i0.ɵɵtext(2);
@@ -35172,7 +35243,7 @@ class CaseSpecificAccessRequestComponent {
             i0.ɵɵpipe(49, "rpxTranslate");
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.formGroup.invalid && ctx.submitted);
+            i0.ɵɵproperty("ngIf", ctx.formGroup.invalid && ctx.submitted || ctx.getSpecificAccessError);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 16, "Authorisation is needed to access this case."), "");
             i0.ɵɵadvance(3);
@@ -35207,7 +35278,7 @@ class CaseSpecificAccessRequestComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseSpecificAccessRequestComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-specific-access-request', template: "<exui-error-message\n  *ngIf=\"formGroup.invalid && submitted\"\n  [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">\n  {{'Authorisation is needed to access this case.' | rpxTranslate}}<br />\n  {{'This could be because it\\'s outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes.' | rpxTranslate}}\n</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\"\n    [ngClass]=\"{ 'form-group-error': formGroup.invalid && submitted }\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{ title | rpxTranslate }}\n        </h1>\n      </legend>\n\n      <details class=\"govuk-details\" data-module=\"govuk-details\" role=\"group\">\n        <summary\n          class=\"govuk-details__summary\"\n          role=\"button\"\n          aria-expanded=\"false\">\n          <span class=\"govuk-details__summary-text\">\n            {{'Help with requesting case access' | rpxTranslate}}\n          </span>\n        </summary>\n        <div\n          class=\"govuk-details__text\"\n          aria-hidden=\"true\">\n          <p class=\"govuk-body\">{{'You could include:' | rpxTranslate}}</p>\n          <ul class=\"govuk-list govuk-list--bullet\">\n            <li>{{'the case reference of the linked case' | rpxTranslate}}</li>\n            <li>{{'how long you require access to this case' | rpxTranslate}}</li>\n            <li>{{'any other reasons why you require access' | rpxTranslate}}</li>\n          </ul>\n        </div>\n      </details>\n\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{ hint | rpxTranslate }}\n      </div>\n      <div id=\"conditional-reason-3\">\n        <div class=\"govuk-form-group\">\n          <div\n            id=\"specific-reason-error-message\"\n            class=\"govuk-error-message\"\n            *ngIf=\"formGroup.get('specificReason').invalid && submitted\">\n            {{ errorMessage.description | rpxTranslate }}\n          </div>\n          <textarea\n            class=\"govuk-textarea\"\n            [ngClass]=\"{\n              'govuk-textarea--error':\n                formGroup.get('specificReason').invalid && submitted\n            }\"\n            id=\"specific-reason\"\n            name=\"specific-reason\"\n            rows=\"8\"\n            formControlName=\"specificReason\">\n          </textarea>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      {{'Submit' | rpxTranslate}}\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class=\"govuk-body\" (click)=\"onCancel()\" href=\"javascript:void(0)\">\n          {{'Cancel' | rpxTranslate}}\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n" }]
+        args: [{ selector: 'ccd-case-specific-access-request', template: "<exui-error-message\n  *ngIf=\"(formGroup.invalid && submitted) || getSpecificAccessError\"\n  [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">\n  {{'Authorisation is needed to access this case.' | rpxTranslate}}<br />\n  {{'This could be because it\\'s outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes.' | rpxTranslate}}\n</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\"\n    [ngClass]=\"{ 'form-group-error': formGroup.invalid && submitted }\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{ title | rpxTranslate }}\n        </h1>\n      </legend>\n\n      <details class=\"govuk-details\" data-module=\"govuk-details\" role=\"group\">\n        <summary\n          class=\"govuk-details__summary\"\n          aria-expanded=\"false\">\n          <span class=\"govuk-details__summary-text\">\n            {{'Help with requesting case access' | rpxTranslate}}\n          </span>\n        </summary>\n        <div\n          class=\"govuk-details__text\"\n          aria-hidden=\"true\">\n          <p class=\"govuk-body\">{{'You could include:' | rpxTranslate}}</p>\n          <ul class=\"govuk-list govuk-list--bullet\">\n            <li>{{'the case reference of the linked case' | rpxTranslate}}</li>\n            <li>{{'how long you require access to this case' | rpxTranslate}}</li>\n            <li>{{'any other reasons why you require access' | rpxTranslate}}</li>\n          </ul>\n        </div>\n      </details>\n\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{ hint | rpxTranslate }}\n      </div>\n      <div id=\"conditional-reason-3\">\n        <div class=\"govuk-form-group\">\n          <div\n            id=\"specific-reason-error-message\"\n            class=\"govuk-error-message\"\n            *ngIf=\"formGroup.get('specificReason').invalid && submitted\">\n            {{ errorMessage.description | rpxTranslate }}\n          </div>\n          <textarea\n            class=\"govuk-textarea\"\n            [ngClass]=\"{\n              'govuk-textarea--error':\n                formGroup.get('specificReason').invalid && submitted\n            }\"\n            id=\"specific-reason\"\n            name=\"specific-reason\"\n            rows=\"8\"\n            formControlName=\"specificReason\">\n          </textarea>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      {{'Submit' | rpxTranslate}}\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class=\"govuk-body\" (click)=\"onCancel()\" href=\"javascript:void(0)\">\n          {{'Cancel' | rpxTranslate}}\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n" }]
     }], () => [{ type: i4.FormBuilder }, { type: i1$1.Router }, { type: CasesService }, { type: i1$1.ActivatedRoute }, { type: CaseNotifier }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseSpecificAccessRequestComponent, { className: "CaseSpecificAccessRequestComponent", filePath: "lib/shared/components/case-viewer/case-specific-access-request/case-specific-access-request.component.ts", lineNumber: 22 }); })();