@hmcts/rpx-xui-common-lib 1.8.10-generic-filter-readonly-changes → 1.8.10-generic-filter-readonly-changes-2

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

@@ -856,6 +856,12 @@
                     _this.form.get('user-services').push(new forms.FormControl({ key: 'All', label: 'All' }));
                 }
             };
+            this.searchTermServiceForm = this.fb.group({
+                searchTerm: ['']
+            });
+            this.searchTermLocationForm = this.fb.group({
+                searchTerm: ['']
+            });
         }
         Object.defineProperty(GenericFilterComponent.prototype, "config", {
             get: function () {
@@ -909,7 +915,9 @@
             var services = this.config.fields.find(function (field) { return field.name === 'user-services'; });
             if (services) {
                 this.startFilterSkillsByServices(this.form, services);
-                this.initValuesFromCacheForSkillsByServices();
+                if (!this._config.copyFields) {
+                    this.initValuesFromCacheForSkillsByServices();
+                }
             }
         };
         GenericFilterComponent.prototype.ngOnDestroy = function () {
@@ -986,6 +994,7 @@
             return field.disable ? field.disable : null;
         };
         GenericFilterComponent.prototype.applyFilter = function (form) {
+            var e_1, _a;
             this.submitted = true;
             form.markAsTouched();
             if (form.valid) {
@@ -1001,13 +1010,32 @@
             else {
                 this.emitFormErrors(form);
             }
+            try {
+                for (var _b = __values(this.config.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var field = _c.value;
+                    var fieldName = field.name;
+                    if (fieldName === 'user-services') {
+                        this.searchTermServiceForm.reset();
+                    }
+                    else if (fieldName === 'user-location') {
+                        this.searchTermLocationForm.reset();
+                    }
+                }
+            }
+            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; }
+            }
             if (this._config.applyButtonCallback) {
                 this._config.applyButtonCallback();
             }
         };
         // when domain changes ensure that person field is reset
         GenericFilterComponent.prototype.fieldChanged = function (field, form) {
-            var e_1, _a;
+            var e_2, _a;
             // TODO - Do similar with jurisdiction/service for caseworkers by services
             if (field.changeResetFields && field.changeResetFields.length) {
                 try {
@@ -1016,12 +1044,12 @@
                         this.resetField(resetField, form);
                     }
                 }
-                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                catch (e_2_1) { e_2 = { error: e_2_1 }; }
                 finally {
                     try {
                         if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                     }
-                    finally { if (e_1) throw e_1.error; }
+                    finally { if (e_2) throw e_2.error; }
                 }
             }
         };
@@ -1032,8 +1060,8 @@
                 this.form.get(name).patchValue(value);
             }
         };
-        GenericFilterComponent.prototype.inputServiceChanged = function (e, field) {
-            if (e === undefined) {
+        GenericFilterComponent.prototype.inputServiceChanged = function (selectedNotAddedService, field) {
+            if (selectedNotAddedService === undefined) {
                 this.addAllOption(field);
             }
             else {
@@ -1058,7 +1086,7 @@
             }
         };
         GenericFilterComponent.prototype.updatePersonControls = function (values, field) {
-            var e_2, _a;
+            var e_3, _a;
             var keys;
             if (!values) {
                 keys = Object.keys(this.form.get(field.name).value);
@@ -1075,12 +1103,12 @@
                     }
                 }
             }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
                     if (keys_1_1 && !keys_1_1.done && (_a = keys_1.return)) _a.call(keys_1);
                 }
-                finally { if (e_2) throw e_2.error; }
+                finally { if (e_3) throw e_3.error; }
             }
         };
         GenericFilterComponent.prototype.checkBoxChecked = function (field, i) {
@@ -1090,7 +1118,7 @@
             this.form.get(field.name).patchValue(values);
         };
         GenericFilterComponent.prototype.toggleSelectAll = function (event, form, item, field) {
-            var e_3, _a;
+            var e_4, _a;
             var isChecked = event.target.checked;
             var formArray = form.get(field.name);
             if (!item.selectAll) {
@@ -1135,12 +1163,12 @@
                         this.resetField(resetField, form);
                     }
                 }
-                catch (e_3_1) { e_3 = { error: e_3_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_3) throw e_3.error; }
+                    finally { if (e_4) throw e_4.error; }
                 }
             }
             if (field.name === 'user-services') {
@@ -1172,7 +1200,7 @@
             this.filterSkillsByServices(servicesArray, this.config);
         };
         GenericFilterComponent.prototype.resetField = function (resetField, form) {
-            var e_4, _a;
+            var e_5, _a;
             var control = form.get(resetField);
             var defaultValue = this.config.cancelSetting.fields.find(function (f) { return f.name === resetField; });
             if (control instanceof forms.FormArray) {
@@ -1188,12 +1216,12 @@
                         this.resetField(key, control);
                     }
                 }
-                catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                catch (e_5_1) { e_5 = { error: e_5_1 }; }
                 finally {
                     try {
                         if (keys_2_1 && !keys_2_1.done && (_a = keys_2.return)) _a.call(keys_2);
                     }
-                    finally { if (e_4) throw e_4.error; }
+                    finally { if (e_5) throw e_5.error; }
                 }
             }
             else if (control instanceof forms.FormControl) {
@@ -1216,7 +1244,7 @@
             this._settings = this.filterService.get(this.config.id);
         };
         GenericFilterComponent.prototype.buildForm = function (config, settings, reset) {
-            var e_5, _a;
+            var e_6, _a;
             var findPersonControl = this.form ? this.form.get('findPersonControl') : null;
             this.form = this.fb.group({});
             if (findPersonControl) {
@@ -1281,16 +1309,16 @@
                     _loop_1(field);
                 }
             }
-            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            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_5) throw e_5.error; }
+                finally { if (e_6) throw e_6.error; }
             }
         };
         GenericFilterComponent.prototype.buildCheckBoxFormArray = function (field, settings) {
-            var e_6, _a;
+            var e_7, _a;
             var validators = GenericFilterComponent.addFormValidators(field);
             var formArray = this.fb.array([], validators);
             var defaultValues;
@@ -1310,17 +1338,17 @@
                     _loop_2(option);
                 }
             }
-            catch (e_6_1) { e_6 = { error: e_6_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_6) throw e_6.error; }
+                finally { if (e_7) throw e_7.error; }
             }
             return formArray;
         };
         GenericFilterComponent.prototype.buildFormArray = function (field, settings) {
-            var e_7, _a;
+            var e_8, _a;
             var validators = GenericFilterComponent.addFormValidators(field);
             var formArray = this.fb.array([], validators);
             var defaultValues;
@@ -1333,12 +1361,12 @@
                             formArray.push(new forms.FormControl(defaultValue));
                         }
                     }
-                    catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                    catch (e_8_1) { e_8 = { error: e_8_1 }; }
                     finally {
                         try {
                             if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                         }
-                        finally { if (e_7) throw e_7.error; }
+                        finally { if (e_8) throw e_8.error; }
                     }
                 }
             }
@@ -1362,26 +1390,33 @@
             });
         };
         GenericFilterComponent.prototype.emitFormErrors = function (form) {
-            var e_8, _a;
+            var e_9, _a;
             var errors = [];
             try {
                 for (var _b = __values(this.config.fields), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var field = _c.value;
-                    var formGroup = form.get(field.name);
+                    var fieldName = field.name;
+                    var formGroup = form.get(fieldName);
                     if (formGroup && formGroup.errors && (formGroup.errors.minlength || formGroup.errors.required)) {
-                        errors.push({ name: field.name, error: field.minSelectedError });
+                        errors.push({ name: fieldName, error: field.minSelectedError });
+                        if (fieldName === 'user-services') {
+                            this.searchTermServiceForm.reset();
+                        }
+                        else if (fieldName === 'user-location') {
+                            this.searchTermLocationForm.reset();
+                        }
                     }
                     if (formGroup && formGroup.errors && formGroup.errors.maxlength) {
-                        errors.push({ name: field.name, error: field.maxSelectedError });
+                        errors.push({ name: fieldName, error: field.maxSelectedError });
                     }
                 }
             }
-            catch (e_8_1) { e_8 = { error: e_8_1 }; }
+            catch (e_9_1) { e_9 = { error: e_9_1 }; }
             finally {
                 try {
                     if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
-                finally { if (e_8) throw e_8.error; }
+                finally { if (e_9) throw e_9.error; }
             }
             // remove duplicates
             errors = errors.filter(function (filterError, i, arr) {
@@ -1451,29 +1486,56 @@
                     userSkillsCheckboxField.options = [];
                     userSkillsCheckboxField.options = this.filteredSkillsByServicesCheckbox;
                     this.form.setControl('user-skills', new forms.FormArray([]));
-                    this.filteredSkillsByServicesCheckbox.forEach(function () {
-                        _this.form.get('user-skills').push(new forms.FormControl(false));
-                    });
-                    var prevValues = this.filteredSkillsByServicesCheckbox.map(function (skill) {
-                        var selected = false;
-                        if (_this.settings && _this.settings.fields) {
-                            if (_this.previousSelectedNestedCheckbox.length > 0) {
-                                selected = _this.previousSelectedNestedCheckbox.includes(skill.key);
-                            }
-                            var isSelectedUserSkill = void 0;
-                            var selectedUserSkills = _this.settings.fields.find(function (setting) { return setting.name === 'user-skills'; });
-                            if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
-                                isSelectedUserSkill = selectedUserSkills.value.findIndex(function (val) { return Number(val) === Number(skill.key); });
-                                selected = isSelectedUserSkill !== -1;
+                    if (!this._config.copyFields) {
+                        this.filteredSkillsByServicesCheckbox.forEach(function () {
+                            _this.form.get('user-skills').push(new forms.FormControl(false));
+                        });
+                        var prevValues = this.filteredSkillsByServicesCheckbox.map(function (skill) {
+                            var selected = false;
+                            if (_this.settings && _this.settings.fields) {
+                                if (_this.previousSelectedNestedCheckbox.length > 0) {
+                                    selected = _this.previousSelectedNestedCheckbox.includes(skill.key);
+                                }
+                                var isSelectedUserSkill = void 0;
+                                var selectedUserSkills = _this.settings.fields.find(function (setting) { return setting.name === 'user-skills'; });
+                                if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
+                                    isSelectedUserSkill = selectedUserSkills.value.findIndex(function (val) { return Number(val) === Number(skill.key); });
+                                    selected = isSelectedUserSkill !== -1;
+                                }
+                                if (_this.previousSelectedNestedCheckbox.length > 0) {
+                                    // Pick up from previous selected
+                                    selected = _this.previousSelectedNestedCheckbox.includes(String(skill.key));
+                                }
                             }
-                            if (_this.previousSelectedNestedCheckbox.length > 0) {
-                                // Pick up from previous selected
-                                selected = _this.previousSelectedNestedCheckbox.includes(String(skill.key));
+                            return selected;
+                        });
+                        this.form.get('user-skills').setValue(prevValues);
+                    }
+                    else {
+                        var preSelectedSkills_1 = [];
+                        this.filteredSkillsByServicesCheckbox.map(function (skillsByServices, index) {
+                            for (var i = 0; i < _this._config.preSelectedNestedCheckbox.length; i++) {
+                                var skillCopyValue = _this._config.preSelectedNestedCheckbox[i];
+                                if (skillCopyValue.toString() === skillsByServices.key.toString()) {
+                                    preSelectedSkills_1[index] = true;
+                                    break;
+                                }
+                                else {
+                                    preSelectedSkills_1[index] = false;
+                                }
                             }
+                        });
+                        if (preSelectedSkills_1.length > 0) {
+                            preSelectedSkills_1.forEach(function (h) {
+                                _this.form.get('user-skills').push(new forms.FormControl(h));
+                            });
                         }
-                        return selected;
-                    });
-                    this.form.get('user-skills').setValue(prevValues);
+                        else {
+                            this.filteredSkillsByServicesCheckbox.map(function () {
+                                _this.form.get('user-skills').push(new forms.FormControl(false));
+                            });
+                        }
+                    }
                     return this.filteredSkillsByServicesCheckbox;
                 }
             }
@@ -1513,7 +1575,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    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\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         <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n          <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n            {{field.title | capitalize}}\n          </h3>\n          <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n            {{ field.titleHint }}\n          </div>\n        </div>\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      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n        *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.emailError}}\n      </span>\n        <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [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 *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</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=\"'group-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 *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n              <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n            </optgroup>\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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + 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=\"'nested-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 filteredSkillsByServicesCheckbox; 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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + 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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n                              [services]=\"form.get(field.servicesField)?.value\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [field]=\"field\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-task-name'\">\n          <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                              (taskNameFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findTaskNameGroup]=\"form\"\n                              [selectedTaskName]=\"form.get(field.name).value.taskName\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-task-name>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputServiceChanged($event, field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [selectedServices]=\"form.get(field.name)?.value\"\n                                [services]=\"field.options\"\n                                [field]=\"field\">\n          ></xuilib-find-service>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text-input'\">\n          <input class=\"govuk-input\" type=\"text\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email-input'\">\n          <input class=\"govuk-input\" type=\"email\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\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    <ng-container [ngSwitch]=\"field.type\">\n      <ng-container *ngSwitchCase=\"'group-title'\">\n        <div [class]=\"field.titleClasses ? field.titleClasses: 'govuk-label govuk-label--m govuk-!-margin-bottom-4'\">\n          {{ field.name | capitalize }}\n        </div>\n    </ng-container>\n      <ng-container *ngSwitchDefault>\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         <div *ngIf=\"field.title\" class=\"xui-generic-filter__field-title\">\n          <h3 [class]=\"field.titleClasses ? field.titleClasses : 'govuk-heading-s'\" style=\"margin-bottom: 0!important\">\n            {{field.title | capitalize}}\n          </h3>\n          <div *ngIf=\"field?.titleHint\" class=\"govuk-!-margin-left-2\">\n            {{ field.titleHint }}\n          </div>\n        </div>\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      <span [id]=\"field.name + '-error'\" class=\"govuk-error-message\"\n        *ngIf=\"field.emailError && submitted && form.get(field.name).errors?.email\">\n        <span class=\"govuk-visually-hidden\">Error:</span> {{field.emailError}}\n      </span>\n        <div class=\"govuk-body\"  [class.govuk-body--maxWidth480px]=\"field.maxWidth480px\" [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 *ngIf=\"field.defaultOption\" [attr.selected]=\"true\" [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</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=\"'group-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 *ngIf=\"field.defaultOption\" selected [value]=\"field.defaultOption.key\">{{field.defaultOption.label}}</option>\n            <optgroup *ngFor = 'let grp of filteredSkillsByServices' label=\"{{grp.group | titlecase}}\">\n              <option *ngFor = 'let item of grp.options' [value]=\"item.key\">{{item.label}}</option>\n            </optgroup>\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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + 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=\"'nested-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 filteredSkillsByServicesCheckbox; 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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + 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_' + field.name + item.key\"\n                     [name]=\"'checkbox_' + field.name + item.key\"\n              />\n              <label\n                [for]=\"'checkbox_' + field.name + item.key\"\n                class=\"govuk-label govuk-checkboxes__label\"\n                [ngClass]=\"{'govuk-!-font-weight-bold': item.selectAll}\"\n              >{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'radio'\">\n          <div class=\"govuk-radios\">\n            <div *ngFor=\"let item of field.options\" class=\"govuk-radios__item\">\n              <input type=\"radio\"\n                     [formControlName]=\"field.name\"\n                     [id]=\"'radio_' + item.key\"\n                     [attr.disabled]=\"disabled(field, form)\"\n                     [checked]=\"item.key === form.get(field.name).value\"\n                     class=\"govuk-radios__input\"\n                     [value]=\"item.key\"\n                     (change)=\"fieldChanged(field, form)\"\n              />\n              <label [for]=\"'radio_' + item.key\" class=\"govuk-label govuk-radios__label\">{{item.label}}</label>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-person'\">\n          <xuilib-find-person subTitle=\"\" (personSelected)=\"updatePersonControls($event, field)\"\n                              (personFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findPersonGroup]=\"form\"\n                              [selectedPerson]=\"form.get(field.name)?.value?.email\"\n                              [userIncluded]=\"false\"\n                              [placeholderContent]=\"field.placeholderContent ? field.placeholderContent : ''\"\n                              [services]=\"form.get(field.servicesField)?.value\"\n          ></xuilib-find-person>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-location'\">\n          <xuilib-find-location (locationFieldChanged)=\"inputChanged(field)\"\n                                [form]=\"form\"\n                                [fields]=\"config.fields\"\n                                [searchTermLocationForm]=\"searchTermLocationForm\"\n                                [locationTitle]=\"field.locationTitle\"\n                                [enableAddLocationButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [disableInputField]=\"field.disable\"\n                                [selectedLocations]=\"form.get(field.name)?.value\"\n                                [submitted]=\"submitted\"\n                                [field]=\"field\"\n                                [services]=\"form.get(field.findLocationField)?.value\"\n          ></xuilib-find-location>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-task-name'\">\n          <xuilib-find-task-name subTitle=\"\" (taskNameSelected)=\"updateTaskNameControls($event, field)\"\n                              (taskNameFieldChanged)=\"inputChanged(field)\"\n                              [submitted]=\"submitted\"\n                              [disabled]=\"disabled(field, form)\"\n                              [domain]=\"form.get(field.domainField)?.value\"\n                              [findTaskNameGroup]=\"form\"\n                              [selectedTaskName]=\"form.get(field.name).value.taskName\"\n                              [userIncluded]=\"false\"\n          ></xuilib-find-task-name>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'find-service'\">\n          <xuilib-find-service (serviceFieldChanged)=\"inputServiceChanged($event, field)\"\n                                [form]=\"form\"\n                                [searchTermServiceForm]=\"searchTermServiceForm\"\n                                [fields]=\"config.fields\"\n                                [title]=\"field.title\"\n                                [enableAddServiceButton]=\"field.enableAddButton\"\n                                [disabled]=\"disabled(field, form)\"\n                                [selectedServices]=\"form.get(field.name)?.value\"\n                                [services]=\"field.options\"\n                                [field]=\"field\">\n          ></xuilib-find-service>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'text-input'\">\n          <input class=\"govuk-input\" type=\"text\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [attr.maxlength]=\"field.maxlength ? field.maxlength : null\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'email-input'\">\n          <input class=\"govuk-input\" type=\"email\"\n                 [formControlName]=\"field.name\"\n                 [id]=\"field.name\"\n                 [attr.disabled]=\"disabled(field, form)\"\n                 (change)=\"fieldChanged(field, form)\"\n                 [readonly]=\"field.readonly\"\n          />\n        </ng-container>\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\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{margin-bottom:20px}@media (min-width:40.0625em){.contain-classes .elevated-break{margin-bottom:30px}}.contain-classes .govuk-body--maxWidth480px{max-width:480px}.contain-classes .xui-generic-filter .select-all{margin-bottom:10px}.contain-classes .xui-generic-filter .govuk-checkboxes{display:flex;flex-direction:column;flex-wrap:wrap}.contain-classes .xui-generic-filter .govuk-checkboxes>div{flex-grow:1;flex-shrink:0}.contain-classes .xui-generic-filter__field-title{display:flex;align-items:center;margin-bottom:10px}.contain-classes .govuk-select{width:100%}"]
@@ -3212,7 +3274,7 @@
     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=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                    template: "<div class=\"location-picker-custom\">\n  <div class=\"search-location\">\n    <div>\n      <label id=\"input-selected-location-label\" *ngIf=\"locationTitle\">{{locationTitle}}</label>\n    </div>\n    <exui-search-location class=\"search-location\"\n                          [form]=\"searchTermLocationForm\"\n                          [locations]=\"locations\"\n                          [selectedLocations]=\"selectedLocations\"\n                          [singleMode]=\"field.maxSelected === 1\"\n                          [bookingCheck]=\"field.bookingCheckType\"\n                          [delay]=\"300\"\n                          [disabled]=\"disabled\"\n                          [serviceIds]=\"serviceIds\"\n                          (locationInputChanged)=\"onInputChanged($event)\"\n                          (locationSelected)=\"onLocationSelected($event)\"\n                          (searchLocationChanged)=\"onSearchInputChanged()\"\n                          [locationType]=\"'case-management'\"></exui-search-location>\n    <a href=\"javascript:void(0)\" (click)=\"addLocation()\" class=\"govuk-button\" data-module=\"govuk-button\" *ngIf=\"enableAddLocationButton\">\n      Add location\n    </a>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\"  *ngFor=\"let selection of selectedLocations\">\n      <a class=\"hmcts-filter__tag\" (click)=\"removeLocation(selection)\" href=\"javascript:void(0)\">\n        {{ selection.site_name }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
                     styles: [".search-location__input-container{display:flex}.search-location .auto-complete-container{min-width:unset;width:calc(100% - 4px)}.search-location__input{flex:1 0 auto}.search-location .govuk-button--secondary{background-color:#ddd}"]
                 },] }
     ];
@@ -3226,6 +3288,7 @@
         fields: [{ type: i0.Input }],
         locationTitle: [{ type: i0.Input }],
         disableInputField: [{ type: i0.Input }],
+        searchTermLocationForm: [{ type: i0.Input }],
         searchLocationComponent: [{ type: i0.ViewChild, args: [SearchLocationComponent, { static: true },] }],
         disabled: [{ type: i0.Input }],
         services: [{ type: i0.Input }]
@@ -3876,6 +3939,53 @@
         xuilibLet: [{ type: i0.Input }]
     };
 
+    var SearchServiceComponent = /** @class */ (function () {
+        function SearchServiceComponent(fb) {
+            this.fb = fb;
+            this.showAutocomplete = false;
+            this.serviceChanged = new i0.EventEmitter();
+            this.minSearchCharacters = 3;
+            this.term = '';
+            this.form = this.fb.group({
+                searchTerm: ['']
+            });
+        }
+        SearchServiceComponent.prototype.onInput = function () {
+            // Todo
+        };
+        SearchServiceComponent.prototype.resetSearchTerm = function () {
+            this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
+        };
+        SearchServiceComponent.prototype.onSelectionChanged = function ($event) {
+            var _a;
+            var label = (_a = $event.source) === null || _a === void 0 ? void 0 : _a.value;
+            if (label && $event.source.selected) {
+                var selectedService = this.services.find(function (s) { return s.label === label; });
+                this.serviceChanged.emit(selectedService);
+            }
+        };
+        return SearchServiceComponent;
+    }());
+    SearchServiceComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'exui-search-service',
+                    template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChanged($event)\" [value]=\"service.label\">\n      {{ service.label }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
+                    styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:0 2px 6px rgba(0,0,0,.256863);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-left-width:0;border-bottom:1px solid #b1b4b6;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
+                },] }
+    ];
+    SearchServiceComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder }
+    ]; };
+    SearchServiceComponent.propDecorators = {
+        services: [{ type: i0.Input }],
+        selectedServices: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        delay: [{ type: i0.Input }],
+        form: [{ type: i0.Input }],
+        showAutocomplete: [{ type: i0.Input }],
+        serviceChanged: [{ type: i0.Output }]
+    };
+
     var FindServiceComponent = /** @class */ (function () {
         function FindServiceComponent() {
             this.services = [];
@@ -3926,6 +4036,7 @@
             }
             this.tempSelectedService = null;
             this.serviceFieldChanged.emit(this.tempSelectedService);
+            this.searchServiceComponent.resetSearchTerm();
         };
         FindServiceComponent.prototype.removeService = function (service) {
             if (service.key) {
@@ -3996,7 +4107,7 @@
     FindServiceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'xuilib-find-service',
-                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\"\n        [services]=\"services\"\n        [selectedServices]=\"selectedServices\"\n        [delay]=\"300\"\n        [disabled]=\"disabled\"\n        (serviceChanged)=\"onServiceSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a *ngIf=\"selection.key!=='All'\" class=\"hmcts-filter__tag\" (click)=\"removeService(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
+                    template: "<div class=\"service-picker-custom\">\n  <div class=\"search-service\">\n    <div class=\"govuk-body\">\n      <label id=\"selectServiceSearch-label\" for=\"serviceSearch__select\" *ngIf=\"serviceTitle\">\n        {{ serviceTitle}}\n      </label>\n    </div>\n    <div class=\"search-service__input-container\">\n      <exui-search-service class=\"search-service__input\"\n        [services]=\"services\"\n        [form]=\"searchTermServiceForm\"\n        [selectedServices]=\"selectedServices\"\n        [delay]=\"300\"\n        [disabled]=\"disabled\"\n        (serviceChanged)=\"onServiceSelected($event)\">\n      </exui-search-service>\n      <a href=\"javascript:void(0)\" (click)=\"addService()\"\n        class=\"govuk-button govuk-button--secondary govuk-!-margin-bottom-0\" data-module=\"govuk-button\"\n        *ngIf=\"enableAddServiceButton\" id=\"add-service\">\n        Add\n      </a>\n    </div>\n  </div>\n  <ul class=\"hmcts-filter-tags selection-container\" *ngIf=\"field.maxSelected != 1\">\n    <li class=\"location-selection\" *ngFor=\"let selection of selectedServices\">\n      <a *ngIf=\"selection.key!=='All'\" class=\"hmcts-filter__tag\" (click)=\"removeService(selection)\" href=\"javascript:void(0)\">\n        {{ selection.label }}\n      </a>\n    </li>\n  </ul>\n</div>\n",
                     styles: ["#add-service{background-color:#ddd}"]
                 },] }
     ];
@@ -4005,11 +4116,13 @@
         fields: [{ type: i0.Input }],
         serviceTitle: [{ type: i0.Input }],
         form: [{ type: i0.Input }],
+        searchTermServiceForm: [{ type: i0.Input }],
         services: [{ type: i0.Input }],
         selectedServices: [{ type: i0.Input }],
         enableAddServiceButton: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         disableInputField: [{ type: i0.Input }],
+        searchServiceComponent: [{ type: i0.ViewChild, args: [SearchServiceComponent, { static: true },] }],
         serviceFieldChanged: [{ type: i0.Output }]
     };
 
@@ -4140,46 +4253,6 @@
         disabled: [{ type: i0.Input }]
     };
 
-    var SearchServiceComponent = /** @class */ (function () {
-        function SearchServiceComponent(fb) {
-            this.fb = fb;
-            this.showAutocomplete = false;
-            this.serviceChanged = new i0.EventEmitter();
-            this.minSearchCharacters = 3;
-            this.term = '';
-            this.form = this.fb.group({
-                searchTerm: ['']
-            });
-        }
-        SearchServiceComponent.prototype.onInput = function () {
-            // Todo
-        };
-        SearchServiceComponent.prototype.onSelectionChanged = function (label) {
-            var selectedService = this.services.find(function (s) { return s.label === label; });
-            this.serviceChanged.emit(selectedService);
-        };
-        return SearchServiceComponent;
-    }());
-    SearchServiceComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'exui-search-service',
-                    template: "<div class=\"auto-complete-container\">\n  <input\n    id=\"inputServiceSearch\"\n    (input)=\"onInput()\"\n    [formControl]=\"form?.controls.searchTerm\"\n    [matAutocomplete]=\"autoSearchService\"\n    class=\"govuk-input\"\n    [attr.disabled]=\"disabled\">\n  <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchService=\"matAutocomplete\">\n    <mat-option *ngFor=\"let service of services\" (onSelectionChange)=\"onSelectionChanged($event.source.value)\" [value]=\"service.label\">\n      {{ service.label }}\n    </mat-option>\n    <mat-option *ngIf=\"!services?.length && showAutocomplete && term && term.length >= this.minSearchCharacters\">No results found</mat-option>\n  </mat-autocomplete>\n</div>\n",
-                    styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:0 2px 6px rgba(0,0,0,.256863);left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-left-width:0;border-bottom:1px solid #b1b4b6;border-right-width:0;border-top-width:1px;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:250px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}"]
-                },] }
-    ];
-    SearchServiceComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder }
-    ]; };
-    SearchServiceComponent.propDecorators = {
-        services: [{ type: i0.Input }],
-        selectedServices: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        delay: [{ type: i0.Input }],
-        form: [{ type: i0.Input }],
-        showAutocomplete: [{ type: i0.Input }],
-        serviceChanged: [{ type: i0.Output }]
-    };
-
     /*
     * Gov Uk Checkbox Dumb Component responsible for
     * displaying checkbox input and hint