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

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

@@ -1,18 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ViewEncapsulation, Input, Output, Injectable, ChangeDetectionStrategy, ViewChild, Inject, InjectionToken, ChangeDetectorRef, ElementRef, Directive, ViewContainerRef, TemplateRef, NgModule } from '@angular/core';
+import { Component, EventEmitter, ViewEncapsulation, Input, Output, Injectable, Inject, InjectionToken, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, ElementRef, Directive, ViewContainerRef, TemplateRef, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
-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 { DOCUMENT, formatDate, CommonModule } from '@angular/common';
+import { FormBuilder, FormControl, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { map, tap, filter, debounceTime, mergeMap, switchMap, catchError, distinctUntilChanged, delay } from 'rxjs/operators';
 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 { of, zip, BehaviorSubject, Subject, combineLatest } from 'rxjs';
 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';
 import { Title } from '@angular/platform-browser';
@@ -20,6 +16,10 @@ import * as i1$2 from '@ng-idle/core';
 import { DocumentInterruptSource, Idle } from '@ng-idle/core';
 import * as i2$1 from '@ng-idle/keepalive';
 import { Keepalive } from '@ng-idle/keepalive';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatTabsModule } from '@angular/material/tabs';
+import { NgxPaginationModule, PaginatePipe } from 'ngx-pagination';
 
 class AccessibilityComponent {
     constructor() {
@@ -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}"]
             },] }
 ];
@@ -226,6 +226,117 @@ ContactDetailsComponent.propDecorators = {
     data: [{ type: Input }]
 };
 
+class CookieService {
+    constructor(doc) {
+        this.document = doc;
+    }
+    setCookie(key, value, expiryDate) {
+        const expiry = expiryDate ? ` expires=${expiryDate}` : '';
+        const cookie = `${key}=${value};${expiry}`;
+        this.document.cookie = cookie;
+    }
+    getCookie(key) {
+        const cookieValue = this.document.cookie
+            .split('; ')
+            .find(row => row.startsWith(`${key}=`))
+            .split('=')[1];
+        return cookieValue;
+    }
+    deleteCookie(key, path, domain) {
+        const pathValue = path ? `; path=${path}` : '';
+        const domainValue = domain ? `; domain=${domain}` : '';
+        this.document.cookie = `${key}=${pathValue}${domainValue}; expires=Thu, 01 Jan 1970 00:00:01 GMT; max-age=0`;
+    }
+    deleteCookieByPartialMatch(key, path, domain) {
+        this.document.cookie
+            .split('; ')
+            .filter(row => row.startsWith(`${key}`))
+            .forEach(element => {
+            this.deleteCookie(element.split('=')[0], path, domain);
+        });
+    }
+    checkCookie(key) {
+        return this.document.cookie.split('; ').some(item => item.trim().startsWith(`${key}=`));
+    }
+}
+CookieService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CookieService_Factory() { return new CookieService(i0.ɵɵinject(i4.DOCUMENT)); }, token: CookieService, providedIn: "root" });
+CookieService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+CookieService.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+];
+
+const windowToken = new InjectionToken('Window');
+function windowProvider() { return window; }
+
+class CookieBannerComponent {
+    constructor(cookieService, window) {
+        this.cookieService = cookieService;
+        this.rejectionNotifier = new EventEmitter();
+        this.acceptanceNotifier = new EventEmitter();
+        this.isCookieBannerVisible = false;
+        this.window = window;
+    }
+    ngOnInit() {
+        this.setState();
+    }
+    acceptCookie() {
+        this.cookieService.setCookie(this.identifier, 'true', this.getExpiryDate());
+        this.setState(true);
+    }
+    rejectCookie() {
+        this.cookieService.setCookie(this.identifier, 'false', this.getExpiryDate());
+        this.setState(true);
+    }
+    setState(reload = false) {
+        this.isCookieBannerVisible = !this.cookieService.checkCookie(this.identifier);
+        if (this.areCookiesAccepted()) {
+            this.notifyAcceptance();
+        }
+        else {
+            this.notifyRejection();
+        }
+        if (reload) { // reload if any of the buttons are pressed
+            this.window.location.reload();
+        }
+    }
+    areCookiesAccepted() {
+        return this.cookieService.checkCookie(this.identifier) && this.cookieService.getCookie(this.identifier) === 'true';
+    }
+    notifyRejection() {
+        this.rejectionNotifier.emit();
+    }
+    notifyAcceptance() {
+        this.acceptanceNotifier.emit();
+    }
+    getExpiryDate() {
+        const now = new Date();
+        const time = now.getTime();
+        const expireTime = time + 31536000000; //  in 365 days = 3600 * 1000 * 24 * 365
+        now.setTime(expireTime);
+        return now.toUTCString();
+    }
+}
+CookieBannerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-cookie-banner',
+                template: "<div class=\"govuk-cookie-banner \" role=\"region\" attr.aria-label=\"'Cookies on {{appName}}'\" *ngIf=\"isCookieBannerVisible\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on {{appName}}</h2>\n\n        <div class=\"govuk-cookie-banner__content\">\n          <p>We use some essential cookies to make this service work.</p>\n          <p>We\u2019d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"acceptCookie()\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"rejectCookie()\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" routerLink=\"/cookies\">View cookies</a>\n    </div>\n  </div>\n</div>"
+            },] }
+];
+CookieBannerComponent.ctorParameters = () => [
+    { type: CookieService },
+    { type: undefined, decorators: [{ type: Inject, args: [windowToken,] }] }
+];
+CookieBannerComponent.propDecorators = {
+    identifier: [{ type: Input }],
+    appName: [{ type: Input }],
+    rejectionNotifier: [{ type: Output }],
+    acceptanceNotifier: [{ type: Output }]
+};
+
 var DateBadgeColour;
 (function (DateBadgeColour) {
     DateBadgeColour["RED"] = "hmcts-badge--red";
@@ -346,66 +457,32 @@ DueDateComponent.propDecorators = {
     mediumUrgencyCutoff: [{ type: Input }]
 };
 
-class FilterService {
-    constructor() {
-        this.givenErrors = new BehaviorSubject(null);
-        this.isInitialSetting = false;
-        this.filterSettings = {};
-        this.streams = {};
-    }
-    persist(setting, persistence) {
-        switch (persistence) {
-            case 'local':
-                this.persistLocal(setting);
-                break;
-            case 'session':
-                this.persistSession(setting);
-                break;
-            default:
-                break;
-        }
-        this.persistMemory(setting);
-        this.updateStreams(setting);
-    }
-    get(id) {
-        if (this.filterSettings[id]) {
-            return this.filterSettings[id];
-        }
-        if (sessionStorage.getItem(id)) {
-            return JSON.parse(window.sessionStorage.getItem(id));
-        }
-        if (localStorage.getItem(id)) {
-            return JSON.parse(window.localStorage.getItem(id));
-        }
-        return null;
-    }
-    getStream(id) {
-        if (!this.streams[id]) {
-            this.streams[id] = new BehaviorSubject(this.get(id));
-        }
-        return this.streams[id].asObservable();
-    }
-    persistLocal(setting) {
-        window.localStorage.setItem(setting.id, JSON.stringify(setting));
-    }
-    persistSession(setting) {
-        window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
-    }
-    persistMemory(setting) {
-        this.filterSettings[setting.id] = setting;
-    }
-    updateStreams(setting) {
-        if (this.streams[setting.id]) {
-            this.streams[setting.id].next(setting);
-        }
-    }
+/**
+ * Main Page Wrapper
+ * Responsible for:
+ * Wrapping content within the gov-uk html elements bellow
+ * @prop showBackLink - switch for back link
+ * @prop appHeaderTitle = appHeaderTitle
+ * @prop appFunctionalTitle = appFunctionalTitle
+ * @prop summaryErrors list of errors
+ * @prop back link, appHeaderTitle (appHeaderTitle), summaryErrors (array of errors)
+ */
+class ExuiPageWrapperComponent {
+    constructor() { }
 }
-FilterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FilterService_Factory() { return new FilterService(); }, token: FilterService, providedIn: "root" });
-FilterService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
+ExuiPageWrapperComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'exui-page-wrapper',
+                template: "<div class=\"page\">\n  <a *ngIf=\"backLink\" [routerLink]=\"backLink\" class=\"govuk-back-link\">Back</a>\n  <div class=\"govuk-width-container\">\n    <main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n      <div class=\"govuk-grid-row\">\n        <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">\n          <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle}}</span>\n          {{title}}\n        </h1>\n        <ng-content>\n\n        </ng-content>\n      </div>\n    </main>\n  </div>\n</div>\n",
+                styles: [".page{width:100%}"]
             },] }
 ];
+ExuiPageWrapperComponent.ctorParameters = () => [];
+ExuiPageWrapperComponent.propDecorators = {
+    backLink: [{ type: Input }],
+    title: [{ type: Input }],
+    fnTitle: [{ type: Input }]
+};
 
 function minSelectedValidator(min) {
     return (control) => {
@@ -428,2225 +505,2182 @@ function getValues(options, values) {
     }, []);
 }
 
-class GenericFilterComponent {
-    constructor(filterService, fb) {
-        this.filterService = filterService;
-        this.fb = fb;
-        this.submitted = false;
-    }
-    get config() {
-        return this._config;
-    }
-    set config(value) {
-        this._config = Object.assign(Object.assign({}, value), { fields: value.fields.map(field => (Object.assign(Object.assign({}, field), { displayMinSelectedError: false, displayMaxSelectedError: false }))) });
-        this._config = value;
+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["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 LocationService {
+    constructor(http) {
+        this.http = http;
     }
-    get settings() {
-        return this._settings;
+    /**
+     * @description getAllLocations from service Ids/location type/search term
+     * @param serviceIds: SSCS | SSCS,IA split with ','
+     * @param locationType: optional | hearing | case_management
+     * @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, userLocations, bookingLocations) {
+        return this.http.post(`api/locations/getLocations`, { serviceIds, locationType, searchTerm, userLocations, bookingLocations });
     }
-    set settings(value) {
-        if (!value) {
-            this.getSettings();
-        }
-        if (value && value.fields) {
-            this.mergeDefaultFields(value);
-        }
-        this._settings = value;
+    /**
+     * @description searchLocations from service Ids/location type/search term
+     * @param serviceIds: BBA3 | BBA3,BFA1 split with ','
+     * @param locationType: optional | hearing | case_management
+     * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
+     * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
+     */
+    searchLocations(serviceIds, locationType, searchTerm) {
+        return this.http.get(`api/prd/location/getLocations?serviceIds=${serviceIds}&locationType=${locationType}&searchTerm=${searchTerm}`);
     }
-    static addFormValidators(field) {
-        const validators = [];
-        if (field && field.minSelected) {
-            validators.push(minSelectedValidator(field.minSelected));
-        }
-        if (field && field.maxSelected) {
-            validators.push(maxSelectedValidator(field.maxSelected));
+}
+LocationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocationService_Factory() { return new LocationService(i0.ɵɵinject(i1.HttpClient)); }, token: LocationService, providedIn: "root" });
+LocationService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+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 validators;
+        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, sessionStorageService, fb, cd) {
+        this.locationService = locationService;
+        this.sessionStorageService = sessionStorageService;
+        this.fb = fb;
+        this.cd = cd;
+        this.disabled = null;
+        this.singleMode = false;
+        this.locationType = '';
+        this.serviceIds = '';
+        this.submitted = true;
+        this.delay = 500;
+        this.showAutocomplete = false;
+        this.locations = [];
+        this.locationSelected = new EventEmitter();
+        this.locationInputChanged = new EventEmitter();
+        this.searchLocationChanged = new EventEmitter();
+        this.minSearchCharacters = 3;
+        this.term = '';
+        this.pSelectedLocations = [];
+        this.pReset = true;
+        this.form = this.fb.group({
+            searchTerm: ['']
+        });
+    }
+    get reset() {
+        return this.pReset;
+    }
+    set reset(value) {
+        this.pReset = value;
+        this.resetSearchTerm();
+    }
+    get selectedLocations() {
+        return this.pSelectedLocations;
+    }
+    set selectedLocations(value) {
+        this.pSelectedLocations = value;
     }
     ngOnInit() {
-        if (!this.settings) {
-            this.getSettings();
+        if (this.singleMode && this.selectedLocations.length > 0) {
+            const location = this.selectedLocations[0];
+            this.form.controls.searchTerm.patchValue(location.site_name, { emitEvent: false, onlySelf: true });
         }
-        this.mergeDefaultFields(this.settings);
-        this.buildForm(this.config, this.settings);
-        this.formSub = this.form.valueChanges.subscribe(() => this.submitted = false);
+        this.search();
     }
-    ngOnDestroy() {
-        if (this.formSub) {
-            this.formSub.unsubscribe();
-        }
+    filter(term) {
+        this.getLocations(term).pipe(map((locations) => this.removeSelectedLocations(locations)));
     }
-    hidden(field, form) {
-        if (!field.showCondition) {
-            return false;
-        }
-        if (typeof field.showCondition === 'string') {
-            const control = form.get(field.name);
-            const [name, value] = field.showCondition.split('=');
-            if (form.value && form.value[name] === value) {
-                if (field.type === 'find-person') {
-                    control.get('email').setValidators(Validators.required);
-                    control.get('email').updateValueAndValidity();
-                }
-                else {
-                    control.setValidators(Validators.required);
-                    control.updateValueAndValidity();
-                }
-                return false;
-            }
-            else {
-                if (field.type === 'find-person') {
-                    control.get('email').clearValidators();
-                    control.get('email').updateValueAndValidity();
-                }
-                else {
-                    control.clearValidators();
-                    control.updateValueAndValidity();
-                }
-            }
-        }
-        return true;
+    onSelectionChange(location) {
+        this.form.controls.searchTerm.patchValue(location.site_name, { emitEvent: false, onlySelf: true });
+        this.locationSelected.emit(location);
     }
-    disabled(field, form) {
-        if (!field.enableCondition) {
-            return null;
-        }
-        if (typeof field.enableCondition === 'string') {
-            const control = form.get(field.name);
-            const [name, value] = field.enableCondition.split('=');
-            if (form.value && form.value[name] === value) {
-                if (field.type === 'find-person') {
-                    control.get('email').setValidators(Validators.required);
-                    control.get('email').updateValueAndValidity();
-                }
-                else {
-                    control.setValidators(Validators.required);
-                    control.updateValueAndValidity();
-                }
-                return null;
-            }
-            else {
-                if (field.type === 'find-person') {
-                    control.get('email').clearValidators();
-                    control.get('email').updateValueAndValidity();
-                }
-                else {
-                    control.clearValidators();
-                    control.updateValueAndValidity();
-                }
+    search() {
+        this.form.controls.searchTerm.valueChanges
+            .pipe(tap((term) => this.locationInputChanged.next(term)), tap(() => this.locations = []), tap((term) => this.term = term), filter(term => !!term && term.length >= this.minSearchCharacters), debounceTime(this.delay), mergeMap(value => this.getLocations(value)), map((locations) => this.removeSelectedLocations(locations))).subscribe(locations => {
+            this.locations = locations;
+            this.cd.markForCheck();
+            if (locations.length === 1 && this.term === locations[0].site_name && !this.singleMode) {
+                this.locationSelected.emit(locations[0]);
+                this.showAutocomplete = false;
+                return;
             }
-        }
-        // find-location is special case where need to reset textbox (by existing disabling functionality)
-        // field.disable referred to component itself
-        if (field.type === 'find-location') {
-            return true;
-        }
-        // Note: field.disable decides whether to actually disable or not
-        return field.disable ? field.disable : null;
+            this.showAutocomplete = true;
+        });
     }
-    applyFilter(form) {
-        this.submitted = true;
-        form.markAsTouched();
-        if (form.valid) {
-            this._settings = {
-                id: this.config.id,
-                fields: this.getSelectedValues(form.value, this.config)
-            };
-            this.filterService.givenErrors.next(null);
-            const settings = Object.assign(Object.assign({}, this.settings), { reset: false });
-            this.filterService.persist(settings, this.config.persistence);
-        }
-        else {
-            this.emitFormErrors(form);
-        }
+    onInput() {
+        this.searchLocationChanged.emit();
     }
-    // when domain changes ensure that person field is reset
-    fieldChanged(field, form) {
-        // TODO - Do similar with jurisdiction/service for caseworkers by services
-        if (field.changeResetFields && field.changeResetFields.length) {
-            for (const resetField of field.changeResetFields) {
-                this.resetField(resetField, form);
-            }
-        }
+    getLocations(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);
     }
-    // when user enters input change radio button
-    inputChanged(field) {
-        if (field.radioSelectionChange && typeof field.radioSelectionChange === 'string') {
-            const [name, value] = field.enableCondition.split('=');
-            this.form.get(name).patchValue(value);
-        }
+    resetSearchTerm() {
+        this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
     }
-    cancelFilter() {
-        this.buildForm(this.config, this.settings, true);
-        if (this.config && this.config.cancelSetting) {
-            this._settings.fields = JSON.parse(JSON.stringify(this.config.cancelSetting.fields));
+    removeSelectedLocations(locations) {
+        if (this.singleMode) {
+            return locations;
         }
-        const settings = Object.assign(Object.assign({}, this.settings), { reset: true });
-        this.filterService.persist(settings, this.config.persistence);
-        this.filterService.givenErrors.next(null);
-        this.submitted = false;
+        return locations.filter(location => !this.selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(location.epimms_id) && location.site_name);
     }
-    updatePersonControls(values, field) {
-        let keys;
-        if (!values) {
-            keys = Object.keys(this.form.get(field.name).value);
-        }
-        else {
-            keys = Object.keys(values);
-        }
-        for (const key of keys) {
-            if (this.form.get(field.name) && this.form.get(field.name).get(key)) {
-                const value = values && values[key] ? values[key] : null;
-                this.form.get(field.name).get(key).patchValue(value);
-            }
-        }
+}
+SearchLocationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'exui-search-location',
+                template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <mat-option *ngFor=\"let location of locations\"\n                (onSelectionChange)=\"onSelectionChange(location)\">\n      {{ location.site_name }}\n    </mat-option>\n    <mat-option *ngIf=\"!locations.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:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+            },] }
+];
+SearchLocationComponent.ctorParameters = () => [
+    { type: LocationService },
+    { type: SessionStorageService },
+    { type: FormBuilder },
+    { type: ChangeDetectorRef }
+];
+SearchLocationComponent.propDecorators = {
+    control: [{ type: Input }],
+    disabled: [{ type: Input }],
+    singleMode: [{ type: Input }],
+    locationType: [{ type: Input }],
+    serviceIds: [{ type: Input }],
+    submitted: [{ type: Input }],
+    delay: [{ type: Input }],
+    form: [{ type: Input }],
+    showAutocomplete: [{ type: Input }],
+    locations: [{ type: Input }],
+    bookingCheck: [{ type: Input }],
+    locationSelected: [{ type: Output }],
+    locationInputChanged: [{ type: Output }],
+    searchLocationChanged: [{ type: Output }],
+    reset: [{ type: Input }],
+    selectedLocations: [{ type: Input }]
+};
+
+class FindLocationComponent {
+    constructor() {
+        this.locationFieldChanged = new EventEmitter();
+        this.selectedLocations = [];
+        this.submitted = true;
+        this.enableAddLocationButton = true;
+        this.locationTitle = 'Search for a location by name';
+        this.disableInputField = false;
+        this.locations = [];
+        this.tempSelectedLocation = null;
+        this.serviceIds = 'SSCS,IA';
+        this.pServices = [];
+        this.pDisabled = false;
     }
-    toggleSelectAll(event, form, item, field) {
-        const isChecked = event.target.checked;
-        const formArray = form.get(field.name);
-        if (!item.selectAll) {
-            const allChecked = formArray.controls.every((control) => control.value);
-            let index = null;
-            const hasSelectAllOption = field.options.find((option, i) => {
-                if (option.hasOwnProperty('selectAll')) {
-                    index = i;
-                    return true;
-                }
-                return false;
-            });
-            // tslint:disable-next-line:variable-name
-            const isAllCheckedExcludingTheSelectAllOption = formArray.controls.filter((_control, i) => i !== index)
-                .every((control) => control.value);
-            if (!allChecked && hasSelectAllOption && !isChecked) {
-                formArray.controls.forEach((control, i) => {
-                    if (index === i) {
-                        control.patchValue(false);
-                        return;
-                    }
-                });
-            }
-            else if (hasSelectAllOption && !allChecked && isChecked && isAllCheckedExcludingTheSelectAllOption) {
-                formArray.controls[index].patchValue(true);
-            }
-            return;
+    get disabled() {
+        return this.pDisabled;
+    }
+    set disabled(value) {
+        if (value) {
+            this.searchLocationComponent.resetSearchTerm();
+            this.removeSelectedValues();
         }
-        formArray.controls.forEach((control) => {
-            if (isChecked) {
-                control.patchValue(true);
+        this.pDisabled = this.disableInputField === true ? true : null;
+    }
+    get services() {
+        return this.pServices;
+    }
+    set services(value) {
+        this.pServices = value;
+        const field = this.fields.find(f => f.name === this.field.findLocationField);
+        if (field) {
+            if (typeof value === 'string') {
+                this.serviceIds = value;
             }
             else {
-                control.patchValue(false);
+                this.serviceIds = getValues(field.options, value).filter(x => x !== 'services_all').join(',');
             }
-        });
+        }
     }
-    resetField(resetField, form) {
-        const control = form.get(resetField);
-        const defaultValue = this.config.cancelSetting.fields.find((f) => f.name === resetField);
-        if (control instanceof FormArray) {
-            for (let i = 0; i < control.length; i++) {
-                control.removeAt(i);
-            }
+    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];
+            this.addSelectedLocationsToForm([this.tempSelectedLocation]);
+            this.tempSelectedLocation = null;
+            this.locations = [];
+            this.searchLocationComponent.resetSearchTerm();
         }
-        else if (control instanceof FormGroup) {
-            const keys = Object.keys(control.value);
-            for (const key of keys) {
-                this.resetField(key, control);
+    }
+    removeLocation(location) {
+        if (location.epimms_id) {
+            this.selectedLocations = this.selectedLocations.filter(selectedLocation => selectedLocation.epimms_id !== location.epimms_id);
+            const formArray = this.form.get(this.field.name);
+            const index = formArray.value.findIndex(selectedLocation => selectedLocation.epimms_id === location.epimms_id);
+            if (index > -1) {
+                formArray.removeAt(index);
             }
         }
-        else if (control instanceof FormControl) {
-            const value = defaultValue && defaultValue.value && defaultValue.value.length ? defaultValue.value[0] : null;
-            control.setValue(value);
-        }
     }
-    mergeDefaultFields(filter) {
-        if (filter) {
-            filter.fields = this.filterService.get(this.config.id) ? this.filterService.get(this.config.id).fields : filter.fields;
-        }
-        else if (this.config && this.config.cancelSetting) {
-            this._settings = {
-                id: this.config.id,
-                fields: JSON.parse(JSON.stringify(this.config.cancelSetting.fields))
-            };
+    onInputChanged(term) {
+        // if the filter is in single mode clear the selected locations
+        if (typeof term === 'string' && this.field.maxSelected === 1) {
+            this.removeSelectedValues();
         }
     }
-    getSettings() {
-        this._settings = this.filterService.get(this.config.id);
+    onSearchInputChanged() {
+        this.locationFieldChanged.emit();
     }
-    buildForm(config, settings, reset) {
-        const findPersonControl = this.form ? this.form.get('findPersonControl') : null;
-        this.form = this.fb.group({});
-        if (findPersonControl) {
-            // in order to maintain find person component, control needs to be kept
-            this.form.addControl('findPersonControl', findPersonControl);
+    onLocationSelected(location) {
+        if (this.field.maxSelected === 1) {
+            this.removeSelectedValues();
+            this.addSelectedLocationsToForm([location]);
         }
-        for (const field of config.fields) {
-            if (field.type === 'checkbox' || field.type === 'checkbox-large') {
-                const formArray = this.buildCheckBoxFormArray(field, settings);
-                this.form.addControl(field.name, formArray);
-            }
-            else if (field.type === 'find-location') {
-                const formArray = this.buildFindLocationFormArray(field, settings);
-                this.form.addControl(field.name, formArray);
-            }
-            else {
-                const validators = [];
-                if (field.minSelected && field.minSelected > 0) {
-                    validators.push(Validators.required);
-                }
-                let defaultValue = null;
-                if (reset && config.cancelSetting) {
-                    const cancelField = config.cancelSetting.fields.find((f) => f.name === field.name);
-                    defaultValue = cancelField && cancelField.value ? cancelField.value[0] : '';
-                }
-                else if (settings && settings.fields) {
-                    const lastSavedValue = settings.fields.find((f) => f.name === field.name);
-                    defaultValue = lastSavedValue && lastSavedValue ? lastSavedValue.value[0] : '';
-                }
-                // if field is find-person build a form group;
-                if (field.type === 'find-person') {
-                    const formGroup = new FormGroup({
-                        domain: new FormControl(''),
-                        email: new FormControl(defaultValue && defaultValue.hasOwnProperty('email') ? defaultValue.email : '', validators),
-                        id: new FormControl(''),
-                        name: new FormControl(''),
-                        knownAs: new FormControl(''),
-                    });
-                    this.form.addControl(field.name, formGroup);
-                }
-                else {
-                    const control = new FormControl(defaultValue, validators);
-                    this.form.addControl(field.name, control);
-                }
-                // if field updates find person component set the initial domain
-                if (field.findPersonField) {
-                    this.fieldChanged(field, this.form);
+        else {
+            if (!this.selectedLocations.find(x => x.epimms_id === location.epimms_id)) {
+                if (location.epimms_id) {
+                    this.tempSelectedLocation = location;
                 }
             }
         }
     }
-    buildCheckBoxFormArray(field, settings) {
-        const validators = GenericFilterComponent.addFormValidators(field);
-        const formArray = this.fb.array([], validators);
-        let defaultValues;
-        if (settings && settings.fields) {
-            defaultValues = settings.fields.find((f) => f.name === field.name);
-        }
-        for (const option of field.options) {
-            let checked = false;
-            if (defaultValues && Array.isArray(defaultValues.value)) {
-                checked = !!defaultValues.value.find((value) => value === option.key);
-            }
-            formArray.push(new FormControl(checked));
+    removeSelectedValues() {
+        const formArray = this.form.get(this.field.name);
+        for (let i = 0; i < formArray.length; i++) {
+            formArray.removeAt(i);
         }
-        return formArray;
+        this.selectedLocations = [];
     }
-    buildFindLocationFormArray(field, settings) {
-        const validators = GenericFilterComponent.addFormValidators(field);
-        const formArray = this.fb.array([], validators);
-        let defaultValues;
-        if (settings && settings.fields) {
-            defaultValues = settings.fields.find((f) => f.name === field.name);
-            if (defaultValues && defaultValues.value && defaultValues.value.length > 0) {
-                for (const defaultValue of defaultValues.value) {
-                    formArray.push(new FormControl(defaultValue));
-                }
-            }
-        }
-        return formArray;
-    }
-    getSelectedValues(formValues, config) {
-        return Object.keys(formValues).map((name) => {
-            const values = formValues[name];
-            if (Array.isArray(values)) {
-                const field = config.fields.find(f => f.name === name);
-                if (field.type === 'find-location') {
-                    return { value: values, name };
-                }
-                else {
-                    return { value: getValues(field.options, values), name };
-                }
-            }
-            else {
-                return { value: [values], name };
-            }
-        });
-    }
-    emitFormErrors(form) {
-        const errors = [];
-        for (const field of this.config.fields) {
-            const formGroup = form.get(field.name);
-            if (formGroup && formGroup.errors && formGroup.errors.minLength) {
-                errors.push({ name: field.name, error: field.minSelectedError });
-            }
-            if (formGroup && formGroup.errors && formGroup.errors.maxLength) {
-                errors.push({ name: field.name, error: field.minSelectedError });
-            }
-        }
-        if (errors.length) {
-            this.filterService.givenErrors.next(errors);
+    addSelectedLocationsToForm(locations) {
+        const formArray = this.form.get(this.field.name);
+        for (const location of locations) {
+            formArray.push(new FormControl(location));
         }
     }
 }
-GenericFilterComponent.decorators = [
+FindLocationComponent.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",
-                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}"]
+                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                          [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: [""]
             },] }
 ];
-GenericFilterComponent.ctorParameters = () => [
-    { type: FilterService },
-    { type: FormBuilder }
-];
-GenericFilterComponent.propDecorators = {
-    config: [{ type: Input }],
-    settings: [{ type: Input }]
+FindLocationComponent.propDecorators = {
+    locationFieldChanged: [{ type: Output }],
+    selectedLocations: [{ type: Input }],
+    submitted: [{ type: Input }],
+    enableAddLocationButton: [{ type: Input }],
+    form: [{ type: Input }],
+    field: [{ type: Input }],
+    fields: [{ type: Input }],
+    locationTitle: [{ type: Input }],
+    disableInputField: [{ type: Input }],
+    searchLocationComponent: [{ type: ViewChild, args: [SearchLocationComponent, { static: true },] }],
+    disabled: [{ type: Input }],
+    services: [{ type: Input }]
 };
 
-/*
-* Gov UK Dialog Component
-* Responsible for displaying dialog layout
-* using ng-content to display content from parent
-* */
-class HmctsSessionDialogComponent {
-    constructor() {
-        this.close = new EventEmitter();
-    }
-    onClose() {
-        this.close.emit();
-    }
-}
-HmctsSessionDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-session-dialog',
-                template: "<div class=\"gem-c-modal-dialogue\" data-module=\"modal-dialogue\" id=\"modal-default\" style=\"display: block;\">\n  <div class=\"gem-c-modal-dialogue__overlay\"></div>\n  <dialog class=\"gem-c-modal-dialogue__box\" aria-modal=\"true\" role=\"dialog\" tabindex=\"0\" [ngStyle]=\"{'margin-top': positionTop}\">\n    <div class=\"gem-c-modal-dialogue__header\">\n      <svg role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38 38\" height=\"33\" width=\"33\">\n        <style type=\"text/css\">\n          .st0{fill:#FFFFFF;}\n        </style>\n        <g id=\"_4_-_granular_components_warning_icon\" transform=\"translate(0.5 0.5)\">\n          <g id=\"Warning_icon\" transform=\"translate(0)\">\n            <path id=\"Exclusion_1\" class=\"st0\" d=\"M18.5,37.5c-5.04,0.01-9.88-1.99-13.44-5.57C1.49,28.38-0.51,23.54-0.5,18.5\n              c-0.01-5.04,1.99-9.88,5.56-13.43C8.62,1.49,13.46-0.51,18.5-0.5c5.04-0.01,9.88,1.99,13.44,5.56c3.57,3.56,5.58,8.39,5.56,13.44\n              c0.01,5.04-1.99,9.88-5.56,13.44C28.38,35.51,23.54,37.51,18.5,37.5z M18.52,24.29c-0.4,0-0.8,0.08-1.17,0.23\n              c-0.36,0.15-0.69,0.37-0.97,0.64c-0.28,0.27-0.5,0.59-0.65,0.95c-0.16,0.36-0.24,0.76-0.23,1.15c0,0.4,0.08,0.8,0.23,1.17\n              c0.15,0.36,0.37,0.68,0.65,0.96c0.28,0.27,0.61,0.49,0.97,0.64c0.37,0.16,0.77,0.24,1.17,0.24c0.4,0,0.79-0.08,1.15-0.24\n              c0.35-0.15,0.67-0.37,0.95-0.64c0.27-0.27,0.49-0.6,0.64-0.96c0.16-0.37,0.24-0.77,0.23-1.17c0-0.4-0.08-0.79-0.23-1.15\n              c-0.15-0.35-0.37-0.67-0.64-0.95c-0.27-0.27-0.6-0.49-0.95-0.64C19.31,24.37,18.92,24.29,18.52,24.29L18.52,24.29z M16.11,7.5\n              l0.42,14.87h3.91L20.86,7.5H16.11z\"/>\n          </g>\n        </g>\n      </svg>\n      <div class=\"gem-c-modal-dialogue__title\">We are about to sign you out</div>\n    </div>\n    <div class=\"gem-c-modal-dialogue__content\">\n      <ng-content></ng-content>\n    </div>\n  </dialog>\n</div>\n",
-                styles: [".gem-c-modal-dialogue{display:none;z-index:1000;overflow-x:hidden;overflow-y:scroll;outline:0}.gem-c-modal-dialogue,.gem-c-modal-dialogue__box{position:fixed;top:0;left:0;width:100%;height:100%}.gem-c-modal-dialogue__box{display:block;background:#fff;right:0;bottom:0;margin:0;padding:0;overflow-y:auto;border:0;font-family:GDS Transport,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25;color:#0b0c0c}.gem-c-modal-dialogue__box:focus{outline:3px solid #fd0}@media print{.gem-c-modal-dialogue__box{font-family:sans-serif}}@media (min-width:40.0625em){.gem-c-modal-dialogue__box{font-size:1.1875rem;line-height:1.3157894737}}@media print{.gem-c-modal-dialogue__box{font-size:14pt;line-height:1.15;color:#000}}@media (min-width:40.0625em){.gem-c-modal-dialogue__box{position:relative;top:inherit;right:inherit;bottom:inherit;left:inherit;width:auto;max-width:640px;height:auto;margin:30px auto;border:2px solid #0b0c0c}}@media (min-width:40.0625em){.gem-c-modal-dialogue__box--wide{max-width:960px}}@media (min-width:40.0625em) and (max-width:64em){.gem-c-modal-dialogue__box--wide{margin:30px}}.gem-c-modal-dialogue__overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:.8;background:#0b0c0c;pointer-events:none;touch-action:none}@media screen{.gem-o-template--modal{overflow-y:inherit}}.gem-o-template__body--modal{overflow:hidden}.gem-o-template__body--blur .govuk-footer,.gem-o-template__body--blur .govuk-header,.gem-o-template__body--blur .govuk-main-wrapper,.gem-o-template__body--blur .govuk-phase-banner,.gem-o-template__body--blur .govuk-skip-link,.gem-o-template__body--blur .govuk-width-container .govuk-back-link{filter:blur(2px)}.govuk-warning-text__icon{margin:0 0 0 12px}.gem-c-modal-dialogue__header{padding:9px 15px 10px;color:#fff;background:#d4351d;display:flex}.gem-c-modal-dialogue__title{margin:5px 0 4px 12px}.gem-c-modal-dialogue__logotype-crown{fill:currentColor;vertical-align:middle}.gem-c-modal-dialogue__logotype-crown-fallback-image{width:30px;height:26px;border:0;vertical-align:middle}.gem-c-modal-dialogue__content{padding:15px;background:#fff}.gem-c-modal-dialogue__close-button{position:absolute;top:0;right:0;width:44px;height:44px;border:0;color:#fff;background:none;cursor:pointer;font-family:GDS Transport,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:1.5rem;line-height:1.3}@media print{.gem-c-modal-dialogue__close-button{font-family:sans-serif}}@media (min-width:40.0625em){.gem-c-modal-dialogue__close-button{font-size:2.25rem;line-height:1.3}}@media print{.gem-c-modal-dialogue__close-button{font-size:24pt;line-height:1.3}}@media (max-width:40.0525em){.gem-c-modal-dialogue__close-button{font-size:36px;line-height:1.3}}.gem-c-modal-dialogue__close-button:focus,.gem-c-modal-dialogue__close-button:hover{color:#0b0c0c;box-shadow:0 -2px #fd0,0 4px #0b0c0c;text-decoration:none;outline:none;background:#fd0}"]
-            },] }
-];
-HmctsSessionDialogComponent.ctorParameters = () => [];
-HmctsSessionDialogComponent.propDecorators = {
-    positionTop: [{ type: Input }],
-    close: [{ type: Output }]
+const getAllCaseworkersFromServices = (caseworkersByService) => {
+    let allCaseworkers = [];
+    caseworkersByService.forEach(caseworkerListByService => {
+        allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
+    });
+    return allCaseworkers;
 };
-
-class InviteUserFormComponent {
-    constructor() {
-        this.submitForm = new EventEmitter();
-    }
-    set errorMessages(value) {
-        this.isInvalid = value || {};
-    }
-    onSubmit() {
-        this.submitForm.emit();
-    }
-}
-InviteUserFormComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-invite-user-form',
-                template: "\n<form [formGroup]=\"inviteUserForm\" (ngSubmit)=\"onSubmit()\" >\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'First name', hint: 'Include all middle names.', name: 'firstName', id: 'firstName', type: 'text', classes: 'testClass'}\"\n    [errorMessage]=\"isInvalid.firstName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Last name', name: 'lastName', id: 'lastName', type: 'text'}\"\n    [errorMessage]=\"isInvalid.lastName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Email address', name: 'email', id: 'email', type: 'email'}\"\n    [errorMessage]=\"isInvalid.email\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-invite-permission-form [inviteUserForm]=\"inviteUserForm\" [errorMessages]=\"isInvalid.roles\">\n  </xuilib-invite-permission-form>\n\n  <button type=\"submit\" class=\"govuk-button\">\n    Send invitation\n  </button>\n</form>\n"
-            },] }
-];
-InviteUserFormComponent.propDecorators = {
-    submitForm: [{ type: Output }],
-    inviteUserForm: [{ type: Input }],
-    errorMessages: [{ type: Input }]
+const getSessionStorageKeyForServiceId = (serviceId) => {
+    return `${serviceId}-caseworkers`;
 };
-
-class InviteUserPermissionComponent {
-    constructor() {
-        this.isPuiCaseManager = false;
-        this.isPuiUserManager = false;
-        this.isPuiOrganisationManager = false;
-        this.isPuiFinanceManager = false;
+const getCaseworkers = (serviceId, sessionStorageService) => {
+    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
+    const value = sessionStorageService.getItem(sessionKey);
+    if (value) {
+        return JSON.parse(value);
     }
-}
-InviteUserPermissionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-invite-permission-form',
-                template: "  <!--permissions -->\n  <ng-container [formGroup]=\"inviteUserForm\">\n  <xuilib-gov-uk-form-group-wrapper\n    [config]=\"{hint: 'Choose what the user will be able to do. You can change this later.', legend: 'Permissions', key: 'roles'}\"\n    [formGroupName]=\"'roles'\"\n    [error]=\"errorMessages\">\n\n    <div class=\"govuk-checkboxes\">\n      <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiCaseManager\"\n        [config]=\"{value: 'pui-case-manager',  label: 'Manage Cases', name: 'roles', hint: 'View, create and progress cases.', focusOn: 'roles'}\">\n      </xuilib-gov-checkbox>\n\n      <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiUserManager\"\n        [config]=\"{value: 'pui-user-manager', label: 'Manage Users', name: 'roles',\n        hint: 'Invite users.'}\">\n      </xuilib-gov-checkbox>\n\n      <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiOrganisationManager\"\n        [config]=\"{value: 'pui-organisation-manager', label: 'Manage Organisation', name: 'roles',\n        hint: 'View organisation name and addresses.'}\">\n      </xuilib-gov-checkbox>\n\n      <!-- <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiFinanceManager\"\n        [config]=\"{value: 'pui-finance-manager', label: 'Manage Payments', name: 'roles',\n        hint: 'View account balances, available credit and transactions.'}\">\n      </xuilib-gov-checkbox> -->\n    </div>\n\n  </xuilib-gov-uk-form-group-wrapper>\n</ng-container>"
-            },] }
-];
-InviteUserPermissionComponent.propDecorators = {
-    inviteUserForm: [{ type: Input }],
-    isPuiCaseManager: [{ type: Input }],
-    isPuiUserManager: [{ type: Input }],
-    isPuiOrganisationManager: [{ type: Input }],
-    isPuiFinanceManager: [{ type: Input }],
-    errorMessages: [{ type: Input }]
 };
-
-class LoadingSpinnerComponent {
-    constructor() {
-        this.loadingText = 'Loading';
-    }
-}
-LoadingSpinnerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-loading-spinner',
-                template: "<div class=\"spinner-container\">\n    <div class=\"spinner-inner-container\">\n        <p>{{loadingText}}</p>\n        <div class=\"spinner\" style=\"margin: auto;\"></div>\n    </div>\n</div>\n",
-                encapsulation: ViewEncapsulation.None,
-                styles: [".spinner-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background:hsla(0,0%,100%,.5);z-index:99}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #ddd;border-top-color:#000;border-radius:50%;width:40px;height:40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]
-            },] }
-];
-LoadingSpinnerComponent.propDecorators = {
-    loadingText: [{ type: Input }]
+const setCaseworkers = (serviceId, caseworkers, sessionStorageService) => {
+    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
+    sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
 };
 
-class CaseSharingStateService {
-    constructor() {
-        this.caseState = [];
-        this.subject = new BehaviorSubject(this.caseState);
-    }
-    get state() {
-        return this.subject.asObservable().pipe(distinctUntilChanged());
-    }
-    setCases(cases) {
-        this.caseState = [];
-        cases.forEach(aCase => {
-            this.caseState.push({ caseId: aCase.caseId, caseTitle: aCase.caseTitle, caseTypeId: aCase.caseTypeId, roles: aCase.roles,
-                sharedWith: aCase.sharedWith, pendingShares: aCase.pendingShares, pendingUnshares: aCase.pendingUnshares });
-        });
-        this.subject.next(this.caseState);
-    }
-    getCases() {
-        return this.caseState;
+class FindAPersonService {
+    constructor(http, sessionStorageService) {
+        this.http = http;
+        this.sessionStorageService = sessionStorageService;
     }
-    requestShare(user) {
-        const oldSharedCases = this.caseState.slice();
-        const newSharedCases = [];
-        for (const sharedCase of oldSharedCases) {
-            if (!sharedCase.pendingShares) {
-                sharedCase.pendingShares = [];
-            }
-            const newPendingShares = sharedCase.pendingShares.slice();
-            if (!sharedCase.pendingUnshares) {
-                sharedCase.pendingUnshares = [];
-            }
-            const newPendingUnshares = sharedCase.pendingUnshares.slice();
-            if (!this.userHasAccess(sharedCase, user)) {
-                if (!newPendingShares.some(u => u.email === user.email)) {
-                    newPendingShares.push(user);
-                }
-            }
-            else {
-                for (let u = 0, ul = newPendingUnshares.length; u < ul; u++) {
-                    if (newPendingUnshares[u].email === user.email) {
-                        newPendingUnshares.splice(u, 1);
-                        break;
-                    }
-                }
-            }
-            const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares, pendingShares: newPendingShares });
-            newSharedCases.push(newSharedCase);
+    find(searchOptions) {
+        const userInfoStr = this.sessionStorageService.getItem('userDetails');
+        if (userInfoStr && !searchOptions.userIncluded) {
+            const userInfo = JSON.parse(userInfoStr);
+            this.userId = userInfo.id ? userInfo.id : userInfo.uid;
         }
-        this.subject.next(newSharedCases);
-        return newSharedCases;
+        this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
+        return this.http.post('/workallocation/findPerson', { searchOptions })
+            .pipe(map(judiciary => judiciary.filter(judge => !([this.assignedUser, this.userId].includes(judge.id)))));
     }
-    requestUnshare(caseId, user) {
-        const newSharedCases = [];
-        for (const sharedCase of this.caseState) {
-            if (sharedCase.caseId === caseId) {
-                if (!sharedCase.pendingUnshares) {
-                    sharedCase.pendingUnshares = [];
-                }
-                const newPendingUnshares = sharedCase.pendingUnshares.slice();
-                if (newPendingUnshares) {
-                    if (!newPendingUnshares.some(u => u.email === user.email)) {
-                        newPendingUnshares.push(user);
-                    }
-                }
-                else {
-                    newPendingUnshares.push(user);
-                }
-                const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares });
-                newSharedCases.push(newSharedCase);
+    findCaseworkers(searchOptions) {
+        const userInfoStr = this.sessionStorageService.getItem('userDetails');
+        if (userInfoStr) {
+            const userInfo = JSON.parse(userInfoStr);
+            this.userId = userInfo.id ? userInfo.id : userInfo.uid;
+        }
+        this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
+        const fullServices = searchOptions.services;
+        const storedServices = [];
+        const newServices = [];
+        const storedCaseworkersByService = [];
+        fullServices.forEach(serviceId => {
+            const serviceKey = getSessionStorageKeyForServiceId(serviceId);
+            if (this.sessionStorageService.getItem(serviceKey)) {
+                storedServices.push(serviceId);
+                storedCaseworkersByService.push({ service: serviceId, caseworkers: JSON.parse(this.sessionStorageService.getItem(serviceKey)) });
             }
             else {
-                newSharedCases.push(sharedCase);
+                newServices.push(serviceId);
             }
+        });
+        // if all services are stored then return the stored caseworkers by service
+        if (storedServices.length === fullServices.length) {
+            const storedCaseworkers = getAllCaseworkersFromServices(storedCaseworkersByService);
+            return of(this.searchInCaseworkers(storedCaseworkers, searchOptions));
         }
-        this.subject.next(newSharedCases);
-        return;
+        // all serviceIds passed in as node layer getting used anyway and caseworkers also stored there
+        return this.http.post('/workallocation/retrieveCaseWorkersForServices', { fullServices }).pipe(tap(caseworkersByService => {
+            caseworkersByService.forEach(caseworkerListByService => {
+                // for any new service, ensure that they are then stored in the session
+                if (newServices.includes(caseworkerListByService.service)) {
+                    setCaseworkers(caseworkerListByService.service, caseworkerListByService.caseworkers, this.sessionStorageService);
+                }
+            });
+        }), map(caseworkersByService => {
+            const givenCaseworkers = getAllCaseworkersFromServices(caseworkersByService);
+            return this.searchInCaseworkers(givenCaseworkers, searchOptions);
+        }));
     }
-    requestCancel(caseId, user) {
-        const newSharedCases = [];
-        for (const sharedCase of this.caseState) {
-            if (sharedCase.caseId === caseId) {
-                if (!sharedCase.pendingUnshares) {
-                    sharedCase.pendingUnshares = [];
-                }
-                const newPendingUnshares = sharedCase.pendingUnshares.slice();
-                for (let iPendingUnshares = 0; iPendingUnshares < newPendingUnshares.length; iPendingUnshares++) {
-                    if (newPendingUnshares[iPendingUnshares].email === user.email) {
-                        newPendingUnshares.splice(iPendingUnshares, 1);
-                        break;
-                    }
-                }
-                if (!sharedCase.pendingShares) {
-                    sharedCase.pendingShares = [];
-                }
-                const newPendingShares = sharedCase.pendingShares.slice();
-                for (let iPendingShares = 0; iPendingShares < newPendingShares.length; iPendingShares++) {
-                    if (newPendingShares[iPendingShares].email === user.email) {
-                        newPendingShares.splice(iPendingShares, 1);
-                        break;
-                    }
-                }
-                const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares, pendingShares: newPendingShares });
-                newSharedCases.push(newSharedCase);
-            }
-            else {
-                newSharedCases.push(sharedCase);
+    mapCaseworkers(caseworkers, roleCategory) {
+        const people = [];
+        caseworkers.forEach((caseworker) => {
+            const thisPerson = {
+                email: caseworker.email,
+                name: `${caseworker.firstName} ${caseworker.lastName}`,
+                id: caseworker.idamId,
+                domain: caseworker.roleCategory === RoleCategory.CASEWORKER ? PersonRole.CASEWORKER : PersonRole.ADMIN,
+            };
+            if (caseworker.roleCategory === roleCategory || roleCategory === RoleCategory.ALL) {
+                people.push(thisPerson);
             }
-        }
-        this.subject.next(newSharedCases);
-        return;
+        });
+        return people;
     }
-    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;
-            }
+    searchInCaseworkers(caseworkers, searchOptions) {
+        let roleCategory = RoleCategory.ALL;
+        if (!(searchOptions.userRole === PersonRole.ALL)) {
+            roleCategory = searchOptions.userRole === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
         }
+        const searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
+        const people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
+        const finalPeopleList = people.filter(person => person && person.name && person.name.toLowerCase().includes(searchTerm));
+        return searchOptions.userIncluded ? finalPeopleList.filter(person => person && person.id !== this.assignedUser)
+            : finalPeopleList.filter(person => person && person.id !== this.userId && person.id !== this.assignedUser);
     }
-    userHasAccess(c, user) {
-        if (!c.sharedWith) {
-            return false;
-        }
-        for (let i = 0, l = c.sharedWith.length; i < l; i++) {
-            if (c.sharedWith[i].email === user.email) {
-                return true;
-            }
-        }
-        return false;
+    searchJudicial(value, serviceId) {
+        return this.http.post('api/prd/judicial/getJudicialUsersSearch', { searchString: value, serviceCode: serviceId });
     }
 }
-CaseSharingStateService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CaseSharingStateService_Factory() { return new CaseSharingStateService(); }, token: CaseSharingStateService, providedIn: "root" });
-CaseSharingStateService.decorators = [
+FindAPersonService.caseworkersKey = 'caseworkers';
+FindAPersonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FindAPersonService_Factory() { return new FindAPersonService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(SessionStorageService)); }, token: FindAPersonService, providedIn: "root" });
+FindAPersonService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
-CaseSharingStateService.ctorParameters = () => [];
+FindAPersonService.ctorParameters = () => [
+    { type: HttpClient },
+    { type: SessionStorageService }
+];
 
-class SelectedCaseConfirmComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.changeLink = '';
+class FindPersonComponent {
+    constructor(findPersonService, cd) {
+        this.findPersonService = findPersonService;
+        this.cd = cd;
+        this.personSelected = new EventEmitter();
+        this.personFieldChanged = new EventEmitter();
+        this.boldTitle = 'Find the person';
+        this.subTitle = 'Type the name of the person and select them.';
+        this.domain = PersonRole.ALL;
+        this.findPersonGroup = new FormGroup({});
+        this.submitted = true;
+        this.userIncluded = false;
+        this.placeholderContent = '';
+        this.isNoResultsShown = true;
+        this.showUpdatedColor = false;
+        this.selectedPersons = [];
+        this.errorMessage = 'You must select a name';
+        this.idValue = '';
+        this.services = ['IA'];
+        this.disabled = null;
+        this.showAutocomplete = false;
+        this.filteredOptions = [];
+        this.minSearchCharacters = 2;
+    }
+    ngOnDestroy() {
+        if (this.sub) {
+            this.sub.unsubscribe();
+        }
     }
     ngOnInit() {
-        this.shareCases$ = this.stateService.state;
-        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+        this.findPersonControl = new FormControl(this.selectedPerson);
+        this.findPersonGroup.addControl('findPersonControl', this.findPersonControl);
+        this.sub = this.findPersonControl.valueChanges.pipe(tap(() => this.showAutocomplete = false), tap(() => this.filteredOptions = []), debounceTime(300), tap((searchTerm) => typeof searchTerm === 'string' ? this.personSelected.emit(null) : void 0), filter((searchTerm) => searchTerm && searchTerm.length > this.minSearchCharacters), switchMap((searchTerm) => this.filter(searchTerm).pipe(tap(() => this.showAutocomplete = true), catchError(() => this.filteredOptions = [])))).subscribe((people) => {
+            this.filteredOptions = people;
+            this.cd.detectChanges();
+        });
     }
-    trackByUserId(user) {
-        return user.idamId;
+    filter(searchTerm) {
+        const findJudicialPeople = this.findPersonService.find({ searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
+        const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
+        if (searchTerm && searchTerm.length > this.minSearchCharacters) {
+            switch (this.domain) {
+                case PersonRole.JUDICIAL: {
+                    return findJudicialPeople.pipe(map(persons => {
+                        const ids = this.selectedPersons.map(({ id }) => id);
+                        return persons.filter(({ id }) => !ids.includes(id));
+                    }));
+                }
+                case PersonRole.ALL: {
+                    return zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(map(separatePeople => separatePeople[0].concat(separatePeople[1])));
+                }
+                case PersonRole.CASEWORKER:
+                case PersonRole.ADMIN: {
+                    return findCaseworkersOrAdmins;
+                }
+                default: {
+                    return of([]);
+                }
+            }
+        }
+        return of([]);
     }
-    showUserAccessBlock() {
-        if (this.sharedCase.pendingShares && this.sharedCase.pendingShares.length > 0) {
-            return true;
+    onSelectionChange(selectedPerson) {
+        this.personSelected.emit(selectedPerson);
+        this.findPersonControl.setValue(this.getDisplayName(selectedPerson), { emitEvent: false, onlySelf: true });
+    }
+    getDisplayName(selectedPerson) {
+        if (!selectedPerson) {
+            return '';
         }
-        return this.sharedCase.pendingUnshares && this.sharedCase.pendingUnshares.length > 0;
+        if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
+            return `${selectedPerson.knownAs} (${selectedPerson.email})`;
+        }
+        return selectedPerson.email ? `${selectedPerson.name} (${selectedPerson.email})` : selectedPerson.name;
+    }
+    onInput() {
+        this.personFieldChanged.emit();
     }
 }
-SelectedCaseConfirmComponent.decorators = [
+FindPersonComponent.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",
-                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%}"]
+                selector: 'xuilib-find-person',
+                template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': findPersonGroup.get('findPersonControl').invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findPersonGroup.errors.error ? findPersonGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectPerson{{idValue}}\" type=\"text\" aria-label=\"select a person\"\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           (input)=\"onInput()\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
+                styles: [".mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}.hide-autocomplete{display:none}"]
             },] }
 ];
-SelectedCaseConfirmComponent.ctorParameters = () => [
-    { type: CaseSharingStateService }
+FindPersonComponent.ctorParameters = () => [
+    { type: FindAPersonService },
+    { type: ChangeDetectorRef }
 ];
-SelectedCaseConfirmComponent.propDecorators = {
-    sharedCase: [{ type: Input }],
-    changeLink: [{ type: Input }]
+FindPersonComponent.propDecorators = {
+    personSelected: [{ type: Output }],
+    personFieldChanged: [{ type: Output }],
+    title: [{ type: Input }],
+    boldTitle: [{ type: Input }],
+    subTitle: [{ type: Input }],
+    domain: [{ type: Input }],
+    findPersonGroup: [{ type: Input }],
+    selectedPerson: [{ type: Input }],
+    submitted: [{ type: Input }],
+    userIncluded: [{ type: Input }],
+    assignedUser: [{ type: Input }],
+    placeholderContent: [{ type: Input }],
+    isNoResultsShown: [{ type: Input }],
+    showUpdatedColor: [{ type: Input }],
+    selectedPersons: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    idValue: [{ type: Input }],
+    services: [{ type: Input }],
+    disabled: [{ type: Input }]
 };
 
-class SelectedCaseListComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.shareCases = [];
-        this.toConfirm = false;
-        this.changeLink = '';
-        this.unselect = new EventEmitter();
-        this.synchronizeStore = new EventEmitter();
-    }
-    ngOnInit() {
-        this.shareCases$ = this.stateService.state;
-        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+class FilterService {
+    constructor() {
+        this.givenErrors = new BehaviorSubject(null);
+        this.isInitialSetting = false;
+        this.filterSettings = {};
+        this.streams = {};
     }
-    onUnselect(sharedCase) {
-        this.unselect.emit(sharedCase);
+    persist(setting, persistence) {
+        switch (persistence) {
+            case 'local':
+                this.persistLocal(setting);
+                break;
+            case 'session':
+                this.persistSession(setting);
+                break;
+            default:
+                break;
+        }
+        this.persistMemory(setting);
+        this.updateStreams(setting);
     }
-    onSynchronizeStore(event) {
-        this.synchronizeStore.emit(event);
+    get(id) {
+        if (this.filterSettings[id]) {
+            return this.filterSettings[id];
+        }
+        if (sessionStorage.getItem(id)) {
+            return JSON.parse(window.sessionStorage.getItem(id));
+        }
+        if (localStorage.getItem(id)) {
+            return JSON.parse(window.localStorage.getItem(id));
+        }
+        return null;
     }
-    trackByCaseId(sharedCase) {
-        return sharedCase.caseId;
+    getStream(id) {
+        if (!this.streams[id]) {
+            this.streams[id] = new BehaviorSubject(this.get(id));
+        }
+        return this.streams[id].asObservable();
+    }
+    persistLocal(setting) {
+        window.localStorage.setItem(setting.id, JSON.stringify(setting));
+    }
+    persistSession(setting) {
+        window.sessionStorage.setItem(setting.id, JSON.stringify(setting));
+    }
+    persistMemory(setting) {
+        this.filterSettings[setting.id] = setting;
+    }
+    updateStreams(setting) {
+        if (this.streams[setting.id]) {
+            this.streams[setting.id].next(setting);
+        }
     }
 }
-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",
-                styles: [""]
+FilterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FilterService_Factory() { return new FilterService(); }, token: FilterService, providedIn: "root" });
+FilterService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
             },] }
 ];
-SelectedCaseListComponent.ctorParameters = () => [
-    { type: CaseSharingStateService }
-];
-SelectedCaseListComponent.propDecorators = {
-    shareCases$: [{ type: Input }],
-    removeUserFromCaseToggleOn: [{ type: Input }],
-    toConfirm: [{ type: Input }],
-    changeLink: [{ type: Input }],
-    unselect: [{ type: Output }],
-    synchronizeStore: [{ type: Output }]
-};
 
-class SelectedCaseComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.opened = false;
-        this.unselect = new EventEmitter();
-        this.synchronizeStore = new EventEmitter();
+class GenericFilterComponent {
+    constructor(filterService, fb) {
+        this.filterService = filterService;
+        this.fb = fb;
+        this.submitted = false;
     }
-    ngOnInit() {
-        this.shareCases$ = this.stateService.state;
-        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+    get config() {
+        return this._config;
     }
-    ngOnChanges(changes) {
-        if (changes.sharedCase) {
-            const sharedWith = this.sharedCase.sharedWith ? this.sharedCase.sharedWith : [];
-            const pendingShares = this.sharedCase.pendingShares ? this.sharedCase.pendingShares : [];
-            this.combinedSortedShares = this.combineAndSortShares(sharedWith, pendingShares);
+    set config(value) {
+        this._config = Object.assign(Object.assign({}, value), { fields: value.fields.map(field => (Object.assign(Object.assign({}, field), { displayMinSelectedError: false, displayMaxSelectedError: false }))) });
+        this._config = value;
+    }
+    get settings() {
+        return this._settings;
+    }
+    set settings(value) {
+        if (!value) {
+            this.getSettings();
+        }
+        if (value && value.fields) {
+            this.mergeDefaultFields(value);
         }
+        this._settings = value;
     }
-    onUnselect() {
-        this.unselect.emit(this.sharedCase);
+    static addFormValidators(field) {
+        const validators = [];
+        if (field && field.minSelected) {
+            validators.push(minSelectedValidator(field.minSelected));
+        }
+        if (field && field.maxSelected) {
+            validators.push(maxSelectedValidator(field.maxSelected));
+        }
+        return validators;
     }
-    onDeselect(c) {
-        this.unselect.emit(c);
+    ngOnInit() {
+        if (!this.settings) {
+            this.getSettings();
+        }
+        this.mergeDefaultFields(this.settings);
+        this.buildForm(this.config, this.settings);
+        this.formSub = this.form.valueChanges.subscribe(() => this.submitted = false);
     }
-    trackByUserId(user) {
-        return user.idamId;
+    ngOnDestroy() {
+        if (this.formSub) {
+            this.formSub.unsubscribe();
+        }
     }
-    canRemove(caseId, user) {
-        return this.shareCases$.pipe(map(cases => {
-            if (this.removeUserFromCaseToggleOn) {
-                for (const aCase of cases) {
-                    if (aCase.caseId === caseId) {
-                        if (aCase.pendingUnshares && aCase.pendingUnshares.some(u => u.idamId === user.idamId)) {
-                            return false;
-                        }
-                        if (aCase.sharedWith && aCase.sharedWith.some(u => u.idamId === user.idamId)) {
-                            return true;
-                        }
-                    }
+    hidden(field, form) {
+        if (!field.showCondition) {
+            return false;
+        }
+        if (typeof field.showCondition === 'string') {
+            const control = form.get(field.name);
+            const [name, value] = field.showCondition.split('=');
+            if (form.value && form.value[name] === value) {
+                if (field.type === 'find-person') {
+                    control.get('email').setValidators(Validators.required);
+                    control.get('email').updateValueAndValidity();
+                }
+                else {
+                    control.setValidators(Validators.required);
+                    control.updateValueAndValidity();
                 }
+                return false;
             }
-            return false;
-        }));
-    }
-    canCancel(caseId, user) {
-        return this.shareCases$.pipe(map(cases => {
-            for (const aCase of cases) {
-                if (aCase.caseId === caseId) {
-                    if (aCase.pendingShares && aCase.pendingShares.some(u => u.idamId === user.idamId)) {
-                        return true;
-                    }
-                    if (aCase.pendingUnshares && aCase.pendingUnshares.some(u => u.idamId === user.idamId)) {
-                        return true;
-                    }
-                    return false;
+            else {
+                if (field.type === 'find-person') {
+                    control.get('email').clearValidators();
+                    control.get('email').updateValueAndValidity();
+                }
+                else {
+                    control.clearValidators();
+                    control.updateValueAndValidity();
                 }
             }
-        }));
+        }
+        return true;
     }
-    isToBeRemoved(caseId, user) {
-        return this.shareCases$.pipe(map(cases => {
-            for (const aCase of cases) {
-                if (aCase.caseId === caseId) {
-                    return aCase.pendingUnshares && aCase.pendingUnshares.some(u => u.idamId === user.idamId);
+    disabled(field, form) {
+        if (!field.enableCondition) {
+            return null;
+        }
+        if (typeof field.enableCondition === 'string') {
+            const control = form.get(field.name);
+            const [name, value] = field.enableCondition.split('=');
+            if (form.value && form.value[name] === value) {
+                if (field.type === 'find-person') {
+                    control.get('email').setValidators(Validators.required);
+                    control.get('email').updateValueAndValidity();
+                }
+                else {
+                    control.setValidators(Validators.required);
+                    control.updateValueAndValidity();
                 }
+                return null;
             }
-        }));
-    }
-    isToBeAdded(caseId, user) {
-        return this.shareCases$.pipe(map(cases => {
-            for (const aCase of cases) {
-                if (aCase.caseId === caseId) {
-                    return aCase.pendingShares && aCase.pendingShares.some(u => u.idamId === user.idamId);
+            else {
+                if (field.type === 'find-person') {
+                    control.get('email').clearValidators();
+                    control.get('email').updateValueAndValidity();
+                }
+                else {
+                    control.clearValidators();
+                    control.updateValueAndValidity();
                 }
             }
-        }));
-    }
-    onRemove(user, sharedCase) {
-        this.stateService.requestUnshare(sharedCase.caseId, user);
-        this.synchronizeStore.emit(this.shareCases);
-    }
-    onCancel(user, sharedCase) {
-        this.stateService.requestCancel(sharedCase.caseId, user);
-        this.synchronizeStore.emit(this.shareCases);
+        }
+        // find-location is special case where need to reset textbox (by existing disabling functionality)
+        // field.disable referred to component itself
+        if (field.type === 'find-location') {
+            return true;
+        }
+        // Note: field.disable decides whether to actually disable or not
+        return field.disable ? field.disable : null;
     }
-    showNoUsersAccessInfo() {
-        // A user is added to a case
-        if (this.sharedCase.pendingShares) {
-            if (this.sharedCase.pendingShares.length > 0) {
-                return false;
-            }
+    applyFilter(form) {
+        this.submitted = true;
+        form.markAsTouched();
+        if (form.valid) {
+            this._settings = {
+                id: this.config.id,
+                fields: this.getSelectedValues(form.value, this.config)
+            };
+            this.filterService.givenErrors.next(null);
+            const settings = Object.assign(Object.assign({}, this.settings), { reset: false });
+            this.filterService.persist(settings, this.config.persistence);
         }
-        // A case has 0 users with access to it
-        if (this.sharedCase.sharedWith) {
-            if (this.sharedCase.sharedWith.length === 0) {
-                return true;
-            }
+        else {
+            this.emitFormErrors(form);
         }
-        // Access to the last user is removed
-        if (this.sharedCase.sharedWith && this.sharedCase.pendingUnshares) {
-            if (this.sharedCase.pendingUnshares.length > 0
-                && this.sharedCase.sharedWith.length === this.sharedCase.pendingUnshares.length) {
-                return true;
+    }
+    // when domain changes ensure that person field is reset
+    fieldChanged(field, form) {
+        // TODO - Do similar with jurisdiction/service for caseworkers by services
+        if (field.changeResetFields && field.changeResetFields.length) {
+            for (const resetField of field.changeResetFields) {
+                this.resetField(resetField, form);
             }
         }
-        return false;
     }
-    showUserHasAccessInfo() {
-        return !this.showNoUsersAccessInfo();
+    // when user enters input change radio button
+    inputChanged(field) {
+        if (field.radioSelectionChange && typeof field.radioSelectionChange === 'string') {
+            const [name, value] = field.enableCondition.split('=');
+            this.form.get(name).patchValue(value);
+        }
     }
-    showUserAccessTable() {
-        if (this.sharedCase.pendingShares) {
-            if (this.sharedCase.pendingShares.length > 0) {
-                return true;
-            }
+    cancelFilter() {
+        this.buildForm(this.config, this.settings, true);
+        if (this.config && this.config.cancelSetting) {
+            this._settings.fields = JSON.parse(JSON.stringify(this.config.cancelSetting.fields));
         }
-        if (this.sharedCase.sharedWith) {
-            if (this.sharedCase.sharedWith.length > 0) {
-                return true;
+        const settings = Object.assign(Object.assign({}, this.settings), { reset: true });
+        this.filterService.persist(settings, this.config.persistence);
+        this.filterService.givenErrors.next(null);
+        this.submitted = false;
+    }
+    updatePersonControls(values, field) {
+        let keys;
+        if (!values) {
+            keys = Object.keys(this.form.get(field.name).value);
+        }
+        else {
+            keys = Object.keys(values);
+        }
+        for (const key of keys) {
+            if (this.form.get(field.name) && this.form.get(field.name).get(key)) {
+                const value = values && values[key] ? values[key] : null;
+                this.form.get(field.name).get(key).patchValue(value);
             }
         }
-        return false;
-    }
-    combineAndSortShares(sharedWith, pendingShares) {
-        return [
-            ...sharedWith,
-            ...pendingShares
-        ].sort((user1, user2) => {
-            return user1.firstName.toLowerCase() > user2.firstName.toLowerCase() ? 1 : (user2.firstName.toLowerCase() > user1.firstName.toLowerCase() ? -1 : 0);
-        });
-    }
-    userIdSetter(isPending, id) {
-        return isPending ? `pendingShares-${id}` : `${id}`;
-    }
-    buildElementId(elementName) {
-        return `${elementName}-${this.sharedCase.caseId}`;
-    }
-}
-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}"]
-            },] }
-];
-SelectedCaseComponent.ctorParameters = () => [
-    { type: CaseSharingStateService }
-];
-SelectedCaseComponent.propDecorators = {
-    sharedCase: [{ type: Input }],
-    selectedUser: [{ type: Input }],
-    opened: [{ type: Input }],
-    removeUserFromCaseToggleOn: [{ type: Input }],
-    unselect: [{ type: Output }],
-    synchronizeStore: [{ type: Output }]
-};
-
-class ServiceMessageComponent {
-    constructor() {
-        this.hideMessage = new EventEmitter();
-    }
-    onHideMessageEvent(key) {
-        this.hideMessage.emit(key);
-    }
-}
-ServiceMessageComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-service-message',
-                template: "<div class=\"hmcts-banner hmcts-banner--warning\">\n\n    <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n        <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" />\n    </svg>\n\n    <div class=\"hmcts-banner__message\">\n        <span class=\"hmcts-banner__assistive\">Warning</span>\n        <h2 class=\"govuk-heading-s\" [innerHTML]=\"message\"></h2>\n        <a [routerLink]=\"\" class=\"govuk-link--no-visited-state\" (click)=\"onHideMessageEvent(key)\">Hide message</a>\n    </div>\n\n</div>"
-            },] }
-];
-ServiceMessageComponent.ctorParameters = () => [];
-ServiceMessageComponent.propDecorators = {
-    message: [{ type: Input }],
-    key: [{ type: Input }],
-    hideMessage: [{ type: Output }]
-};
-
-class FeatureToggleService {
-    // tslint:disable-next-line: variable-name
-    initialize(_user, _clientId) {
-        throw new Error('Not implemented');
     }
-    // tslint:disable-next-line: variable-name
-    isEnabled(_feature) {
-        throw new Error('Not implemented');
-    }
-    // tslint:disable-next-line: variable-name
-    getValue(_key, _defaultValue) {
-        throw new Error('Not implemented');
-    }
-    // tslint:disable-next-line: variable-name
-    getValueOnce(_key, _defaultValue) {
-        throw new Error('Not implemented');
-    }
-}
-FeatureToggleService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FeatureToggleService_Factory() { return new FeatureToggleService(); }, token: FeatureToggleService, providedIn: "root" });
-FeatureToggleService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-
-class ServiceMessagesComponent {
-    constructor(featureToggleService) {
-        this.featureToggleService = featureToggleService;
-        this.filteredMessages = new Map();
-    }
-    ngOnInit() {
-        this.getServiceMessages();
-    }
-    getServiceMessages() {
-        this.featureToggleService.getValue(this.featureToggleKey, null)
-            .subscribe(messages => {
-            if (!!messages) {
-                this.createFilteredMessages(messages);
+    toggleSelectAll(event, form, item, field) {
+        const isChecked = event.target.checked;
+        const formArray = form.get(field.name);
+        if (!item.selectAll) {
+            const allChecked = formArray.controls.every((control) => control.value);
+            let index = null;
+            const hasSelectAllOption = field.options.find((option, i) => {
+                if (option.hasOwnProperty('selectAll')) {
+                    index = i;
+                    return true;
+                }
+                return false;
+            });
+            // tslint:disable-next-line:variable-name
+            const isAllCheckedExcludingTheSelectAllOption = formArray.controls.filter((_control, i) => i !== index)
+                .every((control) => control.value);
+            if (!allChecked && hasSelectAllOption && !isChecked) {
+                formArray.controls.forEach((control, i) => {
+                    if (index === i) {
+                        control.patchValue(false);
+                        return;
+                    }
+                });
             }
-        });
-    }
-    createFilteredMessages(messages) {
-        this.hiddenBanners = JSON.parse(window.sessionStorage.getItem(this.serviceMessageCookie)) || [];
-        Object.keys(messages).forEach(key => {
-            const regEx = new RegExp(key);
-            if (this.userRoles.some(e => regEx.test(e)) && this.hiddenBanners.indexOf(key) === -1) {
-                this.filteredMessages.set(key, messages[key]);
+            else if (hasSelectAllOption && !allChecked && isChecked && isAllCheckedExcludingTheSelectAllOption) {
+                formArray.controls[index].patchValue(true);
             }
-        });
-    }
-    hideMessage(key) {
-        this.filteredMessages.delete(key);
-        this.hiddenBanners.push(key);
-        window.sessionStorage.setItem(this.serviceMessageCookie, JSON.stringify(this.hiddenBanners));
-    }
-}
-ServiceMessagesComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-service-messages',
-                template: "<div *ngIf=\"filteredMessages?.size > 0\" class=\"govuk-width-container govuk-!-margin-top-6\">\n    <xuilib-service-message *ngFor=\"let message of filteredMessages | keyvalue\" [key]=\"message.key\"\n        [message]=\"message.value\" (hideMessage)=\"hideMessage($event)\"></xuilib-service-message>\n</div>"
-            },] }
-];
-ServiceMessagesComponent.ctorParameters = () => [
-    { type: FeatureToggleService }
-];
-ServiceMessagesComponent.propDecorators = {
-    userRoles: [{ type: Input }],
-    featureToggleKey: [{ type: Input }],
-    serviceMessageCookie: [{ type: Input }]
-};
-
-class ShareCaseConfirmComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.shareCases = []; // cases selected for sharing
-        this.changeLink = '';
-        this.completeLink = '';
-    }
-    ngOnInit() {
-        this.shareCases$.subscribe(shareCases => {
-            this.shareCases = shareCases;
-            this.stateService.setCases(shareCases);
-        });
-        this.shareCases$ = this.stateService.state;
-    }
-}
-ShareCaseConfirmComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-share-case-confirm',
-                template: "<div id=\"casesToConfirm\">\n  <h3 class=\"govuk-heading-l\">Cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" id=\"summarySections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [toConfirm]=\"true\"\n      [changeLink]=\"changeLink\">\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\" *ngIf=\"shareCases && shareCases.length > 0\">\n  <button class=\"govuk-button\" title=\"Confirm\" [routerLink]=\"completeLink\">Confirm</button>\n</div>\n",
-                styles: [""]
-            },] }
-];
-ShareCaseConfirmComponent.ctorParameters = () => [
-    { type: CaseSharingStateService }
-];
-ShareCaseConfirmComponent.propDecorators = {
-    shareCases$: [{ type: Input }],
-    changeLink: [{ type: Input }],
-    completeLink: [{ type: Input }]
-};
-
-class UserSelectComponent {
-    constructor() {
-        this.selected = new EventEmitter();
-        this.control = new FormControl();
-    }
-    ngOnInit() {
-        this.filteredUsers = this.control.valueChanges.pipe(map(value => typeof value === typeof 'string' ? this.filterUsers(value) : this.users));
-        this.selected.emit(null);
-    }
-    displayValue(user) {
-        return user ? `${user.firstName} ${user.lastName} - ${user.email}` : '';
-    }
-    onSelected(e) {
-        this.selected.emit(e.option.value);
+        }
+        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);
+            }
+        }
     }
-    clear() {
-        this.control.setValue(null);
+    resetField(resetField, form) {
+        const control = form.get(resetField);
+        const defaultValue = this.config.cancelSetting.fields.find((f) => f.name === resetField);
+        if (control instanceof FormArray) {
+            for (let i = 0; i < control.length; i++) {
+                control.removeAt(i);
+            }
+        }
+        else if (control instanceof FormGroup) {
+            const keys = Object.keys(control.value);
+            for (const key of keys) {
+                this.resetField(key, control);
+            }
+        }
+        else if (control instanceof FormControl) {
+            const value = defaultValue && defaultValue.value && defaultValue.value.length ? defaultValue.value[0] : null;
+            control.setValue(value);
+        }
     }
-    onUserChange(newUserValue) {
-        if (!newUserValue || !newUserValue.email) {
-            this.selected.emit(null);
+    mergeDefaultFields(filter) {
+        if (filter) {
+            filter.fields = this.filterService.get(this.config.id) ? this.filterService.get(this.config.id).fields : filter.fields;
+        }
+        else if (this.config && this.config.cancelSetting) {
+            this._settings = {
+                id: this.config.id,
+                fields: JSON.parse(JSON.stringify(this.config.cancelSetting.fields))
+            };
         }
     }
-    filterUsers(value) {
-        if (value) {
-            value = value.toLowerCase();
-            return this.users.filter(user => {
-                if (user.firstName.toLowerCase().includes(value)) {
-                    return true;
+    getSettings() {
+        this._settings = this.filterService.get(this.config.id);
+    }
+    buildForm(config, settings, reset) {
+        const findPersonControl = this.form ? this.form.get('findPersonControl') : null;
+        this.form = this.fb.group({});
+        if (findPersonControl) {
+            // in order to maintain find person component, control needs to be kept
+            this.form.addControl('findPersonControl', findPersonControl);
+        }
+        for (const field of config.fields) {
+            if (field.type === 'checkbox' || field.type === 'checkbox-large') {
+                const formArray = this.buildCheckBoxFormArray(field, settings);
+                this.form.addControl(field.name, formArray);
+            }
+            else if (field.type === 'find-location') {
+                const formArray = this.buildFindLocationFormArray(field, settings);
+                this.form.addControl(field.name, formArray);
+            }
+            else {
+                const validators = [];
+                if (field.minSelected && field.minSelected > 0) {
+                    validators.push(Validators.required);
                 }
-                if (user.lastName.toLowerCase().includes(value)) {
-                    return true;
+                let defaultValue = null;
+                if (reset && config.cancelSetting) {
+                    const cancelField = config.cancelSetting.fields.find((f) => f.name === field.name);
+                    defaultValue = cancelField && cancelField.value ? cancelField.value[0] : '';
                 }
-                if (user.email.toLowerCase().includes(value)) {
-                    return true;
+                else if (settings && settings.fields) {
+                    const lastSavedValue = settings.fields.find((f) => f.name === field.name);
+                    defaultValue = lastSavedValue && lastSavedValue ? lastSavedValue.value[0] : '';
                 }
-                return false;
-            });
+                // if field is find-person build a form group;
+                if (field.type === 'find-person') {
+                    const formGroup = new FormGroup({
+                        domain: new FormControl(''),
+                        email: new FormControl(defaultValue && defaultValue.hasOwnProperty('email') ? defaultValue.email : '', validators),
+                        id: new FormControl(''),
+                        name: new FormControl(''),
+                        knownAs: new FormControl(''),
+                    });
+                    this.form.addControl(field.name, formGroup);
+                }
+                else {
+                    const control = new FormControl(defaultValue, validators);
+                    this.form.addControl(field.name, control);
+                }
+                // if field updates find person component set the initial domain
+                if (field.findPersonField) {
+                    this.fieldChanged(field, this.form);
+                }
+            }
         }
-        return [];
-    }
-}
-UserSelectComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-user-select',
-                template: "<input class=\"govuk-input\" type=\"text\" [matAutocomplete]=\"dropdown\" [formControl]=\"control\" (ngModelChange)=\"onUserChange($event)\" aria-labelledby=\"add-user-hint\">\n\n<mat-autocomplete #dropdown=\"matAutocomplete\" [displayWith]=\"displayValue\" autoActiveFirstOption (optionSelected)=\"onSelected($event)\">\n  <mat-option *ngFor=\"let user of filteredUsers | async\" [value]=\"user\">\n    {{ user.firstName }} {{ user.lastName }} - {{ user.email }}\n  </mat-option>\n</mat-autocomplete>",
-                styles: [""]
-            },] }
-];
-UserSelectComponent.ctorParameters = () => [];
-UserSelectComponent.propDecorators = {
-    users: [{ type: Input }],
-    selected: [{ type: Output }]
-};
-
-class ShareCaseComponent {
-    constructor(stateService) {
-        this.stateService = stateService;
-        this.shareCases = []; // cases selected for sharing
-        this.removeUserFromCaseToggleOn = false;
-        this.users = []; // users of this organisation the cases can be shared with
-        this.confirmLink = '';
-        this.unselect = new EventEmitter();
-        this.synchronizeStore = new EventEmitter();
-    }
-    ngOnInit() {
-        this.shareCases$.subscribe(shareCases => {
-            this.shareCases = shareCases;
-            this.stateService.setCases(shareCases);
-        });
-        this.shareCases$ = this.stateService.state;
-    }
-    onUnselect(c) {
-        this.unselect.emit(c);
-        this.stateService.removeCase(c.caseId);
-    }
-    onSynchronizeStore(event) {
-        this.synchronizeStore.emit(event);
     }
-    onSelectedUser(user) {
-        this.selectedUser = user;
-    }
-    addUser() {
-        const newSharedCases = this.stateService.requestShare(this.selectedUser);
-        this.selectedUser = null;
-        if (this.userSelect) {
-            this.userSelect.clear();
+    buildCheckBoxFormArray(field, settings) {
+        const validators = GenericFilterComponent.addFormValidators(field);
+        const formArray = this.fb.array([], validators);
+        let defaultValues;
+        if (settings && settings.fields) {
+            defaultValues = settings.fields.find((f) => f.name === field.name);
         }
-        this.synchronizeStore.emit(newSharedCases);
+        for (const option of field.options) {
+            let checked = false;
+            if (defaultValues && Array.isArray(defaultValues.value)) {
+                checked = !!defaultValues.value.find((value) => value === option.key);
+            }
+            formArray.push(new FormControl(checked));
+        }
+        return formArray;
     }
-    isDisabledAdd() {
-        return this.selectedUser === null || this.shareCases.length === 0;
+    buildFindLocationFormArray(field, settings) {
+        const validators = GenericFilterComponent.addFormValidators(field);
+        const formArray = this.fb.array([], validators);
+        let defaultValues;
+        if (settings && settings.fields) {
+            defaultValues = settings.fields.find((f) => f.name === field.name);
+            if (defaultValues && defaultValues.value && defaultValues.value.length > 0) {
+                for (const defaultValue of defaultValues.value) {
+                    formArray.push(new FormControl(defaultValue));
+                }
+            }
+        }
+        return formArray;
     }
-    isDisabledContinue() {
-        let isDisabled = true;
-        this.shareCases$.subscribe(shareCases => {
-            for (const caseState of shareCases) {
-                if (caseState.pendingShares && caseState.pendingShares.length > 0) {
-                    isDisabled = false;
-                    break;
+    getSelectedValues(formValues, config) {
+        return Object.keys(formValues).map((name) => {
+            const values = formValues[name];
+            if (Array.isArray(values)) {
+                const field = config.fields.find(f => f.name === name);
+                if (field.type === 'find-location') {
+                    return { value: values, name };
                 }
-                if (caseState.pendingUnshares && caseState.pendingUnshares.length > 0) {
-                    isDisabled = false;
-                    break;
+                else {
+                    return { value: getValues(field.options, values), name };
                 }
             }
+            else {
+                return { value: [values], name };
+            }
         });
-        return isDisabled;
     }
-    onDeselect(sharedCase) {
-        if (sharedCase !== null) {
-            const updated = [];
-            for (const element of this.shareCases) {
-                if (element.caseId !== sharedCase.caseId) {
-                    updated.push(element);
-                }
+    emitFormErrors(form) {
+        const errors = [];
+        for (const field of this.config.fields) {
+            const formGroup = form.get(field.name);
+            if (formGroup && formGroup.errors && formGroup.errors.minLength) {
+                errors.push({ name: field.name, error: field.minSelectedError });
+            }
+            if (formGroup && formGroup.errors && formGroup.errors.maxLength) {
+                errors.push({ name: field.name, error: field.minSelectedError });
             }
-            this.shareCases = updated;
         }
-        this.stateService.setCases(this.shareCases);
-    }
-}
-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: [""]
-            },] }
-];
-ShareCaseComponent.ctorParameters = () => [
-    { type: CaseSharingStateService }
-];
-ShareCaseComponent.propDecorators = {
-    removeUserFromCaseToggleOn: [{ type: Input }],
-    shareCases$: [{ type: Input }],
-    users: [{ type: Input }],
-    confirmLink: [{ type: Input }],
-    unselect: [{ type: Output }],
-    synchronizeStore: [{ type: Output }],
-    userSelect: [{ type: ViewChild, args: [UserSelectComponent, { static: true },] }]
-};
-
-class TabComponent {
-    constructor() {
-        this.tabChange = new EventEmitter();
-    }
-    tabChanged(event) {
-        this.tabChange.emit(event);
+        if (errors.length) {
+            this.filterService.givenErrors.next(errors);
+        }
     }
 }
-TabComponent.decorators = [
+GenericFilterComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-tab',
-                template: "<mat-tab-group animationDuration=\"0ms\" (selectedTabChange)=\"tabChanged($event)\">\n    <mat-tab *ngFor=\"let tabItem of tabItems; let last = last;\" [label]=\"tabItem.text\">\n    </mat-tab>\n</mat-tab-group>"
+                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",
+                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}"]
             },] }
 ];
-TabComponent.ctorParameters = () => [];
-TabComponent.propDecorators = {
-    tabItems: [{ type: Input }],
-    tabChange: [{ type: Output }]
-};
-
-class TcConfirmComponent {
-    constructor() {
-        this.confirm = new EventEmitter();
-    }
-    onClick() {
-        this.confirm.emit();
-    }
-}
-TcConfirmComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-tc-confirm',
-                template: "<div class=\"govuk-width-container\">\n  <main role=\"main\" class=\"govuk-main-wrapper\">\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Using this service</h1>\n          <h2 class=\"govuk-heading-m\">Terms and conditions</h2>\n          <p>We've recently updated the\n            <a\n              routerLink=\"/terms-and-conditions\"\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n              >terms and conditions</a\n            >.\n          </p>\n          <p>You must review and accept them.\n          </p>\n          <p>\n            <button class=\"govuk-button\" (click)=\"onClick()\">\n              {{ buttonText }}\n            </button>\n          </p>\n        </div>\n      </div>\n    </div>\n    <div class=\"govuk-grid-column-one-third\"></div>\n  </main>\n</div>\n",
-                styles: [""]
-            },] }
+GenericFilterComponent.ctorParameters = () => [
+    { type: FilterService },
+    { type: FormBuilder }
 ];
-TcConfirmComponent.ctorParameters = () => [];
-TcConfirmComponent.propDecorators = {
-    buttonText: [{ type: Input }],
-    confirm: [{ type: Output }]
+GenericFilterComponent.propDecorators = {
+    config: [{ type: Input }],
+    settings: [{ type: Input }]
 };
 
-class TcDisplayHtmlComponent {
-    constructor() { }
+/*
+* Gov UK Dialog Component
+* Responsible for displaying dialog layout
+* using ng-content to display content from parent
+* */
+class HmctsSessionDialogComponent {
+    constructor() {
+        this.close = new EventEmitter();
+    }
+    onClose() {
+        this.close.emit();
+    }
 }
-TcDisplayHtmlComponent.decorators = [
+HmctsSessionDialogComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-tc-display-html',
-                template: "<ng-content></ng-content>",
-                styles: [":host{display:block;width:100%}"]
+                selector: 'xuilib-session-dialog',
+                template: "<div class=\"gem-c-modal-dialogue\" data-module=\"modal-dialogue\" id=\"modal-default\" style=\"display: block;\">\n  <div class=\"gem-c-modal-dialogue__overlay\"></div>\n  <dialog class=\"gem-c-modal-dialogue__box\" aria-modal=\"true\" role=\"dialog\" tabindex=\"0\" [ngStyle]=\"{'margin-top': positionTop}\">\n    <div class=\"gem-c-modal-dialogue__header\">\n      <svg role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 38 38\" height=\"33\" width=\"33\">\n        <style type=\"text/css\">\n          .st0{fill:#FFFFFF;}\n        </style>\n        <g id=\"_4_-_granular_components_warning_icon\" transform=\"translate(0.5 0.5)\">\n          <g id=\"Warning_icon\" transform=\"translate(0)\">\n            <path id=\"Exclusion_1\" class=\"st0\" d=\"M18.5,37.5c-5.04,0.01-9.88-1.99-13.44-5.57C1.49,28.38-0.51,23.54-0.5,18.5\n              c-0.01-5.04,1.99-9.88,5.56-13.43C8.62,1.49,13.46-0.51,18.5-0.5c5.04-0.01,9.88,1.99,13.44,5.56c3.57,3.56,5.58,8.39,5.56,13.44\n              c0.01,5.04-1.99,9.88-5.56,13.44C28.38,35.51,23.54,37.51,18.5,37.5z M18.52,24.29c-0.4,0-0.8,0.08-1.17,0.23\n              c-0.36,0.15-0.69,0.37-0.97,0.64c-0.28,0.27-0.5,0.59-0.65,0.95c-0.16,0.36-0.24,0.76-0.23,1.15c0,0.4,0.08,0.8,0.23,1.17\n              c0.15,0.36,0.37,0.68,0.65,0.96c0.28,0.27,0.61,0.49,0.97,0.64c0.37,0.16,0.77,0.24,1.17,0.24c0.4,0,0.79-0.08,1.15-0.24\n              c0.35-0.15,0.67-0.37,0.95-0.64c0.27-0.27,0.49-0.6,0.64-0.96c0.16-0.37,0.24-0.77,0.23-1.17c0-0.4-0.08-0.79-0.23-1.15\n              c-0.15-0.35-0.37-0.67-0.64-0.95c-0.27-0.27-0.6-0.49-0.95-0.64C19.31,24.37,18.92,24.29,18.52,24.29L18.52,24.29z M16.11,7.5\n              l0.42,14.87h3.91L20.86,7.5H16.11z\"/>\n          </g>\n        </g>\n      </svg>\n      <div class=\"gem-c-modal-dialogue__title\">We are about to sign you out</div>\n    </div>\n    <div class=\"gem-c-modal-dialogue__content\">\n      <ng-content></ng-content>\n    </div>\n  </dialog>\n</div>\n",
+                styles: [".gem-c-modal-dialogue{display:none;z-index:1000;overflow-x:hidden;overflow-y:scroll;outline:0}.gem-c-modal-dialogue,.gem-c-modal-dialogue__box{position:fixed;top:0;left:0;width:100%;height:100%}.gem-c-modal-dialogue__box{display:block;background:#fff;right:0;bottom:0;margin:0;padding:0;overflow-y:auto;border:0;font-family:GDS Transport,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;font-size:16px;font-size:1rem;line-height:1.25;color:#0b0c0c}.gem-c-modal-dialogue__box:focus{outline:3px solid #fd0}@media print{.gem-c-modal-dialogue__box{font-family:sans-serif}}@media (min-width:40.0625em){.gem-c-modal-dialogue__box{font-size:1.1875rem;line-height:1.3157894737}}@media print{.gem-c-modal-dialogue__box{font-size:14pt;line-height:1.15;color:#000}}@media (min-width:40.0625em){.gem-c-modal-dialogue__box{position:relative;top:inherit;right:inherit;bottom:inherit;left:inherit;width:auto;max-width:640px;height:auto;margin:30px auto;border:2px solid #0b0c0c}}@media (min-width:40.0625em){.gem-c-modal-dialogue__box--wide{max-width:960px}}@media (min-width:40.0625em) and (max-width:64em){.gem-c-modal-dialogue__box--wide{margin:30px}}.gem-c-modal-dialogue__overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:.8;background:#0b0c0c;pointer-events:none;touch-action:none}@media screen{.gem-o-template--modal{overflow-y:inherit}}.gem-o-template__body--modal{overflow:hidden}.gem-o-template__body--blur .govuk-footer,.gem-o-template__body--blur .govuk-header,.gem-o-template__body--blur .govuk-main-wrapper,.gem-o-template__body--blur .govuk-phase-banner,.gem-o-template__body--blur .govuk-skip-link,.gem-o-template__body--blur .govuk-width-container .govuk-back-link{filter:blur(2px)}.govuk-warning-text__icon{margin:0 0 0 12px}.gem-c-modal-dialogue__header{padding:9px 15px 10px;color:#fff;background:#d4351d;display:flex}.gem-c-modal-dialogue__title{margin:5px 0 4px 12px}.gem-c-modal-dialogue__logotype-crown{fill:currentColor;vertical-align:middle}.gem-c-modal-dialogue__logotype-crown-fallback-image{width:30px;height:26px;border:0;vertical-align:middle}.gem-c-modal-dialogue__content{padding:15px;background:#fff}.gem-c-modal-dialogue__close-button{position:absolute;top:0;right:0;width:44px;height:44px;border:0;color:#fff;background:none;cursor:pointer;font-family:GDS Transport,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:700;font-size:1.5rem;line-height:1.3}@media print{.gem-c-modal-dialogue__close-button{font-family:sans-serif}}@media (min-width:40.0625em){.gem-c-modal-dialogue__close-button{font-size:2.25rem;line-height:1.3}}@media print{.gem-c-modal-dialogue__close-button{font-size:24pt;line-height:1.3}}@media (max-width:40.0525em){.gem-c-modal-dialogue__close-button{font-size:36px;line-height:1.3}}.gem-c-modal-dialogue__close-button:focus,.gem-c-modal-dialogue__close-button:hover{color:#0b0c0c;box-shadow:0 -2px #fd0,0 4px #0b0c0c;text-decoration:none;outline:none;background:#fd0}"]
             },] }
 ];
-TcDisplayHtmlComponent.ctorParameters = () => [];
+HmctsSessionDialogComponent.ctorParameters = () => [];
+HmctsSessionDialogComponent.propDecorators = {
+    positionTop: [{ type: Input }],
+    close: [{ type: Output }]
+};
 
-class TcDisplayPlainComponent {
-    constructor() { }
+class InviteUserFormComponent {
+    constructor() {
+        this.submitForm = new EventEmitter();
+    }
+    set errorMessages(value) {
+        this.isInvalid = value || {};
+    }
+    onSubmit() {
+        this.submitForm.emit();
+    }
 }
-TcDisplayPlainComponent.decorators = [
+InviteUserFormComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-tc-display-plain',
-                template: "<ng-content></ng-content>",
-                styles: [":host{display:block;width:100%}"]
+                selector: 'xuilib-invite-user-form',
+                template: "\n<form [formGroup]=\"inviteUserForm\" (ngSubmit)=\"onSubmit()\" >\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'First name', hint: 'Include all middle names.', name: 'firstName', id: 'firstName', type: 'text', classes: 'testClass'}\"\n    [errorMessage]=\"isInvalid.firstName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Last name', name: 'lastName', id: 'lastName', type: 'text'}\"\n    [errorMessage]=\"isInvalid.lastName\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-gov-uk-input\n    [config]=\"{label: 'Email address', name: 'email', id: 'email', type: 'email'}\"\n    [errorMessage]=\"isInvalid.email\"\n    [group]=\"inviteUserForm\">\n  </xuilib-gov-uk-input>\n\n  <xuilib-invite-permission-form [inviteUserForm]=\"inviteUserForm\" [errorMessages]=\"isInvalid.roles\">\n  </xuilib-invite-permission-form>\n\n  <button type=\"submit\" class=\"govuk-button\">\n    Send invitation\n  </button>\n</form>\n"
             },] }
 ];
-TcDisplayPlainComponent.ctorParameters = () => [];
+InviteUserFormComponent.propDecorators = {
+    submitForm: [{ type: Output }],
+    inviteUserForm: [{ type: Input }],
+    errorMessages: [{ type: Input }]
+};
 
-class TermsAndConditionsComponent {
-    constructor() { }
+class InviteUserPermissionComponent {
+    constructor() {
+        this.isPuiCaseManager = false;
+        this.isPuiUserManager = false;
+        this.isPuiOrganisationManager = false;
+        this.isPuiFinanceManager = false;
+    }
 }
-TermsAndConditionsComponent.decorators = [
+InviteUserPermissionComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-terms-and-conditions',
-                template: "<ng-container [ngSwitch]=\"document.mimeType\">\n  <xuilib-tc-display-html *ngSwitchCase=\"'text/html'\">\n    <div [innerHTML]=\"document.content\"></div>\n  </xuilib-tc-display-html>\n  <xuilib-tc-display-plain *ngSwitchCase=\"'text/plain'\">\n    {{ document.content }}\n  </xuilib-tc-display-plain>\n  <div *ngSwitchDefault>\n    An error occured. Please try again.\n  </div>\n</ng-container>\n",
-                styles: [":host{display:block;width:100%}"]
+                selector: 'xuilib-invite-permission-form',
+                template: "  <!--permissions -->\n  <ng-container [formGroup]=\"inviteUserForm\">\n  <xuilib-gov-uk-form-group-wrapper\n    [config]=\"{hint: 'Choose what the user will be able to do. You can change this later.', legend: 'Permissions', key: 'roles'}\"\n    [formGroupName]=\"'roles'\"\n    [error]=\"errorMessages\">\n\n    <div class=\"govuk-checkboxes\">\n      <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiCaseManager\"\n        [config]=\"{value: 'pui-case-manager',  label: 'Manage Cases', name: 'roles', hint: 'View, create and progress cases.', focusOn: 'roles'}\">\n      </xuilib-gov-checkbox>\n\n      <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiUserManager\"\n        [config]=\"{value: 'pui-user-manager', label: 'Manage Users', name: 'roles',\n        hint: 'Invite users.'}\">\n      </xuilib-gov-checkbox>\n\n      <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiOrganisationManager\"\n        [config]=\"{value: 'pui-organisation-manager', label: 'Manage Organisation', name: 'roles',\n        hint: 'View organisation name and addresses.'}\">\n      </xuilib-gov-checkbox>\n\n      <!-- <xuilib-gov-checkbox\n        [group]=\"inviteUserForm.controls['roles']\"\n        [isChecked]=\"isPuiFinanceManager\"\n        [config]=\"{value: 'pui-finance-manager', label: 'Manage Payments', name: 'roles',\n        hint: 'View account balances, available credit and transactions.'}\">\n      </xuilib-gov-checkbox> -->\n    </div>\n\n  </xuilib-gov-uk-form-group-wrapper>\n</ng-container>"
             },] }
 ];
-TermsAndConditionsComponent.ctorParameters = () => [];
-TermsAndConditionsComponent.propDecorators = {
-    document: [{ type: Input }]
+InviteUserPermissionComponent.propDecorators = {
+    inviteUserForm: [{ type: Input }],
+    isPuiCaseManager: [{ type: Input }],
+    isPuiUserManager: [{ type: Input }],
+    isPuiOrganisationManager: [{ type: Input }],
+    isPuiFinanceManager: [{ type: Input }],
+    errorMessages: [{ type: Input }]
 };
 
-class UserDetailsComponent {
+class LoadingSpinnerComponent {
     constructor() {
-        this.showEditLink = false;
-        this.showHelpLink = false;
-        this.suspendUserEvent = new EventEmitter();
-        this.showSuspendUserButton = false;
-        this.reinvite = new EventEmitter();
-    }
-    reinviteClick(user) {
-        this.reinvite.emit(user);
-    }
-    suspendUser(suspendUser) {
-        this.suspendUserEvent.emit(suspendUser);
-    }
-    userHasRole(theRole) {
-        if (this.user && this.user.roles) {
-            return this.user.roles.includes(theRole);
-        }
-        return false;
+        this.loadingText = 'Loading';
     }
 }
-UserDetailsComponent.decorators = [
+LoadingSpinnerComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-user-details',
-                template: "<div class=\"govuk-warning-text\" *ngIf=\"warningTitle && warningTitle !== ''\">\n<span class=\"govuk-warning-text__icon\">!</span>\n<strong class=\"govuk-warning-text__text\">\n    {{ warningTitle }}\n</strong>\n</div>\n<table class=\"govuk-table\" *ngIf=\"user\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">Name</th>\n        <td class=\"govuk-table__cell\">{{user.fullName}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">Email address</th>\n        <td class=\"govuk-table__cell\">{{user.email}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngIf=\"!user.resendInvite\">\n        <th class=\"govuk-table__header\" scope=\"row\">Permissions</th>\n        <td class=\"govuk-table__cell\">\n          <div *ngIf=\"user.manageOrganisations === 'Yes'\">Manage organisations</div>\n          <div *ngIf=\"user.manageUsers === 'Yes'\">Manage users</div>\n          <div *ngIf=\"user.manageCases === 'Yes'\">Manage cases</div>\n          <div *ngIf=\"userHasRole('pui-caa')\">Case access administrator</div>\n          <div *ngIf=\"userHasRole('pui-finance-manager')\">Manage fee accounts</div>\n        </td>\n        <td class=\"govuk-table__cell\"><a *ngIf=\"editPermissionRouterLink && showEditLink\" [routerLink]=\"editPermissionRouterLink\">Change <span class=\"govuk-visually-hidden\">roles</span></a></td>\n    </tr>\n  </tbody>\n</table>\n<button *ngIf=\"showSuspendUserButton\" class=\"govuk-button govuk-button--warning\" (click)=\"suspendUser(user)\">\n  Suspend account\n</button>\n<div *ngIf=\"user && user.resendInvite\">\n  <div class=\"govuk-inset-text\">\n    <p>This user has already been invited but has not activated their account.</p>\n    <p>If you resend an invitation, they'll receive an email from HM Courts and Tribunals to finish setting up their account.</p>\n    <p>You can't invite the same user more than once an hour.</p>\n  </div>\n  <a role=\"button\" draggable=\"false\" class=\"govuk-button\" (click)=\"reinviteClick(user)\" id=\"resend-invite-button\">\n      Resend invitation\n  </a>\n</div>\n<p class=\"govuk-body\" *ngIf=\"showHelpLink && suspendHelpLink\"><a [routerLink]=\"suspendHelpLink\" target=\"_blank\">Get help</a> to reactivate this account.</p>\n",
-                styles: [":host{display:block}"]
+                selector: 'xuilib-loading-spinner',
+                template: "<div class=\"spinner-container\">\n    <div class=\"spinner-inner-container\">\n        <p>{{loadingText}}</p>\n        <div class=\"spinner\" style=\"margin: auto;\"></div>\n    </div>\n</div>\n",
+                encapsulation: ViewEncapsulation.None,
+                styles: [".spinner-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background:hsla(0,0%,100%,.5);z-index:99}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #ddd;border-top-color:#000;border-radius:50%;width:40px;height:40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]
             },] }
 ];
-UserDetailsComponent.propDecorators = {
-    user: [{ type: Input }],
-    editPermissionRouterLink: [{ type: Input }],
-    warningTitle: [{ type: Input }],
-    showEditLink: [{ type: Input }],
-    showHelpLink: [{ type: Input }],
-    suspendHelpLink: [{ type: Input }],
-    suspendUserEvent: [{ type: Output }],
-    showSuspendUserButton: [{ type: Input }],
-    reinvite: [{ type: Output }]
+LoadingSpinnerComponent.propDecorators = {
+    loadingText: [{ type: Input }]
 };
 
-class UserListComponent {
+class PaginationComponent {
     constructor() {
-        this.users = [];
-        this.userClick = new EventEmitter();
-        this.pageChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.pagination = { itemsPerPage: 50, currentPage: this.currentPageNumber, totalItems: this.pageTotalSize };
+        this.previousPage = new EventEmitter();
+        this.nextPage = new EventEmitter();
     }
-    onUserClick(user) {
-        this.userClick.emit(user);
+    onPrevious() {
+        this.previousPage.emit(null);
     }
-    emitPageClickEvent(pageNumber) {
-        this.currentPageNumber = pageNumber;
-        this.pageChange.emit(pageNumber);
+    onNext() {
+        this.nextPage.emit(null);
     }
 }
-UserListComponent.decorators = [
+PaginationComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-user-list',
-                template: "<table class=\"govuk-table\">\n\n    <thead clas=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Name</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Email</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Status</th>\n        </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n      <ng-container *ngFor=\"let u of users | paginate: { itemsPerPage: pagination.itemsPerPage, currentPage: currentPageNumber, totalItems: pagination.totalItems }\">\n        <tr class=\"govuk-table__row\" data-selector=\"table-row\">\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">\n              <a class=\"govuk-link\" [attr.title]=\"u.routerLinkTitle\" [routerLink]=\"u.routerLink\" (click)=\"onUserClick(u)\">{{ u.fullName }}</a>\n            </td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.email }}</td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.status }}</td>\n        </tr>\n      </ng-container>\n    </tbody>\n</table>\n<xuilib-hmcts-pagination (pageChange)=\"emitPageClickEvent($event)\" [pageSize]=\"pagination.itemsPerPage\"></xuilib-hmcts-pagination>\n",
-                styles: [":host{display:block}"]
+                selector: 'xuilib-pagination',
+                template: "<nav class=\"hmcts-pagination\" id=\"pagination-label\">\n\n  <p class=\"govuk-visually-hidden\" aria-labelledby=\"pagination-label\">Pagination navigation</p>\n\n  <ul class=\"hmcts-pagination__list\">\n    <li class=\"hmcts-pagination__item  hmcts-pagination__item--prev\">\n      <a *ngIf=\"firstRecord > 1; else noPrevious\" class=\"hmcts-pagination__link\" (click)=\"onPrevious()\" href=\"javascript:void(0)\">\n        Previous page\n      </a>\n      <ng-template #noPrevious>\n        <span class=\"hmcts-pagination__link\">Previous page</span>\n      </ng-template>\n    </li>\n\n    <li class=\"hmcts-pagination__item  hmcts-pagination__item--next\">\n      <a *ngIf=\"moreItems; else noNext\" class=\"hmcts-pagination__link\" (click)=\"onNext()\" href=\"javascript:void(0)\">Next page</a>\n      <ng-template #noNext>\n        <span class=\"hmcts-pagination__link\">Next page</span>\n      </ng-template>\n    </li>\n  </ul>\n</nav>\n",
+                styles: ["span.hmcts-pagination__link:hover{color:revert}"]
             },] }
 ];
-UserListComponent.propDecorators = {
-    users: [{ type: Input }],
-    currentPageNumber: [{ type: Input }],
-    pageTotalSize: [{ type: Input }],
-    userClick: [{ type: Output }],
-    pageChange: [{ type: Output }]
+PaginationComponent.ctorParameters = () => [];
+PaginationComponent.propDecorators = {
+    moreItems: [{ type: Input }],
+    firstRecord: [{ type: Input }],
+    previousPage: [{ type: Output }],
+    nextPage: [{ type: Output }]
 };
 
-class CookieService {
-    constructor(doc) {
-        this.document = doc;
-    }
-    setCookie(key, value, expiryDate) {
-        const expiry = expiryDate ? ` expires=${expiryDate}` : '';
-        const cookie = `${key}=${value};${expiry}`;
-        this.document.cookie = cookie;
-    }
-    getCookie(key) {
-        const cookieValue = this.document.cookie
-            .split('; ')
-            .find(row => row.startsWith(`${key}=`))
-            .split('=')[1];
-        return cookieValue;
+class SearchJudicialsComponent {
+    constructor(judicialService, fb) {
+        this.judicialService = judicialService;
+        this.disabled = null;
+        this.selectedJudicials = [];
+        this.submitted = true;
+        this.placeholderContent = '';
+        this.showAutocomplete = false;
+        this.judicialChanged = new EventEmitter();
+        this.idValue = '';
+        this.errorMessage = 'You must select a name';
+        this.serviceId = '';
+        this.minSearchCharacters = 3;
+        this.keyUpSubject$ = new Subject();
+        this.searchInProgress = false;
+        this.formGroup = fb.group({
+            formControl: [null],
+            selectedFormControl: [null]
+        });
     }
-    deleteCookie(key, path, domain) {
-        const pathValue = path ? `; path=${path}` : '';
-        const domainValue = domain ? `; domain=${domain}` : '';
-        this.document.cookie = `${key}=${pathValue}${domainValue}; expires=Thu, 01 Jan 1970 00:00:01 GMT; max-age=0`;
+    ngOnInit() {
+        this.displayedJudicials = [];
+        if (this.control) {
+            if (this.formGroup && this.formGroup.controls) {
+                this.formGroup.controls.selectedFormControl = this.control;
+                this.formGroup.controls.formControl.setValue(this.getControlValueDisplayText());
+            }
+        }
+        this.keyUpSubject$.pipe(debounceTime(500)).subscribe(searchValue => this.search(searchValue));
     }
-    deleteCookieByPartialMatch(key, path, domain) {
-        this.document.cookie
-            .split('; ')
-            .filter(row => row.startsWith(`${key}`))
-            .forEach(element => {
-            this.deleteCookie(element.split('=')[0], path, domain);
-        });
+    onKeyDown() {
+        this.judicialChanged.emit();
     }
-    checkCookie(key) {
-        return this.document.cookie.split('; ').some(item => item.trim().startsWith(`${key}=`));
+    onKeyUp(event) {
+        this.showAutocomplete = false;
+        this.keyUpSubject$.next(event.target.value);
     }
-}
-CookieService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CookieService_Factory() { return new CookieService(i0.ɵɵinject(i4.DOCUMENT)); }, token: CookieService, providedIn: "root" });
-CookieService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-CookieService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-
-const windowToken = new InjectionToken('Window');
-function windowProvider() { return window; }
-
-class CookieBannerComponent {
-    constructor(cookieService, window) {
-        this.cookieService = cookieService;
-        this.rejectionNotifier = new EventEmitter();
-        this.acceptanceNotifier = new EventEmitter();
-        this.isCookieBannerVisible = false;
-        this.window = window;
+    onFocus() {
+        this.showAutocomplete = false;
     }
-    ngOnInit() {
-        this.setState();
+    get displayedJudicialsDuplicationFiltered() {
+        return this.displayedJudicials.filter(judicial => !this.selectedJudicials.map(selectedJudicial => selectedJudicial.idamId).includes(judicial.idamId));
     }
-    acceptCookie() {
-        this.cookieService.setCookie(this.identifier, 'true', this.getExpiryDate());
-        this.setState(true);
+    filter(term) {
+        this.searchJudicials(term, this.serviceId).pipe(mergeMap((apiData) => {
+            const apiFilter = apiData.filter(apiJudicial => !this.selectedJudicials.map(selectedJudicial => selectedJudicial.idamId).includes(apiJudicial.idamId));
+            this.displayedJudicials = apiFilter;
+            this.searchInProgress = false;
+            return apiFilter;
+        })).subscribe(judicial => {
+            if (term === judicial.knownAs) {
+                this.formGroup.controls.selectedFormControl.setValue(judicial);
+                this.displayedJudicials = [];
+                this.judicialChanged.emit(judicial);
+                this.showAutocomplete = false;
+            }
+            this.searchInProgress = false;
+        });
     }
-    rejectCookie() {
-        this.cookieService.setCookie(this.identifier, 'false', this.getExpiryDate());
-        this.setState(true);
+    onSelectionChange(selection) {
+        if (this.formGroup.controls.formControl instanceof FormArray) {
+            this.formGroup.controls.selectedFormControl.push(new FormControl(selection.idamId));
+        }
+        else {
+            this.formGroup.controls.selectedFormControl.setValue(selection);
+        }
+        this.judicialChanged.emit(selection);
     }
-    setState(reload = false) {
-        this.isCookieBannerVisible = !this.cookieService.checkCookie(this.identifier);
-        if (this.areCookiesAccepted()) {
-            this.notifyAcceptance();
+    search(currentValue) {
+        this.searchInProgress = true;
+        this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
+        if (!!currentValue) {
+            this.formGroup.controls.selectedFormControl.markAsDirty();
         }
         else {
-            this.notifyRejection();
+            this.formGroup.controls.selectedFormControl.reset();
         }
-        if (reload) { // reload if any of the buttons are pressed
-            this.window.location.reload();
+        if (this.showAutocomplete) {
+            this.filter(currentValue);
+        }
+        else {
+            this.searchInProgress = false;
         }
     }
-    areCookiesAccepted() {
-        return this.cookieService.checkCookie(this.identifier) && this.cookieService.getCookie(this.identifier) === 'true';
-    }
-    notifyRejection() {
-        this.rejectionNotifier.emit();
+    getDisplayName(selectedJudicial) {
+        return `${selectedJudicial.knownAs} (${selectedJudicial.emailId})`;
     }
-    notifyAcceptance() {
-        this.acceptanceNotifier.emit();
+    searchJudicials(term, serviceId) {
+        return this.judicialService.searchJudicial(term, serviceId);
     }
-    getExpiryDate() {
-        const now = new Date();
-        const time = now.getTime();
-        const expireTime = time + 31536000000; //  in 365 days = 3600 * 1000 * 24 * 365
-        now.setTime(expireTime);
-        return now.toUTCString();
+    getControlValueDisplayText() {
+        return this.formGroup && this.formGroup.controls && this.formGroup.controls.selectedFormControl.value ?
+            this.getDisplayName(this.formGroup.controls.selectedFormControl.value) : '';
     }
 }
-CookieBannerComponent.decorators = [
+SearchJudicialsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-cookie-banner',
-                template: "<div class=\"govuk-cookie-banner \" role=\"region\" attr.aria-label=\"'Cookies on {{appName}}'\" *ngIf=\"isCookieBannerVisible\">\n  <div class=\"govuk-cookie-banner__message govuk-width-container\">\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <h2 class=\"govuk-cookie-banner__heading govuk-heading-m\">Cookies on {{appName}}</h2>\n\n        <div class=\"govuk-cookie-banner__content\">\n          <p>We use some essential cookies to make this service work.</p>\n          <p>We\u2019d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"govuk-button-group\">\n      <button value=\"accept\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"acceptCookie()\">\n        Accept analytics cookies\n      </button>\n      <button value=\"reject\" type=\"button\" name=\"cookies\" class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"rejectCookie()\">\n        Reject analytics cookies\n      </button>\n      <a class=\"govuk-link\" routerLink=\"/cookies\">View cookies</a>\n    </div>\n  </div>\n</div>"
+                selector: 'xuilib-search-judicials',
+                template: "<div class=\"govuk-form-group\">\n  <input id=\"inputSelectPerson{{idValue}}\" [placeholder]=\"placeholderContent\" [formControl]=\"formGroup.controls.formControl\"\n    [matAutocomplete]=\"autoComplete\" (keydown)=\"onKeyDown()\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus()\"\n    class=\"govuk-input\" [attr.disabled]=\"!disabled ? null: disabled\" [value]=\"getControlValueDisplayText()\"\n    #inputSelection>\n  <mat-autocomplete autoActiveFirstOption #autoComplete=\"matAutocomplete\">\n    <mat-option *ngFor=\"let judicial of displayedJudicialsDuplicationFiltered\" class=\"select-option\"\n      [value]=\"getDisplayName(judicial)\" (onSelectionChange)=\"onSelectionChange(judicial)\"\n      [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n      {{ getDisplayName(judicial) }}\n    </mat-option>\n    <mat-option class=\"select-option\"\n      *ngIf=\"!displayedJudicialsDuplicationFiltered?.length && showAutocomplete && !searchInProgress\">\n      {{ 'No results found' }}</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                styles: [".hide-autocomplete{display:none}.mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}"]
             },] }
 ];
-CookieBannerComponent.ctorParameters = () => [
-    { type: CookieService },
-    { type: undefined, decorators: [{ type: Inject, args: [windowToken,] }] }
+SearchJudicialsComponent.ctorParameters = () => [
+    { type: FindAPersonService },
+    { type: FormBuilder }
 ];
-CookieBannerComponent.propDecorators = {
-    identifier: [{ type: Input }],
-    appName: [{ type: Input }],
-    rejectionNotifier: [{ type: Output }],
-    acceptanceNotifier: [{ type: Output }]
+SearchJudicialsComponent.propDecorators = {
+    control: [{ type: Input }],
+    disabled: [{ type: Input }],
+    selectedJudicials: [{ type: Input }],
+    submitted: [{ type: Input }],
+    placeholderContent: [{ type: Input }],
+    showAutocomplete: [{ type: Input }],
+    displayedJudicials: [{ type: Input }],
+    judicialChanged: [{ type: Output }],
+    idValue: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    serviceId: [{ type: Input }],
+    autoCompleteInputBox: [{ type: ViewChild, args: ['inputSelection', { read: ElementRef, static: true },] }]
 };
 
-class LocationService {
-    constructor(http) {
-        this.http = http;
-    }
-    /**
-     * @description getAllLocations from service Ids/location type/search term
-     * @param serviceIds: SSCS | SSCS,IA split with ','
-     * @param locationType: optional | hearing | case_management
-     * @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}`);
-    }
-    /**
-     * @description searchLocations from service Ids/location type/search term
-     * @param serviceIds: BBA3 | BBA3,BFA1 split with ','
-     * @param locationType: optional | hearing | case_management
-     * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
-     * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
-     */
-    searchLocations(serviceIds, locationType, searchTerm) {
-        return this.http.get(`api/prd/location/getLocations?serviceIds=${serviceIds}&locationType=${locationType}&searchTerm=${searchTerm}`);
-    }
-}
-LocationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function LocationService_Factory() { return new LocationService(i0.ɵɵinject(i1.HttpClient)); }, token: LocationService, providedIn: "root" });
-LocationService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-LocationService.ctorParameters = () => [
-    { type: HttpClient }
-];
-
-class SearchLocationComponent {
-    constructor(locationService, fb, cd) {
+class SearchVenueComponent {
+    constructor(locationService, fb) {
         this.locationService = locationService;
-        this.fb = fb;
-        this.cd = cd;
         this.disabled = null;
-        this.singleMode = false;
         this.locationType = '';
         this.serviceIds = '';
         this.submitted = true;
-        this.delay = 500;
         this.showAutocomplete = false;
-        this.locations = [];
-        this.locationSelected = new EventEmitter();
-        this.locationInputChanged = new EventEmitter();
-        this.searchLocationChanged = new EventEmitter();
+        this.locationChanged = new EventEmitter();
         this.minSearchCharacters = 3;
-        this.term = '';
-        this.pSelectedLocations = [];
-        this.pReset = true;
-        this.form = this.fb.group({
-            searchTerm: ['']
+        this.keyUpSubject$ = new Subject();
+        this.readyAfterContent = false;
+        this.searchInProgress = false;
+        this.findLocationFormGroup = fb.group({
+            findLocationFormControl: [null],
+            locationSelectedFormControl: [null]
         });
+        this.selectedLocations = [];
     }
-    get reset() {
-        return this.pReset;
-    }
-    set reset(value) {
-        this.pReset = value;
-        this.resetSearchTerm();
-    }
-    get selectedLocations() {
-        return this.pSelectedLocations;
-    }
-    set selectedLocations(value) {
-        this.pSelectedLocations = value;
+    ngAfterContentInit() {
+        this.readyAfterContent = true;
     }
     ngOnInit() {
-        if (this.singleMode && this.selectedLocations.length > 0) {
-            const location = this.selectedLocations[0];
-            this.form.controls.searchTerm.patchValue(location.site_name, { emitEvent: false, onlySelf: true });
+        this.displayedLocations = [];
+        if (this.control) {
+            if (this.findLocationFormGroup && this.findLocationFormGroup.controls) {
+                this.findLocationFormGroup.controls.locationSelectedFormControl = this.control;
+            }
         }
-        this.search();
+        this.keyUpSubject$.pipe(debounceTime(500)).subscribe(searchValue => this.search(searchValue));
     }
-    filter(term) {
-        this.getLocations(term).pipe(map((locations) => this.removeSelectedLocations(locations)));
+    onKeyDown() {
+        this.locationChanged.emit();
     }
-    onSelectionChange(location) {
-        this.form.controls.searchTerm.patchValue(location.site_name, { emitEvent: false, onlySelf: true });
-        this.locationSelected.emit(location);
+    onKeyUp(event) {
+        this.showAutocomplete = false;
+        this.keyUpSubject$.next(event.target.value);
     }
-    search() {
-        this.form.controls.searchTerm.valueChanges
-            .pipe(tap((term) => this.locationInputChanged.next(term)), tap(() => this.locations = []), tap((term) => this.term = term), filter(term => !!term && term.length >= this.minSearchCharacters), debounceTime(this.delay), mergeMap(value => this.getLocations(value)), map((locations) => this.removeSelectedLocations(locations))).subscribe(locations => {
-            this.locations = locations;
-            this.cd.markForCheck();
-            if (locations.length === 1 && this.term === locations[0].site_name && !this.singleMode) {
-                this.locationSelected.emit(locations[0]);
+    onFocus() {
+        this.showAutocomplete = false;
+    }
+    get displayedLocationsDuplicationFiltered() {
+        return this.displayedLocations.filter(location => !this.selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(location.epimms_id) && location.court_name);
+    }
+    filter(term) {
+        this.searchLocations(term).pipe(mergeMap((apiData) => {
+            const apiFilter = apiData.filter(apiLocation => !this.selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(apiLocation.epimms_id));
+            this.displayedLocations = apiFilter;
+            this.searchInProgress = false;
+            return apiFilter;
+        })).subscribe(location => {
+            if (term === location.court_name) {
+                this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(location);
+                this.displayedLocations = [];
+                this.locationChanged.emit(location);
                 this.showAutocomplete = false;
-                return;
             }
-            this.showAutocomplete = true;
+            this.searchInProgress = false;
         });
     }
-    onInput() {
-        this.searchLocationChanged.emit();
+    onSelectionChange(selection) {
+        if (this.findLocationFormGroup.controls.findLocationFormControl instanceof FormArray) {
+            this.findLocationFormGroup.controls.locationSelectedFormControl.push(new FormControl(selection.epimms_id));
+        }
+        else {
+            this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(selection);
+        }
+        this.locationChanged.emit(selection);
     }
-    getLocations(term) {
-        return this.locationService.getAllLocations(this.serviceIds, this.locationType, term);
+    search(currentValue) {
+        this.searchInProgress = true;
+        this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
+        if (!currentValue || !currentValue.length) {
+            this.findLocationFormGroup.controls.locationSelectedFormControl.markAsPristine();
+            this.findLocationFormGroup.controls.locationSelectedFormControl.reset();
+        }
+        if (this.showAutocomplete) {
+            this.filter(currentValue);
+        }
+        else {
+            this.searchInProgress = false;
+        }
     }
-    resetSearchTerm() {
-        this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
+    getDisplayName(selectedLocation) {
+        return selectedLocation.court_name;
     }
-    removeSelectedLocations(locations) {
-        if (this.singleMode) {
-            return locations;
-        }
-        return locations.filter(location => !this.selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(location.epimms_id) && location.site_name);
+    searchLocations(term) {
+        return this.locationService.searchLocations(this.serviceIds, this.locationType, term);
+    }
+    getControlCourtNameValue() {
+        return this.findLocationFormGroup && this.findLocationFormGroup.controls && this.findLocationFormGroup.controls.locationSelectedFormControl.value ?
+            this.findLocationFormGroup.controls.locationSelectedFormControl.value.court_name : '';
     }
 }
-SearchLocationComponent.decorators = [
+SearchVenueComponent.decorators = [
     { type: Component, args: [{
-                selector: 'exui-search-location',
-                template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputLocationSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchLocation\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n    <mat-option *ngFor=\"let location of locations\"\n                (onSelectionChange)=\"onSelectionChange(location)\">\n      {{ location.site_name }}\n    </mat-option>\n    <mat-option *ngIf=\"!locations.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:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                selector: 'xuilib-search-venue',
+                template: "<div class=\"auto-complete-container\">\n  <div *ngIf=\"readyAfterContent\" class=\"autocomplete__wrapper\">\n    <input\n      [formControl]=\"findLocationFormGroup.controls.findLocationFormControl\"\n      [matAutocomplete]=\"autoSearchLocation\"\n      (keydown)=\"onKeyDown()\"\n      (keyup)=\"onKeyUp($event)\"\n      (focus)=\"onFocus()\"\n      class=\"autocomplete__input autocomplete__input--default search-box\"\n      [attr.disabled]=\"!disabled ? null: disabled\"\n      [value]=\"getControlCourtNameValue()\"\n      #inputSelectedLocation>\n    <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n      <mat-option *ngFor=\"let location of displayedLocationsDuplicationFiltered\"\n                  [value]=\"getDisplayName(location)\"\n                  (onSelectionChange)=\"onSelectionChange(location)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n        {{ getDisplayName(location) }}\n      </mat-option>\n      <mat-option *ngIf=\"!displayedLocationsDuplicationFiltered?.length && showAutocomplete && !searchInProgress\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </div>\n</div>\n",
+                styles: [".autocomplete__input{-webkit-appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:0;width:100%;line-height:24px;font-size:19px;background-color:transparent;position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:3px solid #fd0;outline-offset:0;box-shadow:inset 0 0 0 2px}.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:550px;display:inline-block;margin-right:4px}"]
             },] }
 ];
-SearchLocationComponent.ctorParameters = () => [
+SearchVenueComponent.ctorParameters = () => [
     { type: LocationService },
-    { type: FormBuilder },
-    { type: ChangeDetectorRef }
+    { type: FormBuilder }
 ];
-SearchLocationComponent.propDecorators = {
+SearchVenueComponent.propDecorators = {
     control: [{ type: Input }],
     disabled: [{ type: Input }],
-    singleMode: [{ type: Input }],
     locationType: [{ type: Input }],
+    selectedLocations: [{ type: Input }],
     serviceIds: [{ type: Input }],
     submitted: [{ type: Input }],
-    delay: [{ type: Input }],
-    form: [{ type: Input }],
+    autoCompleteInputBox: [{ type: ViewChild, args: ['inputSelectedLocation', { read: ElementRef },] }],
     showAutocomplete: [{ type: Input }],
-    locations: [{ type: Input }],
-    locationSelected: [{ type: Output }],
-    locationInputChanged: [{ type: Output }],
-    searchLocationChanged: [{ type: Output }],
-    reset: [{ type: Input }],
-    selectedLocations: [{ type: Input }]
+    displayedLocations: [{ type: Input }],
+    locationChanged: [{ type: Output }]
 };
 
-class FindLocationComponent {
+class CaseSharingStateService {
     constructor() {
-        this.locationFieldChanged = new EventEmitter();
-        this.selectedLocations = [];
-        this.submitted = true;
-        this.enableAddLocationButton = true;
-        this.locationTitle = 'Search for a location by name';
-        this.disableInputField = false;
-        this.locations = [];
-        this.tempSelectedLocation = null;
-        this.serviceIds = 'SSCS,IA';
-        this.pServices = [];
-        this.pDisabled = false;
+        this.caseState = [];
+        this.subject = new BehaviorSubject(this.caseState);
     }
-    get disabled() {
-        return this.pDisabled;
+    get state() {
+        return this.subject.asObservable().pipe(distinctUntilChanged());
     }
-    set disabled(value) {
-        if (value) {
-            this.searchLocationComponent.resetSearchTerm();
-            this.removeSelectedValues();
-        }
-        this.pDisabled = this.disableInputField === true ? true : null;
+    setCases(cases) {
+        this.caseState = [];
+        cases.forEach(aCase => {
+            this.caseState.push({ caseId: aCase.caseId, caseTitle: aCase.caseTitle, caseTypeId: aCase.caseTypeId, roles: aCase.roles,
+                sharedWith: aCase.sharedWith, pendingShares: aCase.pendingShares, pendingUnshares: aCase.pendingUnshares });
+        });
+        this.subject.next(this.caseState);
     }
-    get services() {
-        return this.pServices;
+    getCases() {
+        return this.caseState;
     }
-    set services(value) {
-        this.pServices = value;
-        const field = this.fields.find(f => f.name === this.field.findLocationField);
-        if (field) {
-            if (typeof value === 'string') {
-                this.serviceIds = value;
+    requestShare(user) {
+        const oldSharedCases = this.caseState.slice();
+        const newSharedCases = [];
+        for (const sharedCase of oldSharedCases) {
+            if (!sharedCase.pendingShares) {
+                sharedCase.pendingShares = [];
+            }
+            const newPendingShares = sharedCase.pendingShares.slice();
+            if (!sharedCase.pendingUnshares) {
+                sharedCase.pendingUnshares = [];
+            }
+            const newPendingUnshares = sharedCase.pendingUnshares.slice();
+            if (!this.userHasAccess(sharedCase, user)) {
+                if (!newPendingShares.some(u => u.email === user.email)) {
+                    newPendingShares.push(user);
+                }
             }
             else {
-                this.serviceIds = getValues(field.options, value).filter(x => x !== 'services_all').join(',');
+                for (let u = 0, ul = newPendingUnshares.length; u < ul; u++) {
+                    if (newPendingUnshares[u].email === user.email) {
+                        newPendingUnshares.splice(u, 1);
+                        break;
+                    }
+                }
             }
+            const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares, pendingShares: newPendingShares });
+            newSharedCases.push(newSharedCase);
         }
+        this.subject.next(newSharedCases);
+        return newSharedCases;
     }
-    addLocation() {
-        if (this.tempSelectedLocation) {
-            this.selectedLocations = [...this.selectedLocations, this.tempSelectedLocation];
-            this.addSelectedLocationsToForm([this.tempSelectedLocation]);
-            this.tempSelectedLocation = null;
-            this.locations = [];
-            this.searchLocationComponent.resetSearchTerm();
+    requestUnshare(caseId, user) {
+        const newSharedCases = [];
+        for (const sharedCase of this.caseState) {
+            if (sharedCase.caseId === caseId) {
+                if (!sharedCase.pendingUnshares) {
+                    sharedCase.pendingUnshares = [];
+                }
+                const newPendingUnshares = sharedCase.pendingUnshares.slice();
+                if (newPendingUnshares) {
+                    if (!newPendingUnshares.some(u => u.email === user.email)) {
+                        newPendingUnshares.push(user);
+                    }
+                }
+                else {
+                    newPendingUnshares.push(user);
+                }
+                const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares });
+                newSharedCases.push(newSharedCase);
+            }
+            else {
+                newSharedCases.push(sharedCase);
+            }
         }
+        this.subject.next(newSharedCases);
+        return;
     }
-    removeLocation(location) {
-        if (location.epimms_id) {
-            this.selectedLocations = this.selectedLocations.filter(selectedLocation => selectedLocation.epimms_id !== location.epimms_id);
-            const formArray = this.form.get(this.field.name);
-            const index = formArray.value.findIndex(selectedLocation => selectedLocation.epimms_id === location.epimms_id);
-            if (index > -1) {
-                formArray.removeAt(index);
+    requestCancel(caseId, user) {
+        const newSharedCases = [];
+        for (const sharedCase of this.caseState) {
+            if (sharedCase.caseId === caseId) {
+                if (!sharedCase.pendingUnshares) {
+                    sharedCase.pendingUnshares = [];
+                }
+                const newPendingUnshares = sharedCase.pendingUnshares.slice();
+                for (let iPendingUnshares = 0; iPendingUnshares < newPendingUnshares.length; iPendingUnshares++) {
+                    if (newPendingUnshares[iPendingUnshares].email === user.email) {
+                        newPendingUnshares.splice(iPendingUnshares, 1);
+                        break;
+                    }
+                }
+                if (!sharedCase.pendingShares) {
+                    sharedCase.pendingShares = [];
+                }
+                const newPendingShares = sharedCase.pendingShares.slice();
+                for (let iPendingShares = 0; iPendingShares < newPendingShares.length; iPendingShares++) {
+                    if (newPendingShares[iPendingShares].email === user.email) {
+                        newPendingShares.splice(iPendingShares, 1);
+                        break;
+                    }
+                }
+                const newSharedCase = Object.assign(Object.assign({}, sharedCase), { pendingUnshares: newPendingUnshares, pendingShares: newPendingShares });
+                newSharedCases.push(newSharedCase);
+            }
+            else {
+                newSharedCases.push(sharedCase);
             }
         }
+        this.subject.next(newSharedCases);
+        return;
     }
-    onInputChanged(term) {
-        // if the filter is in single mode clear the selected locations
-        if (typeof term === 'string' && this.field.maxSelected === 1) {
-            this.removeSelectedValues();
+    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;
+            }
         }
     }
-    onSearchInputChanged() {
-        this.locationFieldChanged.emit();
-    }
-    onLocationSelected(location) {
-        if (this.field.maxSelected === 1) {
-            this.removeSelectedValues();
-            this.addSelectedLocationsToForm([location]);
+    userHasAccess(c, user) {
+        if (!c.sharedWith) {
+            return false;
         }
-        else {
-            if (!this.selectedLocations.find(x => x.epimms_id === location.epimms_id)) {
-                if (location.epimms_id) {
-                    this.tempSelectedLocation = location;
-                }
+        for (let i = 0, l = c.sharedWith.length; i < l; i++) {
+            if (c.sharedWith[i].email === user.email) {
+                return true;
             }
         }
+        return false;
     }
-    removeSelectedValues() {
-        const formArray = this.form.get(this.field.name);
-        for (let i = 0; i < formArray.length; i++) {
-            formArray.removeAt(i);
-        }
-        this.selectedLocations = [];
+}
+CaseSharingStateService.ɵprov = i0.ɵɵdefineInjectable({ factory: function CaseSharingStateService_Factory() { return new CaseSharingStateService(); }, token: CaseSharingStateService, providedIn: "root" });
+CaseSharingStateService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+CaseSharingStateService.ctorParameters = () => [];
+
+class SelectedCaseConfirmComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.changeLink = '';
     }
-    addSelectedLocationsToForm(locations) {
-        const formArray = this.form.get(this.field.name);
-        for (const location of locations) {
-            formArray.push(new FormControl(location));
+    ngOnInit() {
+        this.shareCases$ = this.stateService.state;
+        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+    }
+    trackByUserId(user) {
+        return user.idamId;
+    }
+    showUserAccessBlock() {
+        if (this.sharedCase.pendingShares && this.sharedCase.pendingShares.length > 0) {
+            return true;
         }
+        return this.sharedCase.pendingUnshares && this.sharedCase.pendingUnshares.length > 0;
     }
 }
-FindLocationComponent.decorators = [
+SelectedCaseConfirmComponent.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",
-                styles: [""]
+                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",
+                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%}"]
             },] }
 ];
-FindLocationComponent.propDecorators = {
-    locationFieldChanged: [{ type: Output }],
-    selectedLocations: [{ type: Input }],
-    submitted: [{ type: Input }],
-    enableAddLocationButton: [{ type: Input }],
-    form: [{ type: Input }],
-    field: [{ type: Input }],
-    fields: [{ type: Input }],
-    locationTitle: [{ type: Input }],
-    disableInputField: [{ type: Input }],
-    searchLocationComponent: [{ type: ViewChild, args: [SearchLocationComponent, { static: true },] }],
-    disabled: [{ type: Input }],
-    services: [{ type: Input }]
+SelectedCaseConfirmComponent.ctorParameters = () => [
+    { type: CaseSharingStateService }
+];
+SelectedCaseConfirmComponent.propDecorators = {
+    sharedCase: [{ type: Input }],
+    changeLink: [{ type: Input }]
 };
 
-class PaginationComponent {
-    constructor() {
-        this.previousPage = new EventEmitter();
-        this.nextPage = new EventEmitter();
+class SelectedCaseListComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.shareCases = [];
+        this.toConfirm = false;
+        this.changeLink = '';
+        this.unselect = new EventEmitter();
+        this.synchronizeStore = new EventEmitter();
+    }
+    ngOnInit() {
+        this.shareCases$ = this.stateService.state;
+        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+    }
+    onUnselect(sharedCase) {
+        this.unselect.emit(sharedCase);
     }
-    onPrevious() {
-        this.previousPage.emit(null);
+    onSynchronizeStore(event) {
+        this.synchronizeStore.emit(event);
     }
-    onNext() {
-        this.nextPage.emit(null);
+    trackByCaseId(sharedCase) {
+        return sharedCase.caseId;
     }
 }
-PaginationComponent.decorators = [
+SelectedCaseListComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-pagination',
-                template: "<nav class=\"hmcts-pagination\" id=\"pagination-label\">\n\n  <p class=\"govuk-visually-hidden\" aria-labelledby=\"pagination-label\">Pagination navigation</p>\n\n  <ul class=\"hmcts-pagination__list\">\n    <li class=\"hmcts-pagination__item  hmcts-pagination__item--prev\">\n      <a *ngIf=\"firstRecord > 1; else noPrevious\" class=\"hmcts-pagination__link\" (click)=\"onPrevious()\" href=\"javascript:void(0)\">\n        Previous page\n      </a>\n      <ng-template #noPrevious>\n        <span class=\"hmcts-pagination__link\">Previous page</span>\n      </ng-template>\n    </li>\n\n    <li class=\"hmcts-pagination__item  hmcts-pagination__item--next\">\n      <a *ngIf=\"moreItems; else noNext\" class=\"hmcts-pagination__link\" (click)=\"onNext()\" href=\"javascript:void(0)\">Next page</a>\n      <ng-template #noNext>\n        <span class=\"hmcts-pagination__link\">Next page</span>\n      </ng-template>\n    </li>\n  </ul>\n</nav>\n",
-                styles: ["span.hmcts-pagination__link:hover{color:revert}"]
+                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",
+                styles: [""]
             },] }
 ];
-PaginationComponent.ctorParameters = () => [];
-PaginationComponent.propDecorators = {
-    moreItems: [{ type: Input }],
-    firstRecord: [{ type: Input }],
-    previousPage: [{ type: Output }],
-    nextPage: [{ type: Output }]
+SelectedCaseListComponent.ctorParameters = () => [
+    { type: CaseSharingStateService }
+];
+SelectedCaseListComponent.propDecorators = {
+    shareCases$: [{ type: Input }],
+    removeUserFromCaseToggleOn: [{ type: Input }],
+    toConfirm: [{ type: Input }],
+    changeLink: [{ type: Input }],
+    unselect: [{ type: Output }],
+    synchronizeStore: [{ type: Output }]
 };
 
-class SearchVenueComponent {
-    constructor(locationService, fb) {
-        this.locationService = locationService;
-        this.disabled = null;
-        this.locationType = '';
-        this.serviceIds = '';
-        this.submitted = true;
-        this.showAutocomplete = false;
-        this.locationChanged = new EventEmitter();
-        this.minSearchCharacters = 3;
-        this.keyUpSubject$ = new Subject();
-        this.readyAfterContent = false;
-        this.searchInProgress = false;
-        this.findLocationFormGroup = fb.group({
-            findLocationFormControl: [null],
-            locationSelectedFormControl: [null]
-        });
-        this.selectedLocations = [];
-    }
-    ngAfterContentInit() {
-        this.readyAfterContent = true;
+class SelectedCaseComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.opened = false;
+        this.unselect = new EventEmitter();
+        this.synchronizeStore = new EventEmitter();
     }
     ngOnInit() {
-        this.displayedLocations = [];
-        if (this.control) {
-            if (this.findLocationFormGroup && this.findLocationFormGroup.controls) {
-                this.findLocationFormGroup.controls.locationSelectedFormControl = this.control;
-            }
+        this.shareCases$ = this.stateService.state;
+        this.shareCases$.subscribe(shareCases => this.shareCases = shareCases);
+    }
+    ngOnChanges(changes) {
+        if (changes.sharedCase) {
+            const sharedWith = this.sharedCase.sharedWith ? this.sharedCase.sharedWith : [];
+            const pendingShares = this.sharedCase.pendingShares ? this.sharedCase.pendingShares : [];
+            this.combinedSortedShares = this.combineAndSortShares(sharedWith, pendingShares);
         }
-        this.keyUpSubject$.pipe(debounceTime(500)).subscribe(searchValue => this.search(searchValue));
     }
-    onKeyDown() {
-        this.locationChanged.emit();
+    onUnselect() {
+        this.unselect.emit(this.sharedCase);
     }
-    onKeyUp(event) {
-        this.showAutocomplete = false;
-        this.keyUpSubject$.next(event.target.value);
+    onDeselect(c) {
+        this.unselect.emit(c);
     }
-    onFocus() {
-        this.showAutocomplete = false;
+    trackByUserId(user) {
+        return user.idamId;
     }
-    get displayedLocationsDuplicationFiltered() {
-        return this.displayedLocations.filter(location => !this.selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(location.epimms_id) && location.court_name);
+    canRemove(caseId, user) {
+        return this.shareCases$.pipe(map(cases => {
+            if (this.removeUserFromCaseToggleOn) {
+                for (const aCase of cases) {
+                    if (aCase.caseId === caseId) {
+                        if (aCase.pendingUnshares && aCase.pendingUnshares.some(u => u.idamId === user.idamId)) {
+                            return false;
+                        }
+                        if (aCase.sharedWith && aCase.sharedWith.some(u => u.idamId === user.idamId)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        }));
     }
-    filter(term) {
-        this.searchLocations(term).pipe(mergeMap((apiData) => {
-            const apiFilter = apiData.filter(apiLocation => !this.selectedLocations.map(selectedLocation => selectedLocation.epimms_id).includes(apiLocation.epimms_id));
-            this.displayedLocations = apiFilter;
-            this.searchInProgress = false;
-            return apiFilter;
-        })).subscribe(location => {
-            if (term === location.court_name) {
-                this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(location);
-                this.displayedLocations = [];
-                this.locationChanged.emit(location);
-                this.showAutocomplete = false;
+    canCancel(caseId, user) {
+        return this.shareCases$.pipe(map(cases => {
+            for (const aCase of cases) {
+                if (aCase.caseId === caseId) {
+                    if (aCase.pendingShares && aCase.pendingShares.some(u => u.idamId === user.idamId)) {
+                        return true;
+                    }
+                    if (aCase.pendingUnshares && aCase.pendingUnshares.some(u => u.idamId === user.idamId)) {
+                        return true;
+                    }
+                    return false;
+                }
             }
-            this.searchInProgress = false;
-        });
+        }));
     }
-    onSelectionChange(selection) {
-        if (this.findLocationFormGroup.controls.findLocationFormControl instanceof FormArray) {
-            this.findLocationFormGroup.controls.locationSelectedFormControl.push(new FormControl(selection.epimms_id));
+    isToBeRemoved(caseId, user) {
+        return this.shareCases$.pipe(map(cases => {
+            for (const aCase of cases) {
+                if (aCase.caseId === caseId) {
+                    return aCase.pendingUnshares && aCase.pendingUnshares.some(u => u.idamId === user.idamId);
+                }
+            }
+        }));
+    }
+    isToBeAdded(caseId, user) {
+        return this.shareCases$.pipe(map(cases => {
+            for (const aCase of cases) {
+                if (aCase.caseId === caseId) {
+                    return aCase.pendingShares && aCase.pendingShares.some(u => u.idamId === user.idamId);
+                }
+            }
+        }));
+    }
+    onRemove(user, sharedCase) {
+        this.stateService.requestUnshare(sharedCase.caseId, user);
+        this.synchronizeStore.emit(this.shareCases);
+    }
+    onCancel(user, sharedCase) {
+        this.stateService.requestCancel(sharedCase.caseId, user);
+        this.synchronizeStore.emit(this.shareCases);
+    }
+    showNoUsersAccessInfo() {
+        // A user is added to a case
+        if (this.sharedCase.pendingShares) {
+            if (this.sharedCase.pendingShares.length > 0) {
+                return false;
+            }
         }
-        else {
-            this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(selection);
+        // A case has 0 users with access to it
+        if (this.sharedCase.sharedWith) {
+            if (this.sharedCase.sharedWith.length === 0) {
+                return true;
+            }
         }
-        this.locationChanged.emit(selection);
-    }
-    search(currentValue) {
-        this.searchInProgress = true;
-        this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
-        if (!currentValue || !currentValue.length) {
-            this.findLocationFormGroup.controls.locationSelectedFormControl.markAsPristine();
-            this.findLocationFormGroup.controls.locationSelectedFormControl.reset();
+        // Access to the last user is removed
+        if (this.sharedCase.sharedWith && this.sharedCase.pendingUnshares) {
+            if (this.sharedCase.pendingUnshares.length > 0
+                && this.sharedCase.sharedWith.length === this.sharedCase.pendingUnshares.length) {
+                return true;
+            }
         }
-        if (this.showAutocomplete) {
-            this.filter(currentValue);
+        return false;
+    }
+    showUserHasAccessInfo() {
+        return !this.showNoUsersAccessInfo();
+    }
+    showUserAccessTable() {
+        if (this.sharedCase.pendingShares) {
+            if (this.sharedCase.pendingShares.length > 0) {
+                return true;
+            }
         }
-        else {
-            this.searchInProgress = false;
+        if (this.sharedCase.sharedWith) {
+            if (this.sharedCase.sharedWith.length > 0) {
+                return true;
+            }
         }
+        return false;
     }
-    getDisplayName(selectedLocation) {
-        return selectedLocation.court_name;
+    combineAndSortShares(sharedWith, pendingShares) {
+        return [
+            ...sharedWith,
+            ...pendingShares
+        ].sort((user1, user2) => {
+            return user1.firstName.toLowerCase() > user2.firstName.toLowerCase() ? 1 : (user2.firstName.toLowerCase() > user1.firstName.toLowerCase() ? -1 : 0);
+        });
     }
-    searchLocations(term) {
-        return this.locationService.searchLocations(this.serviceIds, this.locationType, term);
+    userIdSetter(isPending, id) {
+        return isPending ? `pendingShares-${id}` : `${id}`;
     }
-    getControlCourtNameValue() {
-        return this.findLocationFormGroup && this.findLocationFormGroup.controls && this.findLocationFormGroup.controls.locationSelectedFormControl.value ?
-            this.findLocationFormGroup.controls.locationSelectedFormControl.value.court_name : '';
+    buildElementId(elementName) {
+        return `${elementName}-${this.sharedCase.caseId}`;
     }
 }
-SearchVenueComponent.decorators = [
+SelectedCaseComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-search-venue',
-                template: "<div class=\"auto-complete-container\">\n  <div *ngIf=\"readyAfterContent\" class=\"autocomplete__wrapper\">\n    <input\n      [formControl]=\"findLocationFormGroup.controls.findLocationFormControl\"\n      [matAutocomplete]=\"autoSearchLocation\"\n      (keydown)=\"onKeyDown()\"\n      (keyup)=\"onKeyUp($event)\"\n      (focus)=\"onFocus()\"\n      class=\"autocomplete__input autocomplete__input--default search-box\"\n      [attr.disabled]=\"!disabled ? null: disabled\"\n      [value]=\"getControlCourtNameValue()\"\n      #inputSelectedLocation>\n    <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n      <mat-option *ngFor=\"let location of displayedLocationsDuplicationFiltered\"\n                  [value]=\"getDisplayName(location)\"\n                  (onSelectionChange)=\"onSelectionChange(location)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n        {{ getDisplayName(location) }}\n      </mat-option>\n      <mat-option *ngIf=\"!displayedLocationsDuplicationFiltered?.length && showAutocomplete && !searchInProgress\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </div>\n</div>\n",
-                styles: [".autocomplete__input{-webkit-appearance:none;border:2px solid #0b0c0c;border-radius:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin-bottom:0;width:100%;line-height:24px;font-size:19px;background-color:transparent;position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:3px solid #fd0;outline-offset:0;box-shadow:inset 0 0 0 2px}.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:550px;display:inline-block;margin-right:4px}"]
+                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}"]
             },] }
 ];
-SearchVenueComponent.ctorParameters = () => [
-    { type: LocationService },
-    { type: FormBuilder }
+SelectedCaseComponent.ctorParameters = () => [
+    { type: CaseSharingStateService }
 ];
-SearchVenueComponent.propDecorators = {
-    control: [{ type: Input }],
-    disabled: [{ type: Input }],
-    locationType: [{ type: Input }],
-    selectedLocations: [{ type: Input }],
-    serviceIds: [{ type: Input }],
-    submitted: [{ type: Input }],
-    autoCompleteInputBox: [{ type: ViewChild, args: ['inputSelectedLocation', { read: ElementRef },] }],
-    showAutocomplete: [{ type: Input }],
-    displayedLocations: [{ type: Input }],
-    locationChanged: [{ type: Output }]
+SelectedCaseComponent.propDecorators = {
+    sharedCase: [{ type: Input }],
+    selectedUser: [{ type: Input }],
+    opened: [{ type: Input }],
+    removeUserFromCaseToggleOn: [{ type: Input }],
+    unselect: [{ type: Output }],
+    synchronizeStore: [{ type: Output }]
 };
 
-const getAllCaseworkersFromServices = (caseworkersByService) => {
-    let allCaseworkers = [];
-    caseworkersByService.forEach(caseworkerListByService => {
-        allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
-    });
-    return allCaseworkers;
-};
-const getSessionStorageKeyForServiceId = (serviceId) => {
-    return `${serviceId}-caseworkers`;
-};
-const getCaseworkers = (serviceId, sessionStorageService) => {
-    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
-    const value = sessionStorageService.getItem(sessionKey);
-    if (value) {
-        return JSON.parse(value);
+class ServiceMessageComponent {
+    constructor() {
+        this.hideMessage = new EventEmitter();
+    }
+    onHideMessageEvent(key) {
+        this.hideMessage.emit(key);
     }
-};
-const setCaseworkers = (serviceId, caseworkers, sessionStorageService) => {
-    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
-    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 {
 }
+ServiceMessageComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-service-message',
+                template: "<div class=\"hmcts-banner hmcts-banner--warning\">\n\n    <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\"\n        xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n        <path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\" />\n    </svg>\n\n    <div class=\"hmcts-banner__message\">\n        <span class=\"hmcts-banner__assistive\">Warning</span>\n        <h2 class=\"govuk-heading-s\" [innerHTML]=\"message\"></h2>\n        <a [routerLink]=\"\" class=\"govuk-link--no-visited-state\" (click)=\"onHideMessageEvent(key)\">Hide message</a>\n    </div>\n\n</div>"
+            },] }
+];
+ServiceMessageComponent.ctorParameters = () => [];
+ServiceMessageComponent.propDecorators = {
+    message: [{ type: Input }],
+    key: [{ type: Input }],
+    hideMessage: [{ type: Output }]
+};
 
-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;
+class FeatureToggleService {
+    // tslint:disable-next-line: variable-name
+    initialize(_user, _clientId) {
+        throw new Error('Not implemented');
     }
-    /**
-     * Set an item in the session storage.
-     */
-    setItem(key, value) {
-        sessionStorage.setItem(key, value);
+    // tslint:disable-next-line: variable-name
+    isEnabled(_feature) {
+        throw new Error('Not implemented');
     }
-    /**
-     * Remove an item in the session storage.
-     */
-    removeItem(key) {
-        sessionStorage.removeItem(key);
+    // tslint:disable-next-line: variable-name
+    getValue(_key, _defaultValue) {
+        throw new Error('Not implemented');
     }
-    /**
-     * Clear all the items held in session storage.
-     */
-    clear() {
-        sessionStorage.clear();
+    // tslint:disable-next-line: variable-name
+    getValueOnce(_key, _defaultValue) {
+        throw new Error('Not implemented');
     }
 }
-SessionStorageService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SessionStorageService_Factory() { return new SessionStorageService(); }, token: SessionStorageService, providedIn: "root" });
-SessionStorageService.decorators = [
+FeatureToggleService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FeatureToggleService_Factory() { return new FeatureToggleService(); }, token: FeatureToggleService, providedIn: "root" });
+FeatureToggleService.decorators = [
     { type: Injectable, args: [{
                 providedIn: 'root'
             },] }
 ];
 
-class FindAPersonService {
-    constructor(http, sessionStorageService) {
-        this.http = http;
-        this.sessionStorageService = sessionStorageService;
+class ServiceMessagesComponent {
+    constructor(featureToggleService) {
+        this.featureToggleService = featureToggleService;
+        this.filteredMessages = new Map();
     }
-    find(searchOptions) {
-        const userInfoStr = this.sessionStorageService.getItem('userDetails');
-        if (userInfoStr && !searchOptions.userIncluded) {
-            const userInfo = JSON.parse(userInfoStr);
-            this.userId = userInfo.id ? userInfo.id : userInfo.uid;
-        }
-        this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
-        return this.http.post('/workallocation2/findPerson', { searchOptions })
-            .pipe(map(judiciary => judiciary.filter(judge => !([this.assignedUser, this.userId].includes(judge.id)))));
+    ngOnInit() {
+        this.getServiceMessages();
     }
-    findCaseworkers(searchOptions) {
-        const userInfoStr = this.sessionStorageService.getItem('userDetails');
-        if (userInfoStr) {
-            const userInfo = JSON.parse(userInfoStr);
-            this.userId = userInfo.id ? userInfo.id : userInfo.uid;
-        }
-        this.assignedUser = searchOptions.assignedUser ? searchOptions.assignedUser : null;
-        const fullServices = searchOptions.services;
-        const storedServices = [];
-        const newServices = [];
-        const storedCaseworkersByService = [];
-        fullServices.forEach(serviceId => {
-            const serviceKey = getSessionStorageKeyForServiceId(serviceId);
-            if (this.sessionStorageService.getItem(serviceKey)) {
-                storedServices.push(serviceId);
-                storedCaseworkersByService.push({ service: serviceId, caseworkers: JSON.parse(this.sessionStorageService.getItem(serviceKey)) });
-            }
-            else {
-                newServices.push(serviceId);
+    getServiceMessages() {
+        this.featureToggleService.getValue(this.featureToggleKey, null)
+            .subscribe(messages => {
+            if (!!messages) {
+                this.createFilteredMessages(messages);
             }
         });
-        // if all services are stored then return the stored caseworkers by service
-        if (storedServices.length === fullServices.length) {
-            const storedCaseworkers = getAllCaseworkersFromServices(storedCaseworkersByService);
-            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 => {
-            caseworkersByService.forEach(caseworkerListByService => {
-                // for any new service, ensure that they are then stored in the session
-                if (newServices.includes(caseworkerListByService.service)) {
-                    setCaseworkers(caseworkerListByService.service, caseworkerListByService.caseworkers, this.sessionStorageService);
-                }
-            });
-        }), map(caseworkersByService => {
-            const givenCaseworkers = getAllCaseworkersFromServices(caseworkersByService);
-            return this.searchInCaseworkers(givenCaseworkers, searchOptions);
-        }));
     }
-    mapCaseworkers(caseworkers, roleCategory) {
-        const people = [];
-        caseworkers.forEach((caseworker) => {
-            const thisPerson = {
-                email: caseworker.email,
-                name: `${caseworker.firstName} ${caseworker.lastName}`,
-                id: caseworker.idamId,
-                domain: caseworker.roleCategory === RoleCategory.CASEWORKER ? PersonRole.CASEWORKER : PersonRole.ADMIN,
-            };
-            if (caseworker.roleCategory === roleCategory || roleCategory === RoleCategory.ALL) {
-                people.push(thisPerson);
+    createFilteredMessages(messages) {
+        this.hiddenBanners = JSON.parse(window.sessionStorage.getItem(this.serviceMessageCookie)) || [];
+        Object.keys(messages).forEach(key => {
+            const regEx = new RegExp(key);
+            if (this.userRoles.some(e => regEx.test(e)) && this.hiddenBanners.indexOf(key) === -1) {
+                this.filteredMessages.set(key, messages[key]);
             }
         });
-        return people;
     }
-    searchInCaseworkers(caseworkers, searchOptions) {
-        let roleCategory = RoleCategory.ALL;
-        if (!(searchOptions.userRole === PersonRole.ALL)) {
-            roleCategory = searchOptions.userRole === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
+    hideMessage(key) {
+        this.filteredMessages.delete(key);
+        this.hiddenBanners.push(key);
+        window.sessionStorage.setItem(this.serviceMessageCookie, JSON.stringify(this.hiddenBanners));
+    }
+}
+ServiceMessagesComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-service-messages',
+                template: "<div *ngIf=\"filteredMessages?.size > 0\" class=\"govuk-width-container govuk-!-margin-top-6\">\n    <xuilib-service-message *ngFor=\"let message of filteredMessages | keyvalue\" [key]=\"message.key\"\n        [message]=\"message.value\" (hideMessage)=\"hideMessage($event)\"></xuilib-service-message>\n</div>"
+            },] }
+];
+ServiceMessagesComponent.ctorParameters = () => [
+    { type: FeatureToggleService }
+];
+ServiceMessagesComponent.propDecorators = {
+    userRoles: [{ type: Input }],
+    featureToggleKey: [{ type: Input }],
+    serviceMessageCookie: [{ type: Input }]
+};
+
+class ShareCaseConfirmComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.shareCases = []; // cases selected for sharing
+        this.changeLink = '';
+        this.completeLink = '';
+    }
+    ngOnInit() {
+        this.shareCases$.subscribe(shareCases => {
+            this.shareCases = shareCases;
+            this.stateService.setCases(shareCases);
+        });
+        this.shareCases$ = this.stateService.state;
+    }
+}
+ShareCaseConfirmComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-share-case-confirm',
+                template: "<div id=\"casesToConfirm\">\n  <h3 class=\"govuk-heading-l\">Cases</h3>\n  <div *ngIf=\"shareCases && shareCases.length > 0\" id=\"summarySections\">\n    <xuilib-selected-case-list\n      [shareCases$]=\"shareCases$\"\n      [toConfirm]=\"true\"\n      [changeLink]=\"changeLink\">\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\" *ngIf=\"shareCases && shareCases.length > 0\">\n  <button class=\"govuk-button\" title=\"Confirm\" [routerLink]=\"completeLink\">Confirm</button>\n</div>\n",
+                styles: [""]
+            },] }
+];
+ShareCaseConfirmComponent.ctorParameters = () => [
+    { type: CaseSharingStateService }
+];
+ShareCaseConfirmComponent.propDecorators = {
+    shareCases$: [{ type: Input }],
+    changeLink: [{ type: Input }],
+    completeLink: [{ type: Input }]
+};
+
+class UserSelectComponent {
+    constructor() {
+        this.selected = new EventEmitter();
+        this.control = new FormControl();
+    }
+    ngOnInit() {
+        this.filteredUsers = this.control.valueChanges.pipe(map(value => typeof value === typeof 'string' ? this.filterUsers(value) : this.users));
+        this.selected.emit(null);
+    }
+    displayValue(user) {
+        return user ? `${user.firstName} ${user.lastName} - ${user.email}` : '';
+    }
+    onSelected(e) {
+        this.selected.emit(e.option.value);
+    }
+    clear() {
+        this.control.setValue(null);
+    }
+    onUserChange(newUserValue) {
+        if (!newUserValue || !newUserValue.email) {
+            this.selected.emit(null);
         }
-        const searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
-        const people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
-        const finalPeopleList = people.filter(person => person && person.name && person.name.toLowerCase().includes(searchTerm));
-        return searchOptions.userIncluded ? finalPeopleList.filter(person => person && person.id !== this.assignedUser)
-            : finalPeopleList.filter(person => person && person.id !== this.userId && person.id !== this.assignedUser);
     }
-    searchJudicial(value, serviceId) {
-        return this.http.post('api/prd/judicial/getJudicialUsersSearch', { searchString: value, serviceCode: serviceId });
+    filterUsers(value) {
+        if (value) {
+            value = value.toLowerCase();
+            return this.users.filter(user => {
+                if (user.firstName.toLowerCase().includes(value)) {
+                    return true;
+                }
+                if (user.lastName.toLowerCase().includes(value)) {
+                    return true;
+                }
+                if (user.email.toLowerCase().includes(value)) {
+                    return true;
+                }
+                return false;
+            });
+        }
+        return [];
     }
 }
-FindAPersonService.caseworkersKey = 'caseworkers';
-FindAPersonService.ɵprov = i0.ɵɵdefineInjectable({ factory: function FindAPersonService_Factory() { return new FindAPersonService(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(SessionStorageService)); }, token: FindAPersonService, providedIn: "root" });
-FindAPersonService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
+UserSelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-user-select',
+                template: "<input class=\"govuk-input\" type=\"text\" [matAutocomplete]=\"dropdown\" [formControl]=\"control\" (ngModelChange)=\"onUserChange($event)\" aria-labelledby=\"add-user-hint\">\n\n<mat-autocomplete #dropdown=\"matAutocomplete\" [displayWith]=\"displayValue\" autoActiveFirstOption (optionSelected)=\"onSelected($event)\">\n  <mat-option *ngFor=\"let user of filteredUsers | async\" [value]=\"user\">\n    {{ user.firstName }} {{ user.lastName }} - {{ user.email }}\n  </mat-option>\n</mat-autocomplete>",
+                styles: [""]
             },] }
 ];
-FindAPersonService.ctorParameters = () => [
-    { type: HttpClient },
-    { type: SessionStorageService }
-];
+UserSelectComponent.ctorParameters = () => [];
+UserSelectComponent.propDecorators = {
+    users: [{ type: Input }],
+    selected: [{ type: Output }]
+};
 
-class SearchJudicialsComponent {
-    constructor(judicialService, fb) {
-        this.judicialService = judicialService;
-        this.disabled = null;
-        this.selectedJudicials = [];
-        this.submitted = true;
-        this.placeholderContent = '';
-        this.showAutocomplete = false;
-        this.judicialChanged = new EventEmitter();
-        this.idValue = '';
-        this.errorMessage = 'You must select a name';
-        this.serviceId = '';
-        this.minSearchCharacters = 3;
-        this.keyUpSubject$ = new Subject();
-        this.searchInProgress = false;
-        this.formGroup = fb.group({
-            formControl: [null],
-            selectedFormControl: [null]
-        });
+class ShareCaseComponent {
+    constructor(stateService) {
+        this.stateService = stateService;
+        this.shareCases = []; // cases selected for sharing
+        this.removeUserFromCaseToggleOn = false;
+        this.users = []; // users of this organisation the cases can be shared with
+        this.confirmLink = '';
+        this.unselect = new EventEmitter();
+        this.synchronizeStore = new EventEmitter();
     }
     ngOnInit() {
-        this.displayedJudicials = [];
-        if (this.control) {
-            if (this.formGroup && this.formGroup.controls) {
-                this.formGroup.controls.selectedFormControl = this.control;
-                this.formGroup.controls.formControl.setValue(this.getControlValueDisplayText());
-            }
-        }
-        this.keyUpSubject$.pipe(debounceTime(500)).subscribe(searchValue => this.search(searchValue));
+        this.shareCases$.subscribe(shareCases => {
+            this.shareCases = shareCases;
+            this.stateService.setCases(shareCases);
+        });
+        this.shareCases$ = this.stateService.state;
     }
-    onKeyDown() {
-        this.judicialChanged.emit();
+    onUnselect(c) {
+        this.unselect.emit(c);
+        this.stateService.removeCase(c.caseId);
     }
-    onKeyUp(event) {
-        this.showAutocomplete = false;
-        this.keyUpSubject$.next(event.target.value);
+    onSynchronizeStore(event) {
+        this.synchronizeStore.emit(event);
     }
-    onFocus() {
-        this.showAutocomplete = false;
+    onSelectedUser(user) {
+        this.selectedUser = user;
     }
-    get displayedJudicialsDuplicationFiltered() {
-        return this.displayedJudicials.filter(judicial => !this.selectedJudicials.map(selectedJudicial => selectedJudicial.idamId).includes(judicial.idamId));
+    addUser() {
+        const newSharedCases = this.stateService.requestShare(this.selectedUser);
+        this.selectedUser = null;
+        if (this.userSelect) {
+            this.userSelect.clear();
+        }
+        this.synchronizeStore.emit(newSharedCases);
     }
-    filter(term) {
-        this.searchJudicials(term, this.serviceId).pipe(mergeMap((apiData) => {
-            const apiFilter = apiData.filter(apiJudicial => !this.selectedJudicials.map(selectedJudicial => selectedJudicial.idamId).includes(apiJudicial.idamId));
-            this.displayedJudicials = apiFilter;
-            this.searchInProgress = false;
-            return apiFilter;
-        })).subscribe(judicial => {
-            if (term === judicial.knownAs) {
-                this.formGroup.controls.selectedFormControl.setValue(judicial);
-                this.displayedJudicials = [];
-                this.judicialChanged.emit(judicial);
-                this.showAutocomplete = false;
+    isDisabledAdd() {
+        return this.selectedUser === null || this.shareCases.length === 0;
+    }
+    isDisabledContinue() {
+        let isDisabled = true;
+        this.shareCases$.subscribe(shareCases => {
+            for (const caseState of shareCases) {
+                if (caseState.pendingShares && caseState.pendingShares.length > 0) {
+                    isDisabled = false;
+                    break;
+                }
+                if (caseState.pendingUnshares && caseState.pendingUnshares.length > 0) {
+                    isDisabled = false;
+                    break;
+                }
             }
-            this.searchInProgress = false;
         });
+        return isDisabled;
     }
-    onSelectionChange(selection) {
-        if (this.formGroup.controls.formControl instanceof FormArray) {
-            this.formGroup.controls.selectedFormControl.push(new FormControl(selection.idamId));
-        }
-        else {
-            this.formGroup.controls.selectedFormControl.setValue(selection);
+    onDeselect(sharedCase) {
+        if (sharedCase !== null) {
+            const updated = [];
+            for (const element of this.shareCases) {
+                if (element.caseId !== sharedCase.caseId) {
+                    updated.push(element);
+                }
+            }
+            this.shareCases = updated;
         }
-        this.judicialChanged.emit(selection);
+        this.stateService.setCases(this.shareCases);
     }
-    search(currentValue) {
-        this.searchInProgress = true;
-        this.showAutocomplete = !!currentValue && (currentValue.length >= this.minSearchCharacters);
-        if (!!currentValue) {
-            this.formGroup.controls.selectedFormControl.markAsDirty();
-        }
-        else {
-            this.formGroup.controls.selectedFormControl.reset();
-        }
-        if (this.showAutocomplete) {
-            this.filter(currentValue);
-        }
-        else {
-            this.searchInProgress = false;
-        }
+}
+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: [""]
+            },] }
+];
+ShareCaseComponent.ctorParameters = () => [
+    { type: CaseSharingStateService }
+];
+ShareCaseComponent.propDecorators = {
+    removeUserFromCaseToggleOn: [{ type: Input }],
+    shareCases$: [{ type: Input }],
+    users: [{ type: Input }],
+    confirmLink: [{ type: Input }],
+    unselect: [{ type: Output }],
+    synchronizeStore: [{ type: Output }],
+    userSelect: [{ type: ViewChild, args: [UserSelectComponent, { static: true },] }]
+};
+
+class TabComponent {
+    constructor() {
+        this.tabChange = new EventEmitter();
     }
-    getDisplayName(selectedJudicial) {
-        return `${selectedJudicial.knownAs} (${selectedJudicial.emailId})`;
+    tabChanged(event) {
+        this.tabChange.emit(event);
     }
-    searchJudicials(term, serviceId) {
-        return this.judicialService.searchJudicial(term, serviceId);
+}
+TabComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-tab',
+                template: "<mat-tab-group animationDuration=\"0ms\" (selectedTabChange)=\"tabChanged($event)\">\n    <mat-tab *ngFor=\"let tabItem of tabItems; let last = last;\" [label]=\"tabItem.text\">\n    </mat-tab>\n</mat-tab-group>"
+            },] }
+];
+TabComponent.ctorParameters = () => [];
+TabComponent.propDecorators = {
+    tabItems: [{ type: Input }],
+    tabChange: [{ type: Output }]
+};
+
+class TcConfirmComponent {
+    constructor() {
+        this.confirm = new EventEmitter();
     }
-    getControlValueDisplayText() {
-        return this.formGroup && this.formGroup.controls && this.formGroup.controls.selectedFormControl.value ?
-            this.getDisplayName(this.formGroup.controls.selectedFormControl.value) : '';
+    onClick() {
+        this.confirm.emit();
     }
 }
-SearchJudicialsComponent.decorators = [
+TcConfirmComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-tc-confirm',
+                template: "<div class=\"govuk-width-container\">\n  <main role=\"main\" class=\"govuk-main-wrapper\">\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-two-thirds\">\n        <div class=\"column-two-thirds\">\n          <h1 class=\"govuk-heading-xl\">Using this service</h1>\n          <h2 class=\"govuk-heading-m\">Terms and conditions</h2>\n          <p>We've recently updated the\n            <a\n              routerLink=\"/terms-and-conditions\"\n              rel=\"noopener noreferrer\"\n              target=\"_blank\"\n              >terms and conditions</a\n            >.\n          </p>\n          <p>You must review and accept them.\n          </p>\n          <p>\n            <button class=\"govuk-button\" (click)=\"onClick()\">\n              {{ buttonText }}\n            </button>\n          </p>\n        </div>\n      </div>\n    </div>\n    <div class=\"govuk-grid-column-one-third\"></div>\n  </main>\n</div>\n",
+                styles: [""]
+            },] }
+];
+TcConfirmComponent.ctorParameters = () => [];
+TcConfirmComponent.propDecorators = {
+    buttonText: [{ type: Input }],
+    confirm: [{ type: Output }]
+};
+
+class TcDisplayHtmlComponent {
+    constructor() { }
+}
+TcDisplayHtmlComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-tc-display-html',
+                template: "<ng-content></ng-content>",
+                styles: [":host{display:block;width:100%}"]
+            },] }
+];
+TcDisplayHtmlComponent.ctorParameters = () => [];
+
+class TcDisplayPlainComponent {
+    constructor() { }
+}
+TcDisplayPlainComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-search-judicials',
-                template: "<div class=\"govuk-form-group\">\n  <input id=\"inputSelectPerson{{idValue}}\" [placeholder]=\"placeholderContent\" [formControl]=\"formGroup.controls.formControl\"\n    [matAutocomplete]=\"autoComplete\" (keydown)=\"onKeyDown()\" (keyup)=\"onKeyUp($event)\" (focus)=\"onFocus()\"\n    class=\"govuk-input\" [attr.disabled]=\"!disabled ? null: disabled\" [value]=\"getControlValueDisplayText()\"\n    #inputSelection>\n  <mat-autocomplete autoActiveFirstOption #autoComplete=\"matAutocomplete\">\n    <mat-option *ngFor=\"let judicial of displayedJudicialsDuplicationFiltered\" class=\"select-option\"\n      [value]=\"getDisplayName(judicial)\" (onSelectionChange)=\"onSelectionChange(judicial)\"\n      [ngClass]=\"{'hide-autocomplete': !showAutocomplete}\">\n      {{ getDisplayName(judicial) }}\n    </mat-option>\n    <mat-option class=\"select-option\"\n      *ngIf=\"!displayedJudicialsDuplicationFiltered?.length && showAutocomplete && !searchInProgress\">\n      {{ 'No results found' }}</mat-option>\n  </mat-autocomplete>\n</div>\n",
-                styles: [".hide-autocomplete{display:none}.mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}"]
+                selector: 'xuilib-tc-display-plain',
+                template: "<ng-content></ng-content>",
+                styles: [":host{display:block;width:100%}"]
             },] }
 ];
-SearchJudicialsComponent.ctorParameters = () => [
-    { type: FindAPersonService },
-    { type: FormBuilder }
+TcDisplayPlainComponent.ctorParameters = () => [];
+
+class TermsAndConditionsComponent {
+    constructor() { }
+}
+TermsAndConditionsComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-terms-and-conditions',
+                template: "<ng-container [ngSwitch]=\"document.mimeType\">\n  <xuilib-tc-display-html *ngSwitchCase=\"'text/html'\">\n    <div [innerHTML]=\"document.content\"></div>\n  </xuilib-tc-display-html>\n  <xuilib-tc-display-plain *ngSwitchCase=\"'text/plain'\">\n    {{ document.content }}\n  </xuilib-tc-display-plain>\n  <div *ngSwitchDefault>\n    An error occured. Please try again.\n  </div>\n</ng-container>\n",
+                styles: [":host{display:block;width:100%}"]
+            },] }
 ];
-SearchJudicialsComponent.propDecorators = {
-    control: [{ type: Input }],
-    disabled: [{ type: Input }],
-    selectedJudicials: [{ type: Input }],
-    submitted: [{ type: Input }],
-    placeholderContent: [{ type: Input }],
-    showAutocomplete: [{ type: Input }],
-    displayedJudicials: [{ type: Input }],
-    judicialChanged: [{ type: Output }],
-    idValue: [{ type: Input }],
-    errorMessage: [{ type: Input }],
-    serviceId: [{ type: Input }],
-    autoCompleteInputBox: [{ type: ViewChild, args: ['inputSelection', { read: ElementRef, static: true },] }]
+TermsAndConditionsComponent.ctorParameters = () => [];
+TermsAndConditionsComponent.propDecorators = {
+    document: [{ type: Input }]
 };
 
-class FindPersonComponent {
-    constructor(findPersonService, cd) {
-        this.findPersonService = findPersonService;
-        this.cd = cd;
-        this.personSelected = new EventEmitter();
-        this.personFieldChanged = new EventEmitter();
-        this.boldTitle = 'Find the person';
-        this.subTitle = 'Type the name of the person and select them.';
-        this.domain = PersonRole.ALL;
-        this.findPersonGroup = new FormGroup({});
-        this.submitted = true;
-        this.userIncluded = false;
-        this.placeholderContent = '';
-        this.isNoResultsShown = true;
-        this.showUpdatedColor = false;
-        this.selectedPersons = [];
-        this.errorMessage = 'You must select a name';
-        this.idValue = '';
-        this.services = ['IA'];
-        this.disabled = null;
-        this.showAutocomplete = false;
-        this.filteredOptions = [];
-        this.minSearchCharacters = 2;
-    }
-    ngOnDestroy() {
-        if (this.sub) {
-            this.sub.unsubscribe();
-        }
-    }
-    ngOnInit() {
-        this.findPersonControl = new FormControl(this.selectedPerson);
-        this.findPersonGroup.addControl('findPersonControl', this.findPersonControl);
-        this.sub = this.findPersonControl.valueChanges.pipe(tap(() => this.showAutocomplete = false), tap(() => this.filteredOptions = []), debounceTime(300), tap((searchTerm) => typeof searchTerm === 'string' ? this.personSelected.emit(null) : void 0), filter((searchTerm) => searchTerm && searchTerm.length > this.minSearchCharacters), switchMap((searchTerm) => this.filter(searchTerm).pipe(tap(() => this.showAutocomplete = true), catchError(() => this.filteredOptions = [])))).subscribe((people) => {
-            this.filteredOptions = people;
-            this.cd.detectChanges();
-        });
+class UserDetailsComponent {
+    constructor() {
+        this.showEditLink = false;
+        this.showHelpLink = false;
+        this.suspendUserEvent = new EventEmitter();
+        this.showSuspendUserButton = false;
+        this.reinvite = new EventEmitter();
     }
-    filter(searchTerm) {
-        const findJudicialPeople = this.findPersonService.find({ searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
-        const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm, userRole: this.domain, services: this.services, userIncluded: this.userIncluded, assignedUser: this.assignedUser });
-        if (searchTerm && searchTerm.length > this.minSearchCharacters) {
-            switch (this.domain) {
-                case PersonRole.JUDICIAL: {
-                    return findJudicialPeople.pipe(map(persons => {
-                        const ids = this.selectedPersons.map(({ id }) => id);
-                        return persons.filter(({ id }) => !ids.includes(id));
-                    }));
-                }
-                case PersonRole.ALL: {
-                    return zip(findJudicialPeople, findCaseworkersOrAdmins).pipe(map(separatePeople => separatePeople[0].concat(separatePeople[1])));
-                }
-                case PersonRole.CASEWORKER:
-                case PersonRole.ADMIN: {
-                    return findCaseworkersOrAdmins;
-                }
-                default: {
-                    return of([]);
-                }
-            }
-        }
-        return of([]);
+    reinviteClick(user) {
+        this.reinvite.emit(user);
     }
-    onSelectionChange(selectedPerson) {
-        this.personSelected.emit(selectedPerson);
-        this.findPersonControl.setValue(this.getDisplayName(selectedPerson), { emitEvent: false, onlySelf: true });
+    suspendUser(suspendUser) {
+        this.suspendUserEvent.emit(suspendUser);
     }
-    getDisplayName(selectedPerson) {
-        if (!selectedPerson) {
-            return '';
-        }
-        if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
-            return `${selectedPerson.knownAs} (${selectedPerson.email})`;
+    userHasRole(theRole) {
+        if (this.user && this.user.roles) {
+            return this.user.roles.includes(theRole);
         }
-        return selectedPerson.email ? `${selectedPerson.name} (${selectedPerson.email})` : selectedPerson.name;
-    }
-    onInput() {
-        this.personFieldChanged.emit();
+        return false;
     }
 }
-FindPersonComponent.decorators = [
+UserDetailsComponent.decorators = [
     { type: Component, args: [{
-                selector: 'xuilib-find-person',
-                template: "<h1 class=\"govuk-heading-l\" *ngIf=\"title && title.length\">\n  <span class=\"govuk-caption-l\">{{title}}</span>\n  {{boldTitle}}\n</h1>\n<div class=\"govuk-form-group\" [formGroup]=\"findPersonGroup\"\n     [ngClass]=\"{'form-group-error': findPersonGroup.get('findPersonControl').invalid && submitted}\">\n  <fieldset class=\"govuk-fieldset\" aria-describedby=\"sub-title-hint\">\n    <div id=\"sub-title-hint\" class=\"govuk-hint\" *ngIf=\"subTitle && subTitle.length\">\n      {{subTitle}}\n    </div>\n    <span id=\"validation-error\" class=\"govuk-error-message\" *ngIf=\"findPersonGroup && findPersonGroup.errors\">\n        <span class=\"govuk-visually-hidden\">Error:</span>{{findPersonGroup.errors.error ? findPersonGroup.errors.error : errorMessage}}\n    </span>\n    <input id=\"inputSelectPerson{{idValue}}\" type=\"text\" aria-label=\"select a person\"\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           (input)=\"onInput()\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" (optionSelected)=\"onSelectionChange($event.option.value)\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"option\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && !filteredOptions.length && showAutocomplete\">No results found</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
-                styles: [".mat-option:hover{background:#2596be}.mat-option.select-option:hover{background:#1d70b8;color:#fff}.hide-autocomplete{display:none}"]
+                selector: 'xuilib-user-details',
+                template: "<div class=\"govuk-warning-text\" *ngIf=\"warningTitle && warningTitle !== ''\">\n<span class=\"govuk-warning-text__icon\">!</span>\n<strong class=\"govuk-warning-text__text\">\n    {{ warningTitle }}\n</strong>\n</div>\n<table class=\"govuk-table\" *ngIf=\"user\">\n  <tbody class=\"govuk-table__body\">\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">Name</th>\n        <td class=\"govuk-table__cell\">{{user.fullName}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\">\n        <th class=\"govuk-table__header\" scope=\"row\">Email address</th>\n        <td class=\"govuk-table__cell\">{{user.email}}</td>\n        <td class=\"govuk-table__cell\"></td>\n    </tr>\n    <tr class=\"govuk-table__row\" *ngIf=\"!user.resendInvite\">\n        <th class=\"govuk-table__header\" scope=\"row\">Permissions</th>\n        <td class=\"govuk-table__cell\">\n          <div *ngIf=\"user.manageOrganisations === 'Yes'\">Manage organisations</div>\n          <div *ngIf=\"user.manageUsers === 'Yes'\">Manage users</div>\n          <div *ngIf=\"user.manageCases === 'Yes'\">Manage cases</div>\n          <div *ngIf=\"userHasRole('pui-caa')\">Case access administrator</div>\n          <div *ngIf=\"userHasRole('pui-finance-manager')\">Manage fee accounts</div>\n        </td>\n        <td class=\"govuk-table__cell\"><a *ngIf=\"editPermissionRouterLink && showEditLink\" [routerLink]=\"editPermissionRouterLink\">Change <span class=\"govuk-visually-hidden\">roles</span></a></td>\n    </tr>\n  </tbody>\n</table>\n<button *ngIf=\"showSuspendUserButton\" class=\"govuk-button govuk-button--warning\" (click)=\"suspendUser(user)\">\n  Suspend account\n</button>\n<div *ngIf=\"user && user.resendInvite\">\n  <div class=\"govuk-inset-text\">\n    <p>This user has already been invited but has not activated their account.</p>\n    <p>If you resend an invitation, they'll receive an email from HM Courts and Tribunals to finish setting up their account.</p>\n    <p>You can't invite the same user more than once an hour.</p>\n  </div>\n  <a role=\"button\" draggable=\"false\" class=\"govuk-button\" (click)=\"reinviteClick(user)\" id=\"resend-invite-button\">\n      Resend invitation\n  </a>\n</div>\n<p class=\"govuk-body\" *ngIf=\"showHelpLink && suspendHelpLink\"><a [routerLink]=\"suspendHelpLink\" target=\"_blank\">Get help</a> to reactivate this account.</p>\n",
+                styles: [":host{display:block}"]
             },] }
 ];
-FindPersonComponent.ctorParameters = () => [
-    { type: FindAPersonService },
-    { type: ChangeDetectorRef }
-];
-FindPersonComponent.propDecorators = {
-    personSelected: [{ type: Output }],
-    personFieldChanged: [{ type: Output }],
-    title: [{ type: Input }],
-    boldTitle: [{ type: Input }],
-    subTitle: [{ type: Input }],
-    domain: [{ type: Input }],
-    findPersonGroup: [{ type: Input }],
-    selectedPerson: [{ type: Input }],
-    submitted: [{ type: Input }],
-    userIncluded: [{ type: Input }],
-    assignedUser: [{ type: Input }],
-    placeholderContent: [{ type: Input }],
-    isNoResultsShown: [{ type: Input }],
-    showUpdatedColor: [{ type: Input }],
-    selectedPersons: [{ type: Input }],
-    errorMessage: [{ type: Input }],
-    idValue: [{ type: Input }],
-    services: [{ type: Input }],
-    disabled: [{ type: Input }]
+UserDetailsComponent.propDecorators = {
+    user: [{ type: Input }],
+    editPermissionRouterLink: [{ type: Input }],
+    warningTitle: [{ type: Input }],
+    showEditLink: [{ type: Input }],
+    showHelpLink: [{ type: Input }],
+    suspendHelpLink: [{ type: Input }],
+    suspendUserEvent: [{ type: Output }],
+    showSuspendUserButton: [{ type: Input }],
+    reinvite: [{ type: Output }]
 };
 
-/**
- * Main Page Wrapper
- * Responsible for:
- * Wrapping content within the gov-uk html elements bellow
- * @prop showBackLink - switch for back link
- * @prop appHeaderTitle = appHeaderTitle
- * @prop appFunctionalTitle = appFunctionalTitle
- * @prop summaryErrors list of errors
- * @prop back link, appHeaderTitle (appHeaderTitle), summaryErrors (array of errors)
- */
-class ExuiPageWrapperComponent {
-    constructor() { }
+class UserListComponent {
+    constructor() {
+        this.users = [];
+        this.userClick = new EventEmitter();
+        this.pageChange = new EventEmitter();
+    }
+    ngOnInit() {
+        this.pagination = { itemsPerPage: 50, currentPage: this.currentPageNumber, totalItems: this.pageTotalSize };
+    }
+    onUserClick(user) {
+        this.userClick.emit(user);
+    }
+    emitPageClickEvent(pageNumber) {
+        this.currentPageNumber = pageNumber;
+        this.pageChange.emit(pageNumber);
+    }
 }
-ExuiPageWrapperComponent.decorators = [
+UserListComponent.decorators = [
     { type: Component, args: [{
-                selector: 'exui-page-wrapper',
-                template: "<div class=\"page\">\n  <a *ngIf=\"backLink\" [routerLink]=\"backLink\" class=\"govuk-back-link\">Back</a>\n  <div class=\"govuk-width-container\">\n    <main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n      <div class=\"govuk-grid-row\">\n        <h1 *ngIf=\"title\" class=\"govuk-heading-xl\">\n          <span *ngIf=\"fnTitle\" class=\"govuk-caption-xl\">{{fnTitle}}</span>\n          {{title}}\n        </h1>\n        <ng-content>\n\n        </ng-content>\n      </div>\n    </main>\n  </div>\n</div>\n",
-                styles: [".page{width:100%}"]
+                selector: 'xuilib-user-list',
+                template: "<table class=\"govuk-table\">\n\n    <thead clas=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n            <th class=\"govuk-table__header\" scope=\"col\">Name</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Email</th>\n            <th class=\"govuk-table__header\" scope=\"col\">Status</th>\n        </tr>\n    </thead>\n    <tbody class=\"govuk-table__body\">\n      <ng-container *ngFor=\"let u of users | paginate: { itemsPerPage: pagination.itemsPerPage, currentPage: currentPageNumber, totalItems: pagination.totalItems }\">\n        <tr class=\"govuk-table__row\" data-selector=\"table-row\">\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">\n              <a class=\"govuk-link\" [attr.title]=\"u.routerLinkTitle\" [routerLink]=\"u.routerLink\" (click)=\"onUserClick(u)\">{{ u.fullName }}</a>\n            </td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.email }}</td>\n            <td class=\"govuk-table__cell\" data-selector=\"table-cell\">{{ u.status }}</td>\n        </tr>\n      </ng-container>\n    </tbody>\n</table>\n<xuilib-hmcts-pagination (pageChange)=\"emitPageClickEvent($event)\" [pageSize]=\"pagination.itemsPerPage\"></xuilib-hmcts-pagination>\n",
+                styles: [":host{display:block}"]
             },] }
 ];
-ExuiPageWrapperComponent.ctorParameters = () => [];
-ExuiPageWrapperComponent.propDecorators = {
-    backLink: [{ type: Input }],
-    title: [{ type: Input }],
-    fnTitle: [{ type: Input }]
+UserListComponent.propDecorators = {
+    users: [{ type: Input }],
+    currentPageNumber: [{ type: Input }],
+    pageTotalSize: [{ type: Input }],
+    userClick: [{ type: Output }],
+    pageChange: [{ type: Output }]
 };
 
 class FeatureToggleDirective {
@@ -3769,10 +3803,6 @@ LoadingService.decorators = [
             },] }
 ];
 
-/*
- * Public API Surface of exui-common-lib
- */
-
 const COMMON_COMPONENTS = [
     ExuiPageWrapperComponent,
     TermsAndConditionsComponent,
@@ -3839,12 +3869,14 @@ const COMMON_SERVICES = [
     LaunchDarklyService,
     FilterService,
     FindAPersonService,
+    FeatureToggleService,
     GoogleAnalyticsService,
     GoogleTagManagerService,
     LoadingService,
     LocationService,
     ManageSessionServices,
     SessionStorageService,
+    RoleService,
     TimeoutNotificationsService
 ];
 const ɵ0 = windowProvider;
@@ -3873,78 +3905,11 @@ ExuiCommonLibModule.decorators = [
                 exports: [
                     ...COMMON_COMPONENTS,
                     ...GOV_UI_COMPONENTS,
-                    PaginatePipe
+                    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 +3918,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, BadgeColour, CaseSharingStateService, CheckboxListComponent, ContactDetailsComponent, CookieBannerComponent, CookieService, DueDateComponent, ExuiCommonLibModule, ExuiPageWrapperComponent, FeatureToggleDirective, FeatureToggleGuard, FeatureToggleService, FilterService, FindAPersonService, FindLocationComponent, FindPersonComponent, GenericFilterComponent, GoogleAnalyticsService, GoogleTagManagerService, GovUkCheckboxComponent, GovUkCheckboxesComponent, GovUkDateComponent, GovUkErrorMessageComponent, GovUkFieldsetComponent, GovUkFileUploadComponent, GovUkFormGroupWrapperComponent, GovUkInputComponent, GovUkLabelComponent, GovUkRadioComponent, GovUkRadiosComponent, GovUkSelectComponent, GovUkTextareaComponent, GovukTableComponent, HmctsBannerComponent, HmctsErrorSummaryComponent, HmctsIdentityBarComponent, HmctsMainWrapperComponent, HmctsPaginationComponent, HmctsPrimaryNavigationComponent, HmctsSessionDialogComponent, HmctsSubNavigationComponent, InviteUserFormComponent, InviteUserPermissionComponent, LaunchDarklyService, LetDirective, LoadingService, LoadingSpinnerComponent, LocationService, ManageSessionServices, PaginationComponent, PersonRole, RemoveHostDirective, RoleGuard, RoleMatching, RoleService, SearchJudicialsComponent, SearchLocationComponent, SearchVenueComponent, SelectedCaseComponent, SelectedCaseConfirmComponent, SelectedCaseListComponent, ServiceMessageComponent, ServiceMessagesComponent, SessionStorageService, ShareCaseComponent, ShareCaseConfirmComponent, TabComponent, TcConfirmComponent, TcDisplayHtmlComponent, TcDisplayPlainComponent, TermsAndConditionsComponent, TimeoutNotificationsService, UserDetailsComponent, UserListComponent, UserSelectComponent, LetContext as ɵa, windowToken as ɵb, windowProvider as ɵc };
 //# sourceMappingURL=hmcts-rpx-xui-common-lib.js.map