@hmcts/rpx-xui-common-lib 1.6.7-generic-filter-show-cancel-button → 1.6.7-location-integration

package/bundles/hmcts-rpx-xui-common-lib.umd.js

@@ -839,7 +839,7 @@
      * @param {?} values
      * @return {?}
      */
-    function getCheckBoxesValues(options, values) {
+    function getValues(options, values) {
         return options.reduce(( /**
          * @param {?} acc
          * @param {?} option
@@ -1069,7 +1069,7 @@
          * @param {?} form
          * @return {?}
          */
-        GenericFilterComponent.prototype.selectChanged =
+        GenericFilterComponent.prototype.fieldChanged =
             // when domain changes ensure that person field is reset
             /**
              * @param {?} field
@@ -1077,48 +1077,28 @@
              * @return {?}
              */
             function (field, form) {
+                var e_1, _a;
                 // TODO - Do similar with jurisdiction/service for caseworkers by services
-                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;
+                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);
                 }
             };
         /**
@@ -1136,6 +1116,7 @@
                 var settings = __assign({}, this.settings, { reset: true });
                 this.filterService.persist(settings, this.config.persistence);
                 this.filterService.givenErrors.next(null);
+                this.submitted = false;
             };
         /**
          * @param {?} values
@@ -1148,7 +1129,7 @@
          * @return {?}
          */
             function (values, field) {
-                var e_1, _a;
+                var e_2, _a;
                 /** @type {?} */
                 var keys = Object.keys(values);
                 try {
@@ -1159,8 +1140,8 @@
                         }
                     }
                 }
-                catch (e_1_1) {
-                    e_1 = { error: e_1_1 };
+                catch (e_2_1) {
+                    e_2 = { error: e_2_1 };
                 }
                 finally {
                     try {
@@ -1168,8 +1149,8 @@
                             _a.call(keys_1);
                     }
                     finally {
-                        if (e_1)
-                            throw e_1.error;
+                        if (e_2)
+                            throw e_2.error;
                     }
                 }
             };
@@ -1252,6 +1233,61 @@
                     }
                 }));
             };
+        /**
+         * @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 forms.FormArray) {
+                    for (var i = 0; i < control.length; i++) {
+                        control.removeAt(i);
+                    }
+                }
+                else if (control instanceof forms.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 forms.FormControl) {
+                    /** @type {?} */
+                    var value = defaultValue && defaultValue.value && defaultValue.value.length ? defaultValue.value[0] : null;
+                    control.setValue(value);
+                }
+            };
         /**
          * @private
          * @param {?} filter
@@ -1299,7 +1335,7 @@
          * @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({});
@@ -1361,7 +1397,7 @@
                         }
                         // 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);
                         }
                     }
                 };
@@ -1372,8 +1408,8 @@
                         _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 {
@@ -1381,8 +1417,8 @@
                             _a.call(_b);
                     }
                     finally {
-                        if (e_2)
-                            throw e_2.error;
+                        if (e_4)
+                            throw e_4.error;
                     }
                 }
             };
@@ -1399,7 +1435,7 @@
          * @return {?}
          */
             function (field, settings) {
-                var e_3, _a;
+                var e_5, _a;
                 /** @type {?} */
                 var validators = GenericFilterComponent.addFormValidators(field);
                 /** @type {?} */
@@ -1429,8 +1465,8 @@
                         _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 {
@@ -1438,8 +1474,8 @@
                             _a.call(_b);
                     }
                     finally {
-                        if (e_3)
-                            throw e_3.error;
+                        if (e_5)
+                            throw e_5.error;
                     }
                 }
                 return formArray;
@@ -1457,7 +1493,7 @@
          * @return {?}
          */
             function (field, settings) {
-                var e_4, _a;
+                var e_6, _a;
                 /** @type {?} */
                 var validators = GenericFilterComponent.addFormValidators(field);
                 /** @type {?} */
@@ -1469,23 +1505,25 @@
                      * @param {?} f
                      * @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 forms.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 forms.FormControl(defaultValue));
+                            }
+                        }
+                        catch (e_6_1) {
+                            e_6 = { error: e_6_1 };
                         }
                         finally {
-                            if (e_4)
-                                throw e_4.error;
+                            try {
+                                if (_c && !_c.done && (_a = _b.return))
+                                    _a.call(_b);
+                            }
+                            finally {
+                                if (e_6)
+                                    throw e_6.error;
+                            }
                         }
                     }
                 }
@@ -1520,7 +1558,7 @@
                             return { value: values, name: name };
                         }
                         else {
-                            return { value: getCheckBoxesValues(field.options, values), name: name };
+                            return { value: getValues(field.options, values), name: name };
                         }
                     }
                     else {
@@ -1539,7 +1577,7 @@
          * @return {?}
          */
             function (form) {
-                var e_5, _a;
+                var e_7, _a;
                 /** @type {?} */
                 var errors = [];
                 try {
@@ -1555,8 +1593,8 @@
                         }
                     }
                 }
-                catch (e_5_1) {
-                    e_5 = { error: e_5_1 };
+                catch (e_7_1) {
+                    e_7 = { error: e_7_1 };
                 }
                 finally {
                     try {
@@ -1564,8 +1602,8 @@
                             _a.call(_b);
                     }
                     finally {
-                        if (e_5)
-                            throw e_5.error;
+                        if (e_7)
+                            throw e_7.error;
                     }
                 }
                 if (errors.length) {
@@ -1575,7 +1613,7 @@
         GenericFilterComponent.decorators = [
             { type: i0.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 *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
+                        template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <div class=\"govuk-form-group xui-generic-filter\"\n         [hidden]=\"hidden(field, form)\"\n         [id]=\"field.name\"\n         [ngClass]=\"{'form-group-error': submitted && (form.get(field.name).errors?.minLength || form.get(field.name).errors?.maxLength)}\">\n      <h3 *ngIf=\"field.title\" class=\"govuk-heading-s\">{{field.title}}</h3>\n      <p class=\"govuk-body\" *ngIf=\"field.subTitle\">{{field.subTitle}}</p>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMinSelectedError && submitted && form.get(field.name).errors?.minLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.minSelectedError}}\n      </span>\n      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\" *ngIf=\"field.displayMaxSelectedError && submitted && form.get(field.name).errors?.maxLength\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.maxSelectedError}}\n      </span>\n      <div class=\"govuk-body\" [ngSwitch]=\"field.type\">\n        <ng-container *ngSwitchCase=\"'select'\">\n          <select class=\"govuk-select\" (change)=\"fieldChanged(field, form)\" [attr.disabled]=\"disabled(field, form)\" [name]=\"'select_' + field.name\" [id]=\"'select_' + field.name\" [formControlName]=\"field.name\">\n            <option disabled selected hidden value=\"\">{{field.disabledText}}</option>\n            <option class=\"govuk-radios__item\" *ngFor=\"let item of field.options\" [value]=\"item.key\">{{item.label}}</option>\n          </select>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox'\">\n          <div class=\"govuk-checkboxes govuk-checkboxes--small\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'checkbox-large'\">\n          <div class=\"govuk-checkboxes\" [formGroupName]=\"field.name\" [attr.field]=\"field.name\" [id]=\"'checkbox_' + field.name\">\n            <div *ngFor=\"let item of field.options; let i = index\" class=\"govuk-checkboxes__item\">\n              <input type=\"checkbox\" class=\"govuk-checkboxes__input\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [formControlName]=\"i\"\n                     (change)=\"toggleSelectAll($event, form, item, field)\"\n                     [value]=\"item.key\" [id]=\"'checkbox_' + item.key\"\n                     [name]=\"'checkbox_' + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              [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 *ngIf=\"config.showCancelFilterButton\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\"\n        type=\"button\"\n        id=\"cancelFilter\"\n        (click)=\"cancelFilter()\">{{ config.cancelButtonText || 'Cancel'}}</button>\n    </div>\n  </div>\n</form>\n",
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         encapsulation: i0.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}"]
@@ -3665,168 +3703,6 @@
         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 forms.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 forms.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: i0.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: i0.Input }],
-            submitted: [{ type: i0.Input }],
-            form: [{ type: i0.Input }],
-            field: [{ type: i0.Input }],
-            fields: [{ type: i0.Input }],
-            services: [{ type: i0.Input }]
-        };
-        return FindLocationComponent;
-    }());
-
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/services/locations/location.service.ts
@@ -3841,21 +3717,21 @@
          * @param serviceIds: SSCS | SSCS,IA split with ','
          * @param locationType: optional | hearing | case_management
          * @param searchTerm: any search term for postcode | site name | venue name |court name | court address etc.
-         * @return Observable<LocationByEPIMSModel[]>: Array of locationModel in Observable
+         * @return Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
          */
         /**
          * \@description getAllLocations from service Ids/location type/search term
          * @param {?} serviceIds
          * @param {?} locationType
          * @param {?} searchTerm
-         * @return {?} Observable<LocationByEPIMSModel[]>: Array of locationModel in Observable
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
          */
         LocationService.prototype.getAllLocations = /**
          * \@description getAllLocations from service Ids/location type/search term
          * @param {?} serviceIds
          * @param {?} locationType
          * @param {?} searchTerm
-         * @return {?} Observable<LocationByEPIMSModel[]>: Array of locationModel in Observable
+         * @return {?} Observable<LocationByEPIMMSModel[]>: Array of locationModel in Observable
          */
             function (serviceIds, locationType, searchTerm) {
                 return this.http.get("api/locations/getLocations?serviceIds=" + serviceIds + "&locationType=" + locationType + "&searchTerm=" + searchTerm);
@@ -3886,6 +3762,7 @@
             this.fb = fb;
             this.cd = cd;
             this.disabled = null;
+            this.singleMode = false;
             this.locationType = '';
             this.serviceIds = '';
             this.submitted = true;
@@ -3893,15 +3770,31 @@
             this.showAutocomplete = false;
             this.locations = [];
             this.locationSelected = new i0.EventEmitter();
-            this.term = '';
-            this.readyAfterContent = false;
+            this.locationInputChanged = new i0.EventEmitter();
             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 {?}
@@ -3913,20 +3806,10 @@
              * @return {?}
              */ function (value) {
                 this.pSelectedLocations = value;
-                this.showAutocomplete = false;
             },
             enumerable: true,
             configurable: true
         });
-        /**
-         * @return {?}
-         */
-        SearchLocationComponent.prototype.ngAfterContentInit = /**
-         * @return {?}
-         */
-            function () {
-                this.readyAfterContent = true;
-            };
         /**
          * @return {?}
          */
@@ -3934,22 +3817,13 @@
          * @return {?}
          */
             function () {
-                if (this.control) {
-                    if (this.findLocationFormGroup && this.findLocationFormGroup.controls) {
-                        this.findLocationFormGroup.controls.locationSelectedFormControl = this.control;
-                    }
+                if (this.singleMode && this.selectedLocations.length > 0) {
+                    /** @type {?} */
+                    var location_1 = this.selectedLocations[0];
+                    this.form.controls.searchTerm.patchValue(location_1.venue_name, { emitEvent: false, onlySelf: true });
                 }
                 this.search();
             };
-        /**
-         * @return {?}
-         */
-        SearchLocationComponent.prototype.onKeyDown = /**
-         * @return {?}
-         */
-            function () {
-                this.locationSelected.emit();
-            };
         /**
          * @param {?} term
          * @return {?}
@@ -3966,23 +3840,16 @@
                  */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 forms.FormArray) {
-                    (( /** @type {?} */(this.findLocationFormGroup.controls.locationSelectedFormControl))).push(new forms.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.venue_name, { emitEvent: false, onlySelf: true });
+                this.locationSelected.emit(location);
             };
         /**
          * @return {?}
@@ -3992,12 +3859,13 @@
          */
             function () {
                 var _this = this;
-                this.findLocationFormGroup.controls.findLocationFormControl.valueChanges
+                this.form.controls.searchTerm.valueChanges
                     .pipe(operators.tap(( /**
+             * @param {?} term
              * @return {?}
-             */function () { return _this.locations = []; })), operators.tap(( /**
+             */function (term) { return _this.locationInputChanged.next(term); })), operators.tap(( /**
                  * @return {?}
-                 */function () { return _this.showAutocomplete = false; })), operators.tap(( /**
+                 */function () { return _this.locations = []; })), operators.tap(( /**
                  * @param {?} term
                  * @return {?}
                  */function (term) { return _this.term = term; })), operators.filter(( /**
@@ -4015,13 +3883,10 @@
                  */function (locations) {
                     _this.locations = locations;
                     _this.cd.markForCheck();
-                    if (locations.length === 1 && _this.term === locations[0].court_name) {
-                        if (_this.findLocationFormGroup.controls.locationSelectedFormControl instanceof forms.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].venue_name && !_this.singleMode) {
+                        _this.locationSelected.emit(locations[0]);
+                        _this.showAutocomplete = false;
+                        return;
                     }
                     _this.showAutocomplete = true;
                 }));
@@ -4040,23 +3905,11 @@
         /**
          * @return {?}
          */
-        SearchLocationComponent.prototype.getControlCourtNameValue = /**
+        SearchLocationComponent.prototype.resetSearchTerm = /**
          * @return {?}
          */
             function () {
-                if (this.findLocationFormGroup.controls.locationSelectedFormControl instanceof forms.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
@@ -4070,6 +3923,9 @@
          */
             function (locations) {
                 var _this = this;
+                if (this.singleMode) {
+                    return locations;
+                }
                 return locations.filter(( /**
                  * @param {?} location
                  * @return {?}
@@ -4077,14 +3933,14 @@
                     return !_this.selectedLocations.map(( /**
                      * @param {?} selectedLocation
                      * @return {?}
-                     */function (selectedLocation) { return selectedLocation.epims_id; })).includes(location.epims_id) && location.court_name;
+                     */function (selectedLocation) { return selectedLocation.epimms_id; })).includes(location.epimms_id) && location.venue_name;
                 }));
             };
         SearchLocationComponent.decorators = [
             { type: i0.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.venue_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 */
@@ -4098,19 +3954,241 @@
         SearchLocationComponent.propDecorators = {
             control: [{ type: i0.Input }],
             disabled: [{ type: i0.Input }],
+            singleMode: [{ type: i0.Input }],
             locationType: [{ type: i0.Input }],
             serviceIds: [{ type: i0.Input }],
             submitted: [{ type: i0.Input }],
             delay: [{ type: i0.Input }],
-            findLocationFormGroup: [{ type: i0.Input }],
+            form: [{ type: i0.Input }],
             showAutocomplete: [{ type: i0.Input }],
             locations: [{ type: i0.Input }],
             locationSelected: [{ type: i0.Output }],
+            locationInputChanged: [{ type: i0.Output }],
+            reset: [{ type: i0.Input }],
             selectedLocations: [{ type: i0.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.epimms_id) {
+                    this.selectedLocations = this.selectedLocations.filter(( /**
+                     * @param {?} selectedLocation
+                     * @return {?}
+                     */function (selectedLocation) { return selectedLocation.epimms_id !== location.epimms_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.epimms_id === location.epimms_id; }));
+                    if (index > -1) {
+                        formArray.removeAt(index);
+                    }
+                }
+            };
+        /**
+         * @param {?} term
+         * @return {?}
+         */
+        FindLocationComponent.prototype.onInputChanged = /**
+         * @param {?} term
+         * @return {?}
+         */
+            function (term) {
+                // if the filter is in single mode clear the selected locations
+                if (typeof term === 'string' && this.field.maxSelected === 1) {
+                    this.removeSelectedValues();
+                }
+            };
+        /**
+         * @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.epimms_id === location.epimms_id; }))) {
+                        if (location.epimms_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 forms.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: i0.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                          (locationInputChanged)=\"onInputChanged($event)\"\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.venue_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                        styles: [""]
+                    }] }
+        ];
+        FindLocationComponent.propDecorators = {
+            selectedLocations: [{ type: i0.Input }],
+            submitted: [{ type: i0.Input }],
+            enableAddLocationButton: [{ type: i0.Input }],
+            form: [{ type: i0.Input }],
+            field: [{ type: i0.Input }],
+            fields: [{ type: i0.Input }],
+            title: [{ type: i0.Input }],
+            searchLocationComponent: [{ type: i0.ViewChild, args: [SearchLocationComponent,] }],
+            disabled: [{ type: i0.Input }],
+            services: [{ type: i0.Input }]
+        };
+        return FindLocationComponent;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * Generated from: lib/components/pagination/pagination.component.ts
@@ -4717,8 +4795,9 @@
      * @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 i0.EventEmitter();
             this.boldTitle = 'Find the person';
             this.subTitle = 'Type the name of the person and select them.';
@@ -4727,7 +4806,7 @@
             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';
@@ -4736,8 +4815,9 @@
             this.isPersonSelectionCompleted = false;
             this.showAutocomplete = false;
             this.currentInputValue = '';
-            this.choosenPerson = ( /** @type {?} */({}));
-            this.findPersonControl = new forms.FormControl();
+            this.chosenPerson = null;
+            this.findPersonControl = new forms.FormControl('');
+            this.filteredOptions = [];
             this.minSearchCharacters = 2;
         }
         /**
@@ -4754,12 +4834,29 @@
                 else {
                     this.findPersonGroup.addControl('findPersonControl', this.findPersonControl);
                 }
-                this.filteredOptions = this.findPersonControl.valueChanges.pipe(operators.startWith(''), operators.switchMap(( /**
+                this.findPersonControl.valueChanges.pipe(operators.startWith(''), operators.tap(( /**
+                 * @return {?}
+                 */function () { return _this.showAutocomplete = false; })), operators.tap(( /**
+                 * @return {?}
+                 */function () { return _this.filteredOptions = []; })), operators.filter(( /**
+                 * @param {?} searchTerm
+                 * @return {?}
+                 */function (searchTerm) { return searchTerm && searchTerm.length > _this.minSearchCharacters; })), operators.switchMap(( /**
                  * @param {?} searchTerm
                  * @return {?}
                  */function (searchTerm) {
-                    return _this.filter(searchTerm || '');
-                })));
+                    return _this.filter(searchTerm).pipe(operators.tap(( /**
+                     * @return {?}
+                     */function () { return _this.showAutocomplete = true; })), operators.catchError(( /**
+                     * @return {?}
+                     */function () { return _this.filteredOptions = []; })));
+                }))).subscribe(( /**
+                 * @param {?} people
+                 * @return {?}
+                 */function (people) {
+                    _this.filteredOptions = people;
+                    _this.cd.detectChanges();
+                }));
                 this.findPersonControl.setValue(this.selectedPerson);
             };
         /**
@@ -4829,24 +4926,25 @@
                             return findCaseworkersOrAdmins;
                         }
                         default: {
-                            return rxjs.of();
+                            return rxjs.of([]);
                         }
                     }
                 }
-                return rxjs.of();
+                return rxjs.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
@@ -4859,7 +4957,7 @@
             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
@@ -4870,6 +4968,9 @@
          * @return {?}
          */
             function (selectedPerson) {
+                if (!selectedPerson) {
+                    return '';
+                }
                 if (selectedPerson.domain === PersonRole.JUDICIAL && selectedPerson.knownAs) {
                     return selectedPerson.knownAs + "(" + selectedPerson.email + ")";
                 }
@@ -4878,14 +4979,15 @@
         FindPersonComponent.decorators = [
             { type: i0.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: i0.ChangeDetectorRef }
             ];
         };
         FindPersonComponent.propDecorators = {
@@ -5986,7 +6088,8 @@
                             forms.ReactiveFormsModule,
                             i2$2.RouterModule.forChild([]),
                             autocomplete.MatAutocompleteModule,
-                            material.MatTabsModule
+                            material.MatTabsModule,
+                            material.MatInputModule
                         ],
                         providers: [
                             { provide: windowToken, useFactory: ɵ0 }