@hmcts/rpx-xui-common-lib 2.0.16-pre-release-accessibility-page-reference-link → 2.0.17-node-store-caseworkers

package/fesm2020/hmcts-rpx-xui-common-lib.mjs

@@ -2129,28 +2129,6 @@ function getValues(options, values) {
     }, []);
 }
 
-const getAllCaseworkersFromServices = (caseworkersByService) => {
-    let allCaseworkers = [];
-    caseworkersByService.forEach(caseworkerListByService => {
-        allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
-    });
-    return allCaseworkers;
-};
-const getSessionStorageKeyForServiceId = (serviceId) => {
-    return `${serviceId}-caseworkers`;
-};
-const getCaseworkers = (serviceId, sessionStorageService) => {
-    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
-    const value = sessionStorageService.getItem(sessionKey);
-    if (value) {
-        return JSON.parse(value);
-    }
-};
-const setCaseworkers = (serviceId, caseworkers, sessionStorageService) => {
-    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
-    sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
-};
-
 class SessionStorageService {
     /**
      * Get an item from the session storage.
@@ -2216,35 +2194,8 @@ class FindAPersonService {
         }
         this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
         const fullServices = searchOptions.services;
-        const storedServices = [];
-        const newServices = [];
-        const storedCaseworkersByService = [];
-        fullServices.forEach(serviceId => {
-            const serviceKey = getSessionStorageKeyForServiceId(serviceId);
-            if (this.sessionStorageService.getItem(serviceKey)) {
-                storedServices.push(serviceId);
-                storedCaseworkersByService.push({ service: serviceId, caseworkers: JSON.parse(this.sessionStorageService.getItem(serviceKey)) });
-            }
-            else {
-                newServices.push(serviceId);
-            }
-        });
-        // if all services are stored then return the stored caseworkers by service
-        if (storedServices.length === fullServices.length) {
-            const storedCaseworkers = getAllCaseworkersFromServices(storedCaseworkersByService);
-            return of$1(this.searchInCaseworkers(storedCaseworkers, searchOptions));
-        }
-        // all serviceIds passed in as node layer getting used anyway and caseworkers also stored there
-        return this.http.post('/workallocation/retrieveCaseWorkersForServices', { fullServices }).pipe(tap(caseworkersByService => {
-            caseworkersByService.forEach(caseworkerListByService => {
-                // for any new service, ensure that they are then stored in the session
-                if (newServices.includes(caseworkerListByService.service)) {
-                    setCaseworkers(caseworkerListByService.service, caseworkerListByService.caseworkers, this.sessionStorageService);
-                }
-            });
-        }), map(caseworkersByService => {
-            const givenCaseworkers = getAllCaseworkersFromServices(caseworkersByService);
-            return this.searchInCaseworkers(givenCaseworkers, searchOptions);
+        return this.http.post('/workallocation/caseworker/getUsersByServiceName', { services: fullServices, term: searchOptions.searchTerm }).pipe(map(caseworkers => {
+            return this.searchInCaseworkers(caseworkers, searchOptions);
         }));
     }
     mapCaseworkers(caseworkers, roleCategory) {
@@ -2276,11 +2227,9 @@ class FindAPersonService {
                 roleCategory = RoleCategory.CTSC;
             }
         }
-        const searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
         const people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
-        const finalPeopleList = people.filter(person => person && person.name && person.name.toLowerCase().includes(searchTerm));
-        return searchOptions.userIncluded ? finalPeopleList.filter(person => person && person.id !== this.assignedUser)
-            : finalPeopleList.filter(person => person && person.id !== this.userId && person.id !== this.assignedUser);
+        return searchOptions.userIncluded ? people.filter(person => person && person.id !== this.assignedUser)
+            : people.filter(person => person && person.id !== this.userId && person.id !== this.assignedUser);
     }
     searchJudicial(value, serviceId) {
         return this.http.post('api/prd/judicial/getJudicialUsersSearch', { searchString: value, serviceCode: serviceId });
@@ -2550,19 +2499,19 @@ LocationService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: Location
             }]
     }], function () { return [{ type: i1$1.HttpClient }]; }, null); })();
 
-function SearchLocationComponent_ng_container_4_ng_container_1_mat_option_1_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-option", 6);
-    i0.ɵɵlistener("onSelectionChange", function SearchLocationComponent_ng_container_4_ng_container_1_mat_option_1_Template_mat_option_onSelectionChange_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r8); const location_r6 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r7.onSelectedLocation(location_r6)); });
+function SearchLocationComponent_ng_container_5_ng_container_1_mat_option_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mat-option", 7);
+    i0.ɵɵlistener("onSelectionChange", function SearchLocationComponent_ng_container_5_ng_container_1_mat_option_1_Template_mat_option_onSelectionChange_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r9); const location_r7 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r8.onSelectedLocation(location_r7)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const location_r6 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(3);
+    const location_r7 = ctx.$implicit;
+    const ctx_r5 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", location_r6[ctx_r4.propertyNameFilter], " ");
+    i0.ɵɵtextInterpolate1(" ", location_r7[ctx_r5.propertyNameFilter], " ");
 } }
-function SearchLocationComponent_ng_container_4_ng_container_1_mat_option_2_Template(rf, ctx) { if (rf & 1) {
+function SearchLocationComponent_ng_container_5_ng_container_1_mat_option_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "mat-option");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
@@ -2571,26 +2520,26 @@ function SearchLocationComponent_ng_container_4_ng_container_1_mat_option_2_Temp
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "No results found"));
 } }
-function SearchLocationComponent_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function SearchLocationComponent_ng_container_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SearchLocationComponent_ng_container_4_ng_container_1_mat_option_1_Template, 2, 1, "mat-option", 5);
-    i0.ɵɵtemplate(2, SearchLocationComponent_ng_container_4_ng_container_1_mat_option_2_Template, 3, 3, "mat-option", 4);
+    i0.ɵɵtemplate(1, SearchLocationComponent_ng_container_5_ng_container_1_mat_option_1_Template, 2, 1, "mat-option", 6);
+    i0.ɵɵtemplate(2, SearchLocationComponent_ng_container_5_ng_container_1_mat_option_2_Template, 3, 3, "mat-option", 5);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const filteredList_r2 = i0.ɵɵnextContext().ngIf;
+    const filteredList_r3 = i0.ɵɵnextContext().ngIf;
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", filteredList_r2);
+    i0.ɵɵproperty("ngForOf", filteredList_r3);
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", filteredList_r2.length === 0);
+    i0.ɵɵproperty("ngIf", filteredList_r3.length === 0);
 } }
-function SearchLocationComponent_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+function SearchLocationComponent_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SearchLocationComponent_ng_container_4_ng_container_1_Template, 3, 2, "ng-container", 4);
+    i0.ɵɵtemplate(1, SearchLocationComponent_ng_container_5_ng_container_1_Template, 3, 2, "ng-container", 5);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const filteredList_r2 = ctx.ngIf;
+    const filteredList_r3 = ctx.ngIf;
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", filteredList_r2 && filteredList_r2.length >= 0);
+    i0.ɵɵproperty("ngIf", filteredList_r3 && filteredList_r3.length >= 0);
 } }
 class SearchLocationComponent {
     get reset() {
@@ -2620,6 +2569,7 @@ class SearchLocationComponent {
         this.term = '';
         this.pReset = true;
         this.debounceTimeInput = 300;
+        this.previousValue = '';
     }
     ngOnInit() {
         const searchInputChanges$ = this.searchTermFormControl.valueChanges
@@ -2684,28 +2634,58 @@ class SearchLocationComponent {
         }
         return locations.filter(location => !selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(location.epimms_id) && location[this.propertyNameFilter]);
     }
+    removeInvalidString(formInputValue) {
+        if (!this.isCharacterValid(formInputValue)) {
+            formInputValue.preventDefault();
+        }
+    }
+    isCharacterValid(event) {
+        let pressed = undefined;
+        if (event.key !== undefined) {
+            pressed = event.key;
+            if (pressed.length > 1) {
+                switch (pressed) {
+                    case 'Tab':
+                        return true;
+                    case 'ArrowRight':
+                        return true;
+                    case 'ArrowLeft':
+                        return true;
+                    case 'Backspace':
+                        return true;
+                    case 'Enter':
+                        return true;
+                    default: return false;
+                }
+            }
+        }
+        else if (event.keyCode !== undefined) {
+            pressed = String.fromCharCode(event.keyCode);
+        }
+        return pressed && (/[a-zA-Z \s'-]/).test(pressed);
+    }
 }
 SearchLocationComponent.allLocationAPI = `api/locations/getLocations`;
 SearchLocationComponent.ɵfac = function SearchLocationComponent_Factory(t) { return new (t || SearchLocationComponent)(i0.ɵɵdirectiveInject(LocationService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(RefDataService)); };
-SearchLocationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLocationComponent, selectors: [["exui-search-location"]], inputs: { form: "form", field: "field", disabled: "disabled", singleMode: "singleMode", locationType: "locationType", serviceIds: "serviceIds", submitted: "submitted", bookingCheck: "bookingCheck", selectedLocations: "selectedLocations", propertyNameFilter: "propertyNameFilter", delay: "delay", reset: "reset" }, outputs: { locationSelected: "locationSelected", locationTermSearchInputChanged: "locationTermSearchInputChanged", searchLocationChanged: "searchLocationChanged" }, decls: 6, vars: 6, consts: [[1, "auto-complete-container"], ["id", "inputLocationSearch", 1, "govuk-input", 3, "formControl", "matAutocomplete", "input"], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend"], ["autoSearchLocation", "matAutocomplete"], [4, "ngIf"], [3, "onSelectionChange", 4, "ngFor", "ngForOf"], [3, "onSelectionChange"]], template: function SearchLocationComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "input", 1);
-        i0.ɵɵlistener("input", function SearchLocationComponent_Template_input_input_1_listener() { return ctx.onInput(); });
+SearchLocationComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLocationComponent, selectors: [["exui-search-location"]], inputs: { form: "form", field: "field", disabled: "disabled", singleMode: "singleMode", locationType: "locationType", serviceIds: "serviceIds", submitted: "submitted", bookingCheck: "bookingCheck", selectedLocations: "selectedLocations", propertyNameFilter: "propertyNameFilter", delay: "delay", reset: "reset" }, outputs: { locationSelected: "locationSelected", locationTermSearchInputChanged: "locationTermSearchInputChanged", searchLocationChanged: "searchLocationChanged" }, decls: 7, vars: 6, consts: [[1, "auto-complete-container"], ["id", "inputLocationSearch", 1, "govuk-input", 3, "formControl", "matAutocomplete", "keydown", "input"], ["char", ""], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend"], ["autoSearchLocation", "matAutocomplete"], [4, "ngIf"], [3, "onSelectionChange", 4, "ngFor", "ngForOf"], [3, "onSelectionChange"]], template: function SearchLocationComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "input", 1, 2);
+        i0.ɵɵlistener("keydown", function SearchLocationComponent_Template_input_keydown_1_listener($event) { return ctx.removeInvalidString($event); })("input", function SearchLocationComponent_Template_input_input_1_listener() { return ctx.onInput(); });
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(2, "mat-autocomplete", 2, 3);
-        i0.ɵɵtemplate(4, SearchLocationComponent_ng_container_4_Template, 2, 1, "ng-container", 4);
-        i0.ɵɵpipe(5, "async");
+        i0.ɵɵelementStart(3, "mat-autocomplete", 3, 4);
+        i0.ɵɵtemplate(5, SearchLocationComponent_ng_container_5_Template, 2, 1, "ng-container", 5);
+        i0.ɵɵpipe(6, "async");
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
-        const _r0 = i0.ɵɵreference(3);
+        const _r1 = i0.ɵɵreference(4);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("formControl", ctx.searchTermFormControl)("matAutocomplete", _r0);
+        i0.ɵɵproperty("formControl", ctx.searchTermFormControl)("matAutocomplete", _r1);
         i0.ɵɵattribute("disabled", ctx.disabled);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(5, 4, ctx.filteredList$));
+        i0.ɵɵadvance(4);
+        i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(6, 4, ctx.filteredList$));
     } }, dependencies: [i1.NgForOf, i1.NgIf, i2$4.DefaultValueAccessor, i2$4.NgControlStatus, i2$4.FormControlDirective, i4.MatLegacyAutocomplete, i4.MatLegacyAutocompleteTrigger, i5.MatLegacyOption, i1.AsyncPipe, i2.RpxTranslatePipe], styles: [".autocomplete__input--show-all-values[_ngcontent-%COMP%]{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down[_ngcontent-%COMP%]{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu[_ngcontent-%COMP%]{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible[_ngcontent-%COMP%]{display:block}.autocomplete__menu--hidden[_ngcontent-%COMP%]{display:none}.autocomplete__menu--overlay[_ngcontent-%COMP%]{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline[_ngcontent-%COMP%]{position:relative}.autocomplete__option[_ngcontent-%COMP%]{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{pointer-events:none}.autocomplete__option[_ngcontent-%COMP%]:first-of-type{border-top-width:0}.autocomplete__option[_ngcontent-%COMP%]:last-of-type{border-bottom-width:0}.autocomplete__option--odd[_ngcontent-%COMP%]{background-color:#fafafa}.autocomplete__option--focused[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results[_ngcontent-%COMP%]{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__input[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{font-size:13px;line-height:1.25}.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{padding:5px}@media (min-width: 641px){.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__input[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{font-size:13px;line-height:1.31579}}.div-action[_ngcontent-%COMP%]{display:inline-block}.add-location[_ngcontent-%COMP%]{display:inline}.remove-location-button[_ngcontent-%COMP%]{margin:5px}.hide-autocomplete[_ngcontent-%COMP%]{display:none}.auto-complete-container[_ngcontent-%COMP%]{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input[_ngcontent-%COMP%]{line-height:24px;font-size:19px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchLocationComponent, [{
         type: Component,
-        args: [{ selector: 'exui-search-location', template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"searchTermFormControl\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <ng-container *ngIf=\"filteredList$ | async as filteredList\">\n      <ng-container *ngIf=\"filteredList && filteredList.length >= 0\">\n        <mat-option *ngFor=\"let location of filteredList\" (onSelectionChange)=\"onSelectedLocation(location)\">\n          {{ location[propertyNameFilter] }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredList.length === 0\">{{'No results found' | rpxTranslate}}</mat-option>\n      </ng-container>\n    </ng-container>\n  </mat-autocomplete>\n</div>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}\n"] }]
+        args: [{ selector: 'exui-search-location', template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    #char\n    (keydown)=\"removeInvalidString($event)\"\n    (input)=\"onInput()\"\n    [formControl]=\"searchTermFormControl\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <ng-container *ngIf=\"filteredList$ | async as filteredList\">\n      <ng-container *ngIf=\"filteredList && filteredList.length >= 0\">\n        <mat-option *ngFor=\"let location of filteredList\" (onSelectionChange)=\"onSelectedLocation(location)\">\n          {{ location[propertyNameFilter] }}\n        </mat-option>\n        <mat-option *ngIf=\"filteredList.length === 0\">{{'No results found' | rpxTranslate}}</mat-option>\n      </ng-container>\n    </ng-container>\n  </mat-autocomplete>\n</div>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{display:inline-block;margin-right:4px;width:calc(100% - 4px)}.autocomplete__input{line-height:24px;font-size:19px}\n"] }]
     }], function () { return [{ type: LocationService }, { type: SessionStorageService }, { type: RefDataService }]; }, { form: [{
             type: Input
         }], field: [{
@@ -3256,14 +3236,19 @@ function FindServiceComponent_a_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵlistener("click", function FindServiceComponent_a_6_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.addOption(ctx_r3.tempSelectedService)); });
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 10);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "rpxTranslate");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "Add"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, "Add"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 4, "service"));
 } }
 function FindServiceComponent_ul_7_li_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 12)(1, "a", 13);
+    i0.ɵɵelementStart(0, "li", 13)(1, "a", 14);
     i0.ɵɵlistener("click", function FindServiceComponent_ul_7_li_1_Template_a_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r8); const selection_r6 = restoredCtx.$implicit; const ctx_r7 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r7.removeOption(selection_r6)); });
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
@@ -3274,8 +3259,8 @@ function FindServiceComponent_ul_7_li_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, selection_r6.label), " ");
 } }
 function FindServiceComponent_ul_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 10);
-    i0.ɵɵtemplate(1, FindServiceComponent_ul_7_li_1_Template, 4, 3, "li", 11);
+    i0.ɵɵelementStart(0, "ul", 11);
+    i0.ɵɵtemplate(1, FindServiceComponent_ul_7_li_1_Template, 4, 3, "li", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -3378,14 +3363,14 @@ FindServiceComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FindSe
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchServiceComponent = _t.first);
-    } }, inputs: { field: "field", serviceTitle: "serviceTitle", form: "form", disabled: "disabled", formSubmissionEvent$: "formSubmissionEvent$" }, outputs: { serviceFieldChanged: "serviceFieldChanged" }, decls: 8, vars: 6, consts: [[1, "service-picker-custom"], [1, "search-service"], [1, "govuk-body"], ["id", "selectServiceSearch-label", "for", "serviceSearch__select", 4, "ngIf"], [1, "search-service__input-container"], [1, "search-service__input", 3, "options", "selectedOptions", "disabled", "optionChanged"], ["href", "javascript:void(0)", "class", "govuk-button govuk-button--secondary govuk-!-margin-bottom-0", "data-module", "govuk-button", "id", "add-service", 3, "click", 4, "ngIf"], ["class", "hmcts-filter-tags selection-container", 4, "ngIf"], ["id", "selectServiceSearch-label", "for", "serviceSearch__select"], ["href", "javascript:void(0)", "data-module", "govuk-button", "id", "add-service", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-bottom-0", 3, "click"], [1, "hmcts-filter-tags", "selection-container"], ["class", "location-selection", 4, "ngFor", "ngForOf"], [1, "location-selection"], ["href", "javascript:void(0)", 1, "hmcts-filter__tag", 3, "click"]], template: function FindServiceComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { field: "field", serviceTitle: "serviceTitle", form: "form", disabled: "disabled", formSubmissionEvent$: "formSubmissionEvent$" }, outputs: { serviceFieldChanged: "serviceFieldChanged" }, decls: 8, vars: 6, consts: [[1, "service-picker-custom"], [1, "search-service"], [1, "govuk-body"], ["id", "selectServiceSearch-label", "for", "serviceSearch__select", 4, "ngIf"], [1, "search-service__input-container"], [1, "search-service__input", 3, "options", "selectedOptions", "disabled", "optionChanged"], ["href", "javascript:void(0)", "class", "govuk-button govuk-button--secondary govuk-!-margin-bottom-0", "data-module", "govuk-button", "id", "add-service", 3, "click", 4, "ngIf"], ["class", "hmcts-filter-tags selection-container", 4, "ngIf"], ["id", "selectServiceSearch-label", "for", "serviceSearch__select"], ["href", "javascript:void(0)", "data-module", "govuk-button", "id", "add-service", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-bottom-0", 3, "click"], [1, "govuk-visually-hidden"], [1, "hmcts-filter-tags", "selection-container"], ["class", "location-selection", 4, "ngFor", "ngForOf"], [1, "location-selection"], ["href", "javascript:void(0)", 1, "hmcts-filter__tag", 3, "click"]], template: function FindServiceComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
         i0.ɵɵtemplate(3, FindServiceComponent_label_3_Template, 3, 3, "label", 3);
         i0.ɵɵelementEnd();
         i0.ɵɵelementStart(4, "div", 4)(5, "exui-search-service", 5);
         i0.ɵɵlistener("optionChanged", function FindServiceComponent_Template_exui_search_service_optionChanged_5_listener($event) { return ctx.onOptionSelected($event); });
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, FindServiceComponent_a_6_Template, 3, 3, "a", 6);
+        i0.ɵɵtemplate(6, FindServiceComponent_a_6_Template, 6, 6, "a", 6);
         i0.ɵɵelementEnd()();
         i0.ɵɵtemplate(7, FindServiceComponent_ul_7_Template, 2, 1, "ul", 7);
         i0.ɵɵelementEnd();
@@ -3401,7 +3386,7 @@ FindServiceComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FindSe
     } }, dependencies: [i1.NgForOf, i1.NgIf, SearchServiceComponent, i2.RpxTranslatePipe], styles: ["#add-service[_ngcontent-%COMP%]{background-color:#ddd}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FindServiceComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-find-service', template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle | rpxTranslate}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\"\n        [options]=\"field.options\"\n        [selectedOptions]=\"selectedServices\"\n        [disabled]=\"disabled\"\n        (optionChanged)=\"onOptionSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addOption(tempSelectedService)\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"field?.enableAddButton\" id=\"add-service\">\n        {{ 'Add' | rpxTranslate}}\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeOption(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label  | rpxTranslate }}\n      </a>\n    </li>\n  </ul>\n</div>\n", styles: ["#add-service{background-color:#ddd}\n"] }]
+        args: [{ selector: 'xuilib-find-service', template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle | rpxTranslate}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\"\n        [options]=\"field.options\"\n        [selectedOptions]=\"selectedServices\"\n        [disabled]=\"disabled\"\n        (optionChanged)=\"onOptionSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addOption(tempSelectedService)\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"field?.enableAddButton\" id=\"add-service\">\n        {{ 'Add' | rpxTranslate}}\n        <span class=\"govuk-visually-hidden\">{{'service' | rpxTranslate}}</span>\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeOption(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label  | rpxTranslate }}\n      </a>\n    </li>\n  </ul>\n</div>\n", styles: ["#add-service{background-color:#ddd}\n"] }]
     }], null, { field: [{
             type: Input
         }], serviceTitle: [{
@@ -5346,14 +5331,14 @@ CaseSharingStateService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token:
             }]
     }], function () { return []; }, null); })();
 
-function SelectedCaseConfirmComponent_div_0_tr_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 8)(1, "td", 13);
+function SelectedCaseConfirmComponent_div_0_tr_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 9)(1, "td", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 13);
+    i0.ɵɵelementStart(3, "td", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 13)(6, "span", 14);
+    i0.ɵɵelementStart(5, "td", 14)(6, "span", 15);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "rpxTranslate");
     i0.ɵɵelementEnd()()();
@@ -5366,14 +5351,14 @@ function SelectedCaseConfirmComponent_div_0_tr_22_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 3, "To be added"));
 } }
-function SelectedCaseConfirmComponent_div_0_tr_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr", 8)(1, "td", 13);
+function SelectedCaseConfirmComponent_div_0_tr_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 9)(1, "td", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 13);
+    i0.ɵɵelementStart(3, "td", 14);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 13)(6, "span", 15);
+    i0.ɵɵelementStart(5, "td", 14)(6, "span", 16);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "rpxTranslate");
     i0.ɵɵelementEnd()()();
@@ -5396,22 +5381,25 @@ function SelectedCaseConfirmComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(6, "a", 5);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "rpxTranslate");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "table", 6)(10, "thead", 7)(11, "tr", 8)(12, "th", 9);
-    i0.ɵɵtext(13);
-    i0.ɵɵpipe(14, "rpxTranslate");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "th", 9);
+    i0.ɵɵelementStart(9, "span", 6);
+    i0.ɵɵtext(10);
+    i0.ɵɵpipe(11, "rpxTranslate");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "table", 7)(13, "thead", 8)(14, "tr", 9)(15, "th", 10);
     i0.ɵɵtext(16);
     i0.ɵɵpipe(17, "rpxTranslate");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(18, "th", 10);
     i0.ɵɵtext(19);
     i0.ɵɵpipe(20, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "th", 11);
+    i0.ɵɵtext(22);
+    i0.ɵɵpipe(23, "rpxTranslate");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "tbody", 11);
-    i0.ɵɵtemplate(22, SelectedCaseConfirmComponent_div_0_tr_22_Template, 9, 5, "tr", 12);
-    i0.ɵɵtemplate(23, SelectedCaseConfirmComponent_div_0_tr_23_Template, 9, 5, "tr", 12);
+    i0.ɵɵelementStart(24, "tbody", 12);
+    i0.ɵɵtemplate(25, SelectedCaseConfirmComponent_div_0_tr_25_Template, 9, 5, "tr", 13);
+    i0.ɵɵtemplate(26, SelectedCaseConfirmComponent_div_0_tr_26_Template, 9, 5, "tr", 13);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -5423,13 +5411,15 @@ function SelectedCaseConfirmComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("routerLink", ctx_r0.changeLink);
     i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 12, "Change"));
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 13, "Change"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 15, "selected case"));
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 14, "Name"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 17, "Name"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 16, "Email address"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(20, 19, "Email address"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(20, 18, "Actions"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 21, "Actions"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngForOf", ctx_r0.sharedCase.pendingShares)("ngForTrackBy", ctx_r0.trackByUserId);
     i0.ɵɵadvance(1);
@@ -5455,14 +5445,14 @@ class SelectedCaseConfirmComponent {
     }
 }
 SelectedCaseConfirmComponent.ɵfac = function SelectedCaseConfirmComponent_Factory(t) { return new (t || SelectedCaseConfirmComponent)(i0.ɵɵdirectiveInject(CaseSharingStateService)); };
-SelectedCaseConfirmComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectedCaseConfirmComponent, selectors: [["xuilib-selected-case-confirm"]], inputs: { sharedCase: "sharedCase", changeLink: "changeLink" }, decls: 1, vars: 1, consts: [[3, "id", 4, "ngIf"], [3, "id"], [1, "govuk-heading-m", "case-share-confirm__title"], [1, "case-share-confirm__caption-area"], [1, "govuk-caption-m", "case-share-confirm__caption"], [1, "case-share-confirm__change-link", "govuk-link", "govuk-!-font-size-19", 3, "routerLink"], [1, "govuk-table"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["scope", "col", 1, "govuk-table__header", "govuk-table-column-header"], ["scope", "col", 1, "govuk-table__header", "govuk-table-column-actions"], [1, "govuk-table__body"], ["class", "govuk-table__row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "govuk-table__cell"], [1, "hmcts-badge"], [1, "hmcts-badge", "hmcts-badge--red"]], template: function SelectedCaseConfirmComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, SelectedCaseConfirmComponent_div_0_Template, 24, 20, "div", 0);
+SelectedCaseConfirmComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectedCaseConfirmComponent, selectors: [["xuilib-selected-case-confirm"]], inputs: { sharedCase: "sharedCase", changeLink: "changeLink" }, decls: 1, vars: 1, consts: [[3, "id", 4, "ngIf"], [3, "id"], [1, "govuk-heading-m", "case-share-confirm__title"], [1, "case-share-confirm__caption-area"], [1, "govuk-caption-m", "case-share-confirm__caption"], [1, "case-share-confirm__change-link", "govuk-link", "govuk-!-font-size-19", 3, "routerLink"], [1, "govuk-visually-hidden"], [1, "govuk-table"], [1, "govuk-table__head"], [1, "govuk-table__row"], ["scope", "col", 1, "govuk-table__header", "govuk-table-column-header"], ["scope", "col", 1, "govuk-table__header", "govuk-table-column-actions"], [1, "govuk-table__body"], ["class", "govuk-table__row", 4, "ngFor", "ngForOf", "ngForTrackBy"], [1, "govuk-table__cell"], [1, "hmcts-badge"], [1, "hmcts-badge", "hmcts-badge--red"]], template: function SelectedCaseConfirmComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, SelectedCaseConfirmComponent_div_0_Template, 27, 23, "div", 0);
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", ctx.showUserAccessBlock());
     } }, dependencies: [i1.NgForOf, i1.NgIf, i2$1.RouterLink, i2.RpxTranslatePipe], styles: [".case-share-confirm__title[_ngcontent-%COMP%]{margin-bottom:0}.case-share-confirm__caption-area[_ngcontent-%COMP%]{border-bottom:1px solid #b1b4b6;padding-bottom:10px;display:inline-block;width:100%;clear:both}.case-share-confirm__caption[_ngcontent-%COMP%]{float:left}.case-share-confirm__change-link[_ngcontent-%COMP%]{float:right}.govuk-table-column-header[_ngcontent-%COMP%]{width:45%}.govuk-table-column-actions[_ngcontent-%COMP%]{width:10%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectedCaseConfirmComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-selected-case-confirm', template: "<div id=\"user-access-block-{{ sharedCase.caseId }}\" *ngIf=\"showUserAccessBlock()\">\n  <h2 class=\"govuk-heading-m case-share-confirm__title\">{{ sharedCase.caseTitle }}</h2>\n  <div class=\"case-share-confirm__caption-area\">\n    <div class=\"govuk-caption-m case-share-confirm__caption\">\n      {{ sharedCase.caseId }}\n    </div>\n    <a [routerLink]=\"changeLink\" class=\"case-share-confirm__change-link govuk-link govuk-!-font-size-19\">{{'Change' | rpxTranslate}}</a>\n  </div>\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Name' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Email address' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">{{'Actions' | rpxTranslate}}</th>\n    </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingShares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge\">{{'To be added' | rpxTranslate}}</span>\n      </td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingUnshares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge hmcts-badge--red\">\n          {{'To be removed' | rpxTranslate}}\n        </span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [".case-share-confirm__title{margin-bottom:0}.case-share-confirm__caption-area{border-bottom:1px solid #b1b4b6;padding-bottom:10px;display:inline-block;width:100%;clear:both}.case-share-confirm__caption{float:left}.case-share-confirm__change-link{float:right}.govuk-table-column-header{width:45%}.govuk-table-column-actions{width:10%}\n"] }]
+        args: [{ selector: 'xuilib-selected-case-confirm', template: "<div id=\"user-access-block-{{ sharedCase.caseId }}\" *ngIf=\"showUserAccessBlock()\">\n  <h2 class=\"govuk-heading-m case-share-confirm__title\">{{ sharedCase.caseTitle }}</h2>\n  <div class=\"case-share-confirm__caption-area\">\n    <div class=\"govuk-caption-m case-share-confirm__caption\">\n      {{ sharedCase.caseId }}\n    </div>\n    <a [routerLink]=\"changeLink\" class=\"case-share-confirm__change-link govuk-link govuk-!-font-size-19\">\n      {{'Change' | rpxTranslate}}\n      <span class=\"govuk-visually-hidden\">{{'selected case' | rpxTranslate}}</span>\n    </a>\n  </div>\n  <table class=\"govuk-table\">\n    <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Name' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">{{'Email address' | rpxTranslate}}</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">{{'Actions' | rpxTranslate}}</th>\n    </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingShares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge\">{{'To be added' | rpxTranslate}}</span>\n      </td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngFor=\"let user of sharedCase.pendingUnshares; trackBy: trackByUserId\">\n      <td class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n      <td class=\"govuk-table__cell\">{{ user.email }}</td>\n      <td class=\"govuk-table__cell\">\n        <span class=\"hmcts-badge hmcts-badge--red\">\n          {{'To be removed' | rpxTranslate}}\n        </span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n", styles: [".case-share-confirm__title{margin-bottom:0}.case-share-confirm__caption-area{border-bottom:1px solid #b1b4b6;padding-bottom:10px;display:inline-block;width:100%;clear:both}.case-share-confirm__caption{float:left}.case-share-confirm__change-link{float:right}.govuk-table-column-header{width:45%}.govuk-table-column-actions{width:10%}\n"] }]
     }], function () { return [{ type: CaseSharingStateService }]; }, { sharedCase: [{
             type: Input
         }], changeLink: [{
@@ -6341,7 +6331,7 @@ HmctsErrorSummaryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
         }] }); })();
 
 function ShareCaseComponent_h1_1_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵelementStart(0, "span", 27);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -6351,8 +6341,8 @@ function ShareCaseComponent_h1_1_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r4.fnTitle));
 } }
 function ShareCaseComponent_h1_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h1", 24);
-    i0.ɵɵtemplate(1, ShareCaseComponent_h1_1_span_1_Template, 3, 3, "span", 25);
+    i0.ɵɵelementStart(0, "h1", 25);
+    i0.ɵɵtemplate(1, ShareCaseComponent_h1_1_span_1_Template, 3, 3, "span", 26);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -6363,8 +6353,8 @@ function ShareCaseComponent_h1_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, ctx_r0.title), "\n");
 } }
-function ShareCaseComponent_div_26_option_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 33);
+function ShareCaseComponent_div_29_option_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 34);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -6373,35 +6363,38 @@ function ShareCaseComponent_div_26_option_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵtextInterpolate3("", user_r6.firstName, " ", user_r6.lastName, " - ", user_r6.email, "");
 } }
-function ShareCaseComponent_div_26_Template(rf, ctx) { if (rf & 1) {
+function ShareCaseComponent_div_29_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "label", 27);
+    i0.ɵɵelementStart(0, "div", 3)(1, "label", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 28);
+    i0.ɵɵelementStart(4, "span", 29);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 6)(8, "div", 7)(9, "select", 29);
-    i0.ɵɵlistener("ngModelChange", function ShareCaseComponent_div_26_Template_select_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.selectedUserToRemove = $event); });
-    i0.ɵɵelementStart(10, "option", 30);
+    i0.ɵɵelementStart(7, "div", 6)(8, "div", 7)(9, "select", 30);
+    i0.ɵɵlistener("ngModelChange", function ShareCaseComponent_div_29_Template_select_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.selectedUserToRemove = $event); });
+    i0.ɵɵelementStart(10, "option", 31);
     i0.ɵɵtext(11, "Select a person");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(12, ShareCaseComponent_div_26_option_12_Template, 2, 4, "option", 31);
+    i0.ɵɵtemplate(12, ShareCaseComponent_div_29_option_12_Template, 2, 4, "option", 32);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 9)(14, "button", 32);
-    i0.ɵɵlistener("click", function ShareCaseComponent_div_26_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.removeUser()); });
+    i0.ɵɵelementStart(13, "div", 9)(14, "button", 33);
+    i0.ɵɵlistener("click", function ShareCaseComponent_div_29_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r8); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.removeUser()); });
     i0.ɵɵpipe(15, "rpxTranslate");
     i0.ɵɵtext(16);
     i0.ɵɵpipe(17, "rpxTranslate");
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(18, "span", 11);
+    i0.ɵɵtext(19);
+    i0.ɵɵpipe(20, "rpxTranslate");
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 7, "Remove a person from all cases"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 8, "Remove a person from all cases"), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 9, "Select a person to remove them from all selected cases."), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 10, "Select a person to remove them from all selected cases."), " ");
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngModel", ctx_r1.selectedUserToRemove);
     i0.ɵɵadvance(1);
@@ -6409,14 +6402,16 @@ function ShareCaseComponent_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r1.assignedUsers);
     i0.ɵɵadvance(2);
-    i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(15, 11, "Remove user from selected cases"));
+    i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(15, 12, "Remove user from selected cases"));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 13, "Remove"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 14, "Remove"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 16, "user"), "");
 } }
-function ShareCaseComponent_div_32_Template(rf, ctx) { if (rf & 1) {
+function ShareCaseComponent_div_35_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "xuilib-selected-case-list", 35);
-    i0.ɵɵlistener("unselect", function ShareCaseComponent_div_32_Template_xuilib_selected_case_list_unselect_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onUnselect($event)); })("synchronizeStore", function ShareCaseComponent_div_32_Template_xuilib_selected_case_list_synchronizeStore_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onSynchronizeStore($event)); });
+    i0.ɵɵelementStart(0, "div", 35)(1, "xuilib-selected-case-list", 36);
+    i0.ɵɵlistener("unselect", function ShareCaseComponent_div_35_Template_xuilib_selected_case_list_unselect_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onUnselect($event)); })("synchronizeStore", function ShareCaseComponent_div_35_Template_xuilib_selected_case_list_synchronizeStore_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onSynchronizeStore($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -6424,8 +6419,8 @@ function ShareCaseComponent_div_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("shareCases$", ctx_r2.shareCases$)("removeUserFromCaseToggleOn", ctx_r2.removeUserFromCaseToggleOn);
 } }
 const _c0$e = function (a0) { return { "govuk-form-group--error": a0 }; };
-function ShareCaseComponent_div_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
+function ShareCaseComponent_div_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -6613,7 +6608,7 @@ ShareCaseComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareCas
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.userSelect = _t.first);
-    } }, inputs: { removeUserFromCaseToggleOn: "removeUserFromCaseToggleOn", shareCases$: "shareCases$", users: "users", confirmLink: "confirmLink", cancelLink: "cancelLink", addUserLabel: "addUserLabel", showRemoveUsers: "showRemoveUsers", fnTitle: "fnTitle", title: "title" }, outputs: { unselect: "unselect", synchronizeStore: "synchronizeStore" }, decls: 43, vars: 47, consts: [[3, "errorMessages", "header"], ["class", "govuk-heading-xl govuk-!-margin-top-2", 4, "ngIf"], ["id", "add-user"], [1, "govuk-form-group"], ["for", "add-user-input", 1, "govuk-label", "govuk-!-font-weight-bold"], ["id", "add-user-hint", 1, "govuk-hint"], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds"], ["id", "add-user-input", "aria-describedby", "add-user-hint", 3, "users", "selected"], [1, "govuk-grid-column-one-thirds"], ["id", "btn-add-user", 1, "govuk-button", "govuk-button--secondary", 3, "disabled", "title", "click"], ["id", "add-user-help", "data-module", "govuk-details", 1, "govuk-details"], [1, "govuk-details__summary"], ["id", "content-why-can-not-find-email", 1, "govuk-details__summary-text"], ["id", "content-reason-can-not-find-email", 1, "govuk-details__text"], ["class", "govuk-form-group", 4, "ngIf"], ["id", "cases", 3, "ngClass"], ["id", "title-selected-cases", 1, "govuk-heading-m"], [3, "config", "errorMessage"], ["class", "govuk-accordion", "data-module", "govuk-accordion", "id", "accordion-with-summary-sections", 4, "ngIf"], ["id", "noCaseDisplay", "class", "govuk-hint", 3, "ngClass", 4, "ngIf"], ["id", "share-case-nav", 1, "govuk-button-group"], ["id", "btn-continue", "data-module", "govuk-button", 1, "govuk-button", 3, "title", "click"], ["id", "btn-cancel", "data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "title", "routerLink"], [1, "govuk-heading-xl", "govuk-!-margin-top-2"], ["class", "govuk-caption-xl", 4, "ngIf"], [1, "govuk-caption-xl"], ["for", "remove-user-input", 1, "govuk-label", "govuk-!-font-weight-bold"], ["id", "remove-user-hint", 1, "govuk-hint"], ["id", "remove-user-input", "aria-describedby", "remove-user-hint", 1, "govuk-select", 3, "ngModel", "ngModelChange"], ["selected", "", 3, "ngValue"], [3, "ngValue", 4, "ngFor", "ngForOf"], ["id", "btn-remove-user", 1, "govuk-button", "govuk-button--secondary", 3, "title", "click"], [3, "ngValue"], ["data-module", "govuk-accordion", "id", "accordion-with-summary-sections", 1, "govuk-accordion"], [3, "shareCases$", "removeUserFromCaseToggleOn", "unselect", "synchronizeStore"], ["id", "noCaseDisplay", 1, "govuk-hint", 3, "ngClass"]], template: function ShareCaseComponent_Template(rf, ctx) { if (rf & 1) {
+    } }, inputs: { removeUserFromCaseToggleOn: "removeUserFromCaseToggleOn", shareCases$: "shareCases$", users: "users", confirmLink: "confirmLink", cancelLink: "cancelLink", addUserLabel: "addUserLabel", showRemoveUsers: "showRemoveUsers", fnTitle: "fnTitle", title: "title" }, outputs: { unselect: "unselect", synchronizeStore: "synchronizeStore" }, decls: 46, vars: 50, consts: [[3, "errorMessages", "header"], ["class", "govuk-heading-xl govuk-!-margin-top-2", 4, "ngIf"], ["id", "add-user"], [1, "govuk-form-group"], ["for", "add-user-input", 1, "govuk-label", "govuk-!-font-weight-bold"], ["id", "add-user-hint", 1, "govuk-hint"], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds"], ["id", "add-user-input", "aria-describedby", "add-user-hint", 3, "users", "selected"], [1, "govuk-grid-column-one-thirds"], ["id", "btn-add-user", 1, "govuk-button", "govuk-button--secondary", 3, "disabled", "title", "click"], [1, "govuk-visually-hidden"], ["id", "add-user-help", "data-module", "govuk-details", 1, "govuk-details"], [1, "govuk-details__summary"], ["id", "content-why-can-not-find-email", 1, "govuk-details__summary-text"], ["id", "content-reason-can-not-find-email", 1, "govuk-details__text"], ["class", "govuk-form-group", 4, "ngIf"], ["id", "cases", 3, "ngClass"], ["id", "title-selected-cases", 1, "govuk-heading-m"], [3, "config", "errorMessage"], ["class", "govuk-accordion", "data-module", "govuk-accordion", "id", "accordion-with-summary-sections", 4, "ngIf"], ["id", "noCaseDisplay", "class", "govuk-hint", 3, "ngClass", 4, "ngIf"], ["id", "share-case-nav", 1, "govuk-button-group"], ["id", "btn-continue", "data-module", "govuk-button", 1, "govuk-button", 3, "title", "click"], ["id", "btn-cancel", "data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", 3, "title", "routerLink"], [1, "govuk-heading-xl", "govuk-!-margin-top-2"], ["class", "govuk-caption-xl", 4, "ngIf"], [1, "govuk-caption-xl"], ["for", "remove-user-input", 1, "govuk-label", "govuk-!-font-weight-bold"], ["id", "remove-user-hint", 1, "govuk-hint"], ["id", "remove-user-input", "aria-describedby", "remove-user-hint", 1, "govuk-select", 3, "ngModel", "ngModelChange"], ["selected", "", 3, "ngValue"], [3, "ngValue", 4, "ngFor", "ngForOf"], ["id", "btn-remove-user", 1, "govuk-button", "govuk-button--secondary", 3, "title", "click"], [3, "ngValue"], ["data-module", "govuk-accordion", "id", "accordion-with-summary-sections", 1, "govuk-accordion"], [3, "shareCases$", "removeUserFromCaseToggleOn", "unselect", "synchronizeStore"], ["id", "noCaseDisplay", 1, "govuk-hint", 3, "ngClass"]], template: function ShareCaseComponent_Template(rf, ctx) { if (rf & 1) {
         i0.ɵɵelement(0, "xuilib-hmcts-error-summary", 0);
         i0.ɵɵtemplate(1, ShareCaseComponent_h1_1_Template, 4, 4, "h1", 1);
         i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)(4, "label", 4);
@@ -6632,61 +6627,66 @@ ShareCaseComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareCas
         i0.ɵɵpipe(15, "rpxTranslate");
         i0.ɵɵtext(16);
         i0.ɵɵpipe(17, "rpxTranslate");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵelementStart(18, "details", 11)(19, "summary", 12)(20, "span", 13);
-        i0.ɵɵtext(21);
-        i0.ɵɵpipe(22, "rpxTranslate");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(23, "div", 14);
+        i0.ɵɵelementStart(18, "span", 11);
+        i0.ɵɵtext(19);
+        i0.ɵɵpipe(20, "rpxTranslate");
+        i0.ɵɵelementEnd()()()();
+        i0.ɵɵelementStart(21, "details", 12)(22, "summary", 13)(23, "span", 14);
         i0.ɵɵtext(24);
         i0.ɵɵpipe(25, "rpxTranslate");
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(26, "div", 15);
+        i0.ɵɵtext(27);
+        i0.ɵɵpipe(28, "rpxTranslate");
         i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(26, ShareCaseComponent_div_26_Template, 18, 15, "div", 15);
+        i0.ɵɵtemplate(29, ShareCaseComponent_div_29_Template, 21, 18, "div", 16);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(27, "div", 16)(28, "h3", 17);
-        i0.ɵɵtext(29);
-        i0.ɵɵpipe(30, "rpxTranslate");
+        i0.ɵɵelementStart(30, "div", 17)(31, "h3", 18);
+        i0.ɵɵtext(32);
+        i0.ɵɵpipe(33, "rpxTranslate");
         i0.ɵɵelementEnd();
-        i0.ɵɵelement(31, "xuilib-gov-uk-error-message", 18);
-        i0.ɵɵtemplate(32, ShareCaseComponent_div_32_Template, 2, 2, "div", 19);
-        i0.ɵɵtemplate(33, ShareCaseComponent_div_33_Template, 3, 6, "div", 20);
+        i0.ɵɵelement(34, "xuilib-gov-uk-error-message", 19);
+        i0.ɵɵtemplate(35, ShareCaseComponent_div_35_Template, 2, 2, "div", 20);
+        i0.ɵɵtemplate(36, ShareCaseComponent_div_36_Template, 3, 6, "div", 21);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(34, "div", 21)(35, "button", 22);
-        i0.ɵɵlistener("click", function ShareCaseComponent_Template_button_click_35_listener() { return ctx.onContinue(); });
-        i0.ɵɵpipe(36, "rpxTranslate");
-        i0.ɵɵtext(37);
-        i0.ɵɵpipe(38, "rpxTranslate");
+        i0.ɵɵelementStart(37, "div", 22)(38, "button", 23);
+        i0.ɵɵlistener("click", function ShareCaseComponent_Template_button_click_38_listener() { return ctx.onContinue(); });
+        i0.ɵɵpipe(39, "rpxTranslate");
+        i0.ɵɵtext(40);
+        i0.ɵɵpipe(41, "rpxTranslate");
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(39, "button", 23);
-        i0.ɵɵpipe(40, "rpxTranslate");
-        i0.ɵɵtext(41);
-        i0.ɵɵpipe(42, "rpxTranslate");
+        i0.ɵɵelementStart(42, "button", 24);
+        i0.ɵɵpipe(43, "rpxTranslate");
+        i0.ɵɵtext(44);
+        i0.ɵɵpipe(45, "rpxTranslate");
         i0.ɵɵelementEnd()();
     } if (rf & 2) {
         i0.ɵɵproperty("errorMessages", ctx.validationErrors)("header", "There is a problem");
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.title);
         i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 23, ctx.addUserLabel));
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 24, ctx.addUserLabel));
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 25, "Search by name or email address. You can share access with as many people as you need."), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 26, "Search by name or email address. You can share access with as many people as you need."), " ");
         i0.ɵɵadvance(4);
         i0.ɵɵproperty("users", ctx.users);
         i0.ɵɵadvance(2);
-        i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(15, 27, "Add user to selected cases"));
+        i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(15, 28, "Add user to selected cases"));
         i0.ɵɵproperty("disabled", ctx.isDisabledAdd());
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 29, "Add"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 30, "Add"), " ");
+        i0.ɵɵadvance(3);
+        i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(20, 32, "user"));
         i0.ɵɵadvance(5);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(22, 31, "Can't find an email address?"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 34, "Can't find an email address?"), " ");
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(25, 33, "If you can't find your colleague's email address, they will need to complete their registration. Contact your administrator for help."), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 36, "If you can't find your colleague's email address, they will need to complete their registration. Contact your administrator for help."), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.showRemoveUsers);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$e, ctx.shareCaseErrorMessage.messages && ctx.shareCaseErrorMessage.messages.length > 0));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(48, _c0$e, ctx.shareCaseErrorMessage.messages && ctx.shareCaseErrorMessage.messages.length > 0));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 35, "Selected cases"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(33, 38, "Selected cases"), " ");
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("config", ctx.selectedCasesErrorMessageConfig)("errorMessage", ctx.shareCaseErrorMessage);
         i0.ɵɵadvance(1);
@@ -6694,18 +6694,18 @@ ShareCaseComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShareCas
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.shareCases && ctx.shareCases.length === 0);
         i0.ɵɵadvance(2);
-        i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(36, 37, "Continue"));
+        i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(39, 40, "Continue"));
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(38, 39, "Continue"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(41, 42, "Continue"), " ");
         i0.ɵɵadvance(2);
-        i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(40, 41, "Cancel"));
+        i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(43, 44, "Cancel"));
         i0.ɵɵproperty("routerLink", ctx.cancelLink);
         i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(42, 43, "Cancel"), " ");
+        i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(45, 46, "Cancel"), " ");
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2$4.NgSelectOption, i2$4.ɵNgSelectMultipleOption, i2$4.SelectControlValueAccessor, i2$4.NgControlStatus, i2$4.NgModel, i2$1.RouterLink, SelectedCaseListComponent, UserSelectComponent, HmctsErrorSummaryComponent, GovUkErrorMessageComponent, i2.RpxTranslatePipe], styles: ["select[_ngcontent-%COMP%]{width:100%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShareCaseComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-share-case', template: "<xuilib-hmcts-error-summary\n  [errorMessages]=\"validationErrors\"\n  [header]=\"'There is a problem'\"\n></xuilib-hmcts-error-summary>\n<h1 *ngIf=\"title\" class=\"govuk-heading-xl govuk-!-margin-top-2\">\n  <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle | rpxTranslate}}</span>\n  {{title | rpxTranslate}}\n</h1>\n<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel | rpxTranslate}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      {{'Search by name or email address. You can share access with as many people as you need.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\"\n          class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\"\n          title=\"{{'Add user to selected cases' | rpxTranslate}}\">\n          {{'Add' | rpxTranslate}}\n        </button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        {{\"Can't find an email address?\" | rpxTranslate}}\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        {{\"If you can't find your colleague's email address, they will need to complete their registration. Contact your administrator for help.\" | rpxTranslate}}\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">\n      {{'Remove a person from all cases' | rpxTranslate}}\n    </label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      {{'Select a person to remove them from all selected cases.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select [(ngModel)]=\"selectedUserToRemove\" class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option [ngValue]=\"null\" selected>Select a person</option>\n          <option *ngFor=\"let user of assignedUsers\" [ngValue]=\"user\">{{user.firstName}} {{user.lastName}} - {{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" (click)=\"removeUser()\" class=\"govuk-button govuk-button--secondary\" title=\"{{'Remove user from selected cases' | rpxTranslate}}\">\n          {{'Remove' | rpxTranslate}}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\" [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">\n    {{'Selected cases' | rpxTranslate}}\n  </h3>\n  <xuilib-gov-uk-error-message [config]=\"selectedCasesErrorMessageConfig\" [errorMessage]=\"shareCaseErrorMessage\"></xuilib-gov-uk-error-message>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\"\n    [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n    {{'No cases to display.' | rpxTranslate}}\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button id=\"btn-continue\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"onContinue()\" title=\"{{'Continue' | rpxTranslate}}\">\n    {{'Continue' | rpxTranslate}}\n  </button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"{{'Cancel' | rpxTranslate}}\" [routerLink]=\"cancelLink\">\n    {{'Cancel' | rpxTranslate}}\n  </button>\n</div>\n", styles: ["select{width:100%}\n"] }]
+        args: [{ selector: 'xuilib-share-case', template: "<xuilib-hmcts-error-summary\n  [errorMessages]=\"validationErrors\"\n  [header]=\"'There is a problem'\"\n></xuilib-hmcts-error-summary>\n<h1 *ngIf=\"title\" class=\"govuk-heading-xl govuk-!-margin-top-2\">\n  <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle | rpxTranslate}}</span>\n  {{title | rpxTranslate}}\n</h1>\n<div id=\"add-user\">\n  <div class=\"govuk-form-group\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">{{addUserLabel | rpxTranslate}}</label>\n    <span id=\"add-user-hint\" class=\"govuk-hint\">\n      {{'Search by name or email address. You can share access with as many people as you need.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <xuilib-user-select\n          id=\"add-user-input\"\n          aria-describedby=\"add-user-hint\"\n          [users]=\"users\"\n          (selected)=\"onSelectedUser($event)\">\n        </xuilib-user-select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-add-user\" (click)=\"addUser()\"\n          class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\"\n          title=\"{{'Add user to selected cases' | rpxTranslate}}\">\n          {{'Add' | rpxTranslate}}\n          <span class=\"govuk-visually-hidden\">{{'user' | rpxTranslate}}</span>\n        </button>\n      </div>\n    </div>\n    <details id=\"add-user-help\" class=\"govuk-details\" data-module=\"govuk-details\">\n      <summary class=\"govuk-details__summary\">\n      <span id=\"content-why-can-not-find-email\" class=\"govuk-details__summary-text\">\n        {{\"Can't find an email address?\" | rpxTranslate}}\n      </span>\n      </summary>\n      <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n        {{\"If you can't find your colleague's email address, they will need to complete their registration. Contact your administrator for help.\" | rpxTranslate}}\n      </div>\n    </details>\n  </div>\n  <div class=\"govuk-form-group\" *ngIf=\"showRemoveUsers\">\n    <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"remove-user-input\">\n      {{'Remove a person from all cases' | rpxTranslate}}\n    </label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      {{'Select a person to remove them from all selected cases.' | rpxTranslate}}\n    </span>\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <select [(ngModel)]=\"selectedUserToRemove\" class=\"govuk-select\" id=\"remove-user-input\" aria-describedby=\"remove-user-hint\">\n          <option [ngValue]=\"null\" selected>Select a person</option>\n          <option *ngFor=\"let user of assignedUsers\" [ngValue]=\"user\">{{user.firstName}} {{user.lastName}} - {{user.email}}</option>\n        </select>\n      </div>\n      <div class=\"govuk-grid-column-one-thirds\">\n        <button id=\"btn-remove-user\" (click)=\"removeUser()\" class=\"govuk-button govuk-button--secondary\" title=\"{{'Remove user from selected cases' | rpxTranslate}}\">\n          {{'Remove' | rpxTranslate}}\n          <span class=\"govuk-visually-hidden\"> {{'user' | rpxTranslate}}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div id=\"cases\" [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">\n    {{'Selected cases' | rpxTranslate}}\n  </h3>\n  <xuilib-gov-uk-error-message [config]=\"selectedCasesErrorMessageConfig\" [errorMessage]=\"shareCaseErrorMessage\"></xuilib-gov-uk-error-message>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-with-summary-sections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n      (unselect)=\"onUnselect($event)\"\n      (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n    </xuilib-selected-case-list>\n  </div>\n\n  <div id=\"noCaseDisplay\" *ngIf=\"shareCases && shareCases.length === 0\" class=\"govuk-hint\"\n    [ngClass]=\"{'govuk-form-group--error': shareCaseErrorMessage.messages && shareCaseErrorMessage.messages.length > 0}\">\n    {{'No cases to display.' | rpxTranslate}}\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\" class=\"govuk-button-group\">\n  <button id=\"btn-continue\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"onContinue()\" title=\"{{'Continue' | rpxTranslate}}\">\n    {{'Continue' | rpxTranslate}}\n  </button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"{{'Cancel' | rpxTranslate}}\" [routerLink]=\"cancelLink\">\n    {{'Cancel' | rpxTranslate}}\n  </button>\n</div>\n", styles: ["select{width:100%}\n"] }]
     }], function () { return [{ type: CaseSharingStateService }, { type: i2$1.Router }]; }, { removeUserFromCaseToggleOn: [{
             type: Input
         }], shareCases$: [{
@@ -7512,7 +7512,7 @@ function CookieBannerComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 12, "We use some essential cookies to make this service work."));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 14, "We\u2019d also like to use analytics cookies so we can understand how you use the service and make improvements."));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 14, "We'd also like to use analytics cookies so we can understand how you use the service and make improvements."));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 16, "Accept analytics cookies"), " ");
     i0.ɵɵadvance(3);
@@ -7601,7 +7601,7 @@ CookieBannerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Cooki
     } }, dependencies: [i1.NgIf, i2$1.RouterLink, i2.RpxTranslatePipe], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CookieBannerComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-cookie-banner', template: "<div class=\"govuk-cookie-banner \" role=\"region\" attr.aria-label=\"'Cookies on {{appName}}'\" *ngIf=\"isCookieBannerVisible\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">{{'Cookies on' | rpxTranslate}} {{appName | rpxTranslate}}</h2>\n\n        <div class=\"govuk-cookie-banner__content\">\n          <p>{{'We use some essential cookies to make this service work.' | rpxTranslate}}</p>\n          <p>{{'We\\\u2019d also like to use analytics cookies so we can understand how you use the service and make improvements.' | rpxTranslate}}</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"acceptCookie()\">\n        {{'Accept analytics cookies' | rpxTranslate}}\n      </button>\n      <button value=\"reject\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"rejectCookie()\">\n        {{'Reject analytics cookies' | rpxTranslate}}\n      </button>\n      <a class=\"govuk-link\" routerLink=\"/cookies\">{{'View cookies' | rpxTranslate}}</a>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'xuilib-cookie-banner', template: "<div class=\"govuk-cookie-banner \" role=\"region\" attr.aria-label=\"'Cookies on {{appName}}'\" *ngIf=\"isCookieBannerVisible\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">{{'Cookies on' | rpxTranslate}} {{appName | rpxTranslate}}</h2>\n\n        <div class=\"govuk-cookie-banner__content\">\n          <p>{{'We use some essential cookies to make this service work.' | rpxTranslate}}</p>\n          <p>{{'We\\'d also like to use analytics cookies so we can understand how you use the service and make improvements.' | rpxTranslate}}</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"acceptCookie()\">\n        {{'Accept analytics cookies' | rpxTranslate}}\n      </button>\n      <button value=\"reject\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"rejectCookie()\">\n        {{'Reject analytics cookies' | rpxTranslate}}\n      </button>\n      <a class=\"govuk-link\" routerLink=\"/cookies\">{{'View cookies' | rpxTranslate}}</a>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return [{ type: CookieService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [windowToken]
@@ -9504,7 +9504,7 @@ HmctsIdentityBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: H
     } }, dependencies: [i1.NgIf, i2.RpxTranslatePipe] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HmctsIdentityBarComponent, [{
         type: Component,
-        args: [{ selector: 'xuilib-hmcts-identity-bar', template: "<div class=\"hmcts-identity-bar\" *ngIf=\"value\">\n\n    <div class=\"hmcts-identity-bar__container\">\n\n        <div class=\"hmcts-identity-bar__details\">\n\n            <span class=\"hmcts-identity-bar__title\">{{value | rpxTranslate}}</span>\n\n        </div>\n\n    </div>\n\n</div>\n" }]
+        args: [{ selector: 'xuilib-hmcts-identity-bar', template: "<div class=\"hmcts-identity-bar\" *ngIf=\"value\">\n  <div class=\"hmcts-identity-bar__container\">\n    <div class=\"hmcts-identity-bar__details\">\n      <span class=\"hmcts-identity-bar__title\">{{value | rpxTranslate}}</span>\n    </div>\n  </div>\n</div>\n" }]
     }], function () { return []; }, { content: [{
             type: Input
         }] }); })();