@hmcts/rpx-xui-common-lib 2.1.3-angular-upgrade-11 → 2.1.6-angular-upgrade-11

package/fesm2015/hmcts-rpx-xui-common-lib.js

@@ -5,13 +5,13 @@ import { formatDate, DOCUMENT, CommonModule } from '@angular/common';
 import { Validators, FormArray, FormGroup, FormControl, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BehaviorSubject, Subject, of, zip, combineLatest } from 'rxjs';
 import { distinctUntilChanged, map, tap, filter, debounceTime, mergeMap, switchMap, catchError, delay } from 'rxjs/operators';
+import * as i1$1 from '@angular/router';
+import { Router, RouterModule, NavigationEnd } from '@angular/router';
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i1$1 from '@angular/router';
-import { Router, NavigationEnd, RouterModule } from '@angular/router';
 import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 import * as LDClient from 'launchdarkly-js-client-sdk';
 import * as i2 from '@angular/platform-browser';
@@ -28,7 +28,7 @@ class AccessibilityComponent {
 AccessibilityComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-accessibility',
-                template: "<h1 class=\"govuk-heading-xl\" id=\"Accessibility-statement-for-Expert-UI\">Accessibility statement for Expert UI</h1>\n\n<ul class=\"govuk-list\">\n  <li><a href=\"accessibility#immigration\">Immigration and Asylum</a></li>\n  <li><a href=\"accessibility#family\">Family Public Law </a></li>\n</ul>\n\n<p class=\"govuk-body\">This website is run by HM Courts & Tribunals Service. We want as many people as possible to be\n  able to use this website. For example, you should be able to:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>change colours, contrast levels and fonts</li>\n  <li>zoom in up to 300% without the text spilling off the screen</li>\n  <li>navigate most of the website using just a keyboard</li>\n  <li>navigate most of the website using speech recognition software</li>\n  <li>listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and\n    VoiceOver)\n  </li>\n</ul>\n\n<p class=\"govuk-body\">We\u2019ve also made the website text as simple as possible to understand.</p>\n\n<p class=\"govuk-body\"><a rel=\"noopener noreferrer\" target=\"_blank\" href=\"https://mcmw.abilitynet.org.uk/\">AbilityNet</a>\n  has advice on making your device easier to use if you have a disability.</p>\n\n<h2 class=\"govuk-heading-l\" id=\"How-accessible-this-website-is\">How accessible this website is</h2>\n\n<p class=\"govuk-body\">We know some parts of the website are not fully accessible:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>some pages are difficult to navigate using just a keyboard</li>\n  <li>some pages can\u2019t be listened to in full using a screen reader</li>\n  <li>some pages have problems with colour contrasts between text and background</li>\n  <li>some PDFs may not be fully accessible to a screen reader</li>\n</ul>\n\n<h2 class=\"govuk-heading-l\" id=\"What-to-do-if-you-cannot-access-parts-of-this-website\">Feedback and contact\n  information</h2>\n\n<p class=\"govuk-body\">If you need information on this website in a different format like accessible PDF, large print,\n  easy read, audio recording or braille, you can:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>email: <a href=\"mailto:HMCTSforms@justice.gov.uk\"> HMCTSforms@justice.gov.uk</a></li>\n  <li>call: +44 (0) 300 123 1711</li>\n  <li>contact your service representative</li>\n</ul>\n\n<p class=\"govuk-body\">We\u2019ll consider your request and get back to you in 10 working days.</p>\n\n<h2 class=\"govuk-heading-l\" id=\"Reporting-accessibility-problems-with-this-website\">Reporting accessibility problems\n  with this website</h2>\n\n<p class=\"govuk-body\">We\u2019re always looking to improve the accessibility of this website. If you find any problems not\n  listed on this page or think we\u2019re not meeting accessibility requirements, contact:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>email: <a href=\"mailto:customer.service@justice.gov.uk\"> customer.service@justice.gov.uk</a></li>\n  <li>telephone: +44 (0) 300 123 1711</li>\n</ul>\n\n<h2 class=\"govuk-heading-l\" id=\"Enforcement-procedure \">Enforcement procedure</h2>\n\n<p class=\"govuk-body\">The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector\n  Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the \u2018accessibility\n  regulations\u2019). </p>\n\n<p class=\"govuk-body\">If you\u2019re not happy with how we respond to your complaint, <a rel=\"noopener noreferrer\"\n                                                                                    target=\"_blank\"\n                                                                                    href=\"https://www.equalityadvisoryservice.com/\">contact\n  the Equality Advisory and Support Service (EASS).</a></p>\n\n<h1 class=\"govuk-heading-l\" id=\"Contacting-us-by-phone-or-visiting-us-in-person\">Contacting us by phone or visiting us\n  in person</h1>\n\n<p class=\"govuk-body\">We provide a text relay service for people who are D/deaf, hearing impaired or have a speech\n  impediment.</p>\n\n<p class=\"govuk-body\">Our offices and tribunal venues have audio induction loops, or if you contact us before your visit\n  we can arrange a British Sign Language (BSL) interpreter. You can also request step-free access or a foreign language\n  interpreter.</p>\n\n<p class=\"govuk-body\">If you have a question about accessibility in our Tribunal venues, you can contact the First-tier\n  Tribunal enquiry line: +44 (0) 300 123 1711. You can <a target=\"_blank\"\n                                                          href=\"https://courttribunalfinder.service.gov.uk/search/\">find\n    the contact details for court and tribunal venues</a>. </p>\n\n<p class=\"govuk-body\">You can also contact your service representative for more information.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"Technical-information-about-this-website\u2019s-accessibility\">Technical information about\n  this website\u2019s accessibility</h1>\n\n<p class=\"govuk-body\">HMCTS is committed to making its website accessible, in accordance with the Public Sector Bodies\n  (Websites and Mobile Applications) (No.2) Accessibility Regulations 2018.</p>\n\n<p class=\"govuk-body\">This website is partially compliant with the <a rel=\"noopener noreferrer\" target=\"_blank\"\n                                                                      href=\"https://www.w3.org/TR/WCAG21/\">Web Content\n  Accessibility Guidelines version 2.1</a>, due to the non-compliances listed below.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"Non-accessible-content\">Non-accessible content </h1>\n\n<p class=\"govuk-body\">The content listed below is non-compliant for the following reasons.</p>\n\n<h2 class=\"govuk-heading-l\" id=\"Non-compliance-with-the-accessibility-regulations\">Non-compliance with the accessibility\n  regulations</h2>\n\n<p class=\"govuk-body\">Some pages cannot be navigated completely using just a keyboard, so some people won\u2019t be able to\n  tab through the pages. This fails WCAG 2.1 success criterion 2.1 (keyboard accessible).</p>\n\n<p class=\"govuk-body\">Some pages can\u2019t be listened to in full using a screen reader, so some people won\u2019t be able to\n  access the information. This fails WCAG 2.1 success criterion 1.2.5 (audio description \u2013 prerecorded).</p>\n\n<p class=\"govuk-body\">Some of the contrast ratios don\u2019t meet the current accessibility requirements. This fails WCAG 2.1\n  success criterion 1.4.3 (contrast \u2013 minimum).</p>\n\n<h3 class=\"govuk-heading-m\" id=\"immigration\">Immigration and Asylum</h3>\n\n<p class=\"govuk-body\">Some of the images on the service include text and are not accessible for some low vision users.\n  We have identified a solution for this issue that we will implement as soon as possible.</p>\n\n<h3 class=\"govuk-heading-m\" id=\"family\">Family Public Law </h3>\n\n<ol class=\"govuk-list govuk-list--alpha\">\n  <li>The navigation system used in family public law cannot be rendered well by screen readers, so features can\u2019t be\n    listened to in full\n  </li>\n  <li>Some essential functions within the family public law digital service cannot be accessed properly using screen\n    readers\n  </li>\n  <li>Some complex forms within the service will not be rendered correctly or cannot be listened to by screen readers\n  </li>\n</ol>\n\n<h2 class=\"govuk-heading-m\" id=\"Disproportionate burden \">Disproportionate burden </h2>\n\n<p class=\"govuk-body\">For Manage organisation, Register organisation, Approve organisations and Manage cases, we found\n  the following issues that are currently being triaged to find out if there is a disproportionate burden:</p>\n\n<ol class=\"govuk-list govuk-list--alpha\">\n  <li>Screen readers can\u2019t switch between headers, read content in tabs and buttons</li>\n  <li>Screen readers can\u2019t tab between radio buttons, read links or content</li>\n  <li>Colour contrast ratios uneven between page background and content</li>\n  <li>Some labels, fields, error messages and other content can\u2019t be clearly identified by screen readers and voice\n    activation software\n  </li>\n  <li>Some page headings and titles don\u2019t follow a logical structure for screen readers</li>\n  <li>The navigation of some pages isn\u2019t clear</li>\n  <li>Some headings, links and button labels aren\u2019t clearly descriptive</li>\n</ol>\n\n<h2 class=\"govuk-heading-m\" id=\"Content-that\u2019s-not-within-the-scope-of-the-accessibility-regulations\">Content that\u2019s not\n  within the scope of the accessibility regulations </h2>\n\n<p class=\"govuk-body\">PDFs, documents and attachments to email notifications published before 23 September 2018 may not\n  meet accessibility standards. For example, they may not be structured so they\u2019re accessible to a screen reader.</p>\n\n<p class=\"govuk-body\">Any new PDFs or Word documents we publish will meet accessibility standards.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"what-to-improve-accessibility\">What we\u2019re doing to improve accessibility</h1>\n\n<p class=\"govuk-body\">We\u2019re committed to ensuring our services are accessible to all our users and that they comply with\n  level AA of the Web Content Accessibility Guidelines \u2013 WCAG 2.1.</p>\n\n<p class=\"govuk-body\">We\u2019re actively working to improve the identified issues and make them AA-compliant by 23 September\n  2020. We\u2019re also continuing to improve all other AAA-level accessibility issues as we iterate the service.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"preparation-of-this-accessibility-statement\">Preparation of this accessibility\n  statement</h1>\n\n<p class=\"govuk-body\">This statement was prepared on 16 September 2019. It was last reviewed on 16 September 2020.</p>\n\n<p class=\"govuk-body\">This website was last tested on 19 May 2020. The test was carried out by the <a target=\"_blank\"\n                                                                                                      href=\"https://digitalaccessibilitycentre.org/\">Digital\n  Accessibility Centre (DAC)</a>.</p>\n",
+                template: "<h1 class=\"govuk-heading-xl\" id=\"Accessibility-statement-for-Expert-UI\">Accessibility statement for Expert UI</h1>\n\n<ul class=\"govuk-list\">\n  <li><a href=\"accessibility#immigration\">Immigration and Asylum</a></li>\n  <li><a href=\"accessibility#family\">Family Public Law </a></li>\n</ul>\n\n<p class=\"govuk-body\">This website is run by HM Courts & Tribunals Service. We want as many people as possible to be\n  able to use this website. For example, you should be able to:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>change colours, contrast levels and fonts</li>\n  <li>zoom in up to 300% without the text spilling off the screen</li>\n  <li>navigate most of the website using just a keyboard</li>\n  <li>navigate most of the website using speech recognition software</li>\n  <li>listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and\n    VoiceOver)\n  </li>\n</ul>\n\n<p class=\"govuk-body\">We\u2019ve also made the website text as simple as possible to understand.</p>\n\n<p class=\"govuk-body\"><a rel=\"noopener noreferrer\" target=\"_blank\" href=\"https://mcmw.abilitynet.org.uk/\">AbilityNet</a>\n  has advice on making your device easier to use if you have a disability.</p>\n\n<h2 class=\"govuk-heading-l\" id=\"How-accessible-this-website-is\">How accessible this website is</h2>\n\n<p class=\"govuk-body\">We know some parts of the website are not fully accessible:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>some pages are difficult to navigate using just a keyboard</li>\n  <li>some pages can\u2019t be listened to in full using a screen reader</li>\n  <li>some pages have problems with colour contrasts between text and background</li>\n  <li>some PDFs may not be fully accessible to a screen reader</li>\n</ul>\n\n<h2 class=\"govuk-heading-l\" id=\"What-to-do-if-you-cannot-access-parts-of-this-website\">Feedback and contact\n  information</h2>\n\n<p class=\"govuk-body\">If you need information on this website in a different format like accessible PDF, large print,\n  easy read, audio recording or braille, you can:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>email: <a href=\"mailto:HMCTSforms@justice.gov.uk\"> HMCTSforms@justice.gov.uk</a></li>\n  <li>call: +44 (0) 300 123 1711</li>\n  <li>contact your service representative</li>\n</ul>\n\n<p class=\"govuk-body\">We\u2019ll consider your request and get back to you in 10 working days.</p>\n\n<h2 class=\"govuk-heading-l\" id=\"Reporting-accessibility-problems-with-this-website\">Reporting accessibility problems\n  with this website</h2>\n\n<p class=\"govuk-body\">We\u2019re always looking to improve the accessibility of this website. If you find any problems not\n  listed on this page or think we\u2019re not meeting accessibility requirements, contact:</p>\n\n<ul class=\"govuk-list govuk-list--bullet\">\n  <li>email: <a href=\"mailto:customer.service@justice.gov.uk\"> customer.service@justice.gov.uk</a></li>\n  <li>telephone: +44 (0) 300 123 1711</li>\n</ul>\n\n<h2 class=\"govuk-heading-l\" id=\"Enforcement-procedure \">Enforcement procedure</h2>\n\n<p class=\"govuk-body\">The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector\n  Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the \u2018accessibility\n  regulations\u2019). </p>\n\n<p class=\"govuk-body\">If you\u2019re not happy with how we respond to your complaint, <a rel=\"noopener noreferrer\"\n                                                                                    target=\"_blank\"\n                                                                                    href=\"https://www.equalityadvisoryservice.com/\">contact\n  the Equality Advisory and Support Service (EASS).</a></p>\n\n<h1 class=\"govuk-heading-l\" id=\"Contacting-us-by-phone-or-visiting-us-in-person\">Contacting us by phone or visiting us\n  in person</h1>\n\n<p class=\"govuk-body\">We provide a text relay service for people who are D/deaf, hearing impaired or have a speech\n  impediment.</p>\n\n<p class=\"govuk-body\">Our offices and tribunal venues have audio induction loops, or if you contact us before your visit\n  we can arrange a British Sign Language (BSL) interpreter. You can also request step-free access or a foreign language\n  interpreter.</p>\n\n<p class=\"govuk-body\">If you have a question about accessibility in our Tribunal venues, you can contact the First-tier\n  Tribunal enquiry line: +44 (0) 300 123 1711. You can <a target=\"_blank\"\n                                                          href=\"https://courttribunalfinder.service.gov.uk/search/\">find\n    the contact details for court and tribunal venues</a>. </p>\n\n<p class=\"govuk-body\">You can also contact your service representative for more information.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"Technical-information-about-this-website\u2019s-accessibility\">Technical information about\n  this website\u2019s accessibility</h1>\n\n<p class=\"govuk-body\">HMCTS is committed to making its website accessible, in accordance with the Public Sector Bodies\n  (Websites and Mobile Applications) (No.2) Accessibility Regulations 2018.</p>\n\n<p class=\"govuk-body\">This website is partially compliant with the <a rel=\"noopener noreferrer\" target=\"_blank\"\n                                                                      href=\"https://www.w3.org/TR/WCAG21/\">Web Content\n  Accessibility Guidelines version 2.1</a>, due to the non-compliances listed below.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"Non-accessible-content\">Non-accessible content </h1>\n\n<p class=\"govuk-body\">The content listed below is non-compliant for the following reasons.</p>\n\n<h2 class=\"govuk-heading-l\" id=\"Non-compliance-with-the-accessibility-regulations\">Non-compliance with the accessibility\n  regulations</h2>\n\n<p class=\"govuk-body\">Some pages cannot be navigated completely using just a keyboard, so some people won\u2019t be able to\n  tab through the pages. This fails WCAG 2.1 success criterion 2.1 (keyboard accessible).</p>\n\n<p class=\"govuk-body\">Some pages can\u2019t be listened to in full using a screen reader, so some people won\u2019t be able to\n  access the information. This fails WCAG 2.1 success criterion 1.2.5 (audio description \u2013 prerecorded).</p>\n\n<p class=\"govuk-body\">Some of the contrast ratios don\u2019t meet the current accessibility requirements. This fails WCAG 2.1\n  success criterion 1.4.3 (contrast \u2013 minimum).</p>\n\n<h3 class=\"govuk-heading-m\" id=\"immigration\">Immigration and Asylum</h3>\n\n<p class=\"govuk-body\">Some of the images on the service include text and are not accessible for some low vision users.\n  We have identified a solution for this issue that we will implement as soon as possible.</p>\n\n<h3 class=\"govuk-heading-m\" id=\"family\">Family Public Law </h3>\n\n<ol class=\"govuk-list govuk-list--alpha\">\n  <li>The navigation system used in family public law cannot be rendered well by screen readers, so features can\u2019t be\n    listened to in full\n  </li>\n  <li>Some essential functions within the family public law digital service cannot be accessed properly using screen\n    readers\n  </li>\n  <li>Some complex forms within the service will not be rendered correctly or cannot be listened to by screen readers\n  </li>\n</ol>\n\n<h2 class=\"govuk-heading-m\" id=\"Disproportionate burden \">Disproportionate burden </h2>\n\n<p class=\"govuk-body\">For Manage organisation, Register organisation, Approve organisations and Manage cases, we found\n  the following issues that are currently being triaged to find out if there is a disproportionate burden:</p>\n\n<ol class=\"govuk-list govuk-list--alpha\">\n  <li>Screen readers can\u2019t switch between headers, read content in tabs and buttons</li>\n  <li>Screen readers can\u2019t tab between radio buttons, read links or content</li>\n  <li>Colour contrast ratios uneven between page background and content</li>\n  <li>Some labels, fields, error messages and other content can\u2019t be clearly identified by screen readers and voice\n    activation software\n  </li>\n  <li>Some page headings and titles don\u2019t follow a logical structure for screen readers</li>\n  <li>The navigation of some pages isn\u2019t clear</li>\n  <li>Some headings, links and button labels aren\u2019t clearly descriptive</li>\n</ol>\n\n<h2 class=\"govuk-heading-m\" id=\"Content-that\u2019s-not-within-the-scope-of-the-accessibility-regulations\">Content that\u2019s not\n  within the scope of the accessibility regulations </h2>\n\n<p class=\"govuk-body\">PDFs, documents and attachments to email notifications published before 23 September 2018 may not\n  meet accessibility standards. For example, they may not be structured so they\u2019re accessible to a screen reader.</p>\n\n<p class=\"govuk-body\">Any new PDFs or Word documents we publish will meet accessibility standards.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"what-to-improve-accessibility\">What we\u2019re doing to improve accessibility</h1>\n\n<p class=\"govuk-body\">We\u2019re committed to ensuring our services are accessible to all our users and that they comply with\n  level AA of the Web Content Accessibility Guidelines \u2013 WCAG 2.1.</p>\n\n<p class=\"govuk-body\">We\u2019re actively working to improve the identified issues and make them AA-compliant by 23 September\n  2020. We\u2019re also continuing to improve all other AAA-level accessibility issues as we iterate the service.</p>\n\n<h1 class=\"govuk-heading-l\" id=\"preparation-of-this-accessibility-statement\">Preparation of this accessibility\n  statement</h1>\n\n<p class=\"govuk-body\">This statement was prepared on 16 September 2019. It was last reviewed on 16 September 2020.</p>\n\n<p class=\"govuk-body\">This website was last tested on 19 May 2020. The test was carried out by the <a target=\"_blank\"\n                                                                                                      href=\"https://digitalaccessibilitycentre.org/\">Digital\n  Accessibility Centre (DAC)</a>.</p>\n\n<h3 class=\"govuk-heading-m\">Family Private Law:</h3>\n\n<p class=\"govuk-body\">This service has not yet been tested for accessibility issues. In the future, we will conduct an\n  accessibility audit in order to find out if there are any accessibility issues. The accessibility statement will be\n  updated with any relevant changes that we find.</p>\n\n<p class=\"govuk-body\">If there are any issues with accessing information or using this website please contact:</p>\n\n<ol class=\"govuk-list govuk-list--bullet\">\n  <li>Nicola Whitcher - 02380 384324</li>\n  <li>Hannah Townley - 02380 384313</li>\n</ol>",
                 styles: [".govuk-list--alpha{padding-left:20px;list-style-type:lower-alpha}"]
             },] }
 ];
@@ -628,16 +628,22 @@ class GenericFilterComponent {
             else if (hasSelectAllOption && !allChecked && isChecked && isAllCheckedExcludingTheSelectAllOption) {
                 formArray.controls[index].patchValue(true);
             }
-            return;
         }
-        formArray.controls.forEach((control) => {
-            if (isChecked) {
-                control.patchValue(true);
-            }
-            else {
-                control.patchValue(false);
+        else {
+            formArray.controls.forEach((control) => {
+                if (isChecked) {
+                    control.patchValue(true);
+                }
+                else {
+                    control.patchValue(false);
+                }
+            });
+        }
+        if (field.changeResetFields && field.changeResetFields.length) {
+            for (const resetField of field.changeResetFields) {
+                this.resetField(resetField, form);
             }
-        });
+        }
     }
     resetField(resetField, form) {
         const control = form.get(resetField);
@@ -790,7 +796,7 @@ class GenericFilterComponent {
 GenericFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-generic-filter',
-                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddLocationButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n                                [field]=\"field\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedServices]=\"form.get(field.name)?.value\"                                \n                                [field]=\"field\"\n          ></xuilib-find-service>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <hr class=\"govuk-section-break govuk-section-break--m govuk-section-break--visible\"/>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <button\n        class=\"govuk-button govuk-!-margin-right-1 govuk-!-margin-bottom-0\"\n        type=\"submit\"\n        id=\"applyFilter\"\n        [disabled]=\"config.enableDisabledButton && form.invalid\"\n      >{{config.applyButtonText || 'Apply'}}</button>\n      <button *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 styles: [".contain-classes .elevated-break{position:relative;top:-10px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}"]
@@ -944,23 +950,35 @@ class CaseSharingStateService {
         this.subject.next(newSharedCases);
         return newSharedCases;
     }
-    requestUnshare(caseId, user) {
+    requestUnshare(user, caseId) {
         const newSharedCases = [];
         for (const sharedCase of this.caseState) {
-            if (sharedCase.caseId === caseId) {
+            // If no caseId, then request unshare from all shared cases
+            if (caseId === undefined || sharedCase.caseId === caseId) {
                 if (!sharedCase.pendingUnshares) {
                     sharedCase.pendingUnshares = [];
                 }
                 const newPendingUnshares = sharedCase.pendingUnshares.slice();
-                if (newPendingUnshares) {
+                // If the user is pending shared access, just remove them from pendingShares
+                let newPendingShares;
+                let indexOfPreviouslyAddedUser = -1;
+                if (sharedCase.pendingShares) {
+                    indexOfPreviouslyAddedUser = sharedCase.pendingShares.findIndex(u => u.idamId === user.idamId);
+                    if (indexOfPreviouslyAddedUser > -1) {
+                        newPendingShares = sharedCase.pendingShares.slice();
+                        newPendingShares.splice(indexOfPreviouslyAddedUser, 1);
+                    }
+                }
+                // If the user does not exist in pendingShares, and already has shared access (i.e. exists in sharedWith),
+                // request removal of shared access
+                if (indexOfPreviouslyAddedUser === -1 && sharedCase.sharedWith && sharedCase.sharedWith.findIndex(u => u.idamId === user.idamId) > -1) {
                     if (!newPendingUnshares.some(u => u.email === user.email)) {
                         newPendingUnshares.push(user);
                     }
                 }
-                else {
-                    newPendingUnshares.push(user);
-                }
-                const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares });
+                const newSharedCase = Object.assign(Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares }), (newPendingShares && {
+                    pendingShares: newPendingShares
+                }));
                 newSharedCases.push(newSharedCase);
             }
             else {
@@ -968,7 +986,7 @@ class CaseSharingStateService {
             }
         }
         this.subject.next(newSharedCases);
-        return;
+        return newSharedCases;
     }
     requestCancel(caseId, user) {
         const newSharedCases = [];
@@ -1005,11 +1023,13 @@ class CaseSharingStateService {
         return;
     }
     removeCase(caseId) {
-        for (let i = 0, l = this.caseState.length; i < l; i++) {
-            if (this.caseState[i].caseId === caseId) {
-                this.caseState.splice(i, 1);
-                this.subject.next(this.caseState);
-                return;
+        if (this.caseState.length > 1) {
+            for (let i = 0, l = this.caseState.length; i < l; i++) {
+                if (this.caseState[i].caseId === caseId) {
+                    this.caseState.splice(i, 1);
+                    this.subject.next(this.caseState);
+                    return;
+                }
             }
         }
     }
@@ -1055,7 +1075,7 @@ class SelectedCaseConfirmComponent {
 SelectedCaseConfirmComponent.decorators = [
     { 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</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</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</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</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\">to be removed</span>\n      </td>\n    </tr>\n    </tbody>\n  </table>\n</div>\n",
+                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</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</th>\n      <th class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n      <th class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</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</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\">To be removed</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%}"]
             },] }
 ];
@@ -1078,10 +1098,14 @@ class SelectedCaseListComponent {
     }
     ngOnInit() {
         this.shareCases$ = this.stateService.state;
-        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+        this.shareCases$.subscribe((shareCases) => {
+            this.shareCases = shareCases;
+            this.caseCount = this.shareCases.length;
+        });
     }
     onUnselect(sharedCase) {
         this.unselect.emit(sharedCase);
+        this.caseCount = this.shareCases.length;
     }
     onSynchronizeStore(event) {
         this.synchronizeStore.emit(event);
@@ -1093,7 +1117,7 @@ class SelectedCaseListComponent {
 SelectedCaseListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-selected-case-list',
-                template: "<ng-container *ngIf=\"!toConfirm\">\n  <xuilib-selected-case\n    *ngFor=\"let sharedCase of (shareCases$ | async); trackBy: trackByCaseId\"\n    [sharedCase]=\"sharedCase\"\n    [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n    (unselect)=\"onUnselect($event)\"\n    (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n  </xuilib-selected-case>\n</ng-container>\n\n<ng-container *ngIf=\"toConfirm\">\n  <xuilib-selected-case-confirm\n    *ngFor=\"let sharedCase of (shareCases$ | async); trackBy: trackByCaseId\"\n    [sharedCase]=\"sharedCase\"\n    [changeLink]=\"changeLink\">\n  </xuilib-selected-case-confirm>\n</ng-container>\n",
+                template: "<ng-container *ngIf=\"!toConfirm\">\n  <xuilib-selected-case\n    *ngFor=\"let sharedCase of (shareCases$ | async); trackBy: trackByCaseId\"\n    [sharedCase]=\"sharedCase\"\n    [caseCount]=\"caseCount\"\n    [removeUserFromCaseToggleOn]=\"removeUserFromCaseToggleOn\"\n    (unselect)=\"onUnselect($event)\"\n    (synchronizeStore)=\"onSynchronizeStore($event)\"\n    >\n  </xuilib-selected-case>\n</ng-container>\n\n<ng-container *ngIf=\"toConfirm\">\n  <xuilib-selected-case-confirm\n    *ngFor=\"let sharedCase of (shareCases$ | async); trackBy: trackByCaseId\"\n    [sharedCase]=\"sharedCase\"\n    [changeLink]=\"changeLink\">\n  </xuilib-selected-case-confirm>\n</ng-container>\n",
                 styles: [""]
             },] }
 ];
@@ -1127,9 +1151,6 @@ class SelectedCaseComponent {
             this.combinedSortedShares = this.combineAndSortShares(sharedWith, pendingShares);
         }
     }
-    onUnselect() {
-        this.unselect.emit(this.sharedCase);
-    }
     onDeselect(c) {
         this.unselect.emit(c);
     }
@@ -1187,7 +1208,7 @@ class SelectedCaseComponent {
         }));
     }
     onRemove(user, sharedCase) {
-        this.stateService.requestUnshare(sharedCase.caseId, user);
+        this.stateService.requestUnshare(user, sharedCase.caseId);
         this.synchronizeStore.emit(this.shareCases);
     }
     onCancel(user, sharedCase) {
@@ -1250,8 +1271,8 @@ class SelectedCaseComponent {
 SelectedCaseComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-selected-case',
-                template: "<div id=\"{{buildElementId('govuk-accordion__section')}}\" class=\"govuk-accordion__section\">\n  <div class=\"govuk-grid-row govuk-case-header\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <h3 id=\"{{buildElementId('case-title')}}\" class=\"govuk-case-title\">{{ sharedCase.caseTitle }}</h3>\n      <h1 id=\"{{buildElementId('case-id')}}\" class=\"govuk-case-sub-title\">{{ sharedCase.caseId }}</h1>\n    </div>\n    <div class=\"govuk-grid-column-twenty-percent\">\n      <button id=\"{{buildElementId('btn-deselect-case')}}\" class=\"govuk-button hmcts-button--secondary\" (click)=\"onDeselect(sharedCase)\" title=\"Deselect case\">Deselect case</button>\n    </div>\n    <div class=\"govuk-accordion__section-header govuk-grid-column-five-percent\">\n      <div class=\"govuk-accordion__section-heading\">\n        <button type=\"button\" id=\"{{buildElementId('accordion-with-summary-sections-heading')}}\"\n              aria-controls=\"accordion-with-summary-sections-content-1\" class=\"govuk-accordion__section-button\"\n              aria-describedby=\"accordion-with-summary-sections-summary-1\" aria-expanded=\"false\" title=\"Expand or Collapse\">\n        <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span></button>\n      </div>\n    </div>\n  </div>\n  <div id=\"{{buildElementId('accordion-with-summary-sections-content')}}\" class=\"govuk-accordion__section-content\"\n       aria-labelledby=\"buildElementId('accordion-with-summary-sections-heading')\" >\n    <div class=\"govuk-grid-row\" *ngIf=\"showNoUsersAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-no-user')}}\" class=\"govuk-div-align-left\">No users from your organisation currently have access to this case.</span>\n    </div>\n    <div class=\"govuk-grid-row\" *ngIf=\"showUserHasAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-has-users')}}\" class=\"govuk-div-align-left\">Users from your organisation with access to this case.</span>\n    </div>\n    <table class=\"govuk-table\" *ngIf=\"showUserAccessTable()\">\n      <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th id=\"{{buildElementId('name-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n        <th id=\"{{buildElementId('email-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n        <th id=\"{{buildElementId('action-heading')}}\" class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n        <th id=\"{{buildElementId('label-heading')}}\" class=\"govuk-table__header govuk-table-column-label\" scope=\"col\">&nbsp;&nbsp;</th>\n      </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let user of combinedSortedShares; index as idx; trackBy: trackByUserId\">\n          <td id=\"user-full-name-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n          <td id=\"user-email-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.email }}</td>\n          <td class=\"govuk-table__cell\">\n            <a *ngIf=\"canRemove(sharedCase.caseId, user) | async\" (click)=\"onRemove(user, sharedCase)\" href=\"javascript:void(0);\">Remove <span class=\"govuk-visually-hidden\">{{ user.firstName + ' ' + user.lastName }} from case</span></a>\n            <a *ngIf=\"canCancel(sharedCase.caseId, user) | async\" (click)=\"onCancel(user, sharedCase)\" href=\"javascript:void(0);\">Cancel <span class=\"govuk-visually-hidden\">adding {{ user.firstName + ' ' + user.lastName }} to case</span></a>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngIf=\"isToBeRemoved(sharedCase.caseId, user) | async\" class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n            <span *ngIf=\"isToBeAdded(sharedCase.caseId, user) | async\" class=\"hmcts-badge\">To be added</span>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n",
-                styles: [".govuk-case-header{border-top:1px solid #bfc1c3}.govuk-case-title{font-size:24px;color:#005ea5;font-weight:700}.govuk-case-sub-title,.govuk-case-title{font-family:nta,Arial,sans-serif;padding-left:0}.govuk-case-sub-title{font-size:1rem!important;color:#6f777b;font-weight:400}.govuk-grid-row{margin-left:0;margin-right:0}.govuk-grid-column-three-quarters{padding-top:5px;padding-left:0}.govuk-grid-column-twenty-percent{box-sizing:border-box;padding-top:10px;width:20%;float:left}.govuk-grid-column-five-percent{box-sizing:border-box;padding-top:15px;width:5%;float:left}.govuk-table-column-header{width:40%}.govuk-table-column-actions,.govuk-table-column-label{width:10%}.govuk-div-align-left{font-family:nta,Arial,sans-serif;font-size:1.1875rem!important;line-height:1.31579!important;text-align:left;margin-bottom:20px;padding-left:0;color:#0b0c0c}.govuk-accordion__section-header{border-top:0}.govuk-accordion__section-content{padding-top:0}"]
+                template: "<div id=\"{{buildElementId('govuk-accordion__section')}}\" class=\"govuk-accordion__section\">\n  <div class=\"govuk-grid-row govuk-case-header\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <h3 id=\"{{buildElementId('case-title')}}\" class=\"govuk-case-title\">{{ sharedCase.caseTitle }}</h3>\n      <h1 id=\"{{buildElementId('case-id')}}\" class=\"govuk-case-sub-title\">{{ sharedCase.caseId }}</h1>\n    </div>\n    <div class=\"govuk-grid-column-twenty-percent\">\n      <button *ngIf=\"caseCount > 1\"\n        id=\"{{buildElementId('btn-deselect-case')}}\" \n        class=\"govuk-button hmcts-button--secondary\" \n        (click)=\"onDeselect(sharedCase)\" \n        title=\"Deselect case\">Deselect case\n      </button>\n    </div>\n    <div class=\"govuk-accordion__section-header govuk-grid-column-five-percent\">\n      <div class=\"govuk-accordion__section-heading\">\n        <button type=\"button\" id=\"{{buildElementId('accordion-with-summary-sections-heading')}}\"\n              aria-controls=\"accordion-with-summary-sections-content-1\" class=\"govuk-accordion__section-button\"\n              aria-describedby=\"accordion-with-summary-sections-summary-1\" aria-expanded=\"false\" title=\"Expand or Collapse\">\n        <span class=\"govuk-accordion__icon\" aria-hidden=\"true\"></span></button>\n      </div>\n    </div>\n  </div>\n  <div id=\"{{buildElementId('accordion-with-summary-sections-content')}}\" class=\"govuk-accordion__section-content\"\n       aria-labelledby=\"buildElementId('accordion-with-summary-sections-heading')\" >\n    <div class=\"govuk-grid-row\" *ngIf=\"showNoUsersAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-no-user')}}\" class=\"govuk-div-align-left\">No users from your organisation currently have access to this case.</span>\n    </div>\n    <div class=\"govuk-grid-row\" *ngIf=\"showUserHasAccessInfo()\">\n      <span id=\"{{buildElementId('access-info-has-users')}}\" class=\"govuk-div-align-left\">Users from your organisation with access to this case.</span>\n    </div>\n    <table class=\"govuk-table\" *ngIf=\"showUserAccessTable()\">\n      <thead class=\"govuk-table__head\">\n      <tr class=\"govuk-table__row\">\n        <th id=\"{{buildElementId('name-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Name</th>\n        <th id=\"{{buildElementId('email-heading')}}\" class=\"govuk-table__header govuk-table-column-header\" scope=\"col\">Email address</th>\n        <th id=\"{{buildElementId('action-heading')}}\" class=\"govuk-table__header govuk-table-column-actions\" scope=\"col\">Actions</th>\n        <th id=\"{{buildElementId('label-heading')}}\" class=\"govuk-table__header govuk-table-column-label\" scope=\"col\">Status</th>\n      </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\" *ngFor=\"let user of combinedSortedShares; index as idx; trackBy: trackByUserId\">\n          <td id=\"user-full-name-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.firstName + ' ' + user.lastName }}</td>\n          <td id=\"user-email-{{ userIdSetter(canCancel(sharedCase.caseId, user) | async, idx) }}\" class=\"govuk-table__cell\">{{ user.email }}</td>\n          <td class=\"govuk-table__cell\">\n            <a *ngIf=\"canRemove(sharedCase.caseId, user) | async\" (click)=\"onRemove(user, sharedCase)\" href=\"javascript:void(0);\">Remove <span class=\"govuk-visually-hidden\">{{ user.firstName + ' ' + user.lastName }} from case</span></a>\n            <a *ngIf=\"canCancel(sharedCase.caseId, user) | async\" (click)=\"onCancel(user, sharedCase)\" href=\"javascript:void(0);\">Cancel <span class=\"govuk-visually-hidden\">adding {{ user.firstName + ' ' + user.lastName }} to case</span></a>\n          </td>\n          <td class=\"govuk-table__cell\">\n            <span *ngIf=\"isToBeRemoved(sharedCase.caseId, user) | async\" class=\"hmcts-badge hmcts-badge--red\">To be removed</span>\n            <span *ngIf=\"isToBeAdded(sharedCase.caseId, user) | async\" class=\"hmcts-badge\">To be added</span>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n",
+                styles: [".govuk-case-header{border-top:1px solid #bfc1c3}.govuk-case-title{font-size:24px;color:#005ea5;font-weight:700}.govuk-case-sub-title,.govuk-case-title{font-family:nta,Arial,sans-serif;padding-left:0}.govuk-case-sub-title{font-size:1rem!important;color:#6f777b;font-weight:400}.govuk-grid-row{margin-left:0;margin-right:0}.govuk-grid-column-three-quarters{padding-top:5px;padding-left:0}.govuk-grid-column-twenty-percent{box-sizing:border-box;padding-top:10px;width:20%;float:left}.govuk-grid-column-five-percent{box-sizing:border-box;padding-top:15px;width:5%;float:left}.govuk-table-column-header{width:38%}.govuk-table-column-actions,.govuk-table-column-label{width:12%}.govuk-div-align-left{font-family:nta,Arial,sans-serif;font-size:1.1875rem!important;line-height:1.31579!important;text-align:left;margin-bottom:20px;padding-left:0;color:#0b0c0c}.govuk-accordion__section-header{border-top:0}.govuk-accordion__section-content{padding-top:0}"]
             },] }
 ];
 SelectedCaseComponent.ctorParameters = () => [
@@ -1262,6 +1283,7 @@ SelectedCaseComponent.propDecorators = {
     selectedUser: [{ type: Input }],
     opened: [{ type: Input }],
     removeUserFromCaseToggleOn: [{ type: Input }],
+    caseCount: [{ type: Input }],
     unselect: [{ type: Output }],
     synchronizeStore: [{ type: Output }]
 };
@@ -1389,6 +1411,13 @@ ShareCaseConfirmComponent.propDecorators = {
     completeLink: [{ type: Input }]
 };
 
+var SharedCaseErrorMessages;
+(function (SharedCaseErrorMessages) {
+    SharedCaseErrorMessages["OneCaseMustBeSelected"] = "At least one case must be selected";
+    SharedCaseErrorMessages["NoChangesRequested"] = "You have not requested any changes to case sharing";
+    SharedCaseErrorMessages["OnePersonMustBeAssigned"] = "At least one person must be assigned to each case";
+})(SharedCaseErrorMessages || (SharedCaseErrorMessages = {}));
+
 class UserSelectComponent {
     constructor() {
         this.selected = new EventEmitter();
@@ -1445,25 +1474,54 @@ UserSelectComponent.propDecorators = {
 };
 
 class ShareCaseComponent {
-    constructor(stateService) {
+    constructor(stateService, router) {
         this.stateService = stateService;
+        this.router = router;
         this.shareCases = []; // cases selected for sharing
+        this.continueAllowed = false;
+        this.selectedUserToRemove = null;
         this.removeUserFromCaseToggleOn = false;
         this.users = []; // users of this organisation the cases can be shared with
         this.confirmLink = '';
+        this.cancelLink = '';
+        this.showRemoveUsers = false;
+        this.fnTitle = '';
+        this.title = '';
         this.unselect = new EventEmitter();
         this.synchronizeStore = new EventEmitter();
+        this.validationErrors = [];
     }
     ngOnInit() {
-        this.shareCases$.subscribe(shareCases => {
+        this.shareCases$
+            .pipe(tap(sharedCases => {
+            // Update the list of users assigned to at least one case
+            this.getAssignedUsers(sharedCases.filter(sharedCase => sharedCase.sharedWith && sharedCase.sharedWith.length > 0));
+        }))
+            .subscribe(shareCases => {
             this.shareCases = shareCases;
             this.stateService.setCases(shareCases);
+            // Set the config to be used by the xuilib-gov-uk-error-message component, in particular the element ID to
+            // which the error message is associated
+            if (shareCases) {
+                this.selectedCasesErrorMessageConfig = {
+                    id: shareCases.length > 0 ? 'cases' : 'noCaseDisplay'
+                };
+            }
         });
         this.shareCases$ = this.stateService.state;
+        this.shareCaseErrorMessage = { isInvalid: false, messages: [] };
     }
     onUnselect(c) {
-        this.unselect.emit(c);
-        this.stateService.removeCase(c.caseId);
+        this.validationErrors = [];
+        if (this.stateService.getCases().length === 1) {
+            this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.OneCaseMustBeSelected });
+            this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.OneCaseMustBeSelected] };
+            window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        }
+        else {
+            this.unselect.emit(c);
+            this.stateService.removeCase(c.caseId);
+        }
     }
     onSynchronizeStore(event) {
         this.synchronizeStore.emit(event);
@@ -1478,25 +1536,39 @@ class ShareCaseComponent {
             this.userSelect.clear();
         }
         this.synchronizeStore.emit(newSharedCases);
+        // Update the list of assigned users (which includes pending users)
+        this.getAssignedUsers(newSharedCases);
+    }
+    removeUser() {
+        if (this.selectedUserToRemove) {
+            const newSharedCases = this.stateService.requestUnshare(this.selectedUserToRemove);
+            this.synchronizeStore.emit(newSharedCases);
+        }
     }
     isDisabledAdd() {
         return this.selectedUser === null || this.shareCases.length === 0;
     }
-    isDisabledContinue() {
-        let isDisabled = true;
+    /**
+     * Function originally used to set disabled state of "Continue" button, now called by the button click handler to
+     * control whether navigation to the confirmation page is allowed. It is prevented if no changes have been made
+     */
+    setContinueAllowed() {
+        // Always start with continueAllowed = false. This covers the scenario where a user might add someone for sharing
+        // a case (so, continueAllowed = true), then removes the same user before trying to continue. This would
+        // erroneously leave continueAllowed as true
+        this.continueAllowed = false;
         this.shareCases$.subscribe(shareCases => {
             for (const caseState of shareCases) {
                 if (caseState.pendingShares && caseState.pendingShares.length > 0) {
-                    isDisabled = false;
+                    this.continueAllowed = true;
                     break;
                 }
                 if (caseState.pendingUnshares && caseState.pendingUnshares.length > 0) {
-                    isDisabled = false;
+                    this.continueAllowed = true;
                     break;
                 }
             }
         });
-        return isDisabled;
     }
     onDeselect(sharedCase) {
         if (sharedCase !== null) {
@@ -1510,22 +1582,90 @@ class ShareCaseComponent {
         }
         this.stateService.setCases(this.shareCases);
     }
+    onContinue() {
+        this.setContinueAllowed();
+        // If continuation is not allowed, set an error message
+        if (!this.continueAllowed) {
+            this.validationErrors = [];
+            this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.NoChangesRequested });
+            this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.NoChangesRequested] };
+            window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        }
+        // Navigate to confirmation page only if allowed to continue
+        if (this.continueAllowed) {
+            // Check that no case is left unassigned; a user can be removed only if there is another current user, or if at
+            // least one user is to be added. Prevent navigation to confirmation page if there is at least one case left in
+            // an unassigned state
+            if (this.hasCasesLeftUnassigned(this.shareCases)) {
+                this.validationErrors = [];
+                this.validationErrors.push({ id: 'cases', message: SharedCaseErrorMessages.OnePersonMustBeAssigned });
+                this.shareCaseErrorMessage = { isInvalid: true, messages: [SharedCaseErrorMessages.OnePersonMustBeAssigned] };
+                window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+            }
+            else {
+                this.router.navigate([this.confirmLink]);
+            }
+        }
+    }
+    /**
+     * Gets a unique list of all users that have been assigned, or are pending assigment to, at least one case
+     * @param sharedCases The list of shared cases from which to get users these are shared with, or are to be shared with
+     */
+    getAssignedUsers(sharedCases) {
+        const users = [];
+        sharedCases.forEach(sharedCase => {
+            if (sharedCase.sharedWith) {
+                sharedCase.sharedWith.forEach(user => {
+                    if (!users.some(existingUser => user.idamId === existingUser.idamId)) {
+                        users.push(user);
+                    }
+                });
+            }
+            if (sharedCase.pendingShares) {
+                sharedCase.pendingShares.forEach(user => {
+                    if (!users.some(existingUser => user.idamId === existingUser.idamId)) {
+                        users.push(user);
+                    }
+                });
+            }
+        });
+        this.assignedUsers = users;
+    }
+    /**
+     * Checks if any shared cases have been left unassigned. This occurs if a shared case has a number of pending
+     * unshares equal to the number of current shares, and there are no pending shares.
+     * @param sharedCases The array of shared cases to check
+     * @returns `true` if at least one case has the condition described above; `false` otherwise
+     */
+    hasCasesLeftUnassigned(sharedCases) {
+        return sharedCases.some(sharedCase => {
+            return sharedCase.pendingUnshares && sharedCase.sharedWith &&
+                sharedCase.pendingUnshares.length === sharedCase.sharedWith.length &&
+                (!sharedCase.pendingShares || sharedCase.pendingShares.length === 0);
+        });
+    }
 }
 ShareCaseComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-share-case',
-                template: "<div id=\"add-user\">\n  <label class=\"govuk-label govuk-!-font-weight-bold\" for=\"add-user-input\">Enter email address</label>\n  <span id=\"add-user-hint\" class=\"govuk-hint\">\n    Search by name or email address. You can only add people from your organisation individually - but you can add as many as you like.\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()\" class=\"govuk-button\" [disabled]=\"isDisabledAdd()\" title=\"Add user to the case\">Add</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\u2019t find an email address?\n    </span>\n    </summary>\n    <div id=\"content-reason-can-not-find-email\" class=\"govuk-details__text\">\n      If you can\u2019t find your colleague\u2019s email address, they will need to complete their registration. Contact your\n      administrator for help.\n    </div>\n  </details>\n</div>\n\n<div id=\"cases\">\n  <h3 id=\"title-selected-cases\" class=\"govuk-heading-m\">Selected cases</h3>\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    No cases to display.\n  </div>\n\n</div>\n\n<div id=\"share-case-nav\">\n  <button class=\"govuk-button\" [disabled]=\"isDisabledContinue()\" title=\"Continue\" [routerLink]=\"confirmLink\">Continue</button>\n</div>\n",
-                styles: [""]
+                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}}</span>\n  {{title}}\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}}</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.\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()\" class=\"govuk-button govuk-button--secondary\" [disabled]=\"isDisabledAdd()\" title=\"Add user to selected cases\">Add</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?\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\n        administrator for help.\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\">Remove a person from all cases</label>\n    <span id=\"remove-user-hint\" class=\"govuk-hint\">\n      Select a person to remove them from all selected cases.\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\">Remove</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\">Selected cases</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.\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\">Continue</button>\n  <button id=\"btn-cancel\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" title=\"Cancel\" [routerLink]=\"cancelLink\">Cancel</button>\n</div>\n",
+                styles: ["select{width:100%}"]
             },] }
 ];
 ShareCaseComponent.ctorParameters = () => [
-    { type: CaseSharingStateService }
+    { type: CaseSharingStateService },
+    { type: Router }
 ];
 ShareCaseComponent.propDecorators = {
     removeUserFromCaseToggleOn: [{ type: Input }],
     shareCases$: [{ type: Input }],
     users: [{ type: Input }],
     confirmLink: [{ type: Input }],
+    cancelLink: [{ type: Input }],
+    addUserLabel: [{ type: Input }],
+    showRemoveUsers: [{ type: Input }],
+    fnTitle: [{ type: Input }],
+    title: [{ type: Input }],
     unselect: [{ type: Output }],
     synchronizeStore: [{ type: Output }],
     userSelect: [{ type: ViewChild, args: [UserSelectComponent, { static: true },] }]
@@ -1794,6 +1934,47 @@ CookieBannerComponent.propDecorators = {
     acceptanceNotifier: [{ type: Output }]
 };
 
+var BadgeColour;
+(function (BadgeColour) {
+    BadgeColour["BADGE_RED"] = "hmcts-badge--red";
+    BadgeColour["BADGE_BLUE"] = "hmcts-badge--blue";
+    BadgeColour["BADGE_GREEN"] = "hmcts-badge--green";
+})(BadgeColour || (BadgeColour = {}));
+
+class AnonymousFeatureUser {
+}
+class LoggedInFeatureUser {
+}
+
+var BookingCheckType;
+(function (BookingCheckType) {
+    BookingCheckType["NO_CHECK"] = "NO_CHECK";
+    BookingCheckType["BOOKINGS_AND_BASE"] = "BOOKINGS_AND_BASE";
+    BookingCheckType["POSSIBLE_BOOKINGS"] = "POSSIBLE_BOOKINGS";
+})(BookingCheckType || (BookingCheckType = {}));
+
+var PersonRole;
+(function (PersonRole) {
+    PersonRole["JUDICIAL"] = "Judicial";
+    PersonRole["CASEWORKER"] = "Legal Ops";
+    PersonRole["ADMIN"] = "Admin";
+    PersonRole["CTSC"] = "CTSC User";
+    PersonRole["ALL"] = "All";
+})(PersonRole || (PersonRole = {}));
+// Note: RoleCategory could replace PersonRole possibly
+// However a lot of webapp logic is based on current PersonRole understanding
+var RoleCategory;
+(function (RoleCategory) {
+    RoleCategory["JUDICIAL"] = "JUDICIAL";
+    RoleCategory["CASEWORKER"] = "LEGAL_OPERATIONS";
+    RoleCategory["ADMIN"] = "ADMIN";
+    RoleCategory["CTSC"] = "CTSC";
+    RoleCategory["ALL"] = "ALL";
+})(RoleCategory || (RoleCategory = {}));
+
+class RadioFilterFieldConfig {
+}
+
 class LocationService {
     constructor(http) {
         this.http = http;
@@ -1805,8 +1986,8 @@ class LocationService {
      * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
      * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
      */
-    getAllLocations(serviceIds, locationType, searchTerm) {
-        return this.http.get(`api/locations/getLocations?serviceIds=${serviceIds}&locationType=${locationType}&searchTerm=${searchTerm}`);
+    getAllLocations(serviceIds, locationType, searchTerm, userLocations, bookingLocations) {
+        return this.http.post(`api/locations/getLocations`, { serviceIds, locationType, searchTerm, userLocations, bookingLocations });
     }
     /**
      * @description searchLocations from service Ids/location type/search term
@@ -1829,9 +2010,49 @@ LocationService.ctorParameters = () => [
     { type: HttpClient }
 ];
 
+class SessionStorageService {
+    /**
+     * Get an item from the session storage.
+     * If remove is true, the item will be removed once read
+     * @param removeAfterRead removed the key once it has been read
+     */
+    getItem(key, removeAfterRead = false) {
+        const item = sessionStorage.getItem(key);
+        if (removeAfterRead) {
+            this.removeItem(key);
+        }
+        return item;
+    }
+    /**
+     * Set an item in the session storage.
+     */
+    setItem(key, value) {
+        sessionStorage.setItem(key, value);
+    }
+    /**
+     * Remove an item in the session storage.
+     */
+    removeItem(key) {
+        sessionStorage.removeItem(key);
+    }
+    /**
+     * Clear all the items held in session storage.
+     */
+    clear() {
+        sessionStorage.clear();
+    }
+}
+SessionStorageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SessionStorageService_Factory() { return new SessionStorageService(); }, token: SessionStorageService, providedIn: "root" });
+SessionStorageService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
 class SearchLocationComponent {
-    constructor(locationService, fb, cd) {
+    constructor(locationService, sessionStorageService, fb, cd) {
         this.locationService = locationService;
+        this.sessionStorageService = sessionStorageService;
         this.fb = fb;
         this.cd = cd;
         this.disabled = null;
@@ -1897,7 +2118,21 @@ class SearchLocationComponent {
         this.searchLocationChanged.emit();
     }
     getLocations(term) {
-        return this.locationService.getAllLocations(this.serviceIds, this.locationType, term);
+        let userLocations;
+        let bookingLocations;
+        // Booking type info - can create more
+        // NO_CHECK - All work - Do not filter out locations - Default assumption
+        // ONLY_BOOKINGS - My work - Try to only show base locations/booking locations
+        // POSSIBLE_BOOKINGS - Create booking screen - Show only potential bookings
+        if (this.bookingCheck === BookingCheckType.BOOKINGS_AND_BASE) {
+            userLocations = JSON.parse(this.sessionStorageService.getItem('userLocations'));
+            bookingLocations = JSON.parse(this.sessionStorageService.getItem('bookingLocations'));
+        }
+        else if (this.bookingCheck === BookingCheckType.POSSIBLE_BOOKINGS) {
+            userLocations = JSON.parse(this.sessionStorageService.getItem('userLocations'));
+            this.serviceIds = JSON.parse(this.sessionStorageService.getItem('bookableServices'));
+        }
+        return this.locationService.getAllLocations(this.serviceIds, this.locationType, term, userLocations, bookingLocations);
     }
     resetSearchTerm() {
         this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
@@ -1918,6 +2153,7 @@ SearchLocationComponent.decorators = [
 ];
 SearchLocationComponent.ctorParameters = () => [
     { type: LocationService },
+    { type: SessionStorageService },
     { type: FormBuilder },
     { type: ChangeDetectorRef }
 ];
@@ -1932,6 +2168,7 @@ SearchLocationComponent.propDecorators = {
     form: [{ type: Input }],
     showAutocomplete: [{ type: Input }],
     locations: [{ type: Input }],
+    bookingCheck: [{ type: Input }],
     locationSelected: [{ type: Output }],
     locationInputChanged: [{ type: Output }],
     searchLocationChanged: [{ type: Output }],
@@ -1978,6 +2215,10 @@ class FindLocationComponent {
             }
         }
     }
+    ngOnInit() {
+        // implemented to get rid of undefined values
+        this.selectedLocations = this.selectedLocations.filter(location => location.epimms_id);
+    }
     addLocation() {
         if (this.tempSelectedLocation) {
             this.selectedLocations = [...this.selectedLocations, this.tempSelectedLocation];
@@ -2036,7 +2277,7 @@ class FindLocationComponent {
 FindLocationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-find-location',
-                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
                 styles: [""]
             },] }
 ];
@@ -2222,77 +2463,6 @@ const setCaseworkers = (serviceId, caseworkers, sessionStorageService) => {
     sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
 };
 
-var BadgeColour;
-(function (BadgeColour) {
-    BadgeColour["BADGE_RED"] = "hmcts-badge--red";
-    BadgeColour["BADGE_BLUE"] = "hmcts-badge--blue";
-    BadgeColour["BADGE_GREEN"] = "hmcts-badge--green";
-})(BadgeColour || (BadgeColour = {}));
-
-class AnonymousFeatureUser {
-}
-class LoggedInFeatureUser {
-}
-
-var PersonRole;
-(function (PersonRole) {
-    PersonRole["JUDICIAL"] = "Judicial";
-    PersonRole["CASEWORKER"] = "Legal Ops";
-    PersonRole["ADMIN"] = "Admin";
-    PersonRole["ALL"] = "All";
-})(PersonRole || (PersonRole = {}));
-// Note: RoleCategory could replace PersonRole possibly
-// However a lot of webapp logic is based on current PersonRole understanding
-var RoleCategory;
-(function (RoleCategory) {
-    RoleCategory["JUDICIAL"] = "JUDICIAL";
-    RoleCategory["CASEWORKER"] = "LEGAL_OPERATIONS";
-    RoleCategory["ADMIN"] = "ADMIN";
-    RoleCategory["ALL"] = "ALL";
-})(RoleCategory || (RoleCategory = {}));
-
-class RadioFilterFieldConfig {
-}
-
-class SessionStorageService {
-    /**
-     * Get an item from the session storage.
-     * If remove is true, the item will be removed once read
-     * @param removeAfterRead removed the key once it has been read
-     */
-    getItem(key, removeAfterRead = false) {
-        const item = sessionStorage.getItem(key);
-        if (removeAfterRead) {
-            this.removeItem(key);
-        }
-        return item;
-    }
-    /**
-     * Set an item in the session storage.
-     */
-    setItem(key, value) {
-        sessionStorage.setItem(key, value);
-    }
-    /**
-     * Remove an item in the session storage.
-     */
-    removeItem(key) {
-        sessionStorage.removeItem(key);
-    }
-    /**
-     * Clear all the items held in session storage.
-     */
-    clear() {
-        sessionStorage.clear();
-    }
-}
-SessionStorageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SessionStorageService_Factory() { return new SessionStorageService(); }, token: SessionStorageService, providedIn: "root" });
-SessionStorageService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-
 class FindAPersonService {
     constructor(http, sessionStorageService) {
         this.http = http;
@@ -2305,7 +2475,7 @@ class FindAPersonService {
             this.userId = userInfo.id ? userInfo.id : userInfo.uid;
         }
         this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
-        return this.http.post('/workallocation2/findPerson', { searchOptions })
+        return this.http.post('/workallocation/findPerson', { searchOptions })
             .pipe(map(judiciary => judiciary.filter(judge => !([this.assignedUser, this.userId].includes(judge.id)))));
     }
     findCaseworkers(searchOptions) {
@@ -2335,7 +2505,7 @@ class FindAPersonService {
             return of(this.searchInCaseworkers(storedCaseworkers, searchOptions));
         }
         // all serviceIds passed in as node layer getting used anyway and caseworkers also stored there
-        return this.http.post('/workallocation2/retrieveCaseWorkersForServices', { fullServices }).pipe(tap(caseworkersByService => {
+        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)) {
@@ -2439,7 +2609,7 @@ class SearchJudicialsComponent {
             this.searchInProgress = false;
             return apiFilter;
         })).subscribe(judicial => {
-            if (term === judicial.knownAs) {
+            if (term === judicial.fullName) {
                 this.formGroup.controls.selectedFormControl.setValue(judicial);
                 this.displayedJudicials = [];
                 this.judicialChanged.emit(judicial);
@@ -2474,7 +2644,7 @@ class SearchJudicialsComponent {
         }
     }
     getDisplayName(selectedJudicial) {
-        return `${selectedJudicial.knownAs} (${selectedJudicial.emailId})`;
+        return `${selectedJudicial.fullName} (${selectedJudicial.emailId})`;
     }
     searchJudicials(term, serviceId) {
         return this.judicialService.searchJudicial(term, serviceId);
@@ -2580,8 +2750,8 @@ class FindPersonComponent {
         if (!selectedPerson) {
             return '';
         }
-        if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
-            return `${selectedPerson.knownAs} (${selectedPerson.email})`;
+        if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.fullName) {
+            return `${selectedPerson.fullName} (${selectedPerson.email})`;
         }
         return selectedPerson.email ? `${selectedPerson.name} (${selectedPerson.email})` : selectedPerson.name;
     }
@@ -2718,6 +2888,64 @@ LetDirective.propDecorators = {
     xuilibLet: [{ type: Input }]
 };
 
+class FindServiceComponent {
+    constructor() {
+        this.serviceTitle = 'Search for a service by name';
+        this.enableAddServiceButton = true;
+        this.disableInputField = false;
+    }
+    addService() {
+        // Todo
+    }
+}
+FindServiceComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-find-service',
+                template: "<div class=\"service-picker-custom\">\n    <div class=\"search-service\">\n      <div>\n        <label id=\"input-selected-service-label\" *ngIf=\"serviceTitle\">{{serviceTitle}}</label>\n      </div>\n      <exui-search-service class=\"search-service\"\n                            [services]=\"services\"\n                            [selectedServices]=\"selectedServices\"\n                            [delay]=\"300\"\n                            [disabled]=\"disabled\"></exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\" class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        data-module=\"govuk-button\" *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n    <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n      <li class=\"service-selection\"  *ngFor=\"let selection of selectedServices\">\n        <a class=\"hmcts-filter__tag\" href=\"javascript:void(0)\">\n          {{ selection.name }}\n        </a>\n      </li>\n    </ul>\n  </div>\n",
+                styles: ["#add-service{background-color:#ddd}"]
+            },] }
+];
+FindServiceComponent.propDecorators = {
+    field: [{ type: Input }],
+    fields: [{ type: Input }],
+    serviceTitle: [{ type: Input }],
+    form: [{ type: Input }],
+    services: [{ type: Input }],
+    selectedServices: [{ type: Input }],
+    disabled: [{ type: Input }],
+    enableAddServiceButton: [{ type: Input }],
+    disableInputField: [{ type: Input }]
+};
+
+class SearchServiceComponent {
+    constructor() {
+        this.showAutocomplete = false;
+        this.minSearchCharacters = 3;
+        this.term = '';
+    }
+    onInput() {
+        // Todo
+    }
+    onSelectionChange() {
+        // Todo
+    }
+}
+SearchServiceComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'exui-search-service',
+                template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChange()\">\n      {{ service.name }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\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:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:0 2px 6px rgba(0,0,0,.256863);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-left-width:0;border-bottom:1px solid #b1b4b6;border-right-width:0;border-top-width:1px;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{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+            },] }
+];
+SearchServiceComponent.propDecorators = {
+    services: [{ type: Input }],
+    selectedServices: [{ type: Input }],
+    disabled: [{ type: Input }],
+    delay: [{ type: Input }],
+    form: [{ type: Input }],
+    showAutocomplete: [{ type: Input }]
+};
+
 /*
 * Gov Uk Checkbox Dumb Component responsible for
 * displaying checkbox input and hint
@@ -3357,15 +3585,174 @@ RemoveHostDirective.ctorParameters = () => [
     { type: ElementRef }
 ];
 
-class FeatureToggleGuard {
-    constructor(featureToggleService, router) {
-        this.featureToggleService = featureToggleService;
-        this.router = router;
-    }
-    /**
-     * Usage: Add the FeatureToggleGuard as the Guard for a route, and provide the following
-     * in the data array for the route:
-     * - needsFeaturesEnabled: An array of feature keys that need to be enabled for this route
+const COMMON_COMPONENTS = [
+    ExuiPageWrapperComponent,
+    TermsAndConditionsComponent,
+    TcDisplayHtmlComponent,
+    TcDisplayPlainComponent,
+    TcConfirmComponent,
+    ContactDetailsComponent,
+    FeatureToggleDirective,
+    LetDirective,
+    HmctsSessionDialogComponent,
+    UserListComponent,
+    UserDetailsComponent,
+    InviteUserPermissionComponent,
+    InviteUserFormComponent,
+    ShareCaseComponent,
+    ShareCaseConfirmComponent,
+    SelectedCaseListComponent,
+    SelectedCaseComponent,
+    SelectedCaseConfirmComponent,
+    UserSelectComponent,
+    TabComponent,
+    AccessibilityComponent,
+    DueDateComponent,
+    CheckboxListComponent,
+    ServiceMessageComponent,
+    ServiceMessagesComponent,
+    LoadingSpinnerComponent,
+    GenericFilterComponent,
+    CookieBannerComponent,
+    FindPersonComponent,
+    SearchJudicialsComponent,
+    FindLocationComponent,
+    SearchLocationComponent,
+    FindServiceComponent,
+    SearchServiceComponent,
+    SearchVenueComponent,
+    PaginationComponent
+];
+const GOV_UI_COMPONENTS = [
+    HmctsIdentityBarComponent,
+    HmctsPaginationComponent,
+    HmctsSubNavigationComponent,
+    HmctsPrimaryNavigationComponent,
+    HmctsErrorSummaryComponent,
+    HmctsMainWrapperComponent,
+    HmctsBannerComponent,
+    GovukTableComponent,
+    GovUkInputComponent,
+    GovUkCheckboxComponent,
+    GovUkFormGroupWrapperComponent,
+    GovUkLabelComponent,
+    GovUkErrorMessageComponent,
+    GovUkFieldsetComponent,
+    GovUkDateComponent,
+    GovUkCheckboxesComponent,
+    GovUkRadioComponent,
+    GovUkRadiosComponent,
+    GovUkSelectComponent,
+    GovUkTextareaComponent,
+    GovUkFileUploadComponent,
+    RemoveHostDirective
+];
+const ɵ0 = windowProvider;
+class ExuiCommonLibModule {
+}
+ExuiCommonLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ...COMMON_COMPONENTS,
+                    ...GOV_UI_COMPONENTS
+                ],
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    RouterModule.forChild([]),
+                    MatAutocompleteModule,
+                    MatTabsModule,
+                    MatInputModule,
+                    NgxPaginationModule
+                ],
+                providers: [
+                    { provide: windowToken, useFactory: ɵ0 }
+                ],
+                exports: [
+                    ...COMMON_COMPONENTS,
+                    ...GOV_UI_COMPONENTS,
+                    PaginatePipe
+                ]
+            },] }
+];
+
+class GovUiService {
+    constructor() { }
+}
+GovUiService.ɵprov = i0.ɵɵdefineInjectable({ factory: function GovUiService_Factory() { return new GovUiService(); }, token: GovUiService, providedIn: "root" });
+GovUiService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+GovUiService.ctorParameters = () => [];
+
+function checkboxesBeCheckedValidator(minRequired = 1) {
+    return function validate(formGroup) {
+        let checked = 0;
+        Object.keys(formGroup.controls).forEach(key => {
+            const control = formGroup.controls[key];
+            if (control.value === true) {
+                checked++;
+            }
+        });
+        if (checked < minRequired) {
+            return {
+                requireOneCheckboxToBeChecked: true,
+            };
+        }
+        return null;
+    };
+}
+
+function dateValidator() {
+    return function validate(formGroup) {
+        const d = new Date(parseInt(formGroup.controls.day.value, 10), parseInt(formGroup.controls.month.value, 10) - 1, parseInt(formGroup.controls.year.value, 10) - 1);
+        function isValidDate(val) {
+            return val instanceof Date && !isNaN(+d);
+        }
+        if (!isValidDate(d)) {
+            return {
+                dateIsInvalid: true,
+            };
+        }
+        return null;
+    };
+}
+
+function radioGroupValidator() {
+    return function validate(formGroup) {
+        if (formGroup.controls) {
+            for (const control in formGroup.controls) {
+                if (!formGroup.controls[control].valid) {
+                    return {
+                        isRadioGroupInvalid: true,
+                    };
+                }
+            }
+        }
+        return null;
+    };
+}
+
+/*
+ * Public API Surface of gov-ui
+ */
+
+/*
+ * Public API Surface of gov-ui
+ */
+
+class FeatureToggleGuard {
+    constructor(featureToggleService, router) {
+        this.featureToggleService = featureToggleService;
+        this.router = router;
+    }
+    /**
+     * Usage: Add the FeatureToggleGuard as the Guard for a route, and provide the following
+     * in the data array for the route:
+     * - needsFeaturesEnabled: An array of feature keys that need to be enabled for this route
      * - featureDisabledRedirect: the URL to redirect to when the this route is not accessible due to disabled features
      * @param route Automatically provided by Angular
      */
@@ -3773,178 +4160,6 @@ LoadingService.decorators = [
  * Public API Surface of exui-common-lib
  */
 
-const COMMON_COMPONENTS = [
-    ExuiPageWrapperComponent,
-    TermsAndConditionsComponent,
-    TcDisplayHtmlComponent,
-    TcDisplayPlainComponent,
-    TcConfirmComponent,
-    ContactDetailsComponent,
-    FeatureToggleDirective,
-    LetDirective,
-    HmctsSessionDialogComponent,
-    UserListComponent,
-    UserDetailsComponent,
-    InviteUserPermissionComponent,
-    InviteUserFormComponent,
-    ShareCaseComponent,
-    ShareCaseConfirmComponent,
-    SelectedCaseListComponent,
-    SelectedCaseComponent,
-    SelectedCaseConfirmComponent,
-    UserSelectComponent,
-    TabComponent,
-    AccessibilityComponent,
-    DueDateComponent,
-    CheckboxListComponent,
-    ServiceMessageComponent,
-    ServiceMessagesComponent,
-    LoadingSpinnerComponent,
-    GenericFilterComponent,
-    CookieBannerComponent,
-    FindPersonComponent,
-    SearchJudicialsComponent,
-    FindLocationComponent,
-    SearchLocationComponent,
-    SearchVenueComponent,
-    PaginationComponent
-];
-const GOV_UI_COMPONENTS = [
-    HmctsIdentityBarComponent,
-    HmctsPaginationComponent,
-    HmctsSubNavigationComponent,
-    HmctsPrimaryNavigationComponent,
-    HmctsErrorSummaryComponent,
-    HmctsMainWrapperComponent,
-    HmctsBannerComponent,
-    GovukTableComponent,
-    GovUkInputComponent,
-    GovUkCheckboxComponent,
-    GovUkFormGroupWrapperComponent,
-    GovUkLabelComponent,
-    GovUkErrorMessageComponent,
-    GovUkFieldsetComponent,
-    GovUkDateComponent,
-    GovUkCheckboxesComponent,
-    GovUkRadioComponent,
-    GovUkRadiosComponent,
-    GovUkSelectComponent,
-    GovUkTextareaComponent,
-    GovUkFileUploadComponent,
-    RemoveHostDirective
-];
-const COMMON_SERVICES = [
-    CaseSharingStateService,
-    CookieService,
-    LaunchDarklyService,
-    FilterService,
-    FindAPersonService,
-    GoogleAnalyticsService,
-    GoogleTagManagerService,
-    LoadingService,
-    LocationService,
-    ManageSessionServices,
-    SessionStorageService,
-    TimeoutNotificationsService
-];
-const ɵ0 = windowProvider;
-class ExuiCommonLibModule {
-}
-ExuiCommonLibModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ...COMMON_COMPONENTS,
-                    ...GOV_UI_COMPONENTS
-                ],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    RouterModule.forChild([]),
-                    MatAutocompleteModule,
-                    MatTabsModule,
-                    MatInputModule,
-                    NgxPaginationModule
-                ],
-                providers: [
-                    ...COMMON_SERVICES,
-                    { provide: windowToken, useFactory: ɵ0 }
-                ],
-                exports: [
-                    ...COMMON_COMPONENTS,
-                    ...GOV_UI_COMPONENTS,
-                    PaginatePipe
-                ]
-            },] }
-];
-
-class GovUiService {
-    constructor() { }
-}
-GovUiService.ɵprov = i0.ɵɵdefineInjectable({ factory: function GovUiService_Factory() { return new GovUiService(); }, token: GovUiService, providedIn: "root" });
-GovUiService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-GovUiService.ctorParameters = () => [];
-
-function checkboxesBeCheckedValidator(minRequired = 1) {
-    return function validate(formGroup) {
-        let checked = 0;
-        Object.keys(formGroup.controls).forEach(key => {
-            const control = formGroup.controls[key];
-            if (control.value === true) {
-                checked++;
-            }
-        });
-        if (checked < minRequired) {
-            return {
-                requireOneCheckboxToBeChecked: true,
-            };
-        }
-        return null;
-    };
-}
-
-function dateValidator() {
-    return function validate(formGroup) {
-        const d = new Date(parseInt(formGroup.controls.day.value, 10), parseInt(formGroup.controls.month.value, 10) - 1, parseInt(formGroup.controls.year.value, 10) - 1);
-        function isValidDate(val) {
-            return val instanceof Date && !isNaN(+d);
-        }
-        if (!isValidDate(d)) {
-            return {
-                dateIsInvalid: true,
-            };
-        }
-        return null;
-    };
-}
-
-function radioGroupValidator() {
-    return function validate(formGroup) {
-        if (formGroup.controls) {
-            for (const control in formGroup.controls) {
-                if (!formGroup.controls[control].valid) {
-                    return {
-                        isRadioGroupInvalid: true,
-                    };
-                }
-            }
-        }
-        return null;
-    };
-}
-
-/*
- * Public API Surface of gov-ui
- */
-
-/*
- * Public API Surface of gov-ui
- */
-
 /*
  * Public API Surface of exui-common-lib
  */
@@ -3953,5 +4168,5 @@ function radioGroupValidator() {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessibilityComponent, AnonymousFeatureUser, BadgeColour, COMMON_COMPONENTS, COMMON_SERVICES, CaseSharingStateService, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DateBadgeColour, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindAPersonService, FindLocationComponent, FindPersonComponent, GOV_UI_COMPONENTS, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUiService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableColumnConfig, GovukTableComponent, HasLoadingState, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetContext, LetDirective, LoadingService, LoadingSpinnerComponent, LocationService, LoggedInFeatureUser, ManageSessionServices, PaginationComponent, PersonRole, RadioFilterFieldConfig, RemoveHostDirective, RoleCategory, RoleGuard, RoleMatching, RoleService, SECONDS_IN_A_DAY, SearchJudicialsComponent, SearchLocationComponent, SearchVenueComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, SessionStorageService, ShareCaseComponent, ShareCaseConfirmComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, windowProvider, windowToken, ɵ0, ExuiPageWrapperComponent as ɵa, TermsAndConditionsComponent as ɵb, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, LoadingSpinnerComponent as ɵbc, GenericFilterComponent as ɵbd, FilterService as ɵbe, CookieBannerComponent as ɵbf, CookieService as ɵbg, FindPersonComponent as ɵbh, FindAPersonService as ɵbi, SessionStorageService as ɵbj, SearchJudicialsComponent as ɵbk, FindLocationComponent as ɵbl, SearchLocationComponent as ɵbm, LocationService as ɵbn, SearchVenueComponent as ɵbo, PaginationComponent as ɵbp, HmctsIdentityBarComponent as ɵbq, HmctsPaginationComponent as ɵbr, HmctsSubNavigationComponent as ɵbs, HmctsPrimaryNavigationComponent as ɵbt, HmctsErrorSummaryComponent as ɵbu, HmctsMainWrapperComponent as ɵbv, HmctsBannerComponent as ɵbw, GovukTableComponent as ɵbx, GovUkInputComponent as ɵby, GovUkCheckboxComponent as ɵbz, TcDisplayHtmlComponent as ɵc, GovUkFormGroupWrapperComponent as ɵca, GovUkLabelComponent as ɵcb, GovUkErrorMessageComponent as ɵcc, GovUkFieldsetComponent as ɵcd, GovUkDateComponent as ɵce, GovUkCheckboxesComponent as ɵcf, GovUkRadioComponent as ɵcg, GovUkRadiosComponent as ɵch, GovUkSelectComponent as ɵci, GovUkTextareaComponent as ɵcj, GovUkFileUploadComponent as ɵck, RemoveHostDirective as ɵcl, CaseSharingStateService as ɵcm, CookieService as ɵcn, LaunchDarklyService as ɵco, FilterService as ɵcp, FindAPersonService as ɵcq, GoogleAnalyticsService as ɵcr, GoogleTagManagerService as ɵcs, LoadingService as ɵct, LocationService as ɵcu, ManageSessionServices as ɵcv, SessionStorageService as ɵcw, TimeoutNotificationsService as ɵcx, TcDisplayPlainComponent as ɵd, TcConfirmComponent as ɵe, ContactDetailsComponent as ɵf, FeatureToggleDirective as ɵg, FeatureToggleService as ɵh, LetContext as ɵi, LetDirective as ɵj, HmctsSessionDialogComponent as ɵk, UserListComponent as ɵl, UserDetailsComponent as ɵm, InviteUserPermissionComponent as ɵn, InviteUserFormComponent as ɵo, ShareCaseComponent as ɵp, UserSelectComponent as ɵq, CaseSharingStateService as ɵr, ShareCaseConfirmComponent as ɵs, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, SelectedCaseConfirmComponent as ɵv, TabComponent as ɵw, AccessibilityComponent as ɵx, DueDateComponent as ɵy, CheckboxListComponent as ɵz };
+export { AccessibilityComponent, AnonymousFeatureUser, BadgeColour, BookingCheckType, COMMON_COMPONENTS, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DateBadgeColour, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindLocationComponent, FindPersonComponent, GOV_UI_COMPONENTS, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUiService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableColumnConfig, GovukTableComponent, HasLoadingState, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetContext, LetDirective, LoadingService, LoadingSpinnerComponent, LoggedInFeatureUser, ManageSessionServices, PaginationComponent, PersonRole, RadioFilterFieldConfig, RemoveHostDirective, RoleCategory, RoleGuard, RoleMatching, RoleService, SECONDS_IN_A_DAY, SearchJudicialsComponent, SearchLocationComponent, SearchVenueComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, ShareCaseComponent, ShareCaseConfirmComponent, SharedCaseErrorMessages, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, checkboxesBeCheckedValidator, dateValidator, radioGroupValidator, windowProvider, windowToken, ɵ0, ExuiPageWrapperComponent as ɵa, TermsAndConditionsComponent as ɵb, ServiceMessageComponent as ɵba, ServiceMessagesComponent as ɵbb, LoadingSpinnerComponent as ɵbc, GenericFilterComponent as ɵbd, FilterService as ɵbe, CookieBannerComponent as ɵbf, CookieService as ɵbg, FindPersonComponent as ɵbh, FindAPersonService as ɵbi, SessionStorageService as ɵbj, SearchJudicialsComponent as ɵbk, FindLocationComponent as ɵbl, SearchLocationComponent as ɵbm, LocationService as ɵbn, FindServiceComponent as ɵbo, SearchServiceComponent as ɵbp, SearchVenueComponent as ɵbq, PaginationComponent as ɵbr, HmctsIdentityBarComponent as ɵbs, HmctsPaginationComponent as ɵbt, HmctsSubNavigationComponent as ɵbu, HmctsPrimaryNavigationComponent as ɵbv, HmctsErrorSummaryComponent as ɵbw, HmctsMainWrapperComponent as ɵbx, HmctsBannerComponent as ɵby, GovukTableComponent as ɵbz, TcDisplayHtmlComponent as ɵc, GovUkInputComponent as ɵca, GovUkCheckboxComponent as ɵcb, GovUkFormGroupWrapperComponent as ɵcc, GovUkLabelComponent as ɵcd, GovUkErrorMessageComponent as ɵce, GovUkFieldsetComponent as ɵcf, GovUkDateComponent as ɵcg, GovUkCheckboxesComponent as ɵch, GovUkRadioComponent as ɵci, GovUkRadiosComponent as ɵcj, GovUkSelectComponent as ɵck, GovUkTextareaComponent as ɵcl, GovUkFileUploadComponent as ɵcm, RemoveHostDirective as ɵcn, TcDisplayPlainComponent as ɵd, TcConfirmComponent as ɵe, ContactDetailsComponent as ɵf, FeatureToggleDirective as ɵg, FeatureToggleService as ɵh, LetContext as ɵi, LetDirective as ɵj, HmctsSessionDialogComponent as ɵk, UserListComponent as ɵl, UserDetailsComponent as ɵm, InviteUserPermissionComponent as ɵn, InviteUserFormComponent as ɵo, ShareCaseComponent as ɵp, UserSelectComponent as ɵq, CaseSharingStateService as ɵr, ShareCaseConfirmComponent as ɵs, SelectedCaseListComponent as ɵt, SelectedCaseComponent as ɵu, SelectedCaseConfirmComponent as ɵv, TabComponent as ɵw, AccessibilityComponent as ɵx, DueDateComponent as ɵy, CheckboxListComponent as ɵz };
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map