@hmcts/ccd-case-ui-toolkit 4.7.0-rc.4 → 4.7.1-EUI-4703-hearing-date

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 /**
  * @hmcts/ccd-case-ui-toolkit - Case UI Toolkit
- * @version v4.7.0-rc.4
+ * @version v4.7.1-EUI-4703-hearing-date
  * @link undefined
  * @license MIT
  */
@@ -10754,6 +10754,9 @@ var AbstractAppConfig = /** @class */ (function () {
     AbstractAppConfig.prototype.getLocationRefApiUrl = function () {
         return undefined;
     };
+    AbstractAppConfig.prototype.getCamRoleAssignmentsApiUrl = function () {
+        return undefined;
+    };
     return AbstractAppConfig;
 }());
 exports.AbstractAppConfig = AbstractAppConfig;
@@ -10881,6 +10884,7 @@ var CaseUIToolkitModule = /** @class */ (function () {
                 shared_1.WriteNumberFieldComponent,
                 shared_1.WriteEmailFieldComponent,
                 shared_1.WriteDateFieldComponent,
+                shared_1.ConditionalShowDirective,
                 shared_1.LabelSubstitutorDirective,
                 shared_1.FocusElementDirective,
                 ngx_pagination_1.PaginatePipe
@@ -11975,6 +11979,7 @@ exports.SortOrder = domain_1.SortOrder;
 exports.SortParameters = domain_1.SortParameters;
 var directives_1 = __webpack_require__(66395);
 exports.ShowCondition = directives_1.ShowCondition;
+exports.ConditionalShowDirective = directives_1.ConditionalShowDirective;
 exports.ConditionalShowModule = directives_1.ConditionalShowModule;
 exports.PlaceholderService = directives_1.PlaceholderService;
 exports.LabelSubstitutorDirective = directives_1.LabelSubstitutorDirective;
@@ -12377,6 +12382,82 @@ __export(__webpack_require__(41580));
 __export(__webpack_require__(4765));
 
 
+/***/ }),
+
+/***/ 25919:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var CaseAccessUtils = /** @class */ (function () {
+    function CaseAccessUtils() {
+    }
+    CaseAccessUtils.prototype.getMappedRoleCategory = function (roles, roleCategories) {
+        var roleKeywords = roles.join().split('-').join().split(',');
+        if (this.roleOrCategoryExists(CaseAccessUtils.JUDGE_ROLE, CaseAccessUtils.JUDGE_ROLE_CATEGORY, roleKeywords, roleCategories)) {
+            return CaseAccessUtils.JUDGE_ROLE_CATEGORY;
+        }
+        else if (this.roleOrCategoryExists(CaseAccessUtils.PROFESSIONAL_ROLE, CaseAccessUtils.PROFESSIONAL_ROLE_CATEGORY, roleKeywords, roleCategories)) {
+            return CaseAccessUtils.PROFESSIONAL_ROLE_CATEGORY;
+        }
+        else if (this.roleOrCategoryExists(CaseAccessUtils.CITIZEN_ROLE, CaseAccessUtils.CITIZEN_ROLE_CATEGORY, roleKeywords, roleCategories)) {
+            return CaseAccessUtils.CITIZEN_ROLE_CATEGORY;
+        }
+        else if (this.roleOrCategoryExists(CaseAccessUtils.ADMIN_ROLE, CaseAccessUtils.ADMIN_ROLE_CATEGORY, roleKeywords, roleCategories)) {
+            return CaseAccessUtils.ADMIN_ROLE_CATEGORY;
+        }
+        else {
+            return CaseAccessUtils.LEGAL_OPERATIONS_ROLE_CATEGORY;
+        }
+    };
+    CaseAccessUtils.prototype.roleOrCategoryExists = function (roleKeyword, roleCategory, roleKeywords, roleCategories) {
+        var categoryExists = roleCategories.indexOf(roleCategory) > -1;
+        var keywordExists = roleKeywords.indexOf(roleKeyword) > -1;
+        return categoryExists ? categoryExists : keywordExists;
+    };
+    CaseAccessUtils.prototype.getAMRoleName = function (accessType, aMRole) {
+        var roleName = '';
+        switch (aMRole) {
+            case CaseAccessUtils.JUDGE_ROLE_CATEGORY:
+                roleName = accessType + "-access-" + CaseAccessUtils.JUDGE_ROLE_NAME;
+                break;
+            case CaseAccessUtils.PROFESSIONAL_ROLE_CATEGORY:
+                roleName = accessType + "-access-" + CaseAccessUtils.PROFESSIONAL_ROLE_NAME;
+                break;
+            case CaseAccessUtils.CITIZEN_ROLE_CATEGORY:
+                roleName = accessType + "-access-" + CaseAccessUtils.CITIZEN_ROLE_NAME;
+                break;
+            case CaseAccessUtils.ADMIN_ROLE_CATEGORY:
+                roleName = accessType + "-access-" + CaseAccessUtils.ADMIN_ROLE_NAME;
+                break;
+            default:
+                roleName = accessType + "-access-" + CaseAccessUtils.LEGAL_OPERATIONS_ROLE_NAME;
+                break;
+        }
+        return roleName;
+    };
+    // User role mapping
+    CaseAccessUtils.JUDGE_ROLE = 'judge';
+    CaseAccessUtils.JUDGE_ROLE_CATEGORY = 'JUDICIAL';
+    CaseAccessUtils.JUDGE_ROLE_NAME = 'judicial';
+    CaseAccessUtils.ADMIN_ROLE = 'admin';
+    CaseAccessUtils.ADMIN_ROLE_CATEGORY = 'ADMIN';
+    CaseAccessUtils.ADMIN_ROLE_NAME = 'admin';
+    CaseAccessUtils.PROFESSIONAL_ROLE = 'solicitor';
+    CaseAccessUtils.PROFESSIONAL_ROLE_CATEGORY = 'PROFESSIONAL';
+    CaseAccessUtils.PROFESSIONAL_ROLE_NAME = 'professional';
+    CaseAccessUtils.LEGAL_OPERATIONS_ROLE = 'caseworker';
+    CaseAccessUtils.LEGAL_OPERATIONS_ROLE_CATEGORY = 'LEGAL_OPERATIONS';
+    CaseAccessUtils.LEGAL_OPERATIONS_ROLE_NAME = 'legal-operations';
+    CaseAccessUtils.CITIZEN_ROLE = 'citizen';
+    CaseAccessUtils.CITIZEN_ROLE_CATEGORY = 'CITIZEN';
+    CaseAccessUtils.CITIZEN_ROLE_NAME = 'citizen';
+    return CaseAccessUtils;
+}());
+exports.CaseAccessUtils = CaseAccessUtils;
+
+
 /***/ }),
 
 /***/ 19119:
@@ -12868,6 +12949,7 @@ var CaseEditPageComponent = /** @class */ (function () {
         if (this.currentPageIsNotValid()) {
             this.generateErrorMessage(this.currentPage.case_fields);
         }
+        this.showSpinner = true;
         if (!this.isSubmitting && !this.currentPageIsNotValid()) {
             this.isSubmitting = true;
             this.error = null;
@@ -12878,8 +12960,12 @@ var CaseEditPageComponent = /** @class */ (function () {
                     _this.updateFormData(jsonData);
                 }
                 _this.saveDraft();
+                _this.showSpinner = false;
                 _this.next();
-            }, function (error) { return _this.handleError(error); });
+            }, function (error) {
+                _this.showSpinner = false;
+                _this.handleError(error);
+            });
             CaseEditPageComponent_1.scrollToTop();
         }
         CaseEditPageComponent_1.setFocusToTop();
@@ -12907,7 +12993,15 @@ var CaseEditPageComponent = /** @class */ (function () {
     CaseEditPageComponent.prototype.updateFormControlsValue = function (formGroup, caseFieldId, value) {
         var theControl = formGroup.controls['data'].get(caseFieldId);
         if (theControl) {
-            theControl.patchValue(value);
+            if (Array.isArray(theControl.value) && Array.isArray(value)
+                && theControl.value.length > value.length && theControl['caseField']
+                && theControl['caseField']['display_context'] && theControl['caseField']['display_context'] === 'OPTIONAL'
+                && theControl['caseField']['field_type'] && theControl['caseField']['field_type']['type'] === 'Collection') {
+                // do nothing
+            }
+            else {
+                theControl.patchValue(value);
+            }
         }
     };
     CaseEditPageComponent.prototype.callbackErrorsNotify = function (errorContext) {
@@ -13704,6 +13798,7 @@ var profile_1 = __webpack_require__(59412);
 var profile_service_1 = __webpack_require__(25925);
 var router_2 = __webpack_require__(71724);
 var errors_module_1 = __webpack_require__(61386);
+var loading_spinner_component_1 = __webpack_require__(41617);
 var palette_1 = __webpack_require__(22212);
 var case_create_component_1 = __webpack_require__(19119);
 var case_edit_confirm_component_1 = __webpack_require__(26329);
@@ -13742,7 +13837,8 @@ var CaseEditorModule = /** @class */ (function () {
                 case_edit_form_component_1.CaseEditFormComponent,
                 case_edit_submit_component_1.CaseEditSubmitComponent,
                 case_create_component_1.CaseCreateComponent,
-                case_progress_component_1.CaseProgressComponent
+                case_progress_component_1.CaseProgressComponent,
+                loading_spinner_component_1.LoadingSpinnerComponent
             ],
             exports: [
                 case_edit_confirm_component_1.CaseEditConfirmComponent,
@@ -13753,6 +13849,7 @@ var CaseEditorModule = /** @class */ (function () {
                 case_create_component_1.CaseCreateComponent,
                 case_progress_component_1.CaseProgressComponent,
                 error_1.CallbackErrorsComponent,
+                loading_spinner_component_1.LoadingSpinnerComponent,
             ],
             providers: [
                 fields_utils_1.FieldsUtils,
@@ -14045,7 +14142,7 @@ var Wizard = /** @class */ (function () {
         return canShow(foundPage) ? foundPage : undefined;
     };
     Wizard.prototype.findWizardPage = function (caseFieldId, pageId) {
-        return this.pages.find(function (wizardPage) { return wizardPage.id === pageId && wizardPage.case_fields &&
+        return this.pages.find(function (wizardPage) { return wizardPage.id === pageId || wizardPage.case_fields &&
             wizardPage.case_fields.filter(function (caseField) { return caseField.id === caseFieldId; }).length > 0; });
     };
     Wizard.prototype.nextPage = function (pageId, canShow) {
@@ -14147,6 +14244,7 @@ __export(__webpack_require__(29808));
 __export(__webpack_require__(25961));
 __export(__webpack_require__(20039));
 __export(__webpack_require__(41473));
+__export(__webpack_require__(25919));
 
 
 /***/ }),
@@ -14319,6 +14417,7 @@ var app_config_1 = __webpack_require__(35185);
 var directives_1 = __webpack_require__(66395);
 var domain_1 = __webpack_require__(59346);
 var services_1 = __webpack_require__(65010);
+var case_access_utils_1 = __webpack_require__(25919);
 var wizard_page_field_to_case_field_mapper_1 = __webpack_require__(12393);
 var work_allocation_service_1 = __webpack_require__(93603);
 var CasesService = /** @class */ (function () {
@@ -14588,56 +14687,41 @@ var CasesService = /** @class */ (function () {
         return this.http.get(this.appConfig.getLocationRefApiUrl() + "/building-locations?epimms_id=" + locationId);
     };
     CasesService.prototype.createChallengedAccessRequest = function (caseId, car) {
-        // Dummy implementation for now; the real one will make a call to the Node layer, which will call the appropriate Role
         // Assignment API endpoint
-        var roleAssignmentResponse = {
+        var userInfoStr = this.sessionStorageService.getItem('userDetails');
+        var camUtils = new case_access_utils_1.CaseAccessUtils();
+        var userInfo;
+        if (userInfoStr) {
+            userInfo = JSON.parse(userInfoStr);
+        }
+        var roleCategory = camUtils.getMappedRoleCategory(userInfo.roles, userInfo.roleCategories);
+        var roleName = camUtils.getAMRoleName('challenged', roleCategory);
+        var payload = {
             roleRequest: {
-                id: '0c6f56f5-4457-485e-a0de-828e6dfa1e33',
-                authenticatedUserId: '37d4eab7-e14c-404e-8cd1-55cd06b2fc06',
-                correlationId: '003352d0-e699-48bc-b6f5-5810411e60af',
-                assignerId: '37d4eab7-e14c-404e-8cd1-55cd06b2fc06',
-                requestType: 'CREATE',
-                process: 'businessProcess1',
-                reference: 'cf07ea33-31c0-4442-b2df-e2032d21b496',
-                replaceExisting: true,
-                status: 'APPROVED',
-                created: new Date('2021-01-28T18:16:49.100121Z'),
-                log: 'Request has been approved'
+                assignerId: userInfo.id
             },
             requestedRoles: [{
-                    id: '3ccabbf2-71fa-4c5d-af39-5675d25e9fcc',
                     actorIdType: 'IDAM',
-                    actorId: 'cf07ea33-31c0-4442-b2df-e2032d21b496',
-                    roleType: 'ORGANISATION',
-                    roleName: 'judge',
+                    actorId: userInfo.id,
+                    roleType: 'CASE',
+                    roleName: roleName,
                     classification: 'PUBLIC',
+                    roleCategory: roleCategory,
                     grantType: 'CHALLENGED',
-                    roleCategory: 'JUDICIAL',
-                    readOnly: false,
-                    beginTime: new Date('2021-01-01T00:00:00Z'),
-                    endTime: new Date('2023-01-01T00:00:00Z'),
-                    process: 'businessProcess1',
-                    reference: 'cf07ea33-31c0-4442-b2df-e2032d21b496',
-                    status: 'LIVE',
-                    created: new Date('2021-01-28T18:16:49.100155Z'),
-                    log: 'Create requested with replace: true\nCreate approved : judicial_organisational_role_mapping_service_create',
+                    beginTime: new Date(),
+                    endTime: new Date(new Date().setUTCHours(23, 59, 59, 999)),
                     attributes: {
-                        jurisdiction: 'divorce',
-                        region: 'south-east',
-                        contractType: 'SALARIED'
+                        caseId: caseId
                     },
                     notes: [{
-                            userId: '003352d0-e699-48bc-b6f5-5810411e60ag',
-                            time: new Date('2020-01-01T00:00Z'),
-                            comment: 'Need Access to case number 1234567890123456 for a month'
-                        }, {
-                            userId: '52aa3810-af1f-11ea-b3de-0242ac130004',
-                            time: new Date('2020-01-02T00:00Z'),
-                            comment: 'Access granted till end of day'
-                        }]
+                            userId: userInfo.id,
+                            time: new Date(),
+                            comment: JSON.stringify(car)
+                        }
+                    ]
                 }]
         };
-        return rxjs_1.of(roleAssignmentResponse);
+        return this.http.post("" + this.appConfig.getCamRoleAssignmentsApiUrl(), payload);
     };
     var CasesService_1;
     // Internal (UI) API
@@ -16054,6 +16138,9 @@ var CaseBasicAccessViewComponent = /** @class */ (function () {
         // Navigate to the previous page
         window.history.go(-1);
     };
+    CaseBasicAccessViewComponent.prototype.getRequestUrl = function (accessType) {
+        return accessType === 'CHALLENGED' ? 'challenged-access-request' : 'specific-access-request';
+    };
     __decorate([
         core_1.Input(),
         __metadata("design:type", domain_1.CaseView)
@@ -16562,13 +16649,11 @@ var CaseFullAccessViewComponent = /** @class */ (function () {
         return this.caseDetails.case_type.printEnabled;
     };
     CaseFullAccessViewComponent.prototype.ngOnDestroy = function () {
-        if (this.activitySubscription && this.activityPollingService.isEnabled) {
+        if (this.activityPollingService.isEnabled) {
             this.activitySubscription.unsubscribe();
         }
-        if (this.callbackErrorsSubject) {
-            this.callbackErrorsSubject.unsubscribe();
-        }
-        if (!this.route.snapshot.data.case && this.caseSubscription) {
+        this.callbackErrorsSubject.unsubscribe();
+        if (!this.route.snapshot.data.case) {
             this.caseSubscription.unsubscribe();
         }
         if (this.errorSubscription) {
@@ -16663,8 +16748,7 @@ var CaseFullAccessViewComponent = /** @class */ (function () {
             var regExp = new RegExp(CaseFullAccessViewComponent_1.UNICODE_SPACE, 'g');
             hashValue = hashValue.replace(regExp, CaseFullAccessViewComponent_1.EMPTY_SPACE);
             matTab = this.tabGroup._tabs.find(function (x) {
-                return x.textLabel.replace(CaseFullAccessViewComponent_1.EMPTY_SPACE, '').toLowerCase() ===
-                    hashValue.replace(CaseFullAccessViewComponent_1.EMPTY_SPACE, '').toLowerCase();
+                return x.textLabel.replace(CaseFullAccessViewComponent_1.EMPTY_SPACE, '').toLowerCase() === hashValue.toLowerCase();
             });
             if (matTab && matTab.position) {
                 this.tabGroup.selectedIndex = matTab.position;
@@ -16678,9 +16762,8 @@ var CaseFullAccessViewComponent = /** @class */ (function () {
             this.router.navigate([id], { relativeTo: this.route });
         }
         else {
-            var label_1 = tabChangeEvent.tab.textLabel;
             this.router.navigate(['cases', 'case-details', this.caseDetails.case_id]).then(function () {
-                window.location.hash = label_1;
+                window.location.hash = id;
             });
         }
     };
@@ -16798,6 +16881,148 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 __export(__webpack_require__(76764));
 
 
+/***/ }),
+
+/***/ 38692:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var forms_1 = __webpack_require__(92985);
+var router_1 = __webpack_require__(92302);
+var models_1 = __webpack_require__(3234);
+var CaseSpecificAccessRequestComponent = /** @class */ (function () {
+    function CaseSpecificAccessRequestComponent(fb, router, route) {
+        this.fb = fb;
+        this.router = router;
+        this.route = route;
+        this.collapsed = false;
+        this.submitted = false;
+        this.genericError = 'There is a problem';
+        this.specificReasonControlName = 'specificReason';
+    }
+    CaseSpecificAccessRequestComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.title = models_1.SpecificAccessRequestPageText.TITLE;
+        this.hint = models_1.SpecificAccessRequestPageText.HINT;
+        this.caseRefLabel = models_1.SpecificAccessRequestPageText.CASE_REF;
+        this.formGroup = this.fb.group({
+            radioSelected: new forms_1.FormControl(null, null),
+        });
+        this.formGroup.addControl(this.specificReasonControlName, new forms_1.FormControl('', {
+            validators: [
+                function (control) {
+                    if (_this.inputEmpty(control)) {
+                        return { invalid: true };
+                    }
+                    return null;
+                },
+            ],
+            updateOn: 'submit',
+        }));
+    };
+    CaseSpecificAccessRequestComponent.prototype.inputEmpty = function (input) {
+        return input.value == null || input.value.trim().length === 0;
+    };
+    CaseSpecificAccessRequestComponent.prototype.onChange = function () {
+        this.submitted = false;
+        // Clear the "specific reason" fields manually. This prevents any previous value being retained by
+        // the field's FormControl when the field itself is removed from the DOM by *ngIf. (If it is subsequently added back
+        // to the DOM by *ngIf, it will appear empty but the associated FormControl still has the previous value.)
+        this.formGroup.get(this.specificReasonControlName).setValue('');
+    };
+    CaseSpecificAccessRequestComponent.prototype.onSubmit = function () {
+        this.submitted = true;
+        if (this.formGroup.get(this.specificReasonControlName).invalid) {
+            this.errorMessage = {
+                title: this.genericError,
+                description: models_1.SpecificAccessRequestErrors.NO_REASON,
+                fieldId: 'specific-reason',
+            };
+        }
+    };
+    CaseSpecificAccessRequestComponent.prototype.onCancel = function () {
+        // Navigate to the page before previous one (should be Search Results or Case List page, for example)
+        window.history.go(-2);
+    };
+    CaseSpecificAccessRequestComponent.prototype.ngOnDestroy = function () {
+        if (this.$roleAssignmentResponseSubscription) {
+            this.$roleAssignmentResponseSubscription.unsubscribe();
+        }
+    };
+    CaseSpecificAccessRequestComponent = __decorate([
+        core_1.Component({
+            selector: 'ccd-case-specific-access-request',
+            template: __webpack_require__(5856),
+        }),
+        __metadata("design:paramtypes", [forms_1.FormBuilder,
+            router_1.Router,
+            router_1.ActivatedRoute])
+    ], CaseSpecificAccessRequestComponent);
+    return CaseSpecificAccessRequestComponent;
+}());
+exports.CaseSpecificAccessRequestComponent = CaseSpecificAccessRequestComponent;
+
+
+/***/ }),
+
+/***/ 73343:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(38692));
+
+
+/***/ }),
+
+/***/ 52772:
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var SpecificAccessRequestPageText;
+(function (SpecificAccessRequestPageText) {
+    SpecificAccessRequestPageText["TITLE"] = "Why do you need to access this case?";
+    SpecificAccessRequestPageText["HINT"] = "Provide a reason.";
+    SpecificAccessRequestPageText["CASE_REF"] = "Case reference";
+})(SpecificAccessRequestPageText = exports.SpecificAccessRequestPageText || (exports.SpecificAccessRequestPageText = {}));
+var SpecificAccessRequestErrors;
+(function (SpecificAccessRequestErrors) {
+    SpecificAccessRequestErrors["NO_REASON"] = "Enter a reason";
+})(SpecificAccessRequestErrors = exports.SpecificAccessRequestErrors || (exports.SpecificAccessRequestErrors = {}));
+
+
+/***/ }),
+
+/***/ 3234:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+__export(__webpack_require__(52772));
+
+
 /***/ }),
 
 /***/ 76979:
@@ -17084,6 +17309,7 @@ var palette_1 = __webpack_require__(22212);
 var case_basic_access_view_component_1 = __webpack_require__(42906);
 var case_challenged_access_request_component_1 = __webpack_require__(70776);
 var case_challenged_access_success_component_1 = __webpack_require__(41969);
+var case_specific_access_request_component_1 = __webpack_require__(38692);
 var case_event_trigger_1 = __webpack_require__(92100);
 var case_full_access_view_component_1 = __webpack_require__(76764);
 var case_view_1 = __webpack_require__(65389);
@@ -17112,7 +17338,6 @@ var CaseViewerModule = /** @class */ (function () {
                 palette_1.EventLogModule,
                 material_1.MatTabsModule,
                 palette_1.ComplexModule,
-                forms_1.FormsModule,
                 forms_1.ReactiveFormsModule,
                 alert_1.AlertModule
             ],
@@ -17125,6 +17350,7 @@ var CaseViewerModule = /** @class */ (function () {
                 case_view_1.CaseViewComponent,
                 printer_1.PrintUrlPipe,
                 case_challenged_access_request_component_1.CaseChallengedAccessRequestComponent,
+                case_specific_access_request_component_1.CaseSpecificAccessRequestComponent,
                 error_message_component_1.ErrorMessageComponent,
                 case_challenged_access_success_component_1.CaseChallengedAccessSuccessComponent
             ],
@@ -17576,6 +17802,7 @@ var case_history_1 = __webpack_require__(30542);
 var file_upload_progress_guard_1 = __webpack_require__(27667);
 var case_challenged_access_request_1 = __webpack_require__(38403);
 var case_challenged_access_success_1 = __webpack_require__(26840);
+var case_specific_access_request_1 = __webpack_require__(73343);
 var case_event_trigger_component_1 = __webpack_require__(83645);
 var printer_1 = __webpack_require__(65773);
 var services_1 = __webpack_require__(50137);
@@ -17598,7 +17825,7 @@ exports.viewerRouting = [
         component: case_history_1.CaseHistoryComponent,
     },
     {
-        path: 'access-request',
+        path: 'challenged-access-request',
         children: [
             {
                 path: '',
@@ -17616,6 +17843,19 @@ exports.viewerRouting = [
                 }
             }
         ]
+    },
+    {
+        path: 'specific-access-request',
+        children: [
+            {
+                path: '',
+                component: case_specific_access_request_1.CaseSpecificAccessRequestComponent,
+                data: {
+                    title: 'Request Specific Access'
+                },
+                pathMatch: 'full'
+            }
+        ]
     }
 ];
 
@@ -18650,6 +18890,45 @@ __export(__webpack_require__(13370));
 __export(__webpack_require__(62240));
 
 
+/***/ }),
+
+/***/ 41617:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var LoadingSpinnerComponent = /** @class */ (function () {
+    function LoadingSpinnerComponent() {
+        this.loadingText = 'Loading';
+    }
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], LoadingSpinnerComponent.prototype, "loadingText", void 0);
+    LoadingSpinnerComponent = __decorate([
+        core_1.Component({
+            selector: 'ccd-loading-spinner',
+            template: __webpack_require__(31851),
+            styles: [__webpack_require__(6431)],
+            encapsulation: core_1.ViewEncapsulation.None
+        })
+    ], LoadingSpinnerComponent);
+    return LoadingSpinnerComponent;
+}());
+exports.LoadingSpinnerComponent = LoadingSpinnerComponent;
+
+
 /***/ }),
 
 /***/ 47174:
@@ -19251,7 +19530,7 @@ var AbstractFieldReadComponent = /** @class */ (function (_super) {
     ], AbstractFieldReadComponent.prototype, "caseReference", void 0);
     __decorate([
         core_1.Input(),
-        __metadata("design:type", forms_1.FormGroup)
+        __metadata("design:type", Object)
     ], AbstractFieldReadComponent.prototype, "topLevelFormGroup", void 0);
     __decorate([
         core_1.Input(),
@@ -20470,61 +20749,6 @@ var WriteCollectionFieldComponent = /** @class */ (function (_super) {
 exports.WriteCollectionFieldComponent = WriteCollectionFieldComponent;
 
 
-/***/ }),
-
-/***/ 18649:
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-"use strict";
-
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-var core_1 = __webpack_require__(57208);
-var definition_1 = __webpack_require__(11080);
-var class_transformer_1 = __webpack_require__(86631);
-var CcdCollectionTableCaseFieldsFilterPipe = /** @class */ (function () {
-    function CcdCollectionTableCaseFieldsFilterPipe() {
-    }
-    CcdCollectionTableCaseFieldsFilterPipe.prototype.transform = function (objs, caseField, value) {
-        var fields = objs.map(function (obj) { return (__assign({}, obj.value.caseField, { type: obj.value.type.type ? obj.value.type.type : obj.value.type })); });
-        return class_transformer_1.plainToClassFromExist(new definition_1.CaseField(), {
-            id: caseField ? caseField.id : '',
-            label: caseField ? caseField.label : '',
-            display_context: 'READONLY',
-            value: value,
-            field_type: {
-                id: caseField ? caseField.id : '',
-                type: 'Complex',
-                complex_fields: fields,
-            }
-        });
-    };
-    CcdCollectionTableCaseFieldsFilterPipe = __decorate([
-        core_1.Pipe({
-            name: 'ccdCollectionTableCaseFieldsFilter'
-        })
-    ], CcdCollectionTableCaseFieldsFilterPipe);
-    return CcdCollectionTableCaseFieldsFilterPipe;
-}());
-exports.CcdCollectionTableCaseFieldsFilterPipe = CcdCollectionTableCaseFieldsFilterPipe;
-
-
 /***/ }),
 
 /***/ 41392:
@@ -20586,7 +20810,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var directives_1 = __webpack_require__(66395);
+var domain_1 = __webpack_require__(59346);
 var fields_1 = __webpack_require__(64906);
+var class_transformer_1 = __webpack_require__(86631);
 var ReadFieldsFilterPipe = /** @class */ (function () {
     function ReadFieldsFilterPipe() {
     }
@@ -20603,10 +20829,26 @@ var ReadFieldsFilterPipe = /** @class */ (function () {
         var type = field.field_type;
         var value = ReadFieldsFilterPipe_1.getValue(field, values);
         var hasChildrenWithValue = type.complex_fields.find(function (f) {
-            return ReadFieldsFilterPipe_1.keepField(f, value);
+            var willKeep = ReadFieldsFilterPipe_1.keepField(f, value, true);
+            return willKeep && ReadFieldsFilterPipe_1.evaluateConditionalShow(f, value).hidden !== true;
         });
         return !!hasChildrenWithValue;
     };
+    ReadFieldsFilterPipe.isValidCollection = function (field, values) {
+        var isNotEmpty = Array.isArray(field.value) && field.value.length > 0;
+        if (isNotEmpty && field.field_type.collection_field_type.type === 'Complex') {
+            return !!field.value.find(function (item) {
+                var complexField = class_transformer_1.plainToClassFromExist(new domain_1.CaseField(), {
+                    id: field.field_type.collection_field_type.id,
+                    field_type: field.field_type.collection_field_type,
+                    value: item.value,
+                    label: null,
+                });
+                return ReadFieldsFilterPipe_1.isValidComplex(complexField);
+            });
+        }
+        return isNotEmpty;
+    };
     ReadFieldsFilterPipe.isEmpty = function (value) {
         return ReadFieldsFilterPipe_1.EMPTY_VALUES.indexOf(value) !== -1
             || value.length === 0;
@@ -20618,9 +20860,10 @@ var ReadFieldsFilterPipe = /** @class */ (function () {
         return ReadFieldsFilterPipe_1.isCompound(field)
             && ReadFieldsFilterPipe_1.NESTED_TYPES[field.field_type.type](field, value);
     };
-    ReadFieldsFilterPipe.keepField = function (field, value) {
+    ReadFieldsFilterPipe.keepField = function (field, value, ignoreLabels) {
+        if (ignoreLabels === void 0) { ignoreLabels = false; }
         // We shouldn't ditch labels.
-        if (field.field_type.type === 'Label' && (field.label || '').length > 0) {
+        if (!ignoreLabels && field.field_type.type === 'Label' && (field.label || '').length > 0) {
             return true;
         }
         // We also shouldn't ditch CasePaymentHistoryViewer fields.
@@ -20707,7 +20950,8 @@ var ReadFieldsFilterPipe = /** @class */ (function () {
         {}
     ];
     ReadFieldsFilterPipe.NESTED_TYPES = {
-        'Complex': ReadFieldsFilterPipe_1.isValidComplex
+        'Complex': ReadFieldsFilterPipe_1.isValidComplex,
+        'Collection': ReadFieldsFilterPipe_1.isValidCollection
     };
     ReadFieldsFilterPipe = ReadFieldsFilterPipe_1 = __decorate([
         core_1.Pipe({
@@ -20874,7 +21118,6 @@ var read_complex_field_table_component_1 = __webpack_require__(12259);
 var read_complex_field_component_1 = __webpack_require__(47157);
 var write_complex_field_component_1 = __webpack_require__(94091);
 var ccd_cyapage_label_filter_pipe_1 = __webpack_require__(41392);
-var ccd_collection_table_value_case_fields_pipe_1 = __webpack_require__(18649);
 var ComplexModule = /** @class */ (function () {
     function ComplexModule() {
     }
@@ -20901,7 +21144,6 @@ var ComplexModule = /** @class */ (function () {
                 read_complex_field_raw_component_1.ReadComplexFieldRawComponent,
                 read_complex_field_table_component_1.ReadComplexFieldTableComponent,
                 read_complex_field_collection_table_component_1.ReadComplexFieldCollectionTableComponent,
-                ccd_collection_table_value_case_fields_pipe_1.CcdCollectionTableCaseFieldsFilterPipe,
                 ccd_cyapage_label_filter_pipe_1.CcdCYAPageLabelFilterPipe,
             ],
             entryComponents: [
@@ -20913,9 +21155,8 @@ var ComplexModule = /** @class */ (function () {
                 fields_filter_pipe_1.FieldsFilterPipe,
                 ccd_tab_fields_pipe_1.CcdTabFieldsPipe,
                 ccd_read_fields_filter_pipe_1.ReadFieldsFilterPipe,
-                ccd_cyapage_label_filter_pipe_1.CcdCYAPageLabelFilterPipe,
-                ccd_collection_table_value_case_fields_pipe_1.CcdCollectionTableCaseFieldsFilterPipe,
-                write_complex_field_component_1.WriteComplexFieldComponent
+                write_complex_field_component_1.WriteComplexFieldComponent,
+                ccd_cyapage_label_filter_pipe_1.CcdCYAPageLabelFilterPipe
             ]
         })
     ], ComplexModule);
@@ -21108,8 +21349,6 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
 var abstract_field_read_component_1 = __webpack_require__(73860);
 var sort_order_1 = __webpack_require__(88843);
-var definition_1 = __webpack_require__(11080);
-var class_transformer_1 = __webpack_require__(86631);
 var ReadComplexFieldCollectionTableComponent = /** @class */ (function (_super) {
     __extends(ReadComplexFieldCollectionTableComponent, _super);
     function ReadComplexFieldCollectionTableComponent() {
@@ -21119,17 +21358,13 @@ var ReadComplexFieldCollectionTableComponent = /** @class */ (function (_super)
         _this.keepOriginalOrder = function (a, b) { return a.key; };
         return _this;
     }
-    ReadComplexFieldCollectionTableComponent_1 = ReadComplexFieldCollectionTableComponent;
-    ReadComplexFieldCollectionTableComponent.isSortAscending = function (column) {
-        return !(column.sortOrder === sort_order_1.SortOrder.UNSORTED || column.sortOrder === sort_order_1.SortOrder.DESCENDING);
-    };
     ReadComplexFieldCollectionTableComponent.prototype.ngOnInit = function () {
         _super.prototype.ngOnInit.call(this);
         if (this.caseField.display_context_parameter
             && this.caseField.display_context_parameter.trim().startsWith('#TABLE(')) {
             var displayContextParameter = this.caseField.display_context_parameter.trim();
             var result = displayContextParameter.replace('#TABLE(', '');
-            this.columns = result.replace(')', '').split(',').map(function (c) { return c.trim(); });
+            this.columns = result.replace(')', '').split(',');
             var labelsVertical = {};
             var labelsHorizontal = {};
             var allLabels = {};
@@ -21141,6 +21376,40 @@ var ReadComplexFieldCollectionTableComponent = /** @class */ (function (_super)
             this.columnsAllLabels = allLabels;
         }
     };
+    ReadComplexFieldCollectionTableComponent.prototype.populateHorizontalLabels = function (labelsHorizontal, allLabels, labelsVertical) {
+        for (var _i = 0, _a = this.columns; _i < _a.length; _i++) {
+            var id = _a[_i];
+            labelsHorizontal[id.trim()] = allLabels[id.trim()];
+            labelsHorizontal[id.trim()].sortOrder = sort_order_1.SortOrder.UNSORTED;
+            delete labelsVertical[id.trim()];
+        }
+    };
+    ReadComplexFieldCollectionTableComponent.prototype.populateLabels = function (labelsVertical, allLabels) {
+        for (var _i = 0, _a = this.caseField.field_type.complex_fields; _i < _a.length; _i++) {
+            var obj = _a[_i];
+            if (obj.field_type.type === 'FixedList' ||
+                obj.field_type.type === 'MultiSelectList' ||
+                obj.field_type.type === 'FixedRadioList') {
+                labelsVertical[obj.id] = { label: obj.label, type: obj.field_type, caseField: obj };
+                allLabels[obj.id] = { label: obj.label, type: obj.field_type };
+            }
+            else if (obj.isComplex()) {
+                labelsVertical[obj.id] = { label: obj.label, type: obj.field_type.type, caseField: obj };
+                allLabels[obj.id] = { label: obj.label, type: obj.field_type.type, caseField: obj };
+            }
+            else {
+                labelsVertical[obj.id] = { label: obj.label, type: { type: obj.field_type.type }, caseField: obj };
+                allLabels[obj.id] = { label: obj.label, type: { type: obj.field_type.type }, caseField: obj };
+            }
+        }
+    };
+    ReadComplexFieldCollectionTableComponent.prototype.populateCaseFieldValuesIntoRows = function () {
+        for (var _i = 0, _a = this.caseField.value; _i < _a.length; _i++) {
+            var obj = _a[_i];
+            this.rows.push(obj.value);
+            this.isHidden.push(true);
+        }
+    };
     ReadComplexFieldCollectionTableComponent.prototype.getImage = function (row) {
         if (this.isHidden[row]) {
             return 'img/accordion-plus.png';
@@ -21162,18 +21431,21 @@ var ReadComplexFieldCollectionTableComponent = /** @class */ (function (_super)
         field.value = value;
         return true;
     };
+    ReadComplexFieldCollectionTableComponent.prototype.isNotBlank = function (value) {
+        return value !== null && value !== '';
+    };
     ReadComplexFieldCollectionTableComponent.prototype.addCaseReferenceValue = function (field, value) {
         field.value = { CaseReference: value };
         return field;
     };
-    ReadComplexFieldCollectionTableComponent.prototype.toCaseField = function (id, label, field_type, value) {
-        return class_transformer_1.plainToClassFromExist(new definition_1.CaseField(), {
-            id: id,
-            label: label,
-            display_context: 'READONLY',
-            value: value,
-            field_type: field_type
-        });
+    ReadComplexFieldCollectionTableComponent.prototype.isVerticleDataNotEmpty = function (row) {
+        var result = false;
+        for (var key in this.columnsVerticalLabel) {
+            if (this.rows[row][key]) {
+                result = true;
+            }
+        }
+        return result;
     };
     ReadComplexFieldCollectionTableComponent.prototype.sortRowsByColumns = function (column) {
         var shouldSortInAscendingOrder = this.columnsHorizontalLabel[column].sortOrder === sort_order_1.SortOrder.UNSORTED
@@ -21214,55 +21486,16 @@ var ReadComplexFieldCollectionTableComponent = /** @class */ (function (_super)
                 break;
         }
     };
-    ReadComplexFieldCollectionTableComponent.prototype.sortWidget = function (column) {
-        return ReadComplexFieldCollectionTableComponent_1.isSortAscending(column) ? '&#9660;' : '&#9650;';
-    };
-    ReadComplexFieldCollectionTableComponent.prototype.populateHorizontalLabels = function (labelsHorizontal, allLabels, labelsVertical) {
-        for (var _i = 0, _a = this.columns; _i < _a.length; _i++) {
-            var id = _a[_i];
-            var trimmedId = id.trim();
-            labelsHorizontal[trimmedId] = allLabels[trimmedId];
-            labelsHorizontal[trimmedId].sortOrder = sort_order_1.SortOrder.UNSORTED;
-            delete labelsVertical[trimmedId];
-        }
-    };
-    ReadComplexFieldCollectionTableComponent.prototype.populateLabels = function (labelsVertical, allLabels) {
-        for (var _i = 0, _a = this.caseField.field_type.complex_fields; _i < _a.length; _i++) {
-            var obj = _a[_i];
-            if (obj.field_type.type === 'FixedList' ||
-                obj.field_type.type === 'MultiSelectList' ||
-                obj.field_type.type === 'FixedRadioList') {
-                labelsVertical[obj.id] = { label: obj.label, type: obj.field_type, caseField: obj };
-                allLabels[obj.id] = { label: obj.label, type: obj.field_type };
-            }
-            else if (obj.isComplex()) {
-                labelsVertical[obj.id] = { label: obj.label, type: obj.field_type.type, caseField: obj };
-                allLabels[obj.id] = { label: obj.label, type: obj.field_type.type, caseField: obj };
-            }
-            else {
-                labelsVertical[obj.id] = { label: obj.label, type: { type: obj.field_type.type }, caseField: obj };
-                allLabels[obj.id] = { label: obj.label, type: { type: obj.field_type.type }, caseField: obj };
-            }
-        }
+    ReadComplexFieldCollectionTableComponent.prototype.isSortAscending = function (column) {
+        return !(column.sortOrder === sort_order_1.SortOrder.UNSORTED || column.sortOrder === sort_order_1.SortOrder.DESCENDING);
     };
-    ReadComplexFieldCollectionTableComponent.prototype.populateCaseFieldValuesIntoRows = function () {
-        for (var _i = 0, _a = this.caseField.value; _i < _a.length; _i++) {
-            var obj = _a[_i];
-            this.rows.push(obj.value);
-            this.isHidden.push(true);
-        }
+    ReadComplexFieldCollectionTableComponent.prototype.sortWidget = function (column) {
+        return this.isSortAscending(column) ? '&#9660;' : '&#9650;';
     };
-    ReadComplexFieldCollectionTableComponent.prototype.isVerticleDataNotEmpty = function (row) {
-        var result = false;
-        for (var key in this.columnsVerticalLabel) {
-            if (this.rows[row][key]) {
-                result = true;
-            }
-        }
-        return result;
+    ReadComplexFieldCollectionTableComponent.prototype.trackByIndex = function (index, obj) {
+        return index;
     };
-    var ReadComplexFieldCollectionTableComponent_1;
-    ReadComplexFieldCollectionTableComponent = ReadComplexFieldCollectionTableComponent_1 = __decorate([
+    ReadComplexFieldCollectionTableComponent = __decorate([
         core_1.Component({
             selector: 'ccd-read-complex-field-collection-table',
             template: __webpack_require__(9643),
@@ -24594,6 +24827,14 @@ var WriteMultiSelectListFieldComponent = /** @class */ (function (_super) {
             });
         }
         this.registerControl(this.checkboxes, true);
+        if (this.caseField.display_context && this.caseField.display_context === 'MANDATORY' && this.caseField.field_type
+            && this.caseField.field_type.type === 'MultiSelectList' && this.caseField.field_type.fixed_list_items.length > 0
+            && this.checkboxes.controls.length === 0) {
+            if (this.caseField.field_type.fixed_list_items[0].code) {
+                this.checkboxes.push(new forms_1.FormControl(this.caseField.field_type.fixed_list_items[0].code));
+                this.checkboxes.removeAt(0);
+            }
+        }
     };
     WriteMultiSelectListFieldComponent.prototype.onCheckChange = function (event) {
         var _this = this;
@@ -28717,6 +28958,232 @@ var ConditionalShowFormDirective = /** @class */ (function () {
 exports.ConditionalShowFormDirective = ConditionalShowFormDirective;
 
 
+/***/ }),
+
+/***/ 74015:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+var core_1 = __webpack_require__(57208);
+var forms_1 = __webpack_require__(92985);
+var case_field_model_1 = __webpack_require__(13930);
+var conditional_show_model_1 = __webpack_require__(5369);
+var fields_utils_1 = __webpack_require__(40980);
+var conditional_show_registrar_service_1 = __webpack_require__(49532);
+var grey_bar_service_1 = __webpack_require__(100);
+var operators_1 = __webpack_require__(19443);
+var ConditionalShowDirective = /** @class */ (function () {
+    function ConditionalShowDirective(el, fieldsUtils, registry, renderer, greyBarService) {
+        this.el = el;
+        this.fieldsUtils = fieldsUtils;
+        this.registry = registry;
+        this.renderer = renderer;
+        this.greyBarService = greyBarService;
+        this.contextFields = [];
+        this.greyBarEnabled = false;
+    }
+    ConditionalShowDirective.prototype.ngAfterViewInit = function () {
+        // Ensure this.caseField is actually a CaseField instance even if instantiated with {}
+        // this.caseField = FieldsUtils.convertToCaseField(this.caseField);
+        if (this.caseField.show_condition) {
+            this.condition = conditional_show_model_1.ShowCondition.getInstance(this.caseField.show_condition);
+            this.formGroup = this.formGroup || new forms_1.FormGroup({});
+            this.complexFormGroup = this.complexFormGroup || new forms_1.FormGroup({});
+            this.formField = this.complexFormGroup.get(this.caseField.id) || this.formGroup.get(this.caseField.id);
+            this.updateVisibility(this.getCurrentPagesReadOnlyAndFormFieldValues());
+            if (this.greyBarEnabled && this.greyBarService.wasToggledToShow(this.caseField.id)) {
+                this.greyBarService.showGreyBar(this.caseField, this.el);
+            }
+            this.subscribeToFormChanges();
+            this.registry.register(this);
+        }
+    };
+    ConditionalShowDirective.prototype.refreshVisibility = function () {
+        this.updateVisibility(this.getCurrentPagesReadOnlyAndFormFieldValues(), true);
+        this.subscribeToFormChanges();
+    };
+    ConditionalShowDirective.prototype.ngOnDestroy = function () {
+        this.unsubscribeFromFormChanges();
+    };
+    ConditionalShowDirective.prototype.subscribeToFormChanges = function () {
+        var _this = this;
+        this.unsubscribeFromFormChanges();
+        this.formChangesSubscription = this.formGroup
+            .valueChanges
+            .pipe(operators_1.debounceTime(200))
+            .subscribe(function (_) {
+            var shown = _this.updateVisibility(_this.getCurrentPagesReadOnlyAndFormFieldValues());
+            if (_this.greyBarEnabled && shown !== undefined) {
+                _this.updateGreyBar(shown);
+            }
+        });
+    };
+    /**
+     * returns whether the field visibility has changed, or undefined if not
+     */
+    ConditionalShowDirective.prototype.updateVisibility = function (fields, forced) {
+        if (forced === void 0) { forced = false; }
+        if (this.shouldToggleToHide(fields, forced)) {
+            this.onHide();
+            return false;
+        }
+        else if (this.shouldToggleToShow(fields)) {
+            this.onShow();
+            return true;
+        }
+    };
+    ConditionalShowDirective.prototype.onHide = function () {
+        if (this.formField) {
+            this.unsubscribeFromFormChanges();
+            this.formField.disable({ emitEvent: false });
+            this.subscribeToFormChanges();
+        }
+        this.hideField();
+        this.greyBarService.removeGreyBar(this.el);
+    };
+    ConditionalShowDirective.prototype.onShow = function () {
+        if (this.formField) {
+            this.unsubscribeFromFormChanges();
+            this.formField.enable({ emitEvent: false });
+            this.subscribeToFormChanges();
+        }
+        this.showField();
+        if (this.formField) {
+            this.checkHideShowCondition(this.caseField.id, this.formField);
+        }
+    };
+    ConditionalShowDirective.prototype.hideField = function () {
+        this.el.nativeElement.hidden = true;
+    };
+    ConditionalShowDirective.prototype.showField = function () {
+        this.el.nativeElement.hidden = false;
+    };
+    ConditionalShowDirective.prototype.shouldToggleToHide = function (fields, forced) {
+        return (!this.isHidden() || forced) && !this.condition.match(fields, this.buildPath());
+    };
+    ConditionalShowDirective.prototype.shouldToggleToShow = function (fields) {
+        return this.isHidden() && this.condition.match(fields, this.buildPath());
+    };
+    ConditionalShowDirective.prototype.buildPath = function () {
+        if (this.idPrefix) {
+            return this.idPrefix + this.caseField.id;
+        }
+        return this.caseField.id;
+    };
+    ConditionalShowDirective.prototype.getCurrentPagesReadOnlyAndFormFieldValues = function () {
+        var formFields = this.getFormFieldsValuesIncludingDisabled();
+        return this.fieldsUtils.mergeCaseFieldsAndFormFields(this.contextFields, formFields);
+    };
+    ConditionalShowDirective.prototype.getFormFieldsValuesIncludingDisabled = function () {
+        if (this.formGroupRawValue) {
+            return this.formGroupRawValue;
+        }
+        this.formGroupRawValue = this.formGroup.getRawValue();
+        return this.formGroupRawValue;
+    };
+    ConditionalShowDirective.prototype.isHidden = function () {
+        return this.el.nativeElement.hidden;
+    };
+    ConditionalShowDirective.prototype.unsubscribeFromFormChanges = function () {
+        if (this.formChangesSubscription) {
+            this.formChangesSubscription.unsubscribe();
+        }
+    };
+    // TODO This must be extracted to a generic service for traversing see RDM-2233
+    ConditionalShowDirective.prototype.checkHideShowCondition = function (key, aControl) {
+        var _this = this;
+        if (aControl instanceof forms_1.FormArray) { // We're in a collection
+            aControl.controls.forEach(function (formControl, i) {
+                _this.checkHideShowCondition('' + i, formControl);
+            });
+        }
+        else if (aControl instanceof forms_1.FormGroup) {
+            if (aControl.get('value')) { // Complex Field
+                var complexControl_1 = aControl.get('value');
+                Object.keys(complexControl_1.controls).forEach(function (controlKey) {
+                    _this.checkHideShowCondition(controlKey, complexControl_1.get(controlKey));
+                });
+            }
+            else if (aControl.controls) { // Special Field like AddressUK, AddressGlobal
+                Object.keys(aControl.controls).forEach(function (controlKey) {
+                    _this.checkHideShowCondition(controlKey, aControl.get(controlKey));
+                });
+            }
+        }
+        else if (aControl instanceof forms_1.FormControl) { // FormControl
+            if (aControl.invalid) {
+                this.registry.refresh();
+            }
+        }
+    };
+    ConditionalShowDirective.prototype.updateGreyBar = function (shown) {
+        if (shown) {
+            this.greyBarService.addToggledToShow(this.caseField.id);
+            this.greyBarService.showGreyBar(this.caseField, this.el);
+        }
+        else {
+            this.greyBarService.removeToggledToShow(this.caseField.id);
+            this.greyBarService.removeGreyBar(this.el);
+        }
+    };
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", case_field_model_1.CaseField)
+    ], ConditionalShowDirective.prototype, "caseField", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], ConditionalShowDirective.prototype, "idPrefix", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Array)
+    ], ConditionalShowDirective.prototype, "contextFields", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", forms_1.FormGroup)
+    ], ConditionalShowDirective.prototype, "formGroup", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Object)
+    ], ConditionalShowDirective.prototype, "greyBarEnabled", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", forms_1.FormGroup)
+    ], ConditionalShowDirective.prototype, "complexFormGroup", void 0);
+    ConditionalShowDirective = __decorate([
+        core_1.Directive({ selector: '[ccdConditionalShow]' })
+        /** Hides and shows the host element based on the show condition if the condition is not empty. Works on read only fields and form fields.
+         *  The show condition is evaluated on all the fields of the page. i.e. read only and form fields. When a form field is hidden, if its
+         *  initial value was changed then the field is cleared. Otherwise the original value is kept and will display next time the field is
+         *  shown. Evaluation of the show condition includes disabled fields, which can be on their initial value or empty. Executes on the
+         *  host field initialization and when any field of the form changes.
+         *  Collaborates with the GreyBarService to show a vertical grey bar when a field initially hidden on the page is shown. When returning
+         *  to the page after the page has been left, the grey bar has to be redisplayed. If instead on initial page load the field renders as
+         *  initially shown, the grey bar is not displayed.
+         */
+        ,
+        __metadata("design:paramtypes", [core_1.ElementRef,
+            fields_utils_1.FieldsUtils,
+            conditional_show_registrar_service_1.ConditionalShowRegistrarService,
+            core_1.Renderer2,
+            grey_bar_service_1.GreyBarService])
+    ], ConditionalShowDirective);
+    return ConditionalShowDirective;
+}());
+exports.ConditionalShowDirective = ConditionalShowDirective;
+
+
 /***/ }),
 
 /***/ 95844:
@@ -28732,6 +29199,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 var core_1 = __webpack_require__(57208);
+var conditional_show_directive_1 = __webpack_require__(74015);
 var fields_utils_1 = __webpack_require__(40980);
 var conditional_show_registrar_service_1 = __webpack_require__(49532);
 var grey_bar_service_1 = __webpack_require__(100);
@@ -28742,9 +29210,11 @@ var ConditionalShowModule = /** @class */ (function () {
     ConditionalShowModule = __decorate([
         core_1.NgModule({
             declarations: [
+                conditional_show_directive_1.ConditionalShowDirective,
                 conditional_show_form_directive_1.ConditionalShowFormDirective
             ],
             exports: [
+                conditional_show_directive_1.ConditionalShowDirective,
                 conditional_show_form_directive_1.ConditionalShowFormDirective
             ],
             providers: [
@@ -29076,6 +29546,7 @@ function __export(m) {
 }
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 __export(__webpack_require__(97965));
+__export(__webpack_require__(74015));
 __export(__webpack_require__(32225));
 __export(__webpack_require__(95844));
 
@@ -29100,10 +29571,12 @@ var ConditionalShowRegistrarService = /** @class */ (function () {
         this.registeredDirectives = [];
     }
     ConditionalShowRegistrarService.prototype.register = function (newDirective) {
+        // console.log('[', this.registeredDirectives.length, ']adding new directive', newDirective.caseField.id);
         this.registeredDirectives.push(newDirective);
     };
     ConditionalShowRegistrarService.prototype.refresh = function () {
         this.registeredDirectives.forEach(function (dir) {
+            // console.log('refreshing ', dir.caseField.id);
             dir.refreshVisibility();
         });
     };
@@ -34353,6 +34826,13 @@ var FormValueService = /** @class */ (function () {
             }
             else {
                 sanitisedObject[key] = this.sanitiseValue(rawObject[key]);
+                if (Array.isArray(sanitisedObject[key])) {
+                    // If the 'sanitised' array is empty, whereas the original array had 1 or more items
+                    // delete the property from the sanatised object
+                    if (sanitisedObject[key].length === 0 && rawObject[key].length > 0) {
+                        delete sanitisedObject[key];
+                    }
+                }
             }
         }
         return sanitisedObject;
@@ -34532,6 +35012,8 @@ var FormValueService = /** @class */ (function () {
                             }
                             break;
                         case 'Collection':
+                            // Check for valid collection data
+                            this.removeInvalidCollectionData(data, field);
                             // Get hold of the collection.
                             var collection = data[field.id];
                             // Check if we actually have a collection to work with.
@@ -34557,6 +35039,22 @@ var FormValueService = /** @class */ (function () {
         // Clear out any MultiSelect labels.
         FormValueService_1.removeMultiSelectLabels(data);
     };
+    /**
+     * Remove any empty or invalid arry with only id
+     *
+     * @param data The object tree of form values on which to perform the removal
+     * @param field {@link CaseField} domain model object for each field
+     */
+    FormValueService.prototype.removeInvalidCollectionData = function (data, field) {
+        if (data[field.id] && data[field.id].length > 0) {
+            for (var _i = 0, _a = data[field.id]; _i < _a.length; _i++) {
+                var objCollection = _a[_i];
+                if (Object.keys(objCollection).length === 1 && Object.keys(objCollection).indexOf('id') > -1) {
+                    data[field.id] = [];
+                }
+            }
+        }
+    };
     /**
      * Remove any empty collection fields where a value of greater than zero is specified in the field's {@link FieldType}
      * `min` attribute.
@@ -34980,7 +35478,7 @@ var LoadingService = /** @class */ (function () {
     }
     Object.defineProperty(LoadingService.prototype, "isLoading", {
         get: function () {
-            return this.loading.asObservable().pipe(operators_1.distinctUntilChanged());
+            return this.loading.pipe(operators_1.distinctUntilChanged());
         },
         enumerable: true,
         configurable: true
@@ -37202,6 +37700,21 @@ exports.push([module.id, ".event-trigger{width:auto;margin-top:40px;margin-botto
 // exports
 
 
+/***/ }),
+
+/***/ 68929:
+/***/ ((module, exports, __webpack_require__) => {
+
+exports = module.exports = __webpack_require__(9252)(false);
+// imports
+
+
+// module
+exports.push([module.id, ".spinner-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,0.5);z-index:99}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #dddddd;border-top:10px solid #000000;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}\n", ""]);
+
+// exports
+
+
 /***/ }),
 
 /***/ 47029:
@@ -63289,7 +63802,7 @@ module.exports = "<ng-container ccdConditionalShowForm [formGroup]=\"formGroup\"
 /***/ 61865:
 /***/ ((module) => {
 
-module.exports = "<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label}}</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']\"></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\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)\" class=\"validation-error\">{{validationError.message}}</a>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"status\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    Something went wrong\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>We're working to fix the problem. Try again shortly.</p>\n    <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n  </div>\n</div>\n<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"status\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading-3\">\n    The event could not be created\n  </h3>\n  <p>{{error.message}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <fieldset id=\"fieldset-case-data\">\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\" [disabled]=\"!(hasPreviousPage$ | async)\" (click)=\"toPreviousPage()\">\n        Previous\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText}}</button>\n    </div>\n\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\">{{getCancelText()}}</a></p>\n\n  </form>\n</div>\n"
+module.exports = "<ccd-loading-spinner  *ngIf=\"showSpinner\"></ccd-loading-spinner>\n<ng-container *ngIf=\"currentPage\">\n  <h1 *ngIf=\"!currentPage.label\" class=\"govuk-heading-l\">{{eventTrigger.name}}</h1>\n  <ng-container *ngIf=\"currentPage.label\">\n    <span class=\"govuk-caption-l\">{{ eventTrigger.name}}</span>\n    <h1 class=\"govuk-heading-l\">{{currentPage.label}}</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']\"></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\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)\" class=\"validation-error\">{{validationError.message}}</a>\n      </li>\n    </ul>\n  </div>\n</div>\n\n<!-- Generic error heading and error message to be displayed only if there are no specific callback errors or warnings, or no error details -->\n<div *ngIf=\"error && !(error.callbackErrors || error.callbackWarnings || error.details)\" class=\"error-summary\"\n     role=\"status\" aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n\n  <h1 class=\"heading-h1 error-summary-heading\" id=\"edit-case-event_error-summary-heading\">\n    Something went wrong\n  </h1>\n  <div class=\"govuk-error-summary__body\" id=\"edit-case-event_error-summary-body\">\n    <p>We're working to fix the problem. Try again shortly.</p>\n    <p><a href=\"get-help\" target=\"_blank\">Contact us</a> if you're still having problems.</p>\n  </div>\n</div>\n<!-- Event error heading and error message to be displayed if there are specific error details -->\n<div *ngIf=\"error && error.details\" class=\"error-summary\" role=\"status\"\n     aria-labelledby=\"edit-case-event_error-summary-heading\" tabindex=\"-1\">\n  <h3 class=\"heading-h3 error-summary-heading\" id=\"edit-case-event_error-summary-heading-3\">\n    The event could not be created\n  </h3>\n  <p>{{error.message}}</p>\n  <ul *ngIf=\"error.details?.field_errors\" class=\"error-summary-list\">\n    <li *ngFor=\"let fieldError of error.details.field_errors\" class=\"ccd-error-summary-li\">{{fieldError.message}}</li>\n  </ul>\n</div>\n<ccd-callback-errors\n  [triggerTextContinue]=\"triggerTextStart\"\n  [triggerTextIgnore]=\"triggerTextIgnoreWarnings\"\n  [callbackErrorsSubject]=\"callbackErrorsSubject\"\n  (callbackErrorsContext)=\"callbackErrorsNotify($event)\">\n</ccd-callback-errors>\n<div class=\"width-50\">\n  <form *ngIf=\"currentPage\" class=\"form\" [formGroup]=\"editForm\" (submit)=\"submit()\">\n    <fieldset id=\"fieldset-case-data\">\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\" [disabled]=\"!(hasPreviousPage$ | async)\" (click)=\"toPreviousPage()\">\n        Previous\n      </button>\n      <button class=\"button\" type=\"submit\" [disabled]=\"submitting()\">{{triggerText}}</button>\n    </div>\n\n    <p class=\"cancel\"><a (click)=\"cancel()\" href=\"javascript:void(0)\">{{getCancelText()}}</a></p>\n\n  </form>\n</div>\n"
 
 /***/ }),
 
@@ -63352,7 +63865,7 @@ module.exports = "<div *ngIf=\"isDataLoaded()\">\n    <ng-container [ngSwitch]=\
 /***/ 80734:
 /***/ ((module) => {
 
-module.exports = "<form>\n  <div>\n    <cut-alert type=\"information\">This case requires {{accessType | lowercase}} access.<br />\n      <ng-container *ngIf=\"accessType === 'CHALLENGED'\">This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes.</ng-container>\n      <ng-container *ngIf=\"accessType === 'SPECIFIC'\">This means it's outside your jurisdiction and requires authorisation. If you request access to the case, it will be logged for auditing purposes.</ng-container>\n    </cut-alert>\n    <h1 class=\"heading-h1\">#{{ caseDetails.case_id | ccdCaseReference}}</h1>\n    <h2 class=\"govuk-heading-m\">Case details</h2>\n    <dl class=\"govuk-summary-list\">\n      <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.basicFields?.caseNameHmctsInternal\">\n        <dt class=\"govuk-summary-list__key summary-key\">Case name</dt>\n        <dd class=\"govuk-summary-list__value\">{{caseDetails.basicFields.caseNameHmctsInternal}}</dd>\n      </div>\n      <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.case_type?.jurisdiction?.name\">\n        <dt class=\"govuk-summary-list__key summary-key\">Service</dt>\n        <dd class=\"govuk-summary-list__value\">{{caseDetails.case_type.jurisdiction.name}}</dd>\n      </div>\n      <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.state?.description\">\n        <dt class=\"govuk-summary-list__key summary-key\">State</dt>\n        <dd class=\"govuk-summary-list__value\">{{caseDetails.state.description}}</dd>\n      </div>\n      <div class=\"govuk-summary-list__row\" *ngIf=\"courtOrHearingCentre\">\n        <dt class=\"govuk-summary-list__key summary-key\">Court or hearing centre</dt>\n        <dd class=\"govuk-summary-list__value\">{{courtOrHearingCentre | titlecase}}</dd>\n      </div>\n\n      <div class=\"govuk-summary-list__row\" *ngIf=\"accessType\">\n        <dt class=\"govuk-summary-list__key summary-key\">Access</dt>\n        <dd class=\"govuk-summary-list__value\">{{accessType | titlecase}}</dd>\n      </div>\n    </dl>\n  </div>\n\n  <button class=\"govuk-button govuk-!-margin-right-3\">Request access</button>\n</form>\n<a class=\"govuk-body\" (click)=\"onCancel()\" href=\"javascript:void(0)\">Cancel</a>\n"
+module.exports = "<div>\n  <cut-alert type=\"information\">This case requires {{accessType | lowercase}} access.<br />\n    <ng-container *ngIf=\"accessType === 'CHALLENGED'\">This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes.</ng-container>\n    <ng-container *ngIf=\"accessType === 'SPECIFIC'\">This means it's outside your jurisdiction and requires authorisation. If you request access to the case, it will be logged for auditing purposes.</ng-container>\n  </cut-alert>\n  <h1 class=\"heading-h1\">#{{ caseDetails.case_id | ccdCaseReference}}</h1>\n  <h2 class=\"govuk-heading-m\">Case details</h2>\n  <dl class=\"govuk-summary-list\">\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.basicFields?.caseNameHmctsInternal\">\n      <dt class=\"govuk-summary-list__key summary-key\">Case name</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.basicFields.caseNameHmctsInternal}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.case_type?.jurisdiction?.name\">\n      <dt class=\"govuk-summary-list__key summary-key\">Service</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.case_type.jurisdiction.name}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"caseDetails.state?.description\">\n      <dt class=\"govuk-summary-list__key summary-key\">State</dt>\n      <dd class=\"govuk-summary-list__value\">{{caseDetails.state.description}}</dd>\n    </div>\n    <div class=\"govuk-summary-list__row\" *ngIf=\"courtOrHearingCentre\">\n      <dt class=\"govuk-summary-list__key summary-key\">Court or hearing centre</dt>\n      <dd class=\"govuk-summary-list__value\">{{courtOrHearingCentre | titlecase}}</dd>\n    </div>\n\n    <div class=\"govuk-summary-list__row\" *ngIf=\"accessType\">\n      <dt class=\"govuk-summary-list__key summary-key\">Access</dt>\n      <dd class=\"govuk-summary-list__value\">{{accessType | titlecase}}</dd>\n    </div>\n  </dl>\n</div>\n<div class=\"govuk-button-group\">\n  <button class=\"govuk-button govuk-!-margin-right-3\" [routerLink]=\"getRequestUrl(accessType)\"> Request access </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)\"> Cancel </a>\n    </p>\n  </div>\n</div>\n"
 
 /***/ }),
 
@@ -63384,6 +63897,13 @@ module.exports = "<!-- Generic error heading and error message to be displayed o
 
 /***/ }),
 
+/***/ 5856:
+/***/ ((module) => {
+
+module.exports = "<exui-error-message\n  *ngIf=\"formGroup.invalid && submitted\"\n  [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\"\n  >This case requires specific access.<br />This means it's outside your\n  jurisdiction and requires authorisation. If you request access to the case, it\n  will be logged for auditing purposes.</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 }}\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\n          </span>\n        </summary>\n        <div\n          class=\"govuk-details__text\"\n          aria-hidden=\"true\">\n          <p class=\"govuk-body\">You could include:</p>\n          <ul class=\"govuk-list govuk-list--bullet\">\n            <li>the case reference of the linked case</li>\n            <li>how long you require access to this case</li>\n            <li>any other reasons why you require access</li>\n          </ul>\n        </div>\n      </details>\n\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{ hint }}\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 }}\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\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\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n"
+
+/***/ }),
+
 /***/ 24288:
 /***/ ((module) => {
 
@@ -63461,6 +63981,13 @@ module.exports = "<form *ngIf=\"triggers && triggers.length\" class=\"event-trig
 
 /***/ }),
 
+/***/ 31851:
+/***/ ((module) => {
+
+module.exports = "<div class=\"spinner-container\">\n    <div class=\"spinner-inner-container\">\n        <p>{{loadingText}}</p>\n        <div class=\"spinner\" style=\"margin: auto;\"></div>\n    </div>\n</div>"
+
+/***/ }),
+
 /***/ 6961:
 /***/ ((module) => {
 
@@ -63534,7 +64061,7 @@ module.exports = "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"pan
 /***/ 9643:
 /***/ ((module) => {
 
-module.exports = "<div class=\"complex-panel\" [hidden]=\"caseField.hidden\">\n  <dl class=\"complex-panel-title\">\n    <dt><span class=\"text-16\">{{caseField.label}}</span></dt>\n    <dd></dd>\n  </dl>\n  <table class=\"complex-panel-table\">\n    <tbody>\n    <!-- <COMPLEX table field header>-->\n    <tr>\n      <th *ngFor=\"let heading of columns\" scope=\"col\">\n        <span class=\"text-16\">{{columnsAllLabels[heading].label}}</span>\n        <a href=\"javascript:void(0)\"\n           (click)=\"sortRowsByColumns(heading)\"\n           class=\"sort-widget\"\n           [innerHTML]=\"sortWidget(columnsAllLabels[heading])\"></a>\n      </th>\n      <th></th>\n    </tr>\n    <!-- </COMPLEX table field header>-->\n    <ng-container *ngFor=\"let item of rows; let i = index;\">\n      <!-- <COMPLEX table collapsed view>-->\n      <tr class=\"new-table-row accordion-heading\" (click)=\"isHidden[i] = !isHidden[i]\"\n          [class.last-accordion]=\"isHidden[i]\">\n        <ng-container *ngFor=\"let heading of columns\">\n          <td class=\"text-16\">\n            <div *ngIf=\"item[heading]; else showEmptyTd\">\n              <ccd-field-read\n                [caseField]=\"toCaseField(heading, item[heading].label, columnsHorizontalLabel[heading].type, item[heading])\"\n                [context]=\"context\"></ccd-field-read>\n            </div>\n            <ng-template #showEmptyTd>\n              <div>&nbsp;</div>\n            </ng-template>\n          </td>\n        </ng-container>\n        <td>\n          <div style=\"float: right;\">\n            <a href=\"javascript:void(0)\"> <img src=\"{{ getImage(i) }}\" class=\"accordion-image\"/></a>\n          </div>\n        </td>\n      </tr>\n      <!-- </COMPLEX table collapsed view>-->\n      <!-- <COMPLEX table expanded view>-->\n      <tr [hidden]=\"isHidden[i]\">\n        <td [colSpan]=\"columns.length + 1\">\n          <table class=\"complex-panel-table\">\n            <tbody>\n            <ng-container\n              *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue: keepOriginalOrder | ccdCollectionTableCaseFieldsFilter: caseField: rows[i] | ccdReadFieldsFilter:true :undefined :true\">\n              <!-- <COMPLEX table expandable body simple field>-->\n              <tr class=\"complex-panel-simple-field accordion-body\" *ngIf=\"item[vLabel.id]\" [hidden]=\"vLabel.hidden\">\n                <th scope=\"col\"><span class=\"text-16\">{{vLabel.label}}</span></th>\n                <td *ngIf=\"vLabel['type'] !== 'Complex'\" class=\"text-16\">\n                  <ccd-field-read [caseField]=\"toCaseField('', vLabel.label, vLabel.field_type, item[vLabel.id])\"\n                                  [context]=\"context\"></ccd-field-read>\n                </td>\n              </tr>\n              <!-- </COMPLEX table expandable body simple field>-->\n\n              <!-- <COMPLEX table expandable body complex field>-->\n              <tr *ngIf=\"vLabel['type'] === 'Complex' && addCaseFieldValue(vLabel, item[vLabel.id])\" [hidden]=\"vLabel.hidden\">\n                <td colspan=\"2\">\n                  <ng-container *ngFor=\"let caseField of vLabel | ccdReadFieldsFilter:true :undefined :true\">\n                      <tr class=\"complex-panel-compound-field\" *ngIf=\"(caseField | ccdIsCompound); else SimpleRow\" [hidden]=\"caseField\">\n                        <td colspan=\"2\">\n                          <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                        </td>\n                      </tr>\n                      <ng-template #SimpleRow>\n                        <tr class=\"complex-panel-nested-field\" [hidden]=\"caseField.hidden\">\n                          <th scope=\"col\"><span class=\"text-16\">{{caseField.label}}</span></th>\n                          <td *ngIf=\"!item[vLabel.id].hasOwnProperty('CaseReference')\">\n                            <span class=\"text-16\"><ccd-field-read [caseField]=\"caseField\" [context]=\"context\"></ccd-field-read></span>\n                          </td>\n                          <td *ngIf=\"item[vLabel.id].hasOwnProperty('CaseReference')\">\n                            <ccd-read-case-link-field [caseField]=\"addCaseReferenceValue(caseField, item[vLabel.id].CaseReference)\" [context]=\"context\"></ccd-read-case-link-field>\n                          </td>\n                        </tr>\n                      </ng-template>\n                  </ng-container>\n                </td>\n              </tr>\n              <!-- <COMPLEX table expandable body complex field>-->\n            </ng-container>\n            </tbody>\n          </table>\n        </td>\n      </tr>\n      <!-- </COMPLEX table expanded view>-->\n    </ng-container>\n    </tbody>\n  </table>\n</div>\n"
+module.exports = " <div class=\"complex-panel\" [hidden]=\"caseField.hidden\">\n      <dl class=\"complex-panel-title\"><dt><span class=\"text-16\">{{caseField.label}}</span></dt><dd></dd></dl>\n      <table class=\"complex-panel-table\">\n        <tbody>\n        <!-- <COMPLEX table field header>-->\n        <tr>\n          <ng-container *ngFor=\"let heading of columns\">\n            <ng-container *ngFor=\"let name of columnsAllLabels | keyvalue:keepOriginalOrder\">\n              <th *ngIf=\"heading.trim() == name.key\">\n                <span class=\"text-16\">{{name.value.label}}</span>\n                <a href=\"javascript:void(0)\" (click)=\"sortRowsByColumns(name.key)\"  class=\"sort-widget\" [innerHTML]=\"sortWidget(name.value)\"></a>\n              </th>\n            </ng-container>\n          </ng-container>\n          <th></th>\n        </tr>\n        <!-- </COMPLEX table field header>-->\n        <ng-container *ngFor=\"let item of rows; let i = index; trackBy:trackByIndex;\" >\n          <!-- <COMPLEX table collapsed view>-->\n          <tr class=\"new-table-row accordion-heading\" (click)=\"isHidden[i] = !isHidden[i]\">\n            <ng-container *ngFor=\"let heading of columns\">\n              <ng-container  *ngFor=\"let name of item | keyvalue\">\n                <td *ngIf=\"heading.trim() == name.key\" class=\"text-16\">\n                  <div *ngIf=\"name.value;else showEmptyTd\">\n                    <ccd-field-read [caseField]=\"{\n                      id: name.key,\n                      label: name.value.label,\n                      field_type: this.columnsHorizontalLabel[name.key].type,\n                      value: name.value\n                    }\" [context]=\"context\"></ccd-field-read>\n                  </div>\n                  <ng-template #showEmptyTd><div>&nbsp;</div></ng-template>\n                </td>\n\n              </ng-container>\n            </ng-container>\n              <td>\n                <div style=\"float: right;\">\n                  <a href=\"javascript:void(0)\"> <img src=\"{{ getImage(i) }}\" class=\"accordion-image\"/></a>\n                </div>\n               </td>\n          </tr>\n          <!-- </COMPLEX table collapsed view>-->\n          <!-- <COMPLEX table expanded view>-->\n          <tr [hidden]=\"isHidden[i]\">\n            <td [colSpan]=\"columns.length +1\">\n              <table class=\"complex-panel-table\">\n                <tbody>\n                  \n                <ng-container *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue:keepOriginalOrder\">\n                  <ng-container  *ngFor=\"let name of item | keyvalue\">\n                    <ng-container *ngIf=\"vLabel.key == name.key && isNotBlank(name.value)\" >\n                    <!-- <COMPLEX table expandable body simple field>-->\n\n                    <tr class=\"complex-panel-simple-field accordion-body\"\n                        ccdConditionalShow [caseField]=\"vLabel.value.caseField\" [contextFields]=\"caseField | ccdFieldsFilter :true :i\">\n                      <th><span class=\"text-16\">{{vLabel.value.label}}</span></th>\n                      <td *ngIf=\"vLabel.value.type !== 'Complex'\" class=\"text-16\">\n                        <ccd-field-read [caseField]=\"{\n                          id: name.key,\n                          label: vLabel.label,\n                          field_type: vLabel.value.caseField.field_type,\n                          value: name.value\n                        }\" [context]=\"context\"></ccd-field-read>\n                      </td>\n                    </tr>\n                      \n                    <!-- </COMPLEX table expandable body simple field>-->\n                    <!-- <COMPLEX table expandable body complex field>-->\n\n                    <tr *ngIf=\"vLabel.value.type === 'Complex' && addCaseFieldValue(vLabel.value.caseField, name.value)\">\n                      <td colspan=\"2\">\n                        <ng-container *ngFor=\"let field of vLabel.value.caseField | ccdFieldsFilter\">\n                          <ng-container *ngIf=\"(field | ccdIsCompound); else SimpleRow\">\n                            <tr class=\"complex-panel-compound-field\" ccdConditionalShow ccdLabelSubstitutor [caseField]=\"field\"\n                                [contextFields]=\"vLabel.value.caseField | ccdFieldsFilter\">\n                              <td colspan=\"2\">\n                                <span class=\"text-16\"><ccd-field-read [caseField]=\"field\" [context]=\"context\"></ccd-field-read></span>\n                              </td>\n                            </tr>\n                          </ng-container>\n                          <ng-template #SimpleRow>\n                            <tr class=\"complex-panel-nested-field\" ccdConditionalShow ccdLabelSubstitutor [caseField]=\"field\"\n                                [contextFields]=\"vLabel.value.caseField  | ccdFieldsFilter\">\n                              <th><span class=\"text-16\">{{field.label}}</span></th>\n                              <td *ngIf=\"!name.value.hasOwnProperty('CaseReference')\">\n                                <span class=\"text-16\"><ccd-field-read [caseField]=\"field\" [context]=\"context\"></ccd-field-read></span>\n                              </td>\n                              <td *ngIf=\"name.value.hasOwnProperty('CaseReference')\">\n                                <ccd-read-case-link-field [caseField]=\"addCaseReferenceValue(field, name.value.CaseReference)\" [context]=\"context\"></ccd-read-case-link-field>\n                              </td>\n                            </tr>\n                          </ng-template>\n                        </ng-container>\n                      </td>\n                    </tr>\n                    <!-- <COMPLEX table expandable body complex field>-->\n                  </ng-container>\n                  </ng-container>\n                </ng-container>\n                </tbody>\n              </table>\n            </td>\n          </tr>\n          <!-- </COMPLEX table expanded view>-->\n        </ng-container>\n        </tbody>\n      </table>\n    </div>\n"
 
 /***/ }),
 
@@ -64136,6 +64663,21 @@ function getStrategyDelay(consecutiveErrorsCount, options) {
         }
     
 
+/***/ }),
+
+/***/ 6431:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+        var result = __webpack_require__(68929);
+
+        if (typeof result === "string") {
+            module.exports = result;
+        } else {
+            module.exports = result.toString();
+        }
+    
+
 /***/ }),
 
 /***/ 5047: