@hmcts/rpx-xui-common-lib 1.6.1-adding-location-filter-bugfix → 1.6.1-all-work-filter

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

@@ -1,7 +1,7 @@
-import { MatTabsModule } from '@angular/material';
+import { MatInputModule, MatTabsModule } from '@angular/material';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { HttpClient } from '@angular/common/http';
-import { FormBuilder, FormControl, FormGroup, Validators, FormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { initialize } from 'launchdarkly-js-client-sdk';
 import { formatDate, DOCUMENT, CommonModule } from '@angular/common';
 import { Title } from '@angular/platform-browser';
@@ -10,7 +10,7 @@ import { Keepalive } from '@ng-idle/keepalive';
 import { RouterModule, Router, NavigationEnd } from '@angular/router';
 import { Component, EventEmitter, Input, Output, ViewEncapsulation, Injectable, Directive, TemplateRef, ViewContainerRef, ElementRef, Inject, ViewChild, ChangeDetectorRef, InjectionToken, ChangeDetectionStrategy, defineInjectable, inject, NgModule } from '@angular/core';
 import { BehaviorSubject, of, zip, combineLatest, Subject } from 'rxjs';
-import { distinctUntilChanged, map, debounceTime, filter, mergeMap, tap, startWith, switchMap, delay } from 'rxjs/operators';
+import { distinctUntilChanged, map, debounceTime, filter, mergeMap, tap, catchError, startWith, switchMap, delay } from 'rxjs/operators';
 
 /**
  * @fileoverview added by tsickle
@@ -601,7 +601,7 @@ function maxSelectedValidator(max) {
  * @param {?} values
  * @return {?}
  */
-function getCheckBoxesValues(options, values) {
+function getValues(options, values) {
     return options.reduce((/**
      * @param {?} acc
      * @param {?} option
@@ -807,41 +807,12 @@ class GenericFilterComponent {
      * @param {?} form
      * @return {?}
      */
-    selectChanged(field, form) {
-        if (field.findPersonField) {
-            /** @type {?} */
-            const currentField = this.config.fields.find((/**
-             * @param {?} f
-             * @return {?}
-             */
-            (f) => f.name === field.findPersonField));
-            if (currentField) {
-                currentField.domain = form.get(field.name).value;
+    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);
             }
-            this.removePersonField(field);
-        }
-    }
-    /**
-     * @param {?} field
-     * @return {?}
-     */
-    radiosChanged(field) {
-        if (field.findPersonField) {
-            this.form.get('findPersonControl').setValue(null);
-            this.removePersonField(field);
-        }
-    }
-    /**
-     * @param {?} field
-     * @return {?}
-     */
-    removePersonField(field) {
-        if (this.form.get(field.findPersonField)) {
-            this.form.get(field.findPersonField).get('domain').setValue(null);
-            this.form.get(field.findPersonField).get('email').setValue(null);
-            this.form.get(field.findPersonField).get('id').setValue(null);
-            this.form.get(field.findPersonField).get('name').setValue(null);
-            this.form.get(field.findPersonField).get('knownAs').setValue(null);
         }
     }
     /**
@@ -856,6 +827,7 @@ class GenericFilterComponent {
         const settings = Object.assign({}, this.settings, { reset: true });
         this.filterService.persist(settings, this.config.persistence);
         this.filterService.givenErrors.next(null);
+        this.submitted = false;
     }
     /**
      * @param {?} values
@@ -949,6 +921,39 @@ class GenericFilterComponent {
             }
         }));
     }
+    /**
+     * @private
+     * @param {?} resetField
+     * @param {?} form
+     * @return {?}
+     */
+    resetField(resetField, form) {
+        /** @type {?} */
+        const control = form.get(resetField);
+        /** @type {?} */
+        const defaultValue = this.config.cancelSetting.fields.find((/**
+         * @param {?} f
+         * @return {?}
+         */
+        (f) => f.name === resetField));
+        if (control instanceof FormArray) {
+            for (let i = 0; i < control.length; i++) {
+                control.removeAt(i);
+            }
+        }
+        else if (control instanceof FormGroup) {
+            /** @type {?} */
+            const keys = Object.keys(control.value);
+            for (const key of keys) {
+                this.resetField(key, control);
+            }
+        }
+        else if (control instanceof FormControl) {
+            /** @type {?} */
+            const value = defaultValue && defaultValue.value && defaultValue.value.length ? defaultValue.value[0] : null;
+            control.setValue(value);
+        }
+    }
     /**
      * @private
      * @param {?} filter
@@ -1043,7 +1048,7 @@ class GenericFilterComponent {
                 }
                 // if field updates find person component set the initial domain
                 if (field.findPersonField) {
-                    this.selectChanged(field, this.form);
+                    this.fieldChanged(field, this.form);
                 }
             }
         }
@@ -1101,8 +1106,10 @@ class GenericFilterComponent {
              * @return {?}
              */
             (f) => f.name === field.name));
-            for (const defaultValue of defaultValues.value) {
-                formArray.push(new FormControl(defaultValue));
+            if (defaultValues) {
+                for (const defaultValue of defaultValues.value) {
+                    formArray.push(new FormControl(defaultValue));
+                }
             }
         }
         return formArray;
@@ -1132,7 +1139,7 @@ class GenericFilterComponent {
                     return { value: values, name };
                 }
                 else {
-                    return { value: getCheckBoxesValues(field.options, values), name };
+                    return { value: getValues(field.options, values), name };
                 }
             }
             else {
@@ -1166,7 +1173,7 @@ class GenericFilterComponent {
 GenericFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-generic-filter',
-                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"selectChanged(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)=\"radiosChanged(field)\"\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                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"field.domain\"\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 [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [services]=\"form.get(field.findPersonField)?.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\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              [submitted]=\"submitted\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [disabled]=\"disabled(field, form)\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddLocationButton]=\"field.enableAddLocationButton\"\n                                [disabled]=\"disabled(field, form)\"\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\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}"]
@@ -2779,131 +2786,6 @@ CookieBannerComponent.propDecorators = {
     acceptanceNotifier: [{ type: Output }]
 };
 
-/**
- * @fileoverview added by tsickle
- * Generated from: lib/components/find-location/find-location.component.ts
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class FindLocationComponent {
-    constructor() {
-        this.selectedLocations = [];
-        this.submitted = true;
-        this.locations = [];
-        this.locationsForm = new FormArray([]);
-        this.serviceIds = 'SSCS,IA';
-        this.pServices = [];
-    }
-    /**
-     * @return {?}
-     */
-    get services() {
-        return this.pServices;
-    }
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    set services(value) {
-        this.pServices = value;
-        /** @type {?} */
-        const field = this.fields.find((/**
-         * @param {?} f
-         * @return {?}
-         */
-        f => f.name === this.field.findPersonField));
-        if (field) {
-            this.serviceIds = getCheckBoxesValues(field.options, value).filter((/**
-             * @param {?} x
-             * @return {?}
-             */
-            x => x !== 'services_all')).join(',');
-        }
-    }
-    /**
-     * @private
-     * @param {?} selectedLocations
-     * @param {?} formArray
-     * @return {?}
-     */
-    static initForm(selectedLocations, formArray) {
-        for (const location of selectedLocations) {
-            formArray.push(new FormControl(location));
-        }
-        return formArray;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.locationsForm = FindLocationComponent.initForm(this.selectedLocations, this.locationsForm);
-    }
-    /**
-     * @return {?}
-     */
-    addLocation() {
-        if (this.locations && this.locations.length) {
-            /** @type {?} */
-            const locationsForm = this.locationsForm;
-            this.selectedLocations = (/** @type {?} */ (this.locationsForm.value));
-            /** @type {?} */
-            const formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-            /** @type {?} */
-            const lastSavedValue = this.selectedLocations[this.selectedLocations.length - 1];
-            FindLocationComponent.initForm([lastSavedValue], formArray);
-            locationsForm.at(this.selectedLocations.length - 1).setValue(null);
-        }
-        this.locations = [];
-    }
-    /**
-     * @param {?} location
-     * @return {?}
-     */
-    removeLocation(location) {
-        if (location.epims_id) {
-            this.selectedLocations = this.selectedLocations.filter((/**
-             * @param {?} selectedLocation
-             * @return {?}
-             */
-            selectedLocation => selectedLocation.epims_id !== location.epims_id));
-            /** @type {?} */
-            const formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-            /** @type {?} */
-            const index = ((/** @type {?} */ (formArray.value))).findIndex((/**
-             * @param {?} selectedLocation
-             * @return {?}
-             */
-            selectedLocation => selectedLocation.epims_id === location.epims_id));
-            if (index > -1) {
-                formArray.removeAt(index);
-            }
-        }
-    }
-    /**
-     * @param {?} location
-     * @return {?}
-     */
-    onLocationSelected(location) {
-        if (location && location.epims_id) {
-            this.locations = [...this.locations, location];
-        }
-    }
-}
-FindLocationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'xuilib-find-location',
-                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\">Search for a location by name</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [control]=\"locationsForm\"\n                          [locations]=\"locations\"\n                          [delay]=\"300\"\n                          [disabled]=false\n                          [serviceIds]=\"serviceIds\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\">\n      Add location\n    </a>\n  </div>\n  <ul *ngIf=\"selectedLocations.length\" class=\"hmcts-filter-tags selection-container\">\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.court_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
-                styles: [""]
-            }] }
-];
-FindLocationComponent.propDecorators = {
-    selectedLocations: [{ type: Input }],
-    submitted: [{ type: Input }],
-    form: [{ type: Input }],
-    field: [{ type: Input }],
-    fields: [{ type: Input }],
-    services: [{ type: Input }]
-};
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/services/locations/location.service.ts
@@ -2954,6 +2836,7 @@ class SearchLocationComponent {
         this.fb = fb;
         this.cd = cd;
         this.disabled = null;
+        this.singleMode = false;
         this.locationType = '';
         this.serviceIds = '';
         this.submitted = true;
@@ -2961,51 +2844,51 @@ class SearchLocationComponent {
         this.showAutocomplete = false;
         this.locations = [];
         this.locationSelected = new EventEmitter();
-        this.term = '';
-        this.readyAfterContent = false;
         this.minSearchCharacters = 3;
+        this.term = '';
         this.pSelectedLocations = [];
-        this.findLocationFormGroup = this.fb.group({
-            findLocationFormControl: [null],
-            locationSelectedFormControl: [null]
+        this.pReset = true;
+        this.form = this.fb.group({
+            searchTerm: ['']
         });
     }
     /**
      * @return {?}
      */
-    get selectedLocations() {
-        return this.pSelectedLocations;
+    get reset() {
+        return this.pReset;
     }
     /**
      * @param {?} value
      * @return {?}
      */
-    set selectedLocations(value) {
-        this.pSelectedLocations = value;
-        this.showAutocomplete = false;
+    set reset(value) {
+        this.pReset = value;
+        this.resetSearchTerm();
     }
     /**
      * @return {?}
      */
-    ngAfterContentInit() {
-        this.readyAfterContent = true;
+    get selectedLocations() {
+        return this.pSelectedLocations;
     }
     /**
+     * @param {?} value
      * @return {?}
      */
-    ngOnInit() {
-        if (this.control) {
-            if (this.findLocationFormGroup && this.findLocationFormGroup.controls) {
-                this.findLocationFormGroup.controls.locationSelectedFormControl = this.control;
-            }
-        }
-        this.search();
+    set selectedLocations(value) {
+        this.pSelectedLocations = value;
     }
     /**
      * @return {?}
      */
-    onKeyDown() {
-        this.locationSelected.emit();
+    ngOnInit() {
+        if (this.singleMode && this.selectedLocations.length > 0) {
+            /** @type {?} */
+            const location = this.selectedLocations[0];
+            this.form.controls.searchTerm.patchValue(location.court_name, { emitEvent: false, onlySelf: true });
+        }
+        this.search();
     }
     /**
      * @param {?} term
@@ -3019,32 +2902,22 @@ class SearchLocationComponent {
         (locations) => this.removeSelectedLocations(locations))));
     }
     /**
-     * @param {?=} selection
+     * @param {?} location
      * @return {?}
      */
-    onSelectionChange(selection) {
-        if (this.findLocationFormGroup.controls.locationSelectedFormControl instanceof FormArray) {
-            ((/** @type {?} */ (this.findLocationFormGroup.controls.locationSelectedFormControl))).push(new FormControl(selection));
-        }
-        else {
-            this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(selection);
-        }
-        this.showAutocomplete = false;
-        this.locationSelected.emit(selection);
-        this.locations = [];
+    onSelectionChange(location) {
+        this.form.controls.searchTerm.patchValue(location.court_name, { emitEvent: false, onlySelf: true });
+        this.locationSelected.emit(location);
     }
     /**
      * @return {?}
      */
     search() {
-        this.findLocationFormGroup.controls.findLocationFormControl.valueChanges
+        this.form.controls.searchTerm.valueChanges
             .pipe(tap((/**
          * @return {?}
          */
         () => this.locations = [])), tap((/**
-         * @return {?}
-         */
-        () => this.showAutocomplete = false)), tap((/**
          * @param {?} term
          * @return {?}
          */
@@ -3067,13 +2940,10 @@ class SearchLocationComponent {
         locations => {
             this.locations = locations;
             this.cd.markForCheck();
-            if (locations.length === 1 && this.term === locations[0].court_name) {
-                if (this.findLocationFormGroup.controls.locationSelectedFormControl instanceof FormGroup) {
-                    this.findLocationFormGroup.controls.locationSelectedFormControl.setValue(locations[0]);
-                    this.locationSelected.emit(locations[0]);
-                    this.showAutocomplete = false;
-                    return;
-                }
+            if (locations.length === 1 && this.term === locations[0].court_name && !this.singleMode) {
+                this.locationSelected.emit(locations[0]);
+                this.showAutocomplete = false;
+                return;
             }
             this.showAutocomplete = true;
         }));
@@ -3088,20 +2958,8 @@ class SearchLocationComponent {
     /**
      * @return {?}
      */
-    getControlCourtNameValue() {
-        if (this.findLocationFormGroup.controls.locationSelectedFormControl instanceof FormArray) {
-            /** @type {?} */
-            const formArray = (/** @type {?} */ (this.findLocationFormGroup.controls.locationSelectedFormControl));
-            if (formArray.length > 0) {
-                /** @type {?} */
-                const value = formArray.value[formArray.length - 1];
-                return value ? formArray.value[formArray.length - 1].court_name : null;
-            }
-        }
-        else {
-            return this.findLocationFormGroup && this.findLocationFormGroup.controls && this.findLocationFormGroup.controls.locationSelectedFormControl.value ?
-                ((/** @type {?} */ (this.findLocationFormGroup.controls.locationSelectedFormControl.value))).court_name : '';
-        }
+    resetSearchTerm() {
+        this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
     }
     /**
      * @private
@@ -3109,6 +2967,9 @@ class SearchLocationComponent {
      * @return {?}
      */
     removeSelectedLocations(locations) {
+        if (this.singleMode) {
+            return locations;
+        }
         return locations.filter((/**
          * @param {?} location
          * @return {?}
@@ -3123,8 +2984,8 @@ class SearchLocationComponent {
 SearchLocationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'exui-search-location',
-                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      class=\"autocomplete__input autocomplete__input--default search-box\"\n      [attr.disabled]=\"!disabled ? null: disabled\"\n      [value]=\"getControlCourtNameValue()\">\n    <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLocation=\"matAutocomplete\">\n      <mat-option *ngFor=\"let location of locations\"\n                  [value]=\"location.court_name\"\n                  (onSelectionChange)=\"onSelectionChange(location)\">\n        {{ location.court_name }}\n      </mat-option>\n      <mat-option *ngIf=\"!locations.length && showAutocomplete && term.length >= this.minSearchCharacters\">No results found</mat-option>\n    </mat-autocomplete>\n  </div>\n</div>\n\n\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%;background-color:transparent;position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused{outline:#fd0 solid 3px;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:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                template: "<div class=\"auto-complete-container\">\n  <input\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.court_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:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
             }] }
 ];
 /** @nocollapse */
@@ -3136,17 +2997,186 @@ SearchLocationComponent.ctorParameters = () => [
 SearchLocationComponent.propDecorators = {
     control: [{ type: Input }],
     disabled: [{ type: Input }],
+    singleMode: [{ type: Input }],
     locationType: [{ type: Input }],
     serviceIds: [{ type: Input }],
     submitted: [{ type: Input }],
     delay: [{ type: Input }],
-    findLocationFormGroup: [{ type: Input }],
+    form: [{ type: Input }],
     showAutocomplete: [{ type: Input }],
     locations: [{ type: Input }],
     locationSelected: [{ type: Output }],
+    reset: [{ type: Input }],
     selectedLocations: [{ type: Input }]
 };
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/components/find-location/find-location.component.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class FindLocationComponent {
+    constructor() {
+        this.selectedLocations = [];
+        this.submitted = true;
+        this.enableAddLocationButton = true;
+        this.title = 'Search for a location by name';
+        this.locations = [];
+        this.tempSelectedLocation = null;
+        this.serviceIds = 'SSCS,IA';
+        this.pServices = [];
+        this.pDisabled = false;
+    }
+    /**
+     * @return {?}
+     */
+    get disabled() {
+        return this.pDisabled;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set disabled(value) {
+        if (value) {
+            this.searchLocationComponent.resetSearchTerm();
+            this.removeSelectedValues();
+        }
+        this.pDisabled = value;
+    }
+    /**
+     * @return {?}
+     */
+    get services() {
+        return this.pServices;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set services(value) {
+        this.pServices = value;
+        /** @type {?} */
+        const field = this.fields.find((/**
+         * @param {?} f
+         * @return {?}
+         */
+        f => f.name === this.field.findLocationField));
+        if (field) {
+            if (typeof value === 'string') {
+                this.serviceIds = value;
+            }
+            else {
+                this.serviceIds = getValues(field.options, value).filter((/**
+                 * @param {?} x
+                 * @return {?}
+                 */
+                x => x !== 'services_all')).join(',');
+            }
+        }
+    }
+    /**
+     * @return {?}
+     */
+    addLocation() {
+        if (this.tempSelectedLocation) {
+            this.selectedLocations = [...this.selectedLocations, this.tempSelectedLocation];
+            this.addSelectedLocationsToForm([this.tempSelectedLocation]);
+            this.tempSelectedLocation = null;
+            this.locations = [];
+            this.searchLocationComponent.resetSearchTerm();
+        }
+    }
+    /**
+     * @param {?} location
+     * @return {?}
+     */
+    removeLocation(location) {
+        if (location.epims_id) {
+            this.selectedLocations = this.selectedLocations.filter((/**
+             * @param {?} selectedLocation
+             * @return {?}
+             */
+            selectedLocation => selectedLocation.epims_id !== location.epims_id));
+            /** @type {?} */
+            const formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+            /** @type {?} */
+            const index = ((/** @type {?} */ (formArray.value))).findIndex((/**
+             * @param {?} selectedLocation
+             * @return {?}
+             */
+            selectedLocation => selectedLocation.epims_id === location.epims_id));
+            if (index > -1) {
+                formArray.removeAt(index);
+            }
+        }
+    }
+    /**
+     * @param {?} location
+     * @return {?}
+     */
+    onLocationSelected(location) {
+        if (this.field.maxSelected === 1) {
+            this.removeSelectedValues();
+            this.addSelectedLocationsToForm([location]);
+        }
+        else {
+            if (!this.selectedLocations.find((/**
+             * @param {?} x
+             * @return {?}
+             */
+            x => x.epims_id === location.epims_id))) {
+                if (location.epims_id) {
+                    this.tempSelectedLocation = location;
+                }
+            }
+        }
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    removeSelectedValues() {
+        /** @type {?} */
+        const formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+        for (let i = 0; i < formArray.length; i++) {
+            formArray.removeAt(i);
+        }
+        this.selectedLocations = [];
+    }
+    /**
+     * @private
+     * @param {?} locations
+     * @return {?}
+     */
+    addSelectedLocationsToForm(locations) {
+        /** @type {?} */
+        const formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+        for (const location of locations) {
+            formArray.push(new FormControl(location));
+        }
+    }
+}
+FindLocationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'xuilib-find-location',
+                template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"title\">{{title}}</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                          (locationSelected)=\"onLocationSelected($event)\"\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.court_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                styles: [""]
+            }] }
+];
+FindLocationComponent.propDecorators = {
+    selectedLocations: [{ type: Input }],
+    submitted: [{ type: Input }],
+    enableAddLocationButton: [{ type: Input }],
+    form: [{ type: Input }],
+    field: [{ type: Input }],
+    fields: [{ type: Input }],
+    title: [{ type: Input }],
+    searchLocationComponent: [{ type: ViewChild, args: [SearchLocationComponent,] }],
+    disabled: [{ type: Input }],
+    services: [{ type: Input }]
+};
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/components/pagination/pagination.component.ts
@@ -3462,6 +3492,49 @@ class RadioFilterFieldConfig {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/gov-ui/util/session-storage/session-storage-utils.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const getAllCaseworkersFromServices = (/**
+ * @param {?} caseworkersByService
+ * @return {?}
+ */
+(caseworkersByService) => {
+    /** @type {?} */
+    let allCaseworkers = [];
+    caseworkersByService.forEach((/**
+     * @param {?} caseworkerListByService
+     * @return {?}
+     */
+    caseworkerListByService => {
+        allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
+    }));
+    return allCaseworkers;
+});
+/** @type {?} */
+const getSessionStorageKeyForServiceId = (/**
+ * @param {?} serviceId
+ * @return {?}
+ */
+(serviceId) => {
+    return `${serviceId}-caseworkers`;
+});
+/** @type {?} */
+const setCaseworkers = (/**
+ * @param {?} serviceId
+ * @param {?} caseworkers
+ * @param {?} sessionStorageService
+ * @return {?}
+ */
+(serviceId, caseworkers, sessionStorageService) => {
+    /** @type {?} */
+    const sessionKey = getSessionStorageKeyForServiceId(serviceId);
+    sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
+});
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/services/session-storage/session-storage.service.ts
@@ -3555,35 +3628,60 @@ class FindAPersonService {
             const userInfo = JSON.parse(userInfoStr);
             this.userId = userInfo.id ? userInfo.id : userInfo.uid;
         }
-        if (!this.sessionStorageService.getItem(FindAPersonService.caseworkersKey)) {
-            this.http.get('/workallocation2/caseworker').pipe(tap((/**
-             * @param {?} caseworkerList
-             * @return {?}
-             */
-            caseworkerList => this.sessionStorageService.setItem(FindAPersonService.caseworkersKey, JSON.stringify(caseworkerList)))));
-        }
-        /** @type {?} */
-        const caseworkers = JSON.parse(this.sessionStorageService.getItem(FindAPersonService.caseworkersKey));
         /** @type {?} */
-        let roleCategory = RoleCategory.ALL;
-        if (!(searchOptions.jurisdiction === PersonRole.ALL)) {
-            roleCategory = searchOptions.jurisdiction === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
-        }
+        const fullServices = searchOptions.services;
         /** @type {?} */
-        const people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
+        const storedServices = [];
         /** @type {?} */
-        const searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
+        const newServices = [];
         /** @type {?} */
-        const finalPeopleList = people.filter((/**
-         * @param {?} person
+        const storedCaseworkersByService = [];
+        fullServices.forEach((/**
+         * @param {?} serviceId
          * @return {?}
          */
-        person => person && person.name && person.name.toLowerCase().includes(searchTerm)));
-        return searchOptions.userIncluded ? of(finalPeopleList) : of(finalPeopleList.filter((/**
-         * @param {?} person
+        serviceId => {
+            /** @type {?} */
+            const serviceKey = getSessionStorageKeyForServiceId(serviceId);
+            if (this.sessionStorageService.getItem(serviceKey)) {
+                storedServices.push(serviceId);
+                storedCaseworkersByService.push({ service: serviceId, caseworkers: JSON.parse(this.sessionStorageService.getItem(serviceKey)) });
+            }
+            else {
+                newServices.push(serviceId);
+            }
+        }));
+        // if all services are stored then return the stored caseworkers by service
+        if (storedServices.length === fullServices.length) {
+            /** @type {?} */
+            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((/**
+         * @param {?} caseworkersByService
+         * @return {?}
+         */
+        caseworkersByService => {
+            caseworkersByService.forEach((/**
+             * @param {?} caseworkerListByService
+             * @return {?}
+             */
+            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((/**
+         * @param {?} caseworkersByService
          * @return {?}
          */
-        person => person && person.id !== this.userId)));
+        caseworkersByService => {
+            /** @type {?} */
+            const givenCaseworkers = getAllCaseworkersFromServices(caseworkersByService);
+            return this.searchInCaseworkers(givenCaseworkers, searchOptions);
+        })));
     }
     /**
      * @param {?} caseworkers
@@ -3611,6 +3709,33 @@ class FindAPersonService {
         }));
         return people;
     }
+    /**
+     * @param {?} caseworkers
+     * @param {?} searchOptions
+     * @return {?}
+     */
+    searchInCaseworkers(caseworkers, searchOptions) {
+        /** @type {?} */
+        let roleCategory = RoleCategory.ALL;
+        if (!(searchOptions.userRole === PersonRole.ALL)) {
+            roleCategory = searchOptions.userRole === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
+        }
+        /** @type {?} */
+        const searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
+        /** @type {?} */
+        const people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
+        /** @type {?} */
+        const finalPeopleList = people.filter((/**
+         * @param {?} person
+         * @return {?}
+         */
+        person => person && person.name && person.name.toLowerCase().includes(searchTerm)));
+        return searchOptions.userIncluded ? finalPeopleList : finalPeopleList.filter((/**
+         * @param {?} person
+         * @return {?}
+         */
+        person => person && person.id !== this.userId));
+    }
 }
 FindAPersonService.caseworkersKey = 'caseworkers';
 FindAPersonService.decorators = [
@@ -3633,9 +3758,11 @@ FindAPersonService.ctorParameters = () => [
 class FindPersonComponent {
     /**
      * @param {?} findPersonService
+     * @param {?} cd
      */
-    constructor(findPersonService) {
+    constructor(findPersonService, cd) {
         this.findPersonService = findPersonService;
+        this.cd = cd;
         this.personSelected = new EventEmitter();
         this.boldTitle = 'Find the person';
         this.subTitle = 'Type the name of the person and select them.';
@@ -3644,16 +3771,18 @@ class FindPersonComponent {
         this.disabled = null;
         this.userIncluded = false;
         this.placeholderContent = '';
-        this.isNoResultsShown = false;
+        this.isNoResultsShown = true;
         this.showUpdatedColor = false;
         this.selectedPersons = [];
         this.errorMessage = 'You must select a name';
         this.idValue = '';
+        this.services = ['IA'];
         this.isPersonSelectionCompleted = false;
         this.showAutocomplete = false;
         this.currentInputValue = '';
-        this.choosenPerson = (/** @type {?} */ ({}));
-        this.findPersonControl = new FormControl();
+        this.chosenPerson = null;
+        this.findPersonControl = new FormControl('');
+        this.filteredOptions = [];
         this.minSearchCharacters = 2;
     }
     /**
@@ -3666,13 +3795,34 @@ class FindPersonComponent {
         else {
             this.findPersonGroup.addControl('findPersonControl', this.findPersonControl);
         }
-        this.filteredOptions = this.findPersonControl.valueChanges.pipe(startWith(''), switchMap((/**
+        this.findPersonControl.valueChanges.pipe(startWith(''), tap((/**
+         * @return {?}
+         */
+        () => this.showAutocomplete = false)), tap((/**
+         * @return {?}
+         */
+        () => this.filteredOptions = [])), filter((/**
          * @param {?} searchTerm
          * @return {?}
          */
-        searchTerm => {
-            return this.filter(searchTerm || '');
-        })));
+        searchTerm => searchTerm && searchTerm.length > this.minSearchCharacters)), switchMap((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        searchTerm => this.filter(searchTerm).pipe(tap((/**
+         * @return {?}
+         */
+        () => this.showAutocomplete = true)), catchError((/**
+         * @return {?}
+         */
+        () => this.filteredOptions = [])))))).subscribe((/**
+         * @param {?} people
+         * @return {?}
+         */
+        (people) => {
+            this.filteredOptions = people;
+            this.cd.detectChanges();
+        }));
         this.findPersonControl.setValue(this.selectedPerson);
     }
     /**
@@ -3695,9 +3845,9 @@ class FindPersonComponent {
      */
     filter(searchTerm) {
         /** @type {?} */
-        const findJudicialPeople = this.findPersonService.find({ searchTerm, jurisdiction: this.domain });
+        const findJudicialPeople = this.findPersonService.find({ searchTerm, userRole: this.domain, services: this.services });
         /** @type {?} */
-        const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm, jurisdiction: this.domain });
+        const findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm, userRole: this.domain, services: this.services });
         if (searchTerm && searchTerm.length > this.minSearchCharacters) {
             switch (this.domain) {
                 case PersonRole.JUDICIAL: {
@@ -3731,20 +3881,21 @@ class FindPersonComponent {
                     return findCaseworkersOrAdmins;
                 }
                 default: {
-                    return of();
+                    return of([]);
                 }
             }
         }
-        return of();
+        return of([]);
     }
     /**
-     * @param {?=} selectedPerson
+     * @param {?} selectedPerson
      * @return {?}
      */
     onSelectionChange(selectedPerson) {
         this.isPersonSelectionCompleted = true;
-        this.choosenPerson = selectedPerson;
+        this.chosenPerson = selectedPerson;
         this.personSelected.emit(selectedPerson);
+        this.findPersonControl.setValue('');
     }
     /**
      * @param {?} currentValue
@@ -3753,13 +3904,16 @@ class FindPersonComponent {
     updatedVal(currentValue) {
         this.currentInputValue = currentValue;
         this.showAutocomplete = !!currentValue && (currentValue.length > this.minSearchCharacters);
-        this.isPersonSelectionCompleted = (this.getDisplayName(this.choosenPerson) === currentValue) ? true : false;
+        this.isPersonSelectionCompleted = this.getDisplayName(this.chosenPerson) === currentValue;
     }
     /**
      * @param {?} selectedPerson
      * @return {?}
      */
     getDisplayName(selectedPerson) {
+        if (!selectedPerson) {
+            return '';
+        }
         if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
             return `${selectedPerson.knownAs}(${selectedPerson.email})`;
         }
@@ -3769,13 +3923,14 @@ class FindPersonComponent {
 FindPersonComponent.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.valid && 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\" matInput\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           (ngModelChange)=\"updatedVal($event)\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           [value]=\"selectedPerson\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let option of filteredOptions | async\"\n                  [value]=\"getDisplayName(option)\"\n                  (onSelectionChange)=\"onSelectionChange(option)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && currentInputValue && currentInputValue.length && !(filteredOptions | async)?.length && showAutocomplete\">{{ 'No results found' }}</mat-option>\n    </mat-autocomplete>\n  </fieldset>\n</div>\n",
+                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\" matInput\n           formControlName=\"findPersonControl\"\n           [matAutocomplete]=\"auto\"\n           class=\"govuk-input govuk-!-width-one-third\"\n           (ngModelChange)=\"updatedVal($event)\"\n           [placeholder]=\"placeholderContent\"\n           [attr.disabled]=\"disabled\"\n           [value]=\"selectedPerson\">\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\n      <mat-option *ngFor=\"let option of filteredOptions\"\n                  [value]=\"getDisplayName(option)\"\n                  (onSelectionChange)=\"onSelectionChange(option)\"\n                  [ngClass]=\"{'hide-autocomplete': !showAutocomplete, 'select-option': showUpdatedColor}\">\n        {{getDisplayName(option)}}\n      </mat-option>\n      <mat-option [ngClass]=\"{'select-option': showUpdatedColor}\" *ngIf=\"isNoResultsShown && currentInputValue && currentInputValue.length > minSearchCharacters && !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}"]
             }] }
 ];
 /** @nocollapse */
 FindPersonComponent.ctorParameters = () => [
-    { type: FindAPersonService }
+    { type: FindAPersonService },
+    { type: ChangeDetectorRef }
 ];
 FindPersonComponent.propDecorators = {
     personSelected: [{ type: Output }],
@@ -3793,7 +3948,8 @@ FindPersonComponent.propDecorators = {
     showUpdatedColor: [{ type: Input }],
     selectedPersons: [{ type: Input }],
     errorMessage: [{ type: Input }],
-    idValue: [{ type: Input }]
+    idValue: [{ type: Input }],
+    services: [{ type: Input }]
 };
 
 /**
@@ -4721,7 +4877,8 @@ ExuiCommonLibModule.decorators = [
                     ReactiveFormsModule,
                     RouterModule.forChild([]),
                     MatAutocompleteModule,
-                    MatTabsModule
+                    MatTabsModule,
+                    MatInputModule
                 ],
                 providers: [
                     { provide: windowToken, useFactory: ɵ0 }