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

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

@@ -1,8 +1,8 @@
-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 { __values, __spread, __assign, __read } from 'tslib';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { __spread, __values, __assign, __read } from 'tslib';
 import { initialize } from 'launchdarkly-js-client-sdk';
 import { formatDate, DOCUMENT, CommonModule } from '@angular/common';
 import { Title } from '@angular/platform-browser';
@@ -11,7 +11,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, ChangeDetectorRef, InjectionToken, defineInjectable, inject, ViewChild, ChangeDetectionStrategy, 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
@@ -795,7 +795,7 @@ function maxSelectedValidator(max) {
  * @param {?} values
  * @return {?}
  */
-function getCheckBoxesValues(options, values) {
+function getValues(options, values) {
     return options.reduce((/**
      * @param {?} acc
      * @param {?} option
@@ -1032,7 +1032,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @param {?} form
      * @return {?}
      */
-    GenericFilterComponent.prototype.selectChanged = 
+    GenericFilterComponent.prototype.fieldChanged = 
     // when domain changes ensure that person field is reset
     /**
      * @param {?} field
@@ -1040,48 +1040,22 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (field, form) {
-        if (field.findPersonField) {
-            /** @type {?} */
-            var currentField = this.config.fields.find((/**
-             * @param {?} f
-             * @return {?}
-             */
-            function (f) { return f.name === field.findPersonField; }));
-            if (currentField) {
-                currentField.domain = form.get(field.name).value;
+        var e_1, _a;
+        // TODO - Do similar with jurisdiction/service for caseworkers by services
+        if (field.changeResetFields && field.changeResetFields.length) {
+            try {
+                for (var _b = __values(field.changeResetFields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var resetField = _c.value;
+                    this.resetField(resetField, form);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-            this.removePersonField(field);
-        }
-    };
-    /**
-     * @param {?} field
-     * @return {?}
-     */
-    GenericFilterComponent.prototype.radiosChanged = /**
-     * @param {?} field
-     * @return {?}
-     */
-    function (field) {
-        if (field.findPersonField) {
-            this.form.get('findPersonControl').setValue(null);
-            this.removePersonField(field);
-        }
-    };
-    /**
-     * @param {?} field
-     * @return {?}
-     */
-    GenericFilterComponent.prototype.removePersonField = /**
-     * @param {?} field
-     * @return {?}
-     */
-    function (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);
         }
     };
     /**
@@ -1099,6 +1073,7 @@ var GenericFilterComponent = /** @class */ (function () {
         var settings = __assign({}, this.settings, { reset: true });
         this.filterService.persist(settings, this.config.persistence);
         this.filterService.givenErrors.next(null);
+        this.submitted = false;
     };
     /**
      * @param {?} values
@@ -1111,7 +1086,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (values, field) {
-        var e_1, _a;
+        var e_2, _a;
         /** @type {?} */
         var keys = Object.keys(values);
         try {
@@ -1122,12 +1097,12 @@ var GenericFilterComponent = /** @class */ (function () {
                 }
             }
         }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
         finally {
             try {
                 if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
             }
-            finally { if (e_1) throw e_1.error; }
+            finally { if (e_2) throw e_2.error; }
         }
     };
     /**
@@ -1215,6 +1190,56 @@ var GenericFilterComponent = /** @class */ (function () {
             }
         }));
     };
+    /**
+     * @private
+     * @param {?} resetField
+     * @param {?} form
+     * @return {?}
+     */
+    GenericFilterComponent.prototype.resetField = /**
+     * @private
+     * @param {?} resetField
+     * @param {?} form
+     * @return {?}
+     */
+    function (resetField, form) {
+        var e_3, _a;
+        /** @type {?} */
+        var control = form.get(resetField);
+        /** @type {?} */
+        var defaultValue = this.config.cancelSetting.fields.find((/**
+         * @param {?} f
+         * @return {?}
+         */
+        function (f) { return f.name === resetField; }));
+        if (control instanceof FormArray) {
+            for (var i = 0; i < control.length; i++) {
+                control.removeAt(i);
+            }
+        }
+        else if (control instanceof FormGroup) {
+            /** @type {?} */
+            var keys = Object.keys(control.value);
+            try {
+                for (var keys_2 = __values(keys), keys_2_1 = keys_2.next(); !keys_2_1.done; keys_2_1 = keys_2.next()) {
+                    var key = keys_2_1.value;
+                    this.resetField(key, control);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (keys_2_1 && !keys_2_1.done && (_a = keys_2.return)) _a.call(keys_2);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
+        else if (control instanceof FormControl) {
+            /** @type {?} */
+            var value = defaultValue && defaultValue.value && defaultValue.value.length ? defaultValue.value[0] : null;
+            control.setValue(value);
+        }
+    };
     /**
      * @private
      * @param {?} filter
@@ -1262,7 +1287,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (config, settings, reset) {
-        var e_2, _a;
+        var e_4, _a;
         /** @type {?} */
         var findPersonControl = this.form ? this.form.get('findPersonControl') : null;
         this.form = this.fb.group({});
@@ -1326,7 +1351,7 @@ var GenericFilterComponent = /** @class */ (function () {
                 }
                 // if field updates find person component set the initial domain
                 if (field.findPersonField) {
-                    this_1.selectChanged(field, this_1.form);
+                    this_1.fieldChanged(field, this_1.form);
                 }
             }
         };
@@ -1337,12 +1362,12 @@ var GenericFilterComponent = /** @class */ (function () {
                 _loop_1(field);
             }
         }
-        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        catch (e_4_1) { e_4 = { error: e_4_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_2) throw e_2.error; }
+            finally { if (e_4) throw e_4.error; }
         }
     };
     /**
@@ -1358,7 +1383,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (field, settings) {
-        var e_3, _a;
+        var e_5, _a;
         /** @type {?} */
         var validators = GenericFilterComponent.addFormValidators(field);
         /** @type {?} */
@@ -1390,12 +1415,12 @@ var GenericFilterComponent = /** @class */ (function () {
                 _loop_2(option);
             }
         }
-        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        catch (e_5_1) { e_5 = { error: e_5_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_3) throw e_3.error; }
+            finally { if (e_5) throw e_5.error; }
         }
         return formArray;
     };
@@ -1412,7 +1437,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (field, settings) {
-        var e_4, _a;
+        var e_6, _a;
         /** @type {?} */
         var validators = GenericFilterComponent.addFormValidators(field);
         /** @type {?} */
@@ -1425,18 +1450,20 @@ var GenericFilterComponent = /** @class */ (function () {
              * @return {?}
              */
             function (f) { return f.name === field.name; }));
-            try {
-                for (var _b = __values(defaultValues.value), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var defaultValue = _c.value;
-                    formArray.push(new FormControl(defaultValue));
-                }
-            }
-            catch (e_4_1) { e_4 = { error: e_4_1 }; }
-            finally {
+            if (defaultValues) {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    for (var _b = __values(defaultValues.value), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var defaultValue = _c.value;
+                        formArray.push(new FormControl(defaultValue));
+                    }
+                }
+                catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_6) throw e_6.error; }
                 }
-                finally { if (e_4) throw e_4.error; }
             }
         }
         return formArray;
@@ -1472,7 +1499,7 @@ var GenericFilterComponent = /** @class */ (function () {
                     return { value: values, name: name };
                 }
                 else {
-                    return { value: getCheckBoxesValues(field.options, values), name: name };
+                    return { value: getValues(field.options, values), name: name };
                 }
             }
             else {
@@ -1491,7 +1518,7 @@ var GenericFilterComponent = /** @class */ (function () {
      * @return {?}
      */
     function (form) {
-        var e_5, _a;
+        var e_7, _a;
         /** @type {?} */
         var errors = [];
         try {
@@ -1507,12 +1534,12 @@ var GenericFilterComponent = /** @class */ (function () {
                 }
             }
         }
-        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+        catch (e_7_1) { e_7 = { error: e_7_1 }; }
         finally {
             try {
                 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-            finally { if (e_5) throw e_5.error; }
+            finally { if (e_7) throw e_7.error; }
         }
         if (errors.length) {
             this.filterService.givenErrors.next(errors);
@@ -1521,7 +1548,7 @@ var GenericFilterComponent = /** @class */ (function () {
     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}"]
@@ -3568,168 +3595,6 @@ var CookieBannerComponent = /** @class */ (function () {
     return CookieBannerComponent;
 }());
 
-/**
- * @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
- */
-var FindLocationComponent = /** @class */ (function () {
-    function FindLocationComponent() {
-        this.selectedLocations = [];
-        this.submitted = true;
-        this.locations = [];
-        this.locationsForm = new FormArray([]);
-        this.serviceIds = 'SSCS,IA';
-        this.pServices = [];
-    }
-    Object.defineProperty(FindLocationComponent.prototype, "services", {
-        get: /**
-         * @return {?}
-         */
-        function () {
-            return this.pServices;
-        },
-        set: /**
-         * @param {?} value
-         * @return {?}
-         */
-        function (value) {
-            var _this = this;
-            this.pServices = value;
-            /** @type {?} */
-            var field = this.fields.find((/**
-             * @param {?} f
-             * @return {?}
-             */
-            function (f) { return f.name === _this.field.findPersonField; }));
-            if (field) {
-                this.serviceIds = getCheckBoxesValues(field.options, value).filter((/**
-                 * @param {?} x
-                 * @return {?}
-                 */
-                function (x) { return x !== 'services_all'; })).join(',');
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @private
-     * @param {?} selectedLocations
-     * @param {?} formArray
-     * @return {?}
-     */
-    FindLocationComponent.initForm = /**
-     * @private
-     * @param {?} selectedLocations
-     * @param {?} formArray
-     * @return {?}
-     */
-    function (selectedLocations, formArray) {
-        var e_1, _a;
-        try {
-            for (var selectedLocations_1 = __values(selectedLocations), selectedLocations_1_1 = selectedLocations_1.next(); !selectedLocations_1_1.done; selectedLocations_1_1 = selectedLocations_1.next()) {
-                var location_1 = selectedLocations_1_1.value;
-                formArray.push(new FormControl(location_1));
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (selectedLocations_1_1 && !selectedLocations_1_1.done && (_a = selectedLocations_1.return)) _a.call(selectedLocations_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        return formArray;
-    };
-    /**
-     * @return {?}
-     */
-    FindLocationComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-        this.locationsForm = FindLocationComponent.initForm(this.selectedLocations, this.locationsForm);
-    };
-    /**
-     * @return {?}
-     */
-    FindLocationComponent.prototype.addLocation = /**
-     * @return {?}
-     */
-    function () {
-        if (this.locations && this.locations.length) {
-            /** @type {?} */
-            var locationsForm = this.locationsForm;
-            this.selectedLocations = (/** @type {?} */ (this.locationsForm.value));
-            /** @type {?} */
-            var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-            /** @type {?} */
-            var lastSavedValue = this.selectedLocations[this.selectedLocations.length - 1];
-            FindLocationComponent.initForm([lastSavedValue], formArray);
-            locationsForm.at(this.selectedLocations.length - 1).setValue(null);
-        }
-        this.locations = [];
-    };
-    /**
-     * @param {?} location
-     * @return {?}
-     */
-    FindLocationComponent.prototype.removeLocation = /**
-     * @param {?} location
-     * @return {?}
-     */
-    function (location) {
-        if (location.epims_id) {
-            this.selectedLocations = this.selectedLocations.filter((/**
-             * @param {?} selectedLocation
-             * @return {?}
-             */
-            function (selectedLocation) { return selectedLocation.epims_id !== location.epims_id; }));
-            /** @type {?} */
-            var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
-            /** @type {?} */
-            var index = ((/** @type {?} */ (formArray.value))).findIndex((/**
-             * @param {?} selectedLocation
-             * @return {?}
-             */
-            function (selectedLocation) { return selectedLocation.epims_id === location.epims_id; }));
-            if (index > -1) {
-                formArray.removeAt(index);
-            }
-        }
-    };
-    /**
-     * @param {?} location
-     * @return {?}
-     */
-    FindLocationComponent.prototype.onLocationSelected = /**
-     * @param {?} location
-     * @return {?}
-     */
-    function (location) {
-        if (location && location.epims_id) {
-            this.locations = __spread(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 }]
-    };
-    return FindLocationComponent;
-}());
-
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/services/locations/location.service.ts
@@ -3787,6 +3652,7 @@ var SearchLocationComponent = /** @class */ (function () {
         this.fb = fb;
         this.cd = cd;
         this.disabled = null;
+        this.singleMode = false;
         this.locationType = '';
         this.serviceIds = '';
         this.submitted = true;
@@ -3794,15 +3660,32 @@ var SearchLocationComponent = /** @class */ (function () {
         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: ['']
         });
     }
+    Object.defineProperty(SearchLocationComponent.prototype, "reset", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.pReset;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this.pReset = value;
+            this.resetSearchTerm();
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SearchLocationComponent.prototype, "selectedLocations", {
         get: /**
          * @return {?}
@@ -3816,7 +3699,6 @@ var SearchLocationComponent = /** @class */ (function () {
          */
         function (value) {
             this.pSelectedLocations = value;
-            this.showAutocomplete = false;
         },
         enumerable: true,
         configurable: true
@@ -3824,37 +3706,19 @@ var SearchLocationComponent = /** @class */ (function () {
     /**
      * @return {?}
      */
-    SearchLocationComponent.prototype.ngAfterContentInit = /**
+    SearchLocationComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
-        this.readyAfterContent = true;
+        if (this.singleMode && this.selectedLocations.length > 0) {
+            /** @type {?} */
+            var location_1 = this.selectedLocations[0];
+            this.form.controls.searchTerm.patchValue(location_1.court_name, { emitEvent: false, onlySelf: true });
+        }
+        this.search();
     };
     /**
-     * @return {?}
-     */
-    SearchLocationComponent.prototype.ngOnInit = /**
-     * @return {?}
-     */
-    function () {
-        if (this.control) {
-            if (this.findLocationFormGroup && this.findLocationFormGroup.controls) {
-                this.findLocationFormGroup.controls.locationSelectedFormControl = this.control;
-            }
-        }
-        this.search();
-    };
-    /**
-     * @return {?}
-     */
-    SearchLocationComponent.prototype.onKeyDown = /**
-     * @return {?}
-     */
-    function () {
-        this.locationSelected.emit();
-    };
-    /**
-     * @param {?} term
+     * @param {?} term
      * @return {?}
      */
     SearchLocationComponent.prototype.filter = /**
@@ -3870,23 +3734,16 @@ var SearchLocationComponent = /** @class */ (function () {
         function (locations) { return _this.removeSelectedLocations(locations); })));
     };
     /**
-     * @param {?=} selection
+     * @param {?} location
      * @return {?}
      */
     SearchLocationComponent.prototype.onSelectionChange = /**
-     * @param {?=} selection
+     * @param {?} location
      * @return {?}
      */
-    function (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 = [];
+    function (location) {
+        this.form.controls.searchTerm.patchValue(location.court_name, { emitEvent: false, onlySelf: true });
+        this.locationSelected.emit(location);
     };
     /**
      * @return {?}
@@ -3896,14 +3753,11 @@ var SearchLocationComponent = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.findLocationFormGroup.controls.findLocationFormControl.valueChanges
+        this.form.controls.searchTerm.valueChanges
             .pipe(tap((/**
          * @return {?}
          */
         function () { return _this.locations = []; })), tap((/**
-         * @return {?}
-         */
-        function () { return _this.showAutocomplete = false; })), tap((/**
          * @param {?} term
          * @return {?}
          */
@@ -3926,13 +3780,10 @@ var SearchLocationComponent = /** @class */ (function () {
         function (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;
         }));
@@ -3951,23 +3802,11 @@ var SearchLocationComponent = /** @class */ (function () {
     /**
      * @return {?}
      */
-    SearchLocationComponent.prototype.getControlCourtNameValue = /**
+    SearchLocationComponent.prototype.resetSearchTerm = /**
      * @return {?}
      */
     function () {
-        if (this.findLocationFormGroup.controls.locationSelectedFormControl instanceof FormArray) {
-            /** @type {?} */
-            var formArray = (/** @type {?} */ (this.findLocationFormGroup.controls.locationSelectedFormControl));
-            if (formArray.length > 0) {
-                /** @type {?} */
-                var 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 : '';
-        }
+        this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
     };
     /**
      * @private
@@ -3981,6 +3820,9 @@ var SearchLocationComponent = /** @class */ (function () {
      */
     function (locations) {
         var _this = this;
+        if (this.singleMode) {
+            return locations;
+        }
         return locations.filter((/**
          * @param {?} location
          * @return {?}
@@ -3994,8 +3836,8 @@ var SearchLocationComponent = /** @class */ (function () {
     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 */
@@ -4007,19 +3849,229 @@ var SearchLocationComponent = /** @class */ (function () {
     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 }]
     };
     return SearchLocationComponent;
 }());
 
+/**
+ * @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
+ */
+var FindLocationComponent = /** @class */ (function () {
+    function FindLocationComponent() {
+        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;
+    }
+    Object.defineProperty(FindLocationComponent.prototype, "disabled", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.pDisabled;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            if (value) {
+                this.searchLocationComponent.resetSearchTerm();
+                this.removeSelectedValues();
+            }
+            this.pDisabled = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FindLocationComponent.prototype, "services", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.pServices;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            var _this = this;
+            this.pServices = value;
+            /** @type {?} */
+            var field = this.fields.find((/**
+             * @param {?} f
+             * @return {?}
+             */
+            function (f) { return 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 {?}
+                     */
+                    function (x) { return x !== 'services_all'; })).join(',');
+                }
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    FindLocationComponent.prototype.addLocation = /**
+     * @return {?}
+     */
+    function () {
+        if (this.tempSelectedLocation) {
+            this.selectedLocations = __spread(this.selectedLocations, [this.tempSelectedLocation]);
+            this.addSelectedLocationsToForm([this.tempSelectedLocation]);
+            this.tempSelectedLocation = null;
+            this.locations = [];
+            this.searchLocationComponent.resetSearchTerm();
+        }
+    };
+    /**
+     * @param {?} location
+     * @return {?}
+     */
+    FindLocationComponent.prototype.removeLocation = /**
+     * @param {?} location
+     * @return {?}
+     */
+    function (location) {
+        if (location.epims_id) {
+            this.selectedLocations = this.selectedLocations.filter((/**
+             * @param {?} selectedLocation
+             * @return {?}
+             */
+            function (selectedLocation) { return selectedLocation.epims_id !== location.epims_id; }));
+            /** @type {?} */
+            var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+            /** @type {?} */
+            var index = ((/** @type {?} */ (formArray.value))).findIndex((/**
+             * @param {?} selectedLocation
+             * @return {?}
+             */
+            function (selectedLocation) { return selectedLocation.epims_id === location.epims_id; }));
+            if (index > -1) {
+                formArray.removeAt(index);
+            }
+        }
+    };
+    /**
+     * @param {?} location
+     * @return {?}
+     */
+    FindLocationComponent.prototype.onLocationSelected = /**
+     * @param {?} location
+     * @return {?}
+     */
+    function (location) {
+        if (this.field.maxSelected === 1) {
+            this.removeSelectedValues();
+            this.addSelectedLocationsToForm([location]);
+        }
+        else {
+            if (!this.selectedLocations.find((/**
+             * @param {?} x
+             * @return {?}
+             */
+            function (x) { return x.epims_id === location.epims_id; }))) {
+                if (location.epims_id) {
+                    this.tempSelectedLocation = location;
+                }
+            }
+        }
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FindLocationComponent.prototype.removeSelectedValues = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
+        var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+        for (var i = 0; i < formArray.length; i++) {
+            formArray.removeAt(i);
+        }
+        this.selectedLocations = [];
+    };
+    /**
+     * @private
+     * @param {?} locations
+     * @return {?}
+     */
+    FindLocationComponent.prototype.addSelectedLocationsToForm = /**
+     * @private
+     * @param {?} locations
+     * @return {?}
+     */
+    function (locations) {
+        var e_1, _a;
+        /** @type {?} */
+        var formArray = (/** @type {?} */ (this.form.get(this.field.name)));
+        try {
+            for (var locations_1 = __values(locations), locations_1_1 = locations_1.next(); !locations_1_1.done; locations_1_1 = locations_1.next()) {
+                var location_1 = locations_1_1.value;
+                formArray.push(new FormControl(location_1));
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (locations_1_1 && !locations_1_1.done && (_a = locations_1.return)) _a.call(locations_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+    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 }]
+    };
+    return FindLocationComponent;
+}());
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/components/pagination/pagination.component.ts
@@ -4366,6 +4418,49 @@ var RadioFilterFieldConfig = /** @class */ (function () {
  * @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 {?} */
+var getAllCaseworkersFromServices = (/**
+ * @param {?} caseworkersByService
+ * @return {?}
+ */
+function (caseworkersByService) {
+    /** @type {?} */
+    var allCaseworkers = [];
+    caseworkersByService.forEach((/**
+     * @param {?} caseworkerListByService
+     * @return {?}
+     */
+    function (caseworkerListByService) {
+        allCaseworkers = allCaseworkers.concat(caseworkerListByService.caseworkers);
+    }));
+    return allCaseworkers;
+});
+/** @type {?} */
+var getSessionStorageKeyForServiceId = (/**
+ * @param {?} serviceId
+ * @return {?}
+ */
+function (serviceId) {
+    return serviceId + "-caseworkers";
+});
+/** @type {?} */
+var setCaseworkers = (/**
+ * @param {?} serviceId
+ * @param {?} caseworkers
+ * @param {?} sessionStorageService
+ * @return {?}
+ */
+function (serviceId, caseworkers, sessionStorageService) {
+    /** @type {?} */
+    var sessionKey = getSessionStorageKeyForServiceId(serviceId);
+    sessionStorageService.setItem(sessionKey, JSON.stringify(caseworkers));
+});
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/services/session-storage/session-storage.service.ts
@@ -4504,35 +4599,60 @@ var FindAPersonService = /** @class */ (function () {
             var 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 {?}
-             */
-            function (caseworkerList) { return _this.sessionStorageService.setItem(FindAPersonService.caseworkersKey, JSON.stringify(caseworkerList)); })));
-        }
         /** @type {?} */
-        var caseworkers = JSON.parse(this.sessionStorageService.getItem(FindAPersonService.caseworkersKey));
+        var fullServices = searchOptions.services;
         /** @type {?} */
-        var roleCategory = RoleCategory.ALL;
-        if (!(searchOptions.jurisdiction === PersonRole.ALL)) {
-            roleCategory = searchOptions.jurisdiction === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
-        }
+        var storedServices = [];
         /** @type {?} */
-        var people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
-        /** @type {?} */
-        var searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
+        var newServices = [];
         /** @type {?} */
-        var finalPeopleList = people.filter((/**
-         * @param {?} person
+        var storedCaseworkersByService = [];
+        fullServices.forEach((/**
+         * @param {?} serviceId
          * @return {?}
          */
-        function (person) { return person && person.name && person.name.toLowerCase().includes(searchTerm); }));
-        return searchOptions.userIncluded ? of(finalPeopleList) : of(finalPeopleList.filter((/**
-         * @param {?} person
+        function (serviceId) {
+            /** @type {?} */
+            var 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 {?} */
+            var 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: fullServices }).pipe(tap((/**
+         * @param {?} caseworkersByService
          * @return {?}
          */
-        function (person) { return person && person.id !== _this.userId; })));
+        function (caseworkersByService) {
+            caseworkersByService.forEach((/**
+             * @param {?} caseworkerListByService
+             * @return {?}
+             */
+            function (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 {?}
+         */
+        function (caseworkersByService) {
+            /** @type {?} */
+            var givenCaseworkers = getAllCaseworkersFromServices(caseworkersByService);
+            return _this.searchInCaseworkers(givenCaseworkers, searchOptions);
+        })));
     };
     /**
      * @param {?} caseworkers
@@ -4565,6 +4685,39 @@ var FindAPersonService = /** @class */ (function () {
         }));
         return people;
     };
+    /**
+     * @param {?} caseworkers
+     * @param {?} searchOptions
+     * @return {?}
+     */
+    FindAPersonService.prototype.searchInCaseworkers = /**
+     * @param {?} caseworkers
+     * @param {?} searchOptions
+     * @return {?}
+     */
+    function (caseworkers, searchOptions) {
+        var _this = this;
+        /** @type {?} */
+        var roleCategory = RoleCategory.ALL;
+        if (!(searchOptions.userRole === PersonRole.ALL)) {
+            roleCategory = searchOptions.userRole === PersonRole.CASEWORKER ? RoleCategory.CASEWORKER : RoleCategory.ADMIN;
+        }
+        /** @type {?} */
+        var searchTerm = searchOptions && searchOptions.searchTerm ? searchOptions.searchTerm.toLowerCase() : '';
+        /** @type {?} */
+        var people = caseworkers ? this.mapCaseworkers(caseworkers, roleCategory) : [];
+        /** @type {?} */
+        var finalPeopleList = people.filter((/**
+         * @param {?} person
+         * @return {?}
+         */
+        function (person) { return person && person.name && person.name.toLowerCase().includes(searchTerm); }));
+        return searchOptions.userIncluded ? finalPeopleList : finalPeopleList.filter((/**
+         * @param {?} person
+         * @return {?}
+         */
+        function (person) { return person && person.id !== _this.userId; }));
+    };
     FindAPersonService.caseworkersKey = 'caseworkers';
     FindAPersonService.decorators = [
         { type: Injectable, args: [{
@@ -4586,8 +4739,9 @@ var FindAPersonService = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var FindPersonComponent = /** @class */ (function () {
-    function FindPersonComponent(findPersonService) {
+    function FindPersonComponent(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.';
@@ -4596,16 +4750,18 @@ var FindPersonComponent = /** @class */ (function () {
         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;
     }
     /**
@@ -4622,13 +4778,34 @@ var FindPersonComponent = /** @class */ (function () {
         else {
             this.findPersonGroup.addControl('findPersonControl', this.findPersonControl);
         }
-        this.filteredOptions = this.findPersonControl.valueChanges.pipe(startWith(''), switchMap((/**
+        this.findPersonControl.valueChanges.pipe(startWith(''), tap((/**
+         * @return {?}
+         */
+        function () { return _this.showAutocomplete = false; })), tap((/**
+         * @return {?}
+         */
+        function () { return _this.filteredOptions = []; })), filter((/**
          * @param {?} searchTerm
          * @return {?}
          */
-        function (searchTerm) {
-            return _this.filter(searchTerm || '');
-        })));
+        function (searchTerm) { return searchTerm && searchTerm.length > _this.minSearchCharacters; })), switchMap((/**
+         * @param {?} searchTerm
+         * @return {?}
+         */
+        function (searchTerm) { return _this.filter(searchTerm).pipe(tap((/**
+         * @return {?}
+         */
+        function () { return _this.showAutocomplete = true; })), catchError((/**
+         * @return {?}
+         */
+        function () { return _this.filteredOptions = []; }))); }))).subscribe((/**
+         * @param {?} people
+         * @return {?}
+         */
+        function (people) {
+            _this.filteredOptions = people;
+            _this.cd.detectChanges();
+        }));
         this.findPersonControl.setValue(this.selectedPerson);
     };
     /**
@@ -4660,9 +4837,9 @@ var FindPersonComponent = /** @class */ (function () {
     function (searchTerm) {
         var _this = this;
         /** @type {?} */
-        var findJudicialPeople = this.findPersonService.find({ searchTerm: searchTerm, jurisdiction: this.domain });
+        var findJudicialPeople = this.findPersonService.find({ searchTerm: searchTerm, userRole: this.domain, services: this.services });
         /** @type {?} */
-        var findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm: searchTerm, jurisdiction: this.domain });
+        var findCaseworkersOrAdmins = this.findPersonService.findCaseworkers({ searchTerm: searchTerm, userRole: this.domain, services: this.services });
         if (searchTerm && searchTerm.length > this.minSearchCharacters) {
             switch (this.domain) {
                 case PersonRole.JUDICIAL: {
@@ -4702,24 +4879,25 @@ var FindPersonComponent = /** @class */ (function () {
                     return findCaseworkersOrAdmins;
                 }
                 default: {
-                    return of();
+                    return of([]);
                 }
             }
         }
-        return of();
+        return of([]);
     };
     /**
-     * @param {?=} selectedPerson
+     * @param {?} selectedPerson
      * @return {?}
      */
     FindPersonComponent.prototype.onSelectionChange = /**
-     * @param {?=} selectedPerson
+     * @param {?} selectedPerson
      * @return {?}
      */
     function (selectedPerson) {
         this.isPersonSelectionCompleted = true;
-        this.choosenPerson = selectedPerson;
+        this.chosenPerson = selectedPerson;
         this.personSelected.emit(selectedPerson);
+        this.findPersonControl.setValue('');
     };
     /**
      * @param {?} currentValue
@@ -4732,7 +4910,7 @@ var FindPersonComponent = /** @class */ (function () {
     function (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
@@ -4743,6 +4921,9 @@ var FindPersonComponent = /** @class */ (function () {
      * @return {?}
      */
     function (selectedPerson) {
+        if (!selectedPerson) {
+            return '';
+        }
         if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
             return selectedPerson.knownAs + "(" + selectedPerson.email + ")";
         }
@@ -4751,13 +4932,14 @@ var FindPersonComponent = /** @class */ (function () {
     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 = function () { return [
-        { type: FindAPersonService }
+        { type: FindAPersonService },
+        { type: ChangeDetectorRef }
     ]; };
     FindPersonComponent.propDecorators = {
         personSelected: [{ type: Output }],
@@ -4775,7 +4957,8 @@ var FindPersonComponent = /** @class */ (function () {
         showUpdatedColor: [{ type: Input }],
         selectedPersons: [{ type: Input }],
         errorMessage: [{ type: Input }],
-        idValue: [{ type: Input }]
+        idValue: [{ type: Input }],
+        services: [{ type: Input }]
     };
     return FindPersonComponent;
 }());
@@ -5858,7 +6041,8 @@ var ExuiCommonLibModule = /** @class */ (function () {
                         ReactiveFormsModule,
                         RouterModule.forChild([]),
                         MatAutocompleteModule,
-                        MatTabsModule
+                        MatTabsModule,
+                        MatInputModule
                     ],
                     providers: [
                         { provide: windowToken, useFactory: ɵ0 }