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

package/esm2015/lib/models/filter.model.js

@@ -1,3 +1,3 @@
 export class RadioFilterFieldConfig {
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh1aS1jb21tb24tbGliL3NyYy9saWIvbW9kZWxzL2ZpbHRlci5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRkEsTUFBTSxPQUFPLHNCQUFzQjtDQU1sQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEJvb2tpbmdDaGVja1R5cGUgfSBmcm9tICcuL2xvY2F0aW9uLm1vZGVsJztcbmltcG9ydCB7IFBlcnNvblJvbGUgfSBmcm9tICcuL3BlcnNvbi5tb2RlbCc7XG5cbmV4cG9ydCB0eXBlIEZpbHRlckZpZWxkVHlwZSA9ICdncm91cC10aXRsZScgfCAnY2hlY2tib3gnIHwgJ3JhZGlvJyB8ICdzZWxlY3QnIHwgJ2ZpbmQtcGVyc29uJyB8ICdmaW5kLWxvY2F0aW9uJyB8ICdjaGVja2JveC1sYXJnZScgfCAnZmluZC1zZXJ2aWNlJyB8ICd0ZXh0LWlucHV0JyB8ICdlbWFpbC1pbnB1dCcgfCAnZ3JvdXAtc2VsZWN0JyB8ICduZXN0ZWQtY2hlY2tib3gnIHwgJ2ZpbmQtdGFzay1uYW1lJztcblxuZXhwb3J0IHR5cGUgRmlsdGVyUGVyc2lzdGVuY2UgPSAnbG9jYWwnIHwgJ3Nlc3Npb24nIHwgJ21lbW9yeSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyQ29uZmlnT3B0aW9uIHtcbiAga2V5OiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHNlbGVjdEFsbD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyQ29uZmlnIHtcbiAgaWQ6IHN0cmluZztcbiAgZmllbGRzOiBGaWx0ZXJGaWVsZENvbmZpZ1tdO1xuICBwZXJzaXN0ZW5jZTogRmlsdGVyUGVyc2lzdGVuY2U7XG4gIGFwcGx5QnV0dG9uVGV4dDogc3RyaW5nO1xuICBlbmFibGVEaXNhYmxlZEJ1dHRvbj86IGJvb2xlYW47XG4gIGNhbmNlbEJ1dHRvblRleHQ6IHN0cmluZztcbiAgY2FuY2VsU2V0dGluZz86IEZpbHRlclNldHRpbmc7XG4gIHNob3dDYW5jZWxGaWx0ZXJCdXR0b24/OiBib29sZWFuO1xuICBjYW5jZWxCdXR0b25DYWxsYmFjaz8oKTogdm9pZDtcbiAgYXBwbHlCdXR0b25DYWxsYmFjaz8oKTogdm9pZDtcbiAgY29weUZpZWxkcz8oZm9ybTogRm9ybUdyb3VwKTogRm9ybUdyb3VwO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZpbHRlckZpZWxkT3B0aW9uIHtcbiAga2V5OiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHNlbGVjdEFsbD86IHRydWU7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyRmllbGRDb25maWcge1xuICBuYW1lOiBzdHJpbmc7XG4gIG9wdGlvbnM6IEZpbHRlckNvbmZpZ09wdGlvbltdO1xuICBtaW5TZWxlY3RlZDogbnVtYmVyO1xuICBtYXhTZWxlY3RlZDogbnVtYmVyO1xuICBtaW5TZWxlY3RlZEVycm9yPzogc3RyaW5nO1xuICBtYXhTZWxlY3RlZEVycm9yPzogc3RyaW5nO1xuICBkaXNwbGF5TWF4U2VsZWN0ZWRFcnJvcj86IGJvb2xlYW47XG4gIGRpc3BsYXlNaW5TZWxlY3RlZEVycm9yPzogYm9vbGVhbjtcbiAgZW1haWxFcnJvcj86IHN0cmluZztcbiAgbGluZUJyZWFrQmVmb3JlPzogYm9vbGVhbjtcbiAgc2hvd0NvbmRpdGlvbj86IHN0cmluZztcbiAgZW5hYmxlQ29uZGl0aW9uPzogc3RyaW5nO1xuICBlbmFibGVBZGRCdXR0b24/OiBib29sZWFuO1xuICBlbmFibGVBZGRMb2NhdGlvbkJ1dHRvbj86IGJvb2xlYW47XG4gIGVuYWJsZUFkZFRhc2tOYW1lQnV0dG9uPzogYm9vbGVhbjtcbiAgY2hhbmdlUmVzZXRGaWVsZHM/OiBzdHJpbmdbXTtcbiAgZmluZFBlcnNvbkZpZWxkPzogc3RyaW5nO1xuICBmaW5kTG9jYXRpb25GaWVsZD86IHN0cmluZztcbiAgZmluZFRhc2tOYW1lRmllbGQ/OiBzdHJpbmc7XG4gIGRvbWFpbkZpZWxkPzogc3RyaW5nO1xuICBkaXNhYmxlPzogYm9vbGVhbjtcbiAgZGlzYWJsZWRUZXh0Pzogc3RyaW5nO1xuICB0eXBlOiBGaWx0ZXJGaWVsZFR5cGU7XG4gIGRvbWFpbj86IFBlcnNvblJvbGU7XG4gIHRpdGxlPzogc3RyaW5nO1xuICB0aXRsZUNsYXNzZXM/OiBzdHJpbmc7XG4gIHRpdGxlSGludD86IHN0cmluZztcbiAgc3ViVGl0bGU/OiBzdHJpbmc7XG4gIGxvY2F0aW9uVGl0bGU/OiBzdHJpbmc7XG4gIHJhZGlvU2VsZWN0aW9uQ2hhbmdlPzogc3RyaW5nO1xuICBib29raW5nQ2hlY2tUeXBlPzogQm9va2luZ0NoZWNrVHlwZTtcbiAgcGxhY2Vob2xkZXJDb250ZW50Pzogc3RyaW5nO1xuICBtYXhXaWR0aDQ4MHB4PzogYm9vbGVhbjtcbiAgbWF4Um93cz86IG51bWJlcjtcbiAgZ3JvdXBPcHRpb25zPzogR3JvdXBPcHRpb25zW107XG4gIG1heGxlbmd0aD86IG51bWJlcjtcbiAgZGVmYXVsdE9wdGlvbj86IEZpbHRlckNvbmZpZ09wdGlvbjtcbiAgcmVhZG9ubHk/OiBib29sZWFuO1xuICBzZXJ2aWNlc0ZpZWxkPzogc3RyaW5nO1xuICBzZXJ2aWNlcz86IHN0cmluZ1tdO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEdyb3VwT3B0aW9ucyB7XG4gIGdyb3VwOiBzdHJpbmc7XG4gIG9wdGlvbnM6IEZpbHRlckZpZWxkT3B0aW9uW107XG4gIHBsYWNlaG9sZGVyQ29udGVudD86IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBGaWx0ZXJTZXR0aW5nIHtcbiAgaWQ6IHN0cmluZztcbiAgaWRhbUlkPzogc3RyaW5nO1xuICByZXNldD86IGJvb2xlYW47XG4gIGZpZWxkczogeyBuYW1lOiBzdHJpbmcsIHZhbHVlOiBhbnlbXSB9W107XG59XG5cbmV4cG9ydCBjbGFzcyBSYWRpb0ZpbHRlckZpZWxkQ29uZmlnIGltcGxlbWVudHMgRmlsdGVyRmllbGRDb25maWcge1xuICBwdWJsaWMgbmFtZTogc3RyaW5nO1xuICBwdWJsaWMgb3B0aW9uczogeyBrZXk6IHN0cmluZywgbGFiZWw6IHN0cmluZ31bXTtcbiAgcHVibGljIG1pblNlbGVjdGVkOiAxO1xuICBwdWJsaWMgbWF4U2VsZWN0ZWQ6IDE7XG4gIHB1YmxpYyB0eXBlOiAncmFkaW8nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZpbHRlckVycm9yIHtcbiAgbmFtZTogc3RyaW5nO1xuICBlcnJvcjogc3RyaW5nO1xufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh1aS1jb21tb24tbGliL3NyYy9saWIvbW9kZWxzL2ZpbHRlci5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRkEsTUFBTSxPQUFPLHNCQUFzQjtDQU1sQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEZvcm1Hcm91cCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IEJvb2tpbmdDaGVja1R5cGUgfSBmcm9tICcuL2xvY2F0aW9uLm1vZGVsJztcbmltcG9ydCB7IFBlcnNvblJvbGUgfSBmcm9tICcuL3BlcnNvbi5tb2RlbCc7XG5cbmV4cG9ydCB0eXBlIEZpbHRlckZpZWxkVHlwZSA9ICdncm91cC10aXRsZScgfCAnY2hlY2tib3gnIHwgJ3JhZGlvJyB8ICdzZWxlY3QnIHwgJ2ZpbmQtcGVyc29uJyB8ICdmaW5kLWxvY2F0aW9uJyB8ICdjaGVja2JveC1sYXJnZScgfCAnZmluZC1zZXJ2aWNlJyB8ICd0ZXh0LWlucHV0JyB8ICdlbWFpbC1pbnB1dCcgfCAnZ3JvdXAtc2VsZWN0JyB8ICduZXN0ZWQtY2hlY2tib3gnIHwgJ2ZpbmQtdGFzay1uYW1lJztcblxuZXhwb3J0IHR5cGUgRmlsdGVyUGVyc2lzdGVuY2UgPSAnbG9jYWwnIHwgJ3Nlc3Npb24nIHwgJ21lbW9yeSc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyQ29uZmlnT3B0aW9uIHtcbiAga2V5OiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHNlbGVjdEFsbD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyQ29uZmlnIHtcbiAgaWQ6IHN0cmluZztcbiAgZmllbGRzOiBGaWx0ZXJGaWVsZENvbmZpZ1tdO1xuICBwZXJzaXN0ZW5jZTogRmlsdGVyUGVyc2lzdGVuY2U7XG4gIGFwcGx5QnV0dG9uVGV4dDogc3RyaW5nO1xuICBlbmFibGVEaXNhYmxlZEJ1dHRvbj86IGJvb2xlYW47XG4gIGNhbmNlbEJ1dHRvblRleHQ6IHN0cmluZztcbiAgY2FuY2VsU2V0dGluZz86IEZpbHRlclNldHRpbmc7XG4gIHNob3dDYW5jZWxGaWx0ZXJCdXR0b24/OiBib29sZWFuO1xuICBwcmVTZWxlY3RlZE5lc3RlZENoZWNrYm94PzogbnVtYmVyW107XG4gIGNhbmNlbEJ1dHRvbkNhbGxiYWNrPygpOiB2b2lkO1xuICBhcHBseUJ1dHRvbkNhbGxiYWNrPygpOiB2b2lkO1xuICBjb3B5RmllbGRzPyhmb3JtOiBGb3JtR3JvdXApOiBGb3JtR3JvdXA7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyRmllbGRPcHRpb24ge1xuICBrZXk6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgc2VsZWN0QWxsPzogdHJ1ZTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBGaWx0ZXJGaWVsZENvbmZpZyB7XG4gIG5hbWU6IHN0cmluZztcbiAgb3B0aW9uczogRmlsdGVyQ29uZmlnT3B0aW9uW107XG4gIG1pblNlbGVjdGVkOiBudW1iZXI7XG4gIG1heFNlbGVjdGVkOiBudW1iZXI7XG4gIG1pblNlbGVjdGVkRXJyb3I/OiBzdHJpbmc7XG4gIG1heFNlbGVjdGVkRXJyb3I/OiBzdHJpbmc7XG4gIGRpc3BsYXlNYXhTZWxlY3RlZEVycm9yPzogYm9vbGVhbjtcbiAgZGlzcGxheU1pblNlbGVjdGVkRXJyb3I/OiBib29sZWFuO1xuICBlbWFpbEVycm9yPzogc3RyaW5nO1xuICBsaW5lQnJlYWtCZWZvcmU/OiBib29sZWFuO1xuICBzaG93Q29uZGl0aW9uPzogc3RyaW5nO1xuICBlbmFibGVDb25kaXRpb24/OiBzdHJpbmc7XG4gIGVuYWJsZUFkZEJ1dHRvbj86IGJvb2xlYW47XG4gIGVuYWJsZUFkZExvY2F0aW9uQnV0dG9uPzogYm9vbGVhbjtcbiAgZW5hYmxlQWRkVGFza05hbWVCdXR0b24/OiBib29sZWFuO1xuICBjaGFuZ2VSZXNldEZpZWxkcz86IHN0cmluZ1tdO1xuICBmaW5kUGVyc29uRmllbGQ/OiBzdHJpbmc7XG4gIGZpbmRMb2NhdGlvbkZpZWxkPzogc3RyaW5nO1xuICBmaW5kVGFza05hbWVGaWVsZD86IHN0cmluZztcbiAgZG9tYWluRmllbGQ/OiBzdHJpbmc7XG4gIGRpc2FibGU/OiBib29sZWFuO1xuICBkaXNhYmxlZFRleHQ/OiBzdHJpbmc7XG4gIHR5cGU6IEZpbHRlckZpZWxkVHlwZTtcbiAgZG9tYWluPzogUGVyc29uUm9sZTtcbiAgdGl0bGU/OiBzdHJpbmc7XG4gIHRpdGxlQ2xhc3Nlcz86IHN0cmluZztcbiAgdGl0bGVIaW50Pzogc3RyaW5nO1xuICBzdWJUaXRsZT86IHN0cmluZztcbiAgbG9jYXRpb25UaXRsZT86IHN0cmluZztcbiAgcmFkaW9TZWxlY3Rpb25DaGFuZ2U/OiBzdHJpbmc7XG4gIGJvb2tpbmdDaGVja1R5cGU/OiBCb29raW5nQ2hlY2tUeXBlO1xuICBwbGFjZWhvbGRlckNvbnRlbnQ/OiBzdHJpbmc7XG4gIG1heFdpZHRoNDgwcHg/OiBib29sZWFuO1xuICBtYXhSb3dzPzogbnVtYmVyO1xuICBncm91cE9wdGlvbnM/OiBHcm91cE9wdGlvbnNbXTtcbiAgbWF4bGVuZ3RoPzogbnVtYmVyO1xuICBkZWZhdWx0T3B0aW9uPzogRmlsdGVyQ29uZmlnT3B0aW9uO1xuICByZWFkb25seT86IGJvb2xlYW47XG4gIHNlcnZpY2VzRmllbGQ/OiBzdHJpbmc7XG4gIHNlcnZpY2VzPzogc3RyaW5nW107XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgR3JvdXBPcHRpb25zIHtcbiAgZ3JvdXA6IHN0cmluZztcbiAgb3B0aW9uczogRmlsdGVyRmllbGRPcHRpb25bXTtcbiAgcGxhY2Vob2xkZXJDb250ZW50Pzogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIEZpbHRlclNldHRpbmcge1xuICBpZDogc3RyaW5nO1xuICBpZGFtSWQ/OiBzdHJpbmc7XG4gIHJlc2V0PzogYm9vbGVhbjtcbiAgZmllbGRzOiB7IG5hbWU6IHN0cmluZywgdmFsdWU6IGFueVtdIH1bXTtcbn1cblxuZXhwb3J0IGNsYXNzIFJhZGlvRmlsdGVyRmllbGRDb25maWcgaW1wbGVtZW50cyBGaWx0ZXJGaWVsZENvbmZpZyB7XG4gIHB1YmxpYyBuYW1lOiBzdHJpbmc7XG4gIHB1YmxpYyBvcHRpb25zOiB7IGtleTogc3RyaW5nLCBsYWJlbDogc3RyaW5nfVtdO1xuICBwdWJsaWMgbWluU2VsZWN0ZWQ6IDE7XG4gIHB1YmxpYyBtYXhTZWxlY3RlZDogMTtcbiAgcHVibGljIHR5cGU6ICdyYWRpbyc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRmlsdGVyRXJyb3Ige1xuICBuYW1lOiBzdHJpbmc7XG4gIGVycm9yOiBzdHJpbmc7XG59XG4iXX0=

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

@@ -476,6 +476,9 @@ class GenericFilterComponent {
                 this.form.get('user-services').push(new FormControl({ key: 'All', label: 'All' }));
             }
         };
+        this.searchTermServiceForm = this.fb.group({
+            searchTerm: ['']
+        });
     }
     get config() {
         return this._config;
@@ -520,7 +523,9 @@ class GenericFilterComponent {
         const services = this.config.fields.find(field => field.name === 'user-services');
         if (services) {
             this.startFilterSkillsByServices(this.form, services);
-            this.initValuesFromCacheForSkillsByServices();
+            if (!this._config.copyFields) {
+                this.initValuesFromCacheForSkillsByServices();
+            }
         }
     }
     ngOnDestroy() {
@@ -612,6 +617,12 @@ class GenericFilterComponent {
         else {
             this.emitFormErrors(form);
         }
+        for (const field of this.config.fields) {
+            const fieldName = field.name;
+            if (fieldName === 'user-services') {
+                this.searchTermServiceForm.reset();
+            }
+        }
         if (this._config.applyButtonCallback) {
             this._config.applyButtonCallback();
         }
@@ -632,8 +643,8 @@ class GenericFilterComponent {
             this.form.get(name).patchValue(value);
         }
     }
-    inputServiceChanged(e, field) {
-        if (e === undefined) {
+    inputServiceChanged(selectedNotAddedService, field) {
+        if (selectedNotAddedService === undefined) {
             this.addAllOption(field);
         }
         else {
@@ -891,12 +902,16 @@ class GenericFilterComponent {
     emitFormErrors(form) {
         let errors = [];
         for (const field of this.config.fields) {
-            const formGroup = form.get(field.name);
+            const fieldName = field.name;
+            const 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();
+                }
             }
             if (formGroup && formGroup.errors && formGroup.errors.maxlength) {
-                errors.push({ name: field.name, error: field.maxSelectedError });
+                errors.push({ name: fieldName, error: field.maxSelectedError });
             }
         }
         // remove duplicates
@@ -965,29 +980,56 @@ class GenericFilterComponent {
                 userSkillsCheckboxField.options = [];
                 userSkillsCheckboxField.options = this.filteredSkillsByServicesCheckbox;
                 this.form.setControl('user-skills', new FormArray([]));
-                this.filteredSkillsByServicesCheckbox.forEach(() => {
-                    this.form.get('user-skills').push(new FormControl(false));
-                });
-                const prevValues = this.filteredSkillsByServicesCheckbox.map(skill => {
-                    let selected = false;
-                    if (this.settings && this.settings.fields) {
-                        if (this.previousSelectedNestedCheckbox.length > 0) {
-                            selected = this.previousSelectedNestedCheckbox.includes(skill.key);
-                        }
-                        let isSelectedUserSkill;
-                        const selectedUserSkills = this.settings.fields.find(setting => setting.name === 'user-skills');
-                        if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
-                            isSelectedUserSkill = selectedUserSkills.value.findIndex(val => Number(val) === Number(skill.key));
-                            selected = isSelectedUserSkill !== -1;
+                if (!this._config.copyFields) {
+                    this.filteredSkillsByServicesCheckbox.forEach(() => {
+                        this.form.get('user-skills').push(new FormControl(false));
+                    });
+                    const prevValues = this.filteredSkillsByServicesCheckbox.map(skill => {
+                        let selected = false;
+                        if (this.settings && this.settings.fields) {
+                            if (this.previousSelectedNestedCheckbox.length > 0) {
+                                selected = this.previousSelectedNestedCheckbox.includes(skill.key);
+                            }
+                            let isSelectedUserSkill;
+                            const selectedUserSkills = this.settings.fields.find(setting => setting.name === 'user-skills');
+                            if (selectedUserSkills && selectedUserSkills.value && selectedUserSkills.value.length > 0) {
+                                isSelectedUserSkill = selectedUserSkills.value.findIndex(val => 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 {
+                    const preSelectedSkills = [];
+                    this.filteredSkillsByServicesCheckbox.map((skillsByServices, index) => {
+                        for (let i = 0; i < this._config.preSelectedNestedCheckbox.length; i++) {
+                            const skillCopyValue = this._config.preSelectedNestedCheckbox[i];
+                            if (skillCopyValue.toString() === skillsByServices.key.toString()) {
+                                preSelectedSkills[index] = true;
+                                break;
+                            }
+                            else {
+                                preSelectedSkills[index] = false;
+                            }
                         }
+                    });
+                    if (preSelectedSkills.length > 0) {
+                        preSelectedSkills.forEach((h) => {
+                            this.form.get('user-skills').push(new FormControl(h));
+                        });
                     }
-                    return selected;
-                });
-                this.form.get('user-skills').setValue(prevValues);
+                    else {
+                        this.filteredSkillsByServicesCheckbox.map(() => {
+                            this.form.get('user-skills').push(new FormControl(false));
+                        });
+                    }
+                }
                 return this.filteredSkillsByServicesCheckbox;
             }
         }
@@ -1026,7 +1068,7 @@ class GenericFilterComponent {
 GenericFilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'xuilib-generic-filter',
-                template: "<form [formGroup]=\"form\" (ngSubmit)=\"applyFilter(form)\">\n  <div class=\"contain-classes\" *ngFor=\"let field of config.fields\">\n    <hr *ngIf=\"field.lineBreakBefore\" class=\"govuk-section-break govuk-section-break--visible elevated-break\">\n    <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                                [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: ChangeDetectionStrategy.OnPush,
                 encapsulation: 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%}"]
@@ -3153,6 +3195,52 @@ LetDirective.propDecorators = {
     xuilibLet: [{ type: Input }]
 };
 
+class SearchServiceComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.showAutocomplete = false;
+        this.serviceChanged = new EventEmitter();
+        this.minSearchCharacters = 3;
+        this.term = '';
+        this.form = this.fb.group({
+            searchTerm: ['']
+        });
+    }
+    onInput() {
+        // Todo
+    }
+    resetSearchTerm() {
+        this.form.controls.searchTerm.patchValue('', { emitEvent: false, onlySelf: true });
+    }
+    onSelectionChanged($event) {
+        var _a;
+        const label = (_a = $event.source) === null || _a === void 0 ? void 0 : _a.value;
+        if (label && $event.source.selected) {
+            const selectedService = this.services.find(s => s.label === label);
+            this.serviceChanged.emit(selectedService);
+        }
+    }
+}
+SearchServiceComponent.decorators = [
+    { type: 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 = () => [
+    { type: FormBuilder }
+];
+SearchServiceComponent.propDecorators = {
+    services: [{ type: Input }],
+    selectedServices: [{ type: Input }],
+    disabled: [{ type: Input }],
+    delay: [{ type: Input }],
+    form: [{ type: Input }],
+    showAutocomplete: [{ type: Input }],
+    serviceChanged: [{ type: Output }]
+};
+
 class FindServiceComponent {
     constructor() {
         this.services = [];
@@ -3202,6 +3290,7 @@ class FindServiceComponent {
         }
         this.tempSelectedService = null;
         this.serviceFieldChanged.emit(this.tempSelectedService);
+        this.searchServiceComponent.resetSearchTerm();
     }
     removeService(service) {
         if (service.key) {
@@ -3260,7 +3349,7 @@ class FindServiceComponent {
 FindServiceComponent.decorators = [
     { type: 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}"]
             },] }
 ];
@@ -3269,11 +3358,13 @@ FindServiceComponent.propDecorators = {
     fields: [{ type: Input }],
     serviceTitle: [{ type: Input }],
     form: [{ type: Input }],
+    searchTermServiceForm: [{ type: Input }],
     services: [{ type: Input }],
     selectedServices: [{ type: Input }],
     enableAddServiceButton: [{ type: Input }],
     disabled: [{ type: Input }],
     disableInputField: [{ type: Input }],
+    searchServiceComponent: [{ type: ViewChild, args: [SearchServiceComponent, { static: true },] }],
     serviceFieldChanged: [{ type: Output }]
 };
 
@@ -3400,45 +3491,6 @@ FindTaskNameComponent.propDecorators = {
     disabled: [{ type: Input }]
 };
 
-class SearchServiceComponent {
-    constructor(fb) {
-        this.fb = fb;
-        this.showAutocomplete = false;
-        this.serviceChanged = new EventEmitter();
-        this.minSearchCharacters = 3;
-        this.term = '';
-        this.form = this.fb.group({
-            searchTerm: ['']
-        });
-    }
-    onInput() {
-        // Todo
-    }
-    onSelectionChanged(label) {
-        const selectedService = this.services.find(s => s.label === label);
-        this.serviceChanged.emit(selectedService);
-    }
-}
-SearchServiceComponent.decorators = [
-    { type: 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 = () => [
-    { type: FormBuilder }
-];
-SearchServiceComponent.propDecorators = {
-    services: [{ type: Input }],
-    selectedServices: [{ type: Input }],
-    disabled: [{ type: Input }],
-    delay: [{ type: Input }],
-    form: [{ type: Input }],
-    showAutocomplete: [{ type: Input }],
-    serviceChanged: [{ type: Output }]
-};
-
 /*
 * Gov Uk Checkbox Dumb Component responsible for
 * displaying checkbox input and hint